6997838bf7
All checks were successful
Build Frontend / build (push) Successful in 1m11s
Updated category, quick actions, and product table components to use enhanced dark theme styling, including new background colors, borders, gradients, and shadow effects. Improved visual hierarchy, contrast, and hover states for better user experience and consistency across dashboard elements.
294 lines
11 KiB
TypeScript
294 lines
11 KiB
TypeScript
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import {
|
|
Edit,
|
|
Trash,
|
|
AlertTriangle,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Calculator,
|
|
Copy,
|
|
PackageX,
|
|
Archive
|
|
} from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Product } from "@/models/products";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
|
|
const getProductImageUrl = (product: Product) => {
|
|
if (!product.image) return null;
|
|
if (typeof product.image === 'string' && product.image.startsWith('http')) return product.image;
|
|
// Use the API endpoint to serve the image
|
|
return `${process.env.NEXT_PUBLIC_API_URL}/products/${product._id}/image`;
|
|
};
|
|
|
|
interface ProductTableProps {
|
|
products: Product[];
|
|
loading: boolean;
|
|
onEdit: (product: Product) => void;
|
|
onClone?: (product: Product) => void;
|
|
onDelete: (productId: string) => void;
|
|
onToggleEnabled: (productId: string, enabled: boolean) => void;
|
|
onProfitAnalysis?: (productId: string, productName: string) => void;
|
|
getCategoryNameById: (categoryId: string) => string;
|
|
}
|
|
|
|
const ProductTable = ({
|
|
products,
|
|
loading,
|
|
onEdit,
|
|
onClone,
|
|
onDelete,
|
|
onToggleEnabled,
|
|
onProfitAnalysis,
|
|
getCategoryNameById,
|
|
}: ProductTableProps) => {
|
|
// Separate enabled and disabled products
|
|
const enabledProducts = products.filter((p) => p.enabled !== false);
|
|
const disabledProducts = products.filter((p) => p.enabled === false);
|
|
|
|
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") {
|
|
return <AlertTriangle className="h-4 w-4 text-red-500" />;
|
|
} 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, index: number, isDisabled: boolean = false) => (
|
|
<motion.tr
|
|
key={product._id}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.2, delay: index * 0.05 }}
|
|
className={`group hover:bg-muted/40 border-b border-border/50 transition-colors ${isDisabled ? "opacity-60 bg-muted/20" : ""}`}
|
|
>
|
|
<TableCell className="font-medium">
|
|
<div className="flex items-center gap-2">
|
|
<div className="h-8 w-8 rounded bg-muted/50 flex items-center justify-center text-muted-foreground overflow-hidden relative">
|
|
{getProductImageUrl(product) ? (
|
|
<img
|
|
src={getProductImageUrl(product)!}
|
|
alt={product.name}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
) : (
|
|
<span className="text-xs font-bold">{product.name.charAt(0).toUpperCase()}</span>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<div className="truncate max-w-[180px]">{product.name}</div>
|
|
<div className="sm:hidden text-xs text-muted-foreground">
|
|
{getCategoryNameById(product.category)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</TableCell>
|
|
<TableCell className="hidden sm:table-cell text-center">
|
|
<Badge variant="outline" className="font-normal bg-background/50">
|
|
{getCategoryNameById(product.category)}
|
|
</Badge>
|
|
</TableCell>
|
|
<TableCell className="hidden md:table-cell text-center text-muted-foreground text-sm">
|
|
{product.unitType}
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
{product.stockTracking ? (
|
|
<div className="flex items-center justify-center gap-1.5">
|
|
{getStockIcon(product)}
|
|
<span className={`text-sm font-medium ${product.stockStatus === 'out_of_stock' ? 'text-destructive' :
|
|
product.stockStatus === 'low_stock' ? 'text-amber-500' : 'text-foreground'
|
|
}`}>
|
|
{product.currentStock !== undefined ? product.currentStock : 0}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<Badge variant="secondary" className="text-[10px] h-5 px-1.5 text-muted-foreground bg-muted/50">
|
|
Unlimited
|
|
</Badge>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="hidden lg:table-cell text-center">
|
|
<Switch
|
|
checked={product.enabled !== false}
|
|
onCheckedChange={(checked) =>
|
|
onToggleEnabled(product._id as string, checked)
|
|
}
|
|
className="data-[state=checked]:bg-primary"
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex items-center justify-end gap-1">
|
|
{onProfitAnalysis && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() =>
|
|
onProfitAnalysis(product._id as string, product.name)
|
|
}
|
|
className="h-8 w-8 text-emerald-500 hover:text-emerald-600 hover:bg-emerald-500/10"
|
|
title="Profit Analysis"
|
|
>
|
|
<Calculator className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
{onClone && (
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onClone(product)}
|
|
className="h-8 w-8 text-blue-500 hover:text-blue-600 hover:bg-blue-500/10"
|
|
title="Clone Listing"
|
|
>
|
|
<Copy className="h-4 w-4" />
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onEdit(product)}
|
|
className="h-8 w-8 text-muted-foreground hover:text-foreground"
|
|
title="Edit Product"
|
|
>
|
|
<Edit className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onDelete(product._id as string)}
|
|
className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10"
|
|
title="Delete Product"
|
|
>
|
|
<Trash className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</TableCell>
|
|
</motion.tr>
|
|
);
|
|
|
|
const renderTableHeader = () => (
|
|
<TableHeader className="bg-muted/50 sticky top-0 z-10">
|
|
<TableRow className="hover:bg-transparent border-border/50">
|
|
<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 pr-6">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Enabled Products Table */}
|
|
<Card className="border-white/10 bg-black/40 backdrop-blur-xl shadow-2xl overflow-hidden rounded-xl">
|
|
<CardHeader className="py-4 px-6 border-b border-white/5 bg-white/[0.02]">
|
|
<CardTitle className="text-lg font-bold flex items-center gap-3 text-white">
|
|
<div className="p-2 rounded-lg bg-indigo-500/10 border border-indigo-500/20">
|
|
<CheckCircle className="h-5 w-5 text-indigo-400" />
|
|
</div>
|
|
Active Products
|
|
<Badge variant="secondary" className="ml-2 bg-indigo-500/10 text-indigo-300 border-indigo-500/20 hover:bg-indigo-500/20">
|
|
{sortedEnabledProducts.length}
|
|
</Badge>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<div className="max-h-[600px] overflow-auto">
|
|
<Table>
|
|
{renderTableHeader()}
|
|
<TableBody>
|
|
<AnimatePresence>
|
|
{loading ? (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
|
|
<div className="flex flex-col items-center gap-2">
|
|
<div className="h-6 w-6 animate-spin rounded-full border-2 border-indigo-500 border-t-transparent" />
|
|
<span>Loading products...</span>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
) : sortedEnabledProducts.length > 0 ? (
|
|
sortedEnabledProducts.map((product, index) => renderProductRow(product, index))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={6} className="h-32 text-center text-muted-foreground">
|
|
<div className="flex flex-col items-center justify-center gap-2">
|
|
<PackageX className="h-8 w-8 opacity-20" />
|
|
<p>No active products found</p>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</AnimatePresence>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Disabled Products Section */}
|
|
{!loading && disabledProducts.length > 0 && (
|
|
<Card className="border-white/5 bg-black/20 backdrop-blur-sm shadow-none overflow-hidden opacity-80 hover:opacity-100 transition-opacity">
|
|
<CardHeader className="py-4 px-6 border-b border-white/5 bg-white/[0.01]">
|
|
<CardTitle className="text-lg font-medium flex items-center gap-2 text-zinc-400">
|
|
<Archive className="h-5 w-5" />
|
|
Archived / Disabled
|
|
<Badge variant="outline" className="ml-2 border-white/10 text-zinc-500">
|
|
{sortedDisabledProducts.length}
|
|
</Badge>
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<div className="max-h-[400px] overflow-auto">
|
|
<Table>
|
|
{renderTableHeader()}
|
|
<TableBody>
|
|
<AnimatePresence>
|
|
{sortedDisabledProducts.map((product, index) =>
|
|
renderProductRow(product, index, true),
|
|
)}
|
|
</AnimatePresence>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
};
|
|
|
|
export default ProductTable;
|