From 621438db55ffeb41111be0fd2cb5d7bd0528c0d4 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Sat, 21 Dec 2024 18:50:31 -0500
Subject: [PATCH] Update header row

---
 .../src/components/dashboard/ProductGrid.jsx  | 277 ++++++++++--------
 1 file changed, 147 insertions(+), 130 deletions(-)

diff --git a/dashboard/src/components/dashboard/ProductGrid.jsx b/dashboard/src/components/dashboard/ProductGrid.jsx
index e7298c3..83e60bc 100644
--- a/dashboard/src/components/dashboard/ProductGrid.jsx
+++ b/dashboard/src/components/dashboard/ProductGrid.jsx
@@ -316,7 +316,7 @@ const ProductGrid = ({
           </DropdownMenu>
         </div>
 
-        <ScrollArea className="h-full">
+        <div className="h-[calc(100%-3.5rem)]">
           {loading && !products.length ? (
             <LoadingState />
           ) : error ? (
@@ -332,137 +332,154 @@ const ProductGrid = ({
               <p className="text-sm text-muted-foreground">Try selecting a different time range</p>
             </div>
           ) : (
-            <Table>
-              <TableHeader>
-                <TableRow className="hover:bg-transparent">
-                  {columnVisibility.image && (
-                    <TableHead className="w-[50px] min-w-[50px]" />
-                  )}
-                  {columnVisibility.name && (
-                    <TableHead className="min-w-[200px] pr-0 pl-1">
-                      <Button
-                        variant="ghost"
-                        onClick={() => handleSort("name")}
-                        className="h-8 justify-start w-full font-medium hover:bg-transparent"
-                      >
-                        Product
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                      </Button>
-                    </TableHead>
-                  )}
-                  {columnVisibility.totalQuantity && (
-                    <TableHead className="text-right px-0">
-                      <Button
-                        variant="ghost"
-                        onClick={() => handleSort("totalQuantity")}
-                        className="h-8 justify-end w-full font-medium hover:bg-transparent"
-                      >
-                        Sold
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                      </Button>
-                    </TableHead>
-                  )}
-                  {columnVisibility.totalRevenue && (
-                    <TableHead className="text-right px-0">
-                      <Button
-                        variant="ghost"
-                        onClick={() => handleSort("totalRevenue")}
-                        className="h-8 justify-end w-full font-medium hover:bg-transparent"
-                      >
-                        Rev
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                      </Button>
-                    </TableHead>
-                  )}
-                  {columnVisibility.orderCount && (
-                    <TableHead className="text-right px-0">
-                      <Button
-                        variant="ghost"
-                        onClick={() => handleSort("orderCount")}
-                        className="h-8 justify-end w-full font-medium hover:bg-transparent"
-                      >
-                        Orders
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                      </Button>
-                    </TableHead>
-                  )}
-                  {columnVisibility.price && (
-                    <TableHead className="text-right hidden md:table-cell">
-                      <Button
-                        variant="ghost"
-                        onClick={() => handleSort("price")}
-                        className="h-8 justify-end w-full font-medium hover:bg-transparent"
-                      >
-                        Price
-                        <ArrowUpDown className="ml-2 h-4 w-4" />
-                      </Button>
-                    </TableHead>
-                  )}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredProducts.map((product) => (
-                  <TableRow
-                    key={product.id}
-                    className="group hover:bg-muted/50"
-                  >
-                    {columnVisibility.image && (
-                      <TableCell className="w-[50px] p-1">
-                        {product.ImgThumb && (
-                          <img
-                            src={product.ImgThumb}
-                            alt=""
-                            width={50}
-                            height={50}
-                            className="rounded bg-muted"
-                            onError={(e) => (e.target.style.display = "none")}
-                          />
-                        )}
-                      </TableCell>
-                    )}
-                    {columnVisibility.name && (
-                      <TableCell className="min-w-[200px] px-0">
-                        <div className="flex flex-col min-w-0">
-                          <a
-                            href={`https://backend.acherryontop.com/product/${product.id}`}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="font-medium hover:underline line-clamp-2 text-gray-900 dark:text-gray-100"
+            <div className="rounded-md border h-full">
+              <div className="overflow-y-auto h-full">
+                <table className="w-full">
+                  <thead>
+                    <tr className="hover:bg-transparent">
+                      {columnVisibility.image && (
+                        <th className="p-1.5 text-left font-medium sticky top-0 bg-white dark:bg-background z-10 w-[50px] min-w-[50px] border-b" />
+                      )}
+                      {columnVisibility.name && (
+                        <th className="p-1.5 text-left font-medium sticky top-0 bg-white dark:bg-background z-10 min-w-[200px] border-b">
+                          <button
+                            onClick={() => handleSort("name")}
+                            className={cn(
+                              "inline-flex items-center justify-start w-full px-2 py-1 text-sm font-medium transition-colors rounded-md",
+                              sorting.column === "name"
+                                ? "bg-primary text-primary-foreground"
+                                : "hover:bg-accent hover:text-accent-foreground"
+                            )}
                           >
-                            {product.name}
-                          </a>
-                          <div className="flex gap-2 text-sm text-muted-foreground px-0">
-                            <span>${product.price.toFixed(2)}</span>
-                          </div>
-                        </div>
-                      </TableCell>
-                    )}
-                    {columnVisibility.totalQuantity && (
-                      <TableCell className="text-center font-medium px-0">
-                        {product.totalQuantity}
-                      </TableCell>
-                    )}
-                    {columnVisibility.totalRevenue && (
-                      <TableCell className="text-center text-emerald-600 dark:text-emerald-400 font-medium px-0">
-                        ${product.totalRevenue.toFixed(2)}
-                      </TableCell>
-                    )}
-                    {columnVisibility.orderCount && (
-                      <TableCell className="text-center text-muted-foreground px-0">
-                        {product.orderCount}
-                      </TableCell>
-                    )}
-                    {columnVisibility.price && (
-                      <TableCell className="text-center hidden md:table-cell px-0">
-                        ${product.price.toFixed(2)}
-                      </TableCell>
-                    )}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+                            Product
+                          </button>
+                        </th>
+                      )}
+                      {columnVisibility.totalQuantity && (
+                        <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
+                          <button
+                            onClick={() => handleSort("totalQuantity")}
+                            className={cn(
+                              "inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium transition-colors rounded-md",
+                              sorting.column === "totalQuantity"
+                                ? "bg-primary text-primary-foreground"
+                                : "hover:bg-accent hover:text-accent-foreground"
+                            )}
+                          >
+                            Sold
+                          </button>
+                        </th>
+                      )}
+                      {columnVisibility.totalRevenue && (
+                        <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
+                          <button
+                            onClick={() => handleSort("totalRevenue")}
+                            className={cn(
+                              "inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium transition-colors rounded-md",
+                              sorting.column === "totalRevenue"
+                                ? "bg-primary text-primary-foreground"
+                                : "hover:bg-accent hover:text-accent-foreground"
+                            )}
+                          >
+                            Rev
+                          </button>
+                        </th>
+                      )}
+                      {columnVisibility.orderCount && (
+                        <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
+                          <button
+                            onClick={() => handleSort("orderCount")}
+                            className={cn(
+                              "inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium transition-colors rounded-md",
+                              sorting.column === "orderCount"
+                                ? "bg-primary text-primary-foreground"
+                                : "hover:bg-accent hover:text-accent-foreground"
+                            )}
+                          >
+                            Orders
+                          </button>
+                        </th>
+                      )}
+                      {columnVisibility.price && (
+                        <th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 hidden md:table-cell border-b">
+                          <button
+                            onClick={() => handleSort("price")}
+                            className={cn(
+                              "inline-flex items-center justify-center w-full px-2 py-1 text-sm font-medium transition-colors rounded-md",
+                              sorting.column === "price"
+                                ? "bg-primary text-primary-foreground"
+                                : "hover:bg-accent hover:text-accent-foreground"
+                            )}
+                          >
+                            Price
+                          </button>
+                        </th>
+                      )}
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-200 dark:divide-gray-800">
+                    {filteredProducts.map((product) => (
+                      <tr
+                        key={product.id}
+                        className="hover:bg-muted/50 transition-colors"
+                      >
+                        {columnVisibility.image && (
+                          <td className="p-1.5 align-middle w-[50px]">
+                            {product.ImgThumb && (
+                              <img
+                                src={product.ImgThumb}
+                                alt=""
+                                width={50}
+                                height={50}
+                                className="rounded bg-muted"
+                                onError={(e) => (e.target.style.display = "none")}
+                              />
+                            )}
+                          </td>
+                        )}
+                        {columnVisibility.name && (
+                          <td className="p-1.5 align-middle min-w-[200px]">
+                            <div className="flex flex-col min-w-0">
+                              <a
+                                href={`https://backend.acherryontop.com/product/${product.id}`}
+                                target="_blank"
+                                rel="noopener noreferrer"
+                                className="font-sm hover:underline line-clamp-2 text-gray-900 dark:text-gray-100"
+                              >
+                                {product.name}
+                              </a>
+                        
+                            </div>
+                          </td>
+                        )}
+                        {columnVisibility.totalQuantity && (
+                          <td className="p-1.5 align-middle text-center font-medium">
+                            {product.totalQuantity}
+                          </td>
+                        )}
+                        {columnVisibility.totalRevenue && (
+                          <td className="p-1.5 align-middle text-center text-emerald-600 dark:text-emerald-400 font-medium">
+                            ${product.totalRevenue.toFixed(2)}
+                          </td>
+                        )}
+                        {columnVisibility.orderCount && (
+                          <td className="p-1.5 align-middle text-center text-muted-foreground">
+                            {product.orderCount}
+                          </td>
+                        )}
+                        {columnVisibility.price && (
+                          <td className="p-1.5 align-middle text-center hidden md:table-cell">
+                            ${product.price.toFixed(2)}
+                          </td>
+                        )}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
           )}
-        </ScrollArea>
+        </div>
       </CardContent>
     </Card>
   );