feat: add administration page and account role management

- Implemented `AdministrationContent` component for managing account roles.
- Created `AdministrationPage` to serve as the main entry point for administration tasks.
- Added PDF preview functionality with `PdfPreviewFrame` component for invoice generation.
- Introduced `InputColor` component for advanced color selection with various formats.
- Established color conversion utilities in `color-converter.ts` for handling color formats.
- Defined appearance-related schemas and types in `appearance.ts` for consistent theme management.

src/app/dashboard/_components/invoice-status-chart.tsx

@@ -16,6 +16,47 @@ interface InvoiceStatusChartProps {
   invoices: Invoice[];
 }
 
+const STATUS_COLORS = {
+  draft: "hsl(0, 0%, 60%)",
+  sent: "hsl(217, 91%, 60%)",
+  pending: "hsl(217, 91%, 60%)",
+  paid: "hsl(142, 71%, 45%)",
+  overdue: "hsl(var(--destructive))",
+} as const;
+
+const formatChartCurrency = (value: number) => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0,
+  }).format(value);
+};
+
+function StatusTooltip({
+  active,
+  payload,
+}: {
+  active?: boolean;
+  payload?: Array<{
+    payload: { name: string; count: number; value: number };
+  }>;
+}) {
+  if (active && payload?.length) {
+    const data = payload[0]!.payload;
+    return (
+      <div className="bg-card border-border rounded-lg border p-3 shadow-lg">
+        <p className="font-medium">{data.name}</p>
+        <p className="text-sm">
+          {data.count} invoice{data.count !== 1 ? "s" : ""}
+        </p>
+        <p className="text-sm">{formatChartCurrency(data.value)}</p>
+      </div>
+    );
+  }
+  return null;
+}
+
 export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
   // Process invoice data to create status breakdown
   const statusData = invoices.reduce(
@@ -44,14 +85,6 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
     name: item.status.charAt(0).toUpperCase() + item.status.slice(1),
   }));
 
-  // Use theme-aware colors
-  const COLORS = {
-    draft: "hsl(0, 0%, 60%)", // neutral grey - matches monthly metrics chart
-    sent: "hsl(217, 91%, 60%)", // vibrant blue
-    pending: "hsl(217, 91%, 60%)", // blue
-    paid: "hsl(142, 71%, 45%)", // vibrant green
-    overdue: "hsl(var(--destructive))", // red
-  };
   // Animation / motion preferences
   const { prefersReducedMotion, animationSpeedMultiplier } =
     useAnimationPreferences();
@@ -59,39 +92,6 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
     600 / (animationSpeedMultiplier || 1),
   );
 
-  const formatCurrency = (value: number) => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: "USD",
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 0,
-    }).format(value);
-  };
-
-  const CustomTooltip = ({
-    active,
-    payload,
-  }: {
-    active?: boolean;
-    payload?: Array<{
-      payload: { name: string; count: number; value: number };
-    }>;
-  }) => {
-    if (active && payload?.length) {
-      const data = payload[0]!.payload;
-      return (
-        <div className="bg-card border-border rounded-lg border p-3 shadow-lg">
-          <p className="font-medium">{data.name}</p>
-          <p className="text-sm">
-            {data.count} invoice{data.count !== 1 ? "s" : ""}
-          </p>
-          <p className="text-sm">{formatCurrency(data.value)}</p>
-        </div>
-      );
-    }
-    return null;
-  };
-
   if (chartData.length === 0) {
     return (
       <div className="flex h-64 items-center justify-center">
@@ -127,11 +127,13 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
               {chartData.map((entry, index) => (
                 <Cell
                   key={`cell-${index}`}
-                  fill={COLORS[entry.status as keyof typeof COLORS]}
+                  fill={
+                    STATUS_COLORS[entry.status as keyof typeof STATUS_COLORS]
+                  }
                 />
               ))}
             </Pie>
-            <Tooltip content={<CustomTooltip />} />
+            <Tooltip content={<StatusTooltip />} />
           </PieChart>
         </ResponsiveContainer>
       </div>
@@ -144,7 +146,8 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
               <div
                 className="h-3 w-3 rounded-full"
                 style={{
-                  backgroundColor: COLORS[item.status as keyof typeof COLORS],
+                  backgroundColor:
+                    STATUS_COLORS[item.status as keyof typeof STATUS_COLORS],
                 }}
               />
               <span className="text-sm font-medium">{item.name}</span>
@@ -152,7 +155,7 @@ export function InvoiceStatusChart({ invoices }: InvoiceStatusChartProps) {
             <div className="text-right">
               <p className="text-sm font-medium">{item.count}</p>
               <p className="text-muted-foreground text-xs">
-                {formatCurrency(item.value)}
+                {formatChartCurrency(item.value)}
               </p>
             </div>
           </div>