add auth moodule

app/components/CategoryModal.tsx

@@ -0,0 +1,50 @@
+// export function CategoryModal({
+//     open,
+//     onClose,
+//     form,
+//     setForm,
+//     onSave,
+//   }: any) {
+//     if (!open) return null;
+  
+//     return (
+//       <div className="fixed inset-0 bg-black/30 flex items-center justify-center">
+        
+//         <div className="bg-white p-5 rounded-xl w-[400px]">
+  
+//           <h2 className="font-semibold mb-3">
+//             {form.id ? "Edit Category" : "New Category"}
+//           </h2>
+  
+//           <input
+//             className="w-full border p-2 rounded mb-2"
+//             placeholder="Name"
+//             value={form.name}
+//             onChange={(e) =>
+//               setForm({ ...form, name: e.target.value })
+//             }
+//           />
+  
+//           <input
+//             className="w-full border p-2 rounded mb-3"
+//             placeholder="Slug (auto)"
+//             value={form.slug}
+//             onChange={(e) =>
+//               setForm({ ...form, slug: e.target.value })
+//             }
+//           />
+  
+//           <div className="flex justify-end gap-2">
+//             <button onClick={onClose}>Cancel</button>
+  
+//             <button
+//               onClick={onSave}
+//               className="bg-blue-600 text-white px-3 py-1 rounded"
+//             >
+//               Save
+//             </button>
+//           </div>
+//         </div>
+//       </div>
+//     );
+//   }

app/components/CategoryTree.tsx

@@ -0,0 +1,116 @@
+// "use client";
+
+// import React, { useState } from "react";
+// import {
+//   FolderTree,
+//   Edit3,
+//   Trash2,
+//   Plus,
+//   ChevronRight,
+//   ChevronDown,
+// } from "lucide-react";
+// import { Category } from "@/lib/categories.api";
+
+// export function CategoryTree({
+//   nodes,
+//   onEdit,
+//   onDelete,
+//   onAddChild,
+// }: {
+//   nodes: Category[];
+//   onEdit: (c: Category) => void;
+//   onDelete: (id: string) => void;
+//   onAddChild: (parentId: string) => void;
+// }) {
+//   return (
+//     <div>
+//       {nodes.map((node) => (
+//         <TreeNode
+//           key={node.id}
+//           node={node}
+//           onEdit={onEdit}
+//           onDelete={onDelete}
+//           onAddChild={onAddChild}
+//         />
+//       ))}
+//     </div>
+//   );
+// }
+
+// function TreeNode({
+//   node,
+//   onEdit,
+//   onDelete,
+//   onAddChild,
+// }: {
+//   node: Category;
+//   onEdit: (c: Category) => void;
+//   onDelete: (id: string) => void;
+//   onAddChild: (parentId: string) => void;
+// }) {
+//   const [open, setOpen] = useState(true);
+
+//   return (
+//     <div className="ml-2 border-l pl-3">
+
+//       {/* NODE ROW */}
+//       <div className="flex items-center justify-between py-2 group">
+
+//         <div className="flex items-center gap-2">
+          
+//           <button onClick={() => setOpen(!open)}>
+//             {open ? (
+//               <ChevronDown size={14} />
+//             ) : (
+//               <ChevronRight size={14} />
+//             )}
+//           </button>
+
+//           <FolderTree size={14} className="text-blue-500" />
+
+//           {/* INLINE EDIT TRIGGER */}
+//           <span
+//             onClick={() => onEdit(node)}
+//             className="text-sm font-medium cursor-pointer hover:text-blue-600"
+//           >
+//             {node.name}
+//           </span>
+//         </div>
+
+//         {/* ACTIONS (SHOW ON HOVER) */}
+//         <div className="flex gap-2 opacity-0 group-hover:opacity-100 transition">
+
+//           <button
+//             onClick={() => onAddChild(node.id)}
+//             className="text-green-600"
+//           >
+//             <Plus size={14} />
+//           </button>
+
+//           <button onClick={() => onEdit(node)}>
+//             <Edit3 size={14} />
+//           </button>
+
+//           <button onClick={() => onDelete(node.id)}>
+//             <Trash2 size={14} className="text-red-500" />
+//           </button>
+//         </div>
+//       </div>
+
+//       {/* CHILDREN */}
+//       {open && node.children?.length ? (
+//         <div>
+//           {node.children.map((child) => (
+//             <TreeNode
+//               key={child.id}
+//               node={child}
+//               onEdit={onEdit}
+//               onDelete={onDelete}
+//               onAddChild={onAddChild}
+//             />
+//           ))}
+//         </div>
+//       ) : null}
+//     </div>
+//   );
+// }