Add year selection to admin analytics and split product table

AdminAnalytics now supports selecting historical years and updates available years dynamically from the API. The product table is refactored to display enabled and disabled products in separate tables, improving clarity. Minor formatting and code style improvements are also included.

components/layout/NotificationProviderWrapper.tsx

@@ -32,3 +32,4 @@ export function NotificationProviderWrapper({ children }: NotificationProviderWr
   return <>{children}</>;
 }
 
+

components/tables/product-table.tsx

@@ -1,5 +1,20 @@
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { Edit, Trash, AlertTriangle, CheckCircle, AlertCircle, Calculator, Copy } from "lucide-react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import {
+  Edit,
+  Trash,
+  AlertTriangle,
+  CheckCircle,
+  AlertCircle,
+  Calculator,
+  Copy,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Product } from "@/models/products";
 import { Badge } from "@/components/ui/badge";
@@ -24,128 +39,182 @@ const ProductTable = ({
   onDelete,
   onToggleEnabled,
   onProfitAnalysis,
-  getCategoryNameById
+  getCategoryNameById,
 }: ProductTableProps) => {
+  // Separate enabled and disabled products
+  const enabledProducts = products.filter((p) => p.enabled !== false);
+  const disabledProducts = products.filter((p) => p.enabled === false);
 
-  const sortedProducts = [...products].sort((a, b) => {
-    const categoryNameA = getCategoryNameById(a.category);
-    const categoryNameB = getCategoryNameById(b.category);
-    return categoryNameA.localeCompare(categoryNameB);
-  });
+  const sortByCategory = (productList: Product[]) => {
+    return [...productList].sort((a, b) => {
+      const categoryNameA = getCategoryNameById(a.category);
+      const categoryNameB = getCategoryNameById(b.category);
+      return categoryNameA.localeCompare(categoryNameB);
+    });
+  };
+
+  const sortedEnabledProducts = sortByCategory(enabledProducts);
+  const sortedDisabledProducts = sortByCategory(disabledProducts);
 
   const getStockIcon = (product: Product) => {
     if (!product.stockTracking) return null;
-    
-    if (product.stockStatus === 'out_of_stock') {
+
+    if (product.stockStatus === "out_of_stock") {
       return <AlertTriangle className="h-4 w-4 text-red-500" />;
-    } else if (product.stockStatus === 'low_stock') {
+    } else if (product.stockStatus === "low_stock") {
       return <AlertCircle className="h-4 w-4 text-amber-500" />;
     } else {
       return <CheckCircle className="h-4 w-4 text-green-500" />;
     }
   };
 
+  const renderProductRow = (product: Product, isDisabled: boolean = false) => (
+    <TableRow
+      key={product._id}
+      className={`transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800/70 ${isDisabled ? "opacity-60" : ""}`}
+    >
+      <TableCell>
+        <div className="font-medium truncate max-w-[180px]">{product.name}</div>
+        <div className="hidden sm:block text-sm text-muted-foreground mt-1">
+          {getCategoryNameById(product.category)}
+        </div>
+      </TableCell>
+      <TableCell className="hidden sm:table-cell text-center">
+        {getCategoryNameById(product.category)}
+      </TableCell>
+      <TableCell className="hidden md:table-cell text-center">
+        {product.unitType}
+      </TableCell>
+      <TableCell className="text-center">
+        {product.stockTracking ? (
+          <div className="flex items-center justify-center gap-1">
+            {getStockIcon(product)}
+            <span className="text-sm">
+              {product.currentStock !== undefined ? product.currentStock : 0}{" "}
+              {product.unitType}
+            </span>
+          </div>
+        ) : (
+          <Badge variant="outline" className="text-xs">
+            Not Tracked
+          </Badge>
+        )}
+      </TableCell>
+      <TableCell className="hidden lg:table-cell text-center">
+        <Switch
+          checked={product.enabled !== false}
+          onCheckedChange={(checked) =>
+            onToggleEnabled(product._id as string, checked)
+          }
+        />
+      </TableCell>
+      <TableCell className="text-right flex justify-end space-x-1">
+        {onProfitAnalysis && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() =>
+              onProfitAnalysis(product._id as string, product.name)
+            }
+            className="text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-950/20"
+            title="Profit Analysis"
+          >
+            <Calculator className="h-4 w-4" />
+          </Button>
+        )}
+        {onClone && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => onClone(product)}
+            className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:hover:bg-blue-950/20"
+            title="Clone Listing"
+          >
+            <Copy className="h-4 w-4" />
+          </Button>
+        )}
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => onEdit(product)}
+          title="Edit Product"
+        >
+          <Edit className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => onDelete(product._id as string)}
+          className="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/20"
+          title="Delete Product"
+        >
+          <Trash className="h-4 w-4" />
+        </Button>
+      </TableCell>
+    </TableRow>
+  );
+
+  const renderTableHeader = () => (
+    <TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
+      <TableRow className="hover:bg-transparent">
+        <TableHead className="w-[200px]">Product</TableHead>
+        <TableHead className="hidden sm:table-cell text-center">
+          Category
+        </TableHead>
+        <TableHead className="hidden md:table-cell text-center">Unit</TableHead>
+        <TableHead className="text-center">Stock</TableHead>
+        <TableHead className="hidden lg:table-cell text-center">
+          Enabled
+        </TableHead>
+        <TableHead className="text-right">Actions</TableHead>
+      </TableRow>
+    </TableHeader>
+  );
+
   return (
-    <div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
-      <Table className="relative">
-        <TableHeader className="bg-gray-50 dark:bg-zinc-800/50">
-          <TableRow className="hover:bg-transparent">
-            <TableHead className="w-[200px]">Product</TableHead>
-            <TableHead className="hidden sm:table-cell text-center">Category</TableHead>
-            <TableHead className="hidden md:table-cell text-center">Unit</TableHead>
-            <TableHead className="text-center">Stock</TableHead>
-            <TableHead className="hidden lg:table-cell text-center">Enabled</TableHead>
-            <TableHead className="text-right">Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {loading ? (
-            Array.from({ length: 1 }).map((_, index) => (
-              <TableRow key={index}>
-                <TableCell>Loading...</TableCell>
-                <TableCell>Loading...</TableCell>
-                <TableCell>Loading...</TableCell>
-                <TableCell>Loading...</TableCell>
-                <TableCell>Loading...</TableCell>
-                <TableCell>Loading...</TableCell>
-              </TableRow>
-            ))
-          ) : sortedProducts.length > 0 ? (
-            sortedProducts.map((product) => (
-              <TableRow key={product._id} className="transition-colors hover:bg-gray-50 dark:hover:bg-zinc-800/70">
-                <TableCell>
-                  <div className="font-medium truncate max-w-[180px]">{product.name}</div>
-                  <div className="hidden sm:block text-sm text-muted-foreground mt-1">
-                    {getCategoryNameById(product.category)}
-                  </div>
-                </TableCell>
-                <TableCell className="hidden sm:table-cell text-center">{getCategoryNameById(product.category)}</TableCell>
-                <TableCell className="hidden md:table-cell text-center">{product.unitType}</TableCell>
-                <TableCell className="text-center">
-                  {product.stockTracking ? (
-                    <div className="flex items-center justify-center gap-1">
-                      {getStockIcon(product)}
-                      <span className="text-sm">
-                        {product.currentStock !== undefined ? product.currentStock : 0} {product.unitType}
-                      </span>
-                    </div>
-                  ) : (
-                    <Badge variant="outline" className="text-xs">Not Tracked</Badge>
-                  )}
-                </TableCell>
-                <TableCell className="hidden lg:table-cell text-center">
-                  <Switch
-                    checked={product.enabled !== false}
-                    onCheckedChange={(checked) => onToggleEnabled(product._id as string, checked)}
-                  />
-                </TableCell>
-                <TableCell className="text-right flex justify-end space-x-1">
-                  {onProfitAnalysis && (
-                    <Button 
-                      variant="ghost" 
-                      size="sm" 
-                      onClick={() => onProfitAnalysis(product._id as string, product.name)}
-                      className="text-green-600 hover:text-green-700 hover:bg-green-50 dark:hover:bg-green-950/20"
-                      title="Profit Analysis"
-                    >
-                      <Calculator className="h-4 w-4" />
-                    </Button>
-                  )}
-                  {onClone && (
-                    <Button 
-                      variant="ghost" 
-                      size="sm" 
-                      onClick={() => onClone(product)}
-                      className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 dark:hover:bg-blue-950/20"
-                      title="Clone Listing"
-                    >
-                      <Copy className="h-4 w-4" />
-                    </Button>
-                  )}
-                  <Button variant="ghost" size="sm" onClick={() => onEdit(product)} title="Edit Product">
-                    <Edit className="h-4 w-4" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => onDelete(product._id as string)}
-                    className="text-red-500 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-950/20"
-                    title="Delete Product"
-                  >
-                    <Trash className="h-4 w-4" />
-                  </Button>
+    <div className="space-y-6">
+      {/* Enabled Products Table */}
+      <div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden">
+        <Table className="relative">
+          {renderTableHeader()}
+          <TableBody>
+            {loading ? (
+              Array.from({ length: 1 }).map((_, index) => (
+                <TableRow key={index}>
+                  <TableCell>Loading...</TableCell>
+                  <TableCell>Loading...</TableCell>
+                  <TableCell>Loading...</TableCell>
+                  <TableCell>Loading...</TableCell>
+                  <TableCell>Loading...</TableCell>
+                  <TableCell>Loading...</TableCell>
+                </TableRow>
+              ))
+            ) : sortedEnabledProducts.length > 0 ? (
+              sortedEnabledProducts.map((product) => renderProductRow(product))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={6} className="h-24 text-center">
+                  No enabled products found.
                 </TableCell>
               </TableRow>
-            ))
-          ) : (
-            <TableRow>
-              <TableCell colSpan={6} className="h-24 text-center">
-                No products found.
-              </TableCell>
-            </TableRow>
-          )}
-        </TableBody>
-      </Table>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Disabled Products Section */}
+      {!loading && disabledProducts.length > 0 && (
+        <div className="rounded-lg border dark:border-zinc-700 shadow-sm overflow-hidden bg-gray-50/30 dark:bg-zinc-900/30">
+          <Table className="relative">
+            {renderTableHeader()}
+            <TableBody>
+              {sortedDisabledProducts.map((product) =>
+                renderProductRow(product, true),
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      )}
     </div>
   );
 };