Update header row
This commit is contained in:
@@ -316,7 +316,7 @@ const ProductGrid = ({
|
|||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ScrollArea className="h-full">
|
<div className="h-[calc(100%-3.5rem)]">
|
||||||
{loading && !products.length ? (
|
{loading && !products.length ? (
|
||||||
<LoadingState />
|
<LoadingState />
|
||||||
) : error ? (
|
) : error ? (
|
||||||
@@ -332,82 +332,99 @@ const ProductGrid = ({
|
|||||||
<p className="text-sm text-muted-foreground">Try selecting a different time range</p>
|
<p className="text-sm text-muted-foreground">Try selecting a different time range</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<Table>
|
<div className="rounded-md border h-full">
|
||||||
<TableHeader>
|
<div className="overflow-y-auto h-full">
|
||||||
<TableRow className="hover:bg-transparent">
|
<table className="w-full">
|
||||||
|
<thead>
|
||||||
|
<tr className="hover:bg-transparent">
|
||||||
{columnVisibility.image && (
|
{columnVisibility.image && (
|
||||||
<TableHead className="w-[50px] min-w-[50px]" />
|
<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 && (
|
{columnVisibility.name && (
|
||||||
<TableHead className="min-w-[200px] pr-0 pl-1">
|
<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
|
<button
|
||||||
variant="ghost"
|
|
||||||
onClick={() => handleSort("name")}
|
onClick={() => handleSort("name")}
|
||||||
className="h-8 justify-start w-full font-medium hover:bg-transparent"
|
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
|
Product
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
</button>
|
||||||
</Button>
|
</th>
|
||||||
</TableHead>
|
|
||||||
)}
|
)}
|
||||||
{columnVisibility.totalQuantity && (
|
{columnVisibility.totalQuantity && (
|
||||||
<TableHead className="text-right px-0">
|
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
|
||||||
<Button
|
<button
|
||||||
variant="ghost"
|
|
||||||
onClick={() => handleSort("totalQuantity")}
|
onClick={() => handleSort("totalQuantity")}
|
||||||
className="h-8 justify-end w-full font-medium hover:bg-transparent"
|
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
|
Sold
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
</button>
|
||||||
</Button>
|
</th>
|
||||||
</TableHead>
|
|
||||||
)}
|
)}
|
||||||
{columnVisibility.totalRevenue && (
|
{columnVisibility.totalRevenue && (
|
||||||
<TableHead className="text-right px-0">
|
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
|
||||||
<Button
|
<button
|
||||||
variant="ghost"
|
|
||||||
onClick={() => handleSort("totalRevenue")}
|
onClick={() => handleSort("totalRevenue")}
|
||||||
className="h-8 justify-end w-full font-medium hover:bg-transparent"
|
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
|
Rev
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
</button>
|
||||||
</Button>
|
</th>
|
||||||
</TableHead>
|
|
||||||
)}
|
)}
|
||||||
{columnVisibility.orderCount && (
|
{columnVisibility.orderCount && (
|
||||||
<TableHead className="text-right px-0">
|
<th className="p-1.5 font-medium text-center sticky top-0 bg-white dark:bg-background z-10 border-b">
|
||||||
<Button
|
<button
|
||||||
variant="ghost"
|
|
||||||
onClick={() => handleSort("orderCount")}
|
onClick={() => handleSort("orderCount")}
|
||||||
className="h-8 justify-end w-full font-medium hover:bg-transparent"
|
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
|
Orders
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
</button>
|
||||||
</Button>
|
</th>
|
||||||
</TableHead>
|
|
||||||
)}
|
)}
|
||||||
{columnVisibility.price && (
|
{columnVisibility.price && (
|
||||||
<TableHead className="text-right hidden md:table-cell">
|
<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
|
<button
|
||||||
variant="ghost"
|
|
||||||
onClick={() => handleSort("price")}
|
onClick={() => handleSort("price")}
|
||||||
className="h-8 justify-end w-full font-medium hover:bg-transparent"
|
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
|
Price
|
||||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
</button>
|
||||||
</Button>
|
</th>
|
||||||
</TableHead>
|
|
||||||
)}
|
)}
|
||||||
</TableRow>
|
</tr>
|
||||||
</TableHeader>
|
</thead>
|
||||||
<TableBody>
|
<tbody className="divide-y divide-gray-200 dark:divide-gray-800">
|
||||||
{filteredProducts.map((product) => (
|
{filteredProducts.map((product) => (
|
||||||
<TableRow
|
<tr
|
||||||
key={product.id}
|
key={product.id}
|
||||||
className="group hover:bg-muted/50"
|
className="hover:bg-muted/50 transition-colors"
|
||||||
>
|
>
|
||||||
{columnVisibility.image && (
|
{columnVisibility.image && (
|
||||||
<TableCell className="w-[50px] p-1">
|
<td className="p-1.5 align-middle w-[50px]">
|
||||||
{product.ImgThumb && (
|
{product.ImgThumb && (
|
||||||
<img
|
<img
|
||||||
src={product.ImgThumb}
|
src={product.ImgThumb}
|
||||||
@@ -418,51 +435,51 @@ const ProductGrid = ({
|
|||||||
onError={(e) => (e.target.style.display = "none")}
|
onError={(e) => (e.target.style.display = "none")}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</TableCell>
|
</td>
|
||||||
)}
|
)}
|
||||||
{columnVisibility.name && (
|
{columnVisibility.name && (
|
||||||
<TableCell className="min-w-[200px] px-0">
|
<td className="p-1.5 align-middle min-w-[200px]">
|
||||||
<div className="flex flex-col min-w-0">
|
<div className="flex flex-col min-w-0">
|
||||||
<a
|
<a
|
||||||
href={`https://backend.acherryontop.com/product/${product.id}`}
|
href={`https://backend.acherryontop.com/product/${product.id}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
className="font-medium hover:underline line-clamp-2 text-gray-900 dark:text-gray-100"
|
className="font-sm hover:underline line-clamp-2 text-gray-900 dark:text-gray-100"
|
||||||
>
|
>
|
||||||
{product.name}
|
{product.name}
|
||||||
</a>
|
</a>
|
||||||
<div className="flex gap-2 text-sm text-muted-foreground px-0">
|
|
||||||
<span>${product.price.toFixed(2)}</span>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</td>
|
||||||
</TableCell>
|
|
||||||
)}
|
)}
|
||||||
{columnVisibility.totalQuantity && (
|
{columnVisibility.totalQuantity && (
|
||||||
<TableCell className="text-center font-medium px-0">
|
<td className="p-1.5 align-middle text-center font-medium">
|
||||||
{product.totalQuantity}
|
{product.totalQuantity}
|
||||||
</TableCell>
|
</td>
|
||||||
)}
|
)}
|
||||||
{columnVisibility.totalRevenue && (
|
{columnVisibility.totalRevenue && (
|
||||||
<TableCell className="text-center text-emerald-600 dark:text-emerald-400 font-medium px-0">
|
<td className="p-1.5 align-middle text-center text-emerald-600 dark:text-emerald-400 font-medium">
|
||||||
${product.totalRevenue.toFixed(2)}
|
${product.totalRevenue.toFixed(2)}
|
||||||
</TableCell>
|
</td>
|
||||||
)}
|
)}
|
||||||
{columnVisibility.orderCount && (
|
{columnVisibility.orderCount && (
|
||||||
<TableCell className="text-center text-muted-foreground px-0">
|
<td className="p-1.5 align-middle text-center text-muted-foreground">
|
||||||
{product.orderCount}
|
{product.orderCount}
|
||||||
</TableCell>
|
</td>
|
||||||
)}
|
)}
|
||||||
{columnVisibility.price && (
|
{columnVisibility.price && (
|
||||||
<TableCell className="text-center hidden md:table-cell px-0">
|
<td className="p-1.5 align-middle text-center hidden md:table-cell">
|
||||||
${product.price.toFixed(2)}
|
${product.price.toFixed(2)}
|
||||||
</TableCell>
|
</td>
|
||||||
)}
|
)}
|
||||||
</TableRow>
|
</tr>
|
||||||
))}
|
))}
|
||||||
</TableBody>
|
</tbody>
|
||||||
</Table>
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</ScrollArea>
|
</div>
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user