Function CategoryManager

components/admin/category-manager.tsx:40–316

({ categories }: CategoryManagerProps)

}

export function CategoryManager({ categories }: CategoryManagerProps) {
  const [selectedCategory, setSelectedCategory] = useState<Category | null>(
    null,
  );
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);

  const handleCreate = async (_: ActionState | null, formData: FormData) => {
    const payload = {
      name: formData.get("name") as string,
      description: formData.get("description") as string,
      slug: formData.get("slug") as string,
      color: formData.get("color") as string,
      icon: formData.get("icon") as string,
    };
    return createCategory(null, payload);
  };

  const handleUpdate = async (_: ActionState | null, formData: FormData) => {
    const payload = {
      id: selectedCategory?.id as string,
      name: formData.get("name") as string,
      description: formData.get("description") as string,
      slug: formData.get("slug") as string,
      color: formData.get("color") as string,
      icon: formData.get("icon") as string,
    };
    return updateCategory(null, payload);
  };

  const handleDelete = async (_: ActionState | null, formData: FormData) => {
    return deleteCategory(null, { id: formData.get("id") as string });
  };

  const [createState, createAction] = useFormState(handleCreate, null);
  const [updateState, updateAction] = useFormState(handleUpdate, null);
  const [deleteState, deleteAction] = useFormState(handleDelete, null);

  // Handle form submission results
  if (createState?.success || updateState?.success || deleteState?.success) {
    toast.success("Category updated successfully!");
    window.location.reload(); // Refresh to show changes
  }

  if (createState?.error || updateState?.error || deleteState?.error) {
    toast.error(createState?.error || updateState?.error || deleteState?.error);
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h2 className="text-2xl font-bold">Categories</h2>
        <Dialog>
          <DialogTrigger asChild>
            <Button>
              <Plus className="mr-2 h-4 w-4" />
              Add Category
            </Button>