@goplusvn/core 0.1.0 → 0.1.2

package/src/system/pages/components/categories/category-list.tsx

@@ -0,0 +1,537 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import { Plus, Pencil, Trash2, Search } from "lucide-react";
+import { toast } from "sonner";
+import { useForm } from "react-hook-form";
+import type { SubmitHandler } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type * as z from "zod";
+
+import type { SystemCategoryGroup, SystemCategory } from "../../../types";
+import { systemCategorySchema } from "../../../schemas/system-category.schema";
+
+import {
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Badge,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Textarea,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+  Checkbox,
+} from "@goerp/core/ui";
+
+interface CategoryListProps {
+  group: SystemCategoryGroup;
+}
+
+export function CategoryList({ group }: CategoryListProps) {
+  const [categories, setCategories] = useState<SystemCategory[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [editingCategory, setEditingCategory] = useState<SystemCategory | null>(
+    null,
+  );
+
+  // New State for Search and Selection
+  const [searchQuery, setSearchQuery] = useState("");
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+
+  const fetchCategories = useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const res = await fetch(
+        `/api/system-categories?groupCode=${group.code}&pageSize=100`,
+      );
+      if (!res.ok) throw new Error("Failed to fetch categories");
+      const data = await res.json();
+      setCategories(data.items || []);
+    } catch (error) {
+      console.error(error);
+      toast.error("Không thể tải danh sách danh mục");
+    } finally {
+      setIsLoading(false);
+      setSelectedIds(new Set()); // Reset selection on refresh
+    }
+  }, [group.code]);
+
+  useEffect(() => {
+    fetchCategories();
+  }, [fetchCategories]);
+
+  // Filter categories
+  const filteredCategories = categories
+    .filter(
+      (c) =>
+        c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        c.code.toLowerCase().includes(searchQuery.toLowerCase()),
+    )
+    .sort((a, b) => (a.order || 0) - (b.order || 0)); // Sort by order by default
+
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedIds(new Set(filteredCategories.map((c) => c.id)));
+    } else {
+      setSelectedIds(new Set());
+    }
+  };
+
+  const handleSelectRow = (id: string, checked: boolean) => {
+    const newSelected = new Set(selectedIds);
+    if (checked) {
+      newSelected.add(id);
+    } else {
+      newSelected.delete(id);
+    }
+    setSelectedIds(newSelected);
+  };
+
+  const handleDelete = async (category: SystemCategory) => {
+    if (!confirm("Bạn có chắc chắn muốn xóa danh mục này không?")) return;
+
+    try {
+      const res = await fetch(`/api/system-categories?id=${category.id}`, {
+        method: "DELETE",
+      });
+
+      if (!res.ok) throw new Error("Failed to delete category");
+
+      setCategories((prev) => prev.filter((c) => c.id !== category.id));
+      toast.success("Đã xóa danh mục thành công");
+    } catch (error) {
+      console.error(error);
+      toast.error("Xóa danh mục thất bại");
+    }
+  };
+
+  const handleBulkDelete = async () => {
+    if (selectedIds.size === 0) return;
+    if (
+      !confirm(
+        `Bạn có chắc chắn muốn xóa ${selectedIds.size} danh mục đã chọn?`,
+      )
+    )
+      return;
+
+    // Implement bulk delete logic (simulated with multiple calls for now, ideally API supports bulk id list)
+    // Assuming API supports single delete, we loop. Optimistically UI updates.
+    try {
+      await Promise.all(
+        Array.from(selectedIds).map((id) =>
+          fetch(`/api/system-categories?id=${id}`, { method: "DELETE" }),
+        ),
+      );
+
+      setCategories((prev) => prev.filter((c) => !selectedIds.has(c.id)));
+      setSelectedIds(new Set());
+      toast.success("Đã xóa các danh mục đã chọn");
+    } catch (error) {
+      toast.error("Có lỗi xảy ra khi xóa nhiều danh mục");
+    }
+  };
+
+  const handleCreateSuccess = (newCategory: SystemCategory) => {
+    setCategories((prev) => [newCategory, ...prev]);
+    setIsCreateOpen(false);
+  };
+
+  const handleUpdateSuccess = (updatedCategory: SystemCategory) => {
+    setCategories((prev) =>
+      prev.map((c) => (c.id === updatedCategory.id ? updatedCategory : c)),
+    );
+    setEditingCategory(null);
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Redesigned Header */}
+      <div className="mb-4 flex flex-col gap-4 border-b pb-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h2 className="text-xl font-bold">{group.name}</h2>
+          <p className="text-sm text-muted-foreground">{group.description}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="relative w-full sm:w-64">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+            <Input
+              placeholder="Tìm kiếm danh mục..."
+              className="pl-8"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+            />
+          </div>
+          <Button onClick={() => setIsCreateOpen(true)}>
+            <Plus className="mr-2 h-4 w-4" />
+            Thêm mới
+          </Button>
+        </div>
+      </div>
+
+      {/* Bulk Action Bar */}
+      {selectedIds.size > 0 && (
+        <div className="mb-2 flex items-center gap-2 rounded-md bg-muted p-2 text-sm">
+          <span className="font-medium text-muted-foreground">
+            Đã chọn {selectedIds.size} mục
+          </span>
+          <div className="ml-auto flex gap-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8 text-destructive hover:text-destructive hover:bg-destructive/10"
+              onClick={handleBulkDelete}
+            >
+              <Trash2 className="mr-2 h-4 w-4" />
+              Xóa đã chọn
+            </Button>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-8"
+              onClick={() => setSelectedIds(new Set())}
+            >
+              Hủy chọn
+            </Button>
+          </div>
+        </div>
+      )}
+
+      <div className="flex-1 overflow-auto rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[40px]">
+                <Checkbox
+                  checked={
+                    filteredCategories.length > 0 &&
+                    selectedIds.size === filteredCategories.length
+                  }
+                  onCheckedChange={(checked) => handleSelectAll(!!checked)}
+                />
+              </TableHead>
+              <TableHead className="w-[80px]">Mã</TableHead>
+              <TableHead>Tên danh mục</TableHead>
+              <TableHead className="w-[100px] text-center">Thứ tự</TableHead>
+              <TableHead className="w-[120px]">Trạng thái</TableHead>
+              <TableHead className="w-[100px] text-right">Hành động</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {isLoading ? (
+              <TableRow>
+                <TableCell colSpan={6} className="text-center py-8">
+                  Đang tải...
+                </TableCell>
+              </TableRow>
+            ) : filteredCategories.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  colSpan={6}
+                  className="text-center py-8 text-muted-foreground"
+                >
+                  {searchQuery
+                    ? "Không tìm thấy kết quả"
+                    : "Chưa có danh mục nào trong nhóm này"}
+                </TableCell>
+              </TableRow>
+            ) : (
+              filteredCategories.map((category) => (
+                <TableRow
+                  key={category.id}
+                  className={selectedIds.has(category.id) ? "bg-muted/50" : ""}
+                >
+                  <TableCell>
+                    <Checkbox
+                      checked={selectedIds.has(category.id)}
+                      onCheckedChange={(checked) =>
+                        handleSelectRow(category.id, !!checked)
+                      }
+                    />
+                  </TableCell>
+                  <TableCell className="font-medium">{category.code}</TableCell>
+                  <TableCell>
+                    <div className="font-medium">{category.name}</div>
+                    {category.description && (
+                      <div className="text-xs text-muted-foreground truncate max-w-[300px]">
+                        {category.description}
+                      </div>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-center">
+                    <Badge variant="outline" className="font-mono">
+                      {category.order ?? 0}
+                    </Badge>
+                  </TableCell>
+                  <TableCell>
+                    <Badge
+                      variant={
+                        category.status === "active" ? "default" : "secondary"
+                      }
+                    >
+                      {category.status === "active" ? "Hoạt động" : "Ngừng HĐ"}
+                    </Badge>
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8"
+                        onClick={() => setEditingCategory(category)}
+                      >
+                        <Pencil className="h-4 w-4" />
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="icon"
+                        className="h-8 w-8 text-destructive hover:text-destructive"
+                        onClick={() => handleDelete(category)}
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <CategoryDialog
+        mode="create"
+        open={isCreateOpen}
+        onOpenChange={setIsCreateOpen}
+        groupCode={group.code}
+        onSuccess={handleCreateSuccess}
+      />
+
+      {editingCategory && (
+        <CategoryDialog
+          mode="edit"
+          open={!!editingCategory}
+          onOpenChange={(open) => !open && setEditingCategory(null)}
+          groupCode={group.code}
+          category={editingCategory}
+          onSuccess={handleUpdateSuccess}
+        />
+      )}
+    </div>
+  );
+}
+
+// Dialog Component
+interface CategoryDialogProps {
+  mode: "create" | "edit";
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  groupCode: string;
+  category?: SystemCategory;
+  onSuccess: (category: SystemCategory) => void;
+}
+
+function CategoryDialog({
+  mode,
+  open,
+  onOpenChange,
+  groupCode,
+  category,
+  onSuccess,
+}: CategoryDialogProps) {
+  const form = useForm<z.infer<typeof systemCategorySchema>>({
+    resolver: zodResolver(systemCategorySchema),
+    defaultValues: {
+      code: category?.code || "",
+      name: category?.name || "",
+      groupCode: groupCode,
+      description: category?.description || "",
+      status: category?.status === "inactive" ? "inactive" : "active",
+      order: category?.order || 0,
+    },
+  });
+
+  // Reset form when opening create mode to ensure groupCode is set correctly if switching groups
+  useEffect(() => {
+    if (open && mode === "create") {
+      form.reset({
+        code: "",
+        name: "",
+        groupCode: groupCode,
+        description: "",
+        status: "active",
+        order: 0,
+      });
+    }
+  }, [open, mode, groupCode, form]);
+
+  const onSubmit: SubmitHandler<z.infer<typeof systemCategorySchema>> = async (
+    values,
+  ) => {
+    try {
+      const url =
+        mode === "create"
+          ? "/api/system-categories"
+          : `/api/system-categories?id=${category?.id}`;
+      const method = mode === "create" ? "POST" : "PUT";
+
+      const payload =
+        mode === "edit" ? { ...values, id: category?.id } : values;
+
+      const res = await fetch(url, {
+        method,
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(payload),
+      });
+
+      if (!res.ok) {
+        const errorData = await res.json();
+        throw new Error(errorData.message || "Action failed");
+      }
+
+      const data = await res.json();
+      toast.success(
+        mode === "create"
+          ? "Tạo danh mục thành công"
+          : "Cập nhật danh mục thành công",
+      );
+      onSuccess(data);
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Có lỗi xảy ra");
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {mode === "create" ? "Thêm danh mục" : "Chỉnh sửa danh mục"}
+          </DialogTitle>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <div className="grid grid-cols-2 gap-4">
+              <FormField
+                control={form.control}
+                name="code"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Mã danh mục</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="Nhập mã"
+                        {...field}
+                        disabled={mode === "edit"}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name="order"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Thứ tự</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        {...field}
+                        onChange={(e) => field.onChange(e.target.valueAsNumber)}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Tên danh mục</FormLabel>
+                  <FormControl>
+                    <Input placeholder="Nhập tên danh mục" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Mô tả</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Mô tả danh mục" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="status"
+              render={({ field }) => (
+                <FormItem className="flex items-center justify-between rounded-lg border p-3 shadow-sm">
+                  <div className="space-y-0.5">
+                    <FormLabel>Trạng thái</FormLabel>
+                  </div>
+                  <FormControl>
+                    <Switch
+                      checked={field.value === "active"}
+                      onCheckedChange={(checked) =>
+                        field.onChange(checked ? "active" : "inactive")
+                      }
+                    />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+
+            <div className="flex justify-end gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
+                Hủy
+              </Button>
+              <Button type="submit">Lưu</Button>
+            </div>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/system/pages/components/categories/category-manager.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useState } from "react";
+import { Search } from "lucide-react";
+
+import type { SystemCategoryGroup } from "../../../types";
+import { Input } from "@goerp/core/ui";
+import { GroupSidebar } from "./group-sidebar";
+import { CategoryList } from "./category-list";
+
+interface CategoryManagerProps {
+  initialGroups: SystemCategoryGroup[];
+}
+
+export function CategoryManager({ initialGroups }: CategoryManagerProps) {
+  const [selectedGroup, setSelectedGroup] =
+    useState<SystemCategoryGroup | null>(initialGroups[0] || null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [groups, setGroups] = useState<SystemCategoryGroup[]>(initialGroups);
+
+  const handleGroupUpdate = (updatedGroup: SystemCategoryGroup) => {
+    setGroups((prev) =>
+      prev.map((g) => (g.id === updatedGroup.id ? updatedGroup : g)),
+    );
+    if (selectedGroup?.id === updatedGroup.id) {
+      setSelectedGroup(updatedGroup);
+    }
+  };
+
+  const handleGroupCreate = (newGroup: SystemCategoryGroup) => {
+    setGroups((prev) => [newGroup, ...prev]);
+    setSelectedGroup(newGroup);
+  };
+
+  const handleGroupDelete = (groupId: string) => {
+    setGroups((prev) => prev.filter((g) => g.id !== groupId));
+    if (selectedGroup?.id === groupId) {
+      setSelectedGroup(groups.find((g) => g.id !== groupId) || null);
+    }
+  };
+
+  // Filter groups based on search query
+  const filteredGroups = groups.filter((group) =>
+    group.name.toLowerCase().includes(searchQuery.toLowerCase()),
+  );
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-4 p-4 md:flex-row">
+      {/* Sidebar - Groups */}
+      <div className="flex w-full flex-col gap-4 rounded-lg border bg-card p-4 shadow-sm md:w-1/4">
+        <div className="flex items-center gap-2">
+          <h2 className="text-lg font-semibold">Nhóm danh mục</h2>
+        </div>
+
+        <div className="relative">
+          <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Tìm kiếm nhóm..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            className="pl-8"
+          />
+        </div>
+
+        <GroupSidebar
+          groups={filteredGroups}
+          selectedGroup={selectedGroup}
+          onSelectGroup={setSelectedGroup}
+          onUpdate={handleGroupUpdate}
+          onCreate={handleGroupCreate}
+          onDelete={handleGroupDelete}
+        />
+      </div>
+
+      {/* Main Content - Categories */}
+      <div className="flex flex-1 flex-col gap-4 rounded-lg border bg-card p-4 shadow-sm">
+        {selectedGroup ? (
+          <CategoryList
+            group={selectedGroup}
+            key={selectedGroup.id} // Re-mount when group changes to reset state if needed
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center text-muted-foreground">
+            Chọn một nhóm danh mục để xem chi tiết
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}