g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update page.tsx
All checks were successful
Build Frontend / build (push) Successful in 1m11s
Details

Browse Source
This commit is contained in:
g
2026-01-12 07:03:19 +00:00
parent bfd31f9d35
commit 63c833b510
1 changed files with 152 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
app/dashboard/categories/page.tsx
View File

@@ -25,7 +25,8 @@ import {
} from "@/components/ui/alert-dialog"; } from "@/components/ui/alert-dialog";
import { apiRequest } from "@/lib/api"; import { apiRequest } from "@/lib/api";
import type { Category } from "@/models/categories"; import type { Category } from "@/models/categories";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { motion, AnimatePresence } from "framer-motion";
// Drag and Drop imports // Drag and Drop imports
import { DndProvider, useDrag, useDrop, DropTargetMonitor } from 'react-dnd'; import { DndProvider, useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
@@ -49,14 +50,15 @@ export default function CategoriesPage() {
const [editingCategory, setEditingCategory] = useState<Category | null>(null); const [editingCategory, setEditingCategory] = useState<Category | null>(null);
const [categoryToDelete, setCategoryToDelete] = useState<Category | null>(null); const [categoryToDelete, setCategoryToDelete] = useState<Category | null>(null);
const [expanded, setExpanded] = useState<Record<string, boolean>>({}); const [expanded, setExpanded] = useState<Record<string, boolean>>({});
const [loading, setLoading] = useState(true);
// Get root categories sorted by order // Get root categories sorted by order
const rootCategories = categories const rootCategories = categories
.filter(cat => !cat.parentId) .filter(cat => !cat.parentId)
.sort((a, b) => (a.order || 0) - (b.order || 0)); .sort((a, b) => (a.order || 0) - (b.order || 0));
// Get subcategories sorted by order // Get subcategories sorted by order
const getSubcategories = (parentId: string) => const getSubcategories = (parentId: string) =>
categories categories
.filter(cat => cat.parentId === parentId) .filter(cat => cat.parentId === parentId)
.sort((a, b) => (a.order || 0) - (b.order || 0)); .sort((a, b) => (a.order || 0) - (b.order || 0));
@@ -67,10 +69,13 @@ export default function CategoriesPage() {
const fetchCategories = async () => { const fetchCategories = async () => {
try { try {
setLoading(true);
const fetchedCategories = await apiRequest("/categories", "GET"); const fetchedCategories = await apiRequest("/categories", "GET");
setCategories(fetchedCategories); setCategories(fetchedCategories);
} catch (error) { } catch (error) {
toast.error("Failed to fetch categories"); toast.error("Failed to fetch categories");
} finally {
setLoading(false);
} }
}; };
@@ -82,13 +87,13 @@ export default function CategoriesPage() {
try { try {
// Find the highest order in the selected parent group // Find the highest order in the selected parent group
const siblings = selectedParentId const siblings = selectedParentId
? categories.filter(cat => cat.parentId === selectedParentId) ? categories.filter(cat => cat.parentId === selectedParentId)
: categories.filter(cat => !cat.parentId); : categories.filter(cat => !cat.parentId);
const maxOrder = siblings.reduce((max, cat) => const maxOrder = siblings.reduce((max, cat) =>
Math.max(max, cat.order || 0), 0); Math.max(max, cat.order || 0), 0);
const response = await apiRequest("/categories", "POST", { const response = await apiRequest("/categories", "POST", {
name: newCategoryName, name: newCategoryName,
parentId: selectedParentId || undefined, parentId: selectedParentId || undefined,
@@ -110,7 +115,7 @@ export default function CategoriesPage() {
name: newName, name: newName,
}); });
setCategories(categories.map(cat => setCategories(categories.map(cat =>
cat._id === categoryId ? { ...cat, name: newName } : cat cat._id === categoryId ? { ...cat, name: newName } : cat
)); ));
setEditingCategory(null); setEditingCategory(null);
@@ -138,55 +143,55 @@ export default function CategoriesPage() {
// Create new array with updated orders // Create new array with updated orders
const dragIndex = categories.findIndex(cat => cat._id === dragId); const dragIndex = categories.findIndex(cat => cat._id === dragId);
const hoverIndex = categories.findIndex(cat => cat._id === hoverId); const hoverIndex = categories.findIndex(cat => cat._id === hoverId);
if (dragIndex === -1 || hoverIndex === -1) return; if (dragIndex === -1 || hoverIndex === -1) return;
const draggedCategory = categories[dragIndex]; const draggedCategory = categories[dragIndex];
// Make sure we're only reordering within the same parent group // Make sure we're only reordering within the same parent group
if (draggedCategory.parentId !== parentId) return; if (draggedCategory.parentId !== parentId) return;
// Create a copy for reordering // Create a copy for reordering
const updatedCategories = [...categories]; const updatedCategories = [...categories];
// Get only categories with the same parent for reordering // Get only categories with the same parent for reordering
const siblingCategories = updatedCategories const siblingCategories = updatedCategories
.filter(cat => cat.parentId === parentId) .filter(cat => cat.parentId === parentId)
.sort((a, b) => (a.order || 0) - (b.order || 0)); .sort((a, b) => (a.order || 0) - (b.order || 0));
// Remove the dragged category from its position // Remove the dragged category from its position
const draggedItem = siblingCategories.find(cat => cat._id === dragId); const draggedItem = siblingCategories.find(cat => cat._id === dragId);
if (!draggedItem) return; if (!draggedItem) return;
const filteredSiblings = siblingCategories.filter(cat => cat._id !== dragId); const filteredSiblings = siblingCategories.filter(cat => cat._id !== dragId);
// Find where to insert the dragged item // Find where to insert the dragged item
const hoverItem = siblingCategories.find(cat => cat._id === hoverId); const hoverItem = siblingCategories.find(cat => cat._id === hoverId);
if (!hoverItem) return; if (!hoverItem) return;
const hoverPos = filteredSiblings.findIndex(cat => cat._id === hoverId); const hoverPos = filteredSiblings.findIndex(cat => cat._id === hoverId);
// Insert the dragged item at the new position // Insert the dragged item at the new position
filteredSiblings.splice(hoverPos, 0, draggedItem); filteredSiblings.splice(hoverPos, 0, draggedItem);
// Update the order for all siblings // Update the order for all siblings
filteredSiblings.forEach((cat, index) => { filteredSiblings.forEach((cat, index) => {
cat.order = index; cat.order = index;
}); });
// Update the categories state // Update the categories state
setCategories(updatedCategories.map(cat => { setCategories(updatedCategories.map(cat => {
const updatedCat = filteredSiblings.find(c => c._id === cat._id); const updatedCat = filteredSiblings.find(c => c._id === cat._id);
return updatedCat || cat; return updatedCat || cat;
})); }));
// Save the new order to the server using bulk update // Save the new order to the server using bulk update
try { try {
const categoriesToUpdate = filteredSiblings.map(cat => ({ const categoriesToUpdate = filteredSiblings.map(cat => ({
_id: cat._id, _id: cat._id,
order: cat.order order: cat.order
})); }));
await apiRequest("/categories/bulk-order", "PUT", { await apiRequest("/categories/bulk-order", "PUT", {
categories: categoriesToUpdate categories: categoriesToUpdate
}); });
@@ -210,9 +215,9 @@ export default function CategoriesPage() {
const hasSubcategories = subcategories.length > 0; const hasSubcategories = subcategories.length > 0;
const isEditing = editingCategory?._id === category._id; const isEditing = editingCategory?._id === category._id;
const isExpanded = expanded[category._id]; const isExpanded = expanded[category._id];
const ref = useRef<HTMLDivElement>(null); const ref = useRef<HTMLDivElement>(null);
// Set up drag // Set up drag
const [{ isDragging }, drag] = useDrag({ const [{ isDragging }, drag] = useDrag({
type: ItemTypes.CATEGORY, type: ItemTypes.CATEGORY,
@@ -221,7 +226,7 @@ export default function CategoriesPage() {
isDragging: monitor.isDragging(), isDragging: monitor.isDragging(),
}), }),
}); });
// Set up drop // Set up drop
const [{ handlerId, isOver }, drop] = useDrop<DragItem, void, { handlerId: string | symbol | null; isOver: boolean }>({ const [{ handlerId, isOver }, drop] = useDrop<DragItem, void, { handlerId: string | symbol | null; isOver: boolean }>({
accept: ItemTypes.CATEGORY, accept: ItemTypes.CATEGORY,
@@ -231,56 +236,64 @@ export default function CategoriesPage() {
}), }),
hover(item: DragItem, monitor) { hover(item: DragItem, monitor) {
if (!ref.current) return; if (!ref.current) return;
const dragId = item.id; const dragId = item.id;
const hoverId = category._id; const hoverId = category._id;
// Don't replace items with themselves // Don't replace items with themselves
if (dragId === hoverId) return; if (dragId === hoverId) return;
// Only allow reordering within the same parent // Only allow reordering within the same parent
if (item.parentId !== category.parentId) return; if (item.parentId !== category.parentId) return;
moveCategory(dragId, hoverId, category.parentId); moveCategory(dragId, hoverId, category.parentId);
}, },
}); });
// Connect the drag and drop refs // Connect the drag and drop refs
drag(drop(ref)); drag(drop(ref));
return ( return (
<div key={category._id} className="space-y-1"> <motion.div
<div key={category._id}
initial={{ opacity: 0, y: 5 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0 }}
className="space-y-1"
>
<div
ref={ref} ref={ref}
className={`group flex items-center p-2 rounded-md transition-colors className={`group flex items-center p-2 rounded-md transition-all duration-200 border border-transparent
${isEditing ? 'bg-gray-100 dark:bg-gray-800' : ''} ${isEditing ? 'bg-muted/50 border-primary/20' : ''}
${isOver ? 'bg-gray-100 dark:bg-gray-800' : 'hover:bg-gray-100 dark:hover:bg-gray-800'} ${isOver ? 'bg-muted border-primary/20' : 'hover:bg-muted/50 hover:border-border/50'}
${isDragging ? 'opacity-50' : 'opacity-100'}`} ${isDragging ? 'opacity-50' : 'opacity-100'}`}
style={{ marginLeft: `${level * 24}px` }} style={{ marginLeft: `${level * 24}px` }}
data-handler-id={handlerId} data-handler-id={handlerId}
> >
<div className="cursor-grab mr-2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"> <div className="cursor-grab mr-2 text-muted-foreground/40 hover:text-muted-foreground transition-colors">
<MoveVertical className="h-4 w-4" /> <MoveVertical className="h-4 w-4" />
</div> </div>
{hasSubcategories && ( {hasSubcategories ? (
<button <button
onClick={() => toggleExpand(category._id)} onClick={() => toggleExpand(category._id)}
className="mr-1 focus:outline-none" className="mr-1 focus:outline-none p-0.5 rounded-sm hover:bg-muted text-muted-foreground transition-colors"
> >
{isExpanded ? {isExpanded ?
<ChevronDown className="h-4 w-4 text-muted-foreground" /> : <ChevronDown className="h-4 w-4" /> :
<ChevronRight className="h-4 w-4 text-muted-foreground" /> <ChevronRight className="h-4 w-4" />
} }
</button> </button>
) : (
<div className="w-6 h-5" /> // Spacer
)} )}
<div className="flex-1 flex items-center space-x-2"> <div className="flex-1 flex items-center space-x-2">
{isEditing ? ( {isEditing ? (
<Input <Input
value={editingCategory?.name || ""} value={editingCategory?.name || ""}
onChange={(e) => setEditingCategory(prev => prev ? { ...prev, name: e.target.value } : prev)} onChange={(e) => setEditingCategory(prev => prev ? { ...prev, name: e.target.value } : prev)}
className="h-8 max-w-[200px]" className="h-8 max-w-[200px] border-primary/30 focus-visible:ring-primary/20"
autoFocus autoFocus
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter' && editingCategory) { if (e.key === 'Enter' && editingCategory) {
@@ -300,7 +313,7 @@ export default function CategoriesPage() {
<Button <Button
size="sm" size="sm"
variant="ghost" variant="ghost"
className="h-8 px-2 text-green-600 hover:text-green-700 hover:bg-green-50" className="h-8 px-2 text-green-600 hover:text-green-700 hover:bg-green-500/10"
onClick={() => editingCategory && handleUpdateCategory(category._id, editingCategory.name)} onClick={() => editingCategory && handleUpdateCategory(category._id, editingCategory.name)}
> >
Save Save
@@ -317,70 +330,92 @@ export default function CategoriesPage() {
) : ( ) : (
<> <>
<Button <Button
size="sm" size="icon"
variant="ghost" variant="ghost"
className="h-8 w-8 p-0 text-blue-500 hover:text-blue-600 hover:bg-blue-50" className="h-8 w-8 text-muted-foreground hover:text-primary hover:bg-primary/10 transition-colors"
onClick={() => setEditingCategory(category)} onClick={() => setEditingCategory(category)}
> >
<Pencil className="h-4 w-4" /> <Pencil className="h-3.5 w-3.5" />
</Button> </Button>
<Button <Button
size="sm" size="icon"
variant="ghost" variant="ghost"
className="h-8 w-8 p-0 text-red-500 hover:text-red-600 hover:bg-red-50" className="h-8 w-8 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors"
onClick={() => setCategoryToDelete(category)} onClick={() => setCategoryToDelete(category)}
> >
<Trash2 className="h-4 w-4" /> <Trash2 className="h-3.5 w-3.5" />
</Button> </Button>
</> </>
)} )}
</div> </div>
</div> </div>
{isExpanded && subcategories.map(subcat => <AnimatePresence>
<CategoryItem key={subcat._id} category={subcat} level={level + 1} /> {isExpanded && hasSubcategories && (
)} <motion.div
</div> initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: "auto" }}
exit={{ opacity: 0, height: 0 }}
transition={{ duration: 0.2 }}
>
{subcategories.map(subcat =>
<CategoryItem key={subcat._id} category={subcat} level={level + 1} />
)}
</motion.div>
)}
</AnimatePresence>
</motion.div>
); );
}; };
return ( return (
<Layout> <Layout>
<div className="space-y-6"> <div className="space-y-8 animate-in fade-in duration-500">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h1 className="text-2xl font-semibold text-gray-900 dark:text-white flex items-center"> <div>
<FolderTree className="mr-2 h-6 w-6" /> <h1 className="text-2xl font-semibold text-foreground flex items-center">
Categories <FolderTree className="mr-3 h-6 w-6 text-primary" />
</h1> Categories
</h1>
<p className="text-muted-foreground text-sm mt-1">
Manage your product categories and hierarchy
</p>
</div>
</div> </div>
<div className="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-5 gap-4 lg:gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-5 gap-6 lg:gap-8">
{/* Add Category Card - Takes up 2 columns */} {/* Add Category Card */}
<Card className="lg:col-span-2"> <Card className="lg:col-span-2 border-border/40 bg-background/50 backdrop-blur-sm shadow-sm h-fit sticky top-6">
<CardHeader> <CardHeader className="bg-muted/20 border-b border-border/40 pb-4">
<CardTitle className="text-lg font-medium">Add New Category</CardTitle> <CardTitle className="text-lg font-medium flex items-center">
<Plus className="mr-2 h-4 w-4 text-primary" />
Add New Category
</CardTitle>
<CardDescription>
Create a new category or subcategory
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-6">
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> <label className="text-sm font-medium leading-none">
Category Name Category Name
</label> </label>
<Input <Input
value={newCategoryName} value={newCategoryName}
onChange={(e) => setNewCategoryName(e.target.value)} onChange={(e) => setNewCategoryName(e.target.value)}
placeholder="Enter category name" placeholder="e.g. Electronics, Clothing..."
className="h-9" className="h-10 border-border/50 bg-background/50 focus:bg-background transition-colors"
/> />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"> <label className="text-sm font-medium leading-none">
Parent Category Parent Category
</label> </label>
<Select <Select
value={selectedParentId || "none"} value={selectedParentId || "none"}
onValueChange={setSelectedParentId} onValueChange={setSelectedParentId}
> >
<SelectTrigger className="h-9"> <SelectTrigger className="h-10 border-border/50 bg-background/50 focus:bg-background transition-colors">
<SelectValue placeholder="Select parent category" /> <SelectValue placeholder="Select parent category" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@@ -393,7 +428,7 @@ export default function CategoriesPage() {
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
<Button onClick={handleAddCategory} className="w-full"> <Button onClick={handleAddCategory} className="w-full mt-2" size="lg">
<Plus className="h-4 w-4 mr-2" /> <Plus className="h-4 w-4 mr-2" />
Add Category Add Category
</Button> </Button>
@@ -401,47 +436,59 @@ export default function CategoriesPage() {
</CardContent> </CardContent>
</Card> </Card>
{/* Category List Card - Takes up 3 columns */} {/* Category List Card */}
<Card className="lg:col-span-3"> <Card className="lg:col-span-3 border-border/40 bg-background/50 backdrop-blur-sm shadow-sm">
<CardHeader> <CardHeader className="bg-muted/20 border-b border-border/40 pb-4">
<CardTitle className="text-lg font-medium">Category List</CardTitle> <CardTitle className="text-lg font-medium">Structure</CardTitle>
<CardDescription>
Drag and drop to reorder categories
</CardDescription>
</CardHeader> </CardHeader>
<CardContent> <CardContent className="pt-6">
<DndProvider backend={HTML5Backend}> <DndProvider backend={HTML5Backend}>
<div className="space-y-1"> <div className="space-y-2 min-h-[300px]">
{rootCategories.length === 0 ? ( {loading ? (
<p className="text-sm text-muted-foreground text-center py-4"> <div className="flex flex-col items-center justify-center py-12 text-muted-foreground animate-pulse">
No categories yet. Add your first category above. <FolderTree className="h-10 w-10 mb-3 opacity-20" />
</p> <p>Loading categories...</p>
</div>
) : rootCategories.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-muted-foreground border-2 border-dashed border-border/40 rounded-xl bg-muted/20">
<FolderTree className="h-10 w-10 mb-3 opacity-20" />
<p>No categories yet</p>
<p className="text-xs opacity-60 mt-1">Add your first category to get started</p>
</div>
) : ( ) : (
rootCategories.map(category => ( <div className="space-y-1">
<CategoryItem key={category._id} category={category} /> {rootCategories.map(category => (
)) <CategoryItem key={category._id} category={category} />
))}
</div>
)} )}
</div> </div>
</DndProvider> </DndProvider>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
{/* Delete Confirmation Dialog */} {/* Delete Confirmation Dialog */}
{categoryToDelete && ( <AlertDialog open={!!categoryToDelete} onOpenChange={() => setCategoryToDelete(null)}>
<AlertDialog open={!!categoryToDelete} onOpenChange={() => setCategoryToDelete(null)}> <AlertDialogContent>
<AlertDialogContent> <AlertDialogHeader>
<AlertDialogHeader> <AlertDialogTitle>Are you sure?</AlertDialogTitle>
<AlertDialogTitle>Are you sure?</AlertDialogTitle> <AlertDialogDescription>
<AlertDialogDescription> This will permanently delete the category <span className="font-medium text-foreground">"{categoryToDelete?.name}"</span>.
This will permanently delete the category "{categoryToDelete.name}". This action cannot be undone.
This action cannot be undone. </AlertDialogDescription>
</AlertDialogDescription> </AlertDialogHeader>
</AlertDialogHeader> <AlertDialogFooter>
<AlertDialogFooter> <AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogAction onClick={handleDeleteConfirm} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
<AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction> Delete Category
</AlertDialogFooter> </AlertDialogAction>
</AlertDialogContent> </AlertDialogFooter>
</AlertDialog> </AlertDialogContent>
)} </AlertDialog>
</div> </div>
</Layout> </Layout>
); );