bb4233a9f2
Add complete multi-theme dashboard system including: - 8 selectable themes with persistent per-browser preferences - Theme bootstrap script to prevent FOUC on page load - 12+ reusable chart components (area, bar, donut, radial gauge, etc) - Custom checkbox UI component - New settings page for appearance customization Other changes: - Optimize supplier map API payload with getMappableSuppliers helper - Add aria-label attributes to back buttons on detail pages for better accessibility - Update next.config.ts to include new local development IP 192.168.1.128 - Update site manifest with all new favicon and PWA assets - Fix styling and layout spacing in rewrite quote modal
47 lines
1.2 KiB
TypeScript
47 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { withAlpha } from "./palette";
|
|
|
|
/**
|
|
* ProgressBar — vertical or horizontal bar showing a percentage fill.
|
|
* Used for compact status widgets, e.g. "Approval Pending: 62%".
|
|
*/
|
|
export function ProgressBar({
|
|
label,
|
|
value,
|
|
total,
|
|
color,
|
|
unit = "",
|
|
}: {
|
|
label: string;
|
|
value: number;
|
|
total: number;
|
|
color: string;
|
|
unit?: string;
|
|
}) {
|
|
const pct = total === 0 ? 0 : Math.round((value / total) * 100);
|
|
return (
|
|
<div>
|
|
<div className="flex items-center justify-between text-xs mb-1.5">
|
|
<span className="font-medium truncate">{label}</span>
|
|
<span className="text-muted-foreground tabular-nums shrink-0">
|
|
<span className="font-semibold text-foreground">{value}</span>
|
|
{unit ? ` ${unit}` : ""} · {pct}%
|
|
</span>
|
|
</div>
|
|
<div
|
|
className="h-2 w-full rounded-full overflow-hidden"
|
|
style={{ background: withAlpha(color, 12) }}
|
|
>
|
|
<div
|
|
className="h-full rounded-full"
|
|
style={{
|
|
width: `${pct}%`,
|
|
background: `linear-gradient(90deg, ${color}, ${withAlpha(color, 60)})`,
|
|
boxShadow: `0 0 8px ${withAlpha(color, 50)}`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|