Update page.tsx

app/dashboard/categories/page.tsx

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