@goplusvn/core 0.1.0 → 0.1.2

package/src/schemas/warehouse.schema.ts

@@ -0,0 +1,49 @@
+import { z } from "zod";
+
+import { STATUS_ACTIVE, STATUS_INACTIVE, STATUS_VALUES } from "../configs";
+
+/**
+ * Warehouse Validation Schema
+ */
+
+export const warehouseSchema = z.object({
+  code: z
+    .string()
+    .min(1, "Mã kho là bắt buộc")
+    .max(50, "Mã kho tối đa 50 ký tự")
+    .trim(),
+
+  name: z
+    .string()
+    .min(1, "Tên kho là bắt buộc")
+    .max(200, "Tên kho tối đa 200 ký tự")
+    .trim(),
+
+  address: z
+    .string()
+    .min(1, "Địa chỉ là bắt buộc")
+    .max(500, "Địa chỉ tối đa 500 ký tự")
+    .trim(),
+
+  description: z
+    .string()
+    .max(1000, "Mô tả tối đa 1000 ký tự")
+    .optional()
+    .or(z.literal(""))
+    .transform((val) => val || ""),
+
+  status: z.preprocess((val) => {
+    // Hỗ trợ boolean từ switch field (true -> active, false -> inactive)
+    if (typeof val === "boolean") {
+      return val ? STATUS_ACTIVE : STATUS_INACTIVE;
+    }
+    // Hỗ trợ cả Active/Inactive cũ và chuyển về lowercase
+    if (val === "Active" || val === "Inactive") {
+      return val === "Active" ? STATUS_ACTIVE : STATUS_INACTIVE;
+    }
+    return val;
+  }, z.enum(STATUS_VALUES).default(STATUS_ACTIVE)),
+});
+
+export type WarehouseInput = z.infer<typeof warehouseSchema>;
+export const warehouseUpdateSchema = warehouseSchema.partial();

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

@@ -0,0 +1,529 @@
+"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,
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Textarea,
+  Switch,
+  Checkbox,
+} from "../../../ui";
+
+interface CategoryListProps {
+  group: SystemCategoryGroup;
+  lang: string;
+}
+
+export function CategoryList({ group, lang }: 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/components/categories/category-manager.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { Search } from "lucide-react";
+
+import type { SystemCategoryGroup } from "../../types";
+import { Input } from "../../../ui";
+import { GroupSidebar } from "./group-sidebar";
+import { CategoryList } from "./category-list";
+
+interface CategoryManagerProps {
+  initialGroups: SystemCategoryGroup[];
+  lang: string;
+}
+
+export function CategoryManager({ initialGroups, lang }: CategoryManagerProps) {
+  const [groups, setGroups] = useState(initialGroups);
+  const [selectedGroup, setSelectedGroup] =
+    useState<SystemCategoryGroup | null>(groups.length > 0 ? groups[0] : null);
+  const [searchTerm, setSearchTerm] = useState("");
+
+  const filteredGroups = groups.filter(
+    (g) =>
+      g.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      g.code.toLowerCase().includes(searchTerm.toLowerCase()),
+  );
+
+  const handleCreate = (group: SystemCategoryGroup) => {
+    setGroups((prev) => [group, ...prev]);
+    setSelectedGroup(group);
+  };
+
+  const handleUpdate = (group: SystemCategoryGroup) => {
+    setGroups((prev) => prev.map((g) => (g.id === group.id ? group : g)));
+    if (selectedGroup?.id === group.id) {
+      setSelectedGroup(group);
+    }
+  };
+
+  const handleDelete = (groupId: string) => {
+    setGroups((prev) => prev.filter((g) => g.id !== groupId));
+    if (selectedGroup?.id === groupId) {
+      setSelectedGroup(null);
+    }
+  };
+
+  return (
+    <div className="flex h-[calc(100vh-4rem)] flex-col gap-4 p-4 md:flex-row">
+      <div className="flex w-full flex-col gap-4 md:w-80 lg:w-96">
+        <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..."
+            className="pl-8"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </div>
+
+        <div className="flex-1 rounded-lg border bg-card p-2 shadow-sm">
+          <GroupSidebar
+            groups={filteredGroups}
+            selectedGroup={selectedGroup}
+            onSelectGroup={setSelectedGroup}
+            onCreate={handleCreate}
+            onUpdate={handleUpdate}
+            onDelete={handleDelete}
+          />
+        </div>
+      </div>
+
+      <div className="flex-1 rounded-lg border bg-card p-6 shadow-sm">
+        {selectedGroup ? (
+          <CategoryList
+            key={selectedGroup.id}
+            group={selectedGroup}
+            lang={lang}
+          />
+        ) : (
+          <div className="flex h-full items-center justify-center text-muted-foreground">
+            {groups.length === 0
+              ? "Chưa có nhóm danh mục nào. Hãy tạo nhóm mới."
+              : "Chọn một nhóm để xem danh mục"}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}