@goplusvn/core 0.1.0 → 0.1.2

package/src/system/pages/components/categories/group-sidebar.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import { useState } from "react";
+import { MoreVertical, Plus, Pencil, Trash2, FolderOpen } from "lucide-react";
+import { toast } from "sonner";
+import type { SystemCategoryGroup } from "../../../types";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  ScrollArea,
+} from "@goerp/core/ui";
+import { cn } from "../../../../utils";
+// Assuming we'll implement these dialogs or use generic ones
+// For now, I'll assume we might use a generic form or specific dialogs
+// I'll leave placeholders for the logic or implementation
+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 {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input as FormInput,
+  Textarea,
+} from "@goerp/core/ui";
+import { systemCategoryGroupSchema } from "../../../schemas/system-category-group.schema";
+
+interface GroupSidebarProps {
+  groups: SystemCategoryGroup[];
+  selectedGroup: SystemCategoryGroup | null;
+  onSelectGroup: (group: SystemCategoryGroup) => void;
+  onUpdate: (group: SystemCategoryGroup) => void;
+  onCreate: (group: SystemCategoryGroup) => void;
+  onDelete: (groupId: string) => void;
+}
+
+export function GroupSidebar({
+  groups,
+  selectedGroup,
+  onSelectGroup,
+  onUpdate,
+  onCreate,
+  onDelete,
+}: GroupSidebarProps) {
+  const [isCreateOpen, setIsCreateOpen] = useState(false);
+  const [editingGroup, setEditingGroup] = useState<SystemCategoryGroup | null>(
+    null,
+  );
+
+  const handleDelete = async (group: SystemCategoryGroup) => {
+    if (!confirm("Bạn có chắc chắn muốn xóa nhóm này không?")) return;
+
+    try {
+      const res = await fetch(`/api/system-category-groups?id=${group.id}`, {
+        method: "DELETE",
+      });
+
+      if (!res.ok) throw new Error("Failed to delete group");
+
+      onDelete(group.id);
+      toast.success("Đã xóa nhóm danh mục thành công");
+    } catch (error) {
+      toast.error("Xóa nhóm danh mục thất bại");
+      console.error(error);
+    }
+  };
+
+  return (
+    <>
+      <ScrollArea className="h-full flex-1">
+        <div className="flex flex-col gap-1 pr-4">
+          {groups.map((group) => (
+            <div
+              key={group.id}
+              className={cn(
+                "group flex cursor-pointer items-center justify-between rounded-md px-3 py-2 text-sm transition-colors hover:bg-muted/50",
+                selectedGroup?.id === group.id
+                  ? "bg-primary/10 font-medium text-primary hover:bg-primary/20"
+                  : "text-muted-foreground",
+              )}
+              onClick={() => onSelectGroup(group)}
+            >
+              <div className="flex items-center gap-2 overflow-hidden">
+                <FolderOpen className="h-4 w-4 shrink-0" />
+                <span className="truncate">{group.name}</span>
+              </div>
+
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-6 w-6 opacity-0 transition-opacity group-hover:opacity-100"
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    <MoreVertical className="h-3 w-3" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      setEditingGroup(group);
+                    }}
+                  >
+                    <Pencil className="mr-2 h-4 w-4" />
+                    Chỉnh sửa
+                  </DropdownMenuItem>
+                  <DropdownMenuItem
+                    className="text-destructive focus:text-destructive"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDelete(group);
+                    }}
+                  >
+                    <Trash2 className="mr-2 h-4 w-4" />
+                    Xóa
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          ))}
+
+          {groups.length === 0 && (
+            <div className="py-4 text-center text-sm text-muted-foreground">
+              Không tìm thấy nhóm nào
+            </div>
+          )}
+        </div>
+      </ScrollArea>
+
+      <div className="pt-4">
+        <Button className="w-full" onClick={() => setIsCreateOpen(true)}>
+          <Plus className="mr-2 h-4 w-4" />
+          Thêm nhóm mới
+        </Button>
+      </div>
+
+      <GroupDialog
+        mode="create"
+        open={isCreateOpen}
+        onOpenChange={setIsCreateOpen}
+        onSuccess={(group) => {
+          onCreate(group);
+          setIsCreateOpen(false);
+        }}
+      />
+
+      {editingGroup && (
+        <GroupDialog
+          mode="edit"
+          open={!!editingGroup}
+          onOpenChange={(open) => !open && setEditingGroup(null)}
+          group={editingGroup}
+          onSuccess={(group) => {
+            onUpdate(group);
+            setEditingGroup(null);
+          }}
+        />
+      )}
+    </>
+  );
+}
+
+// Internal Dialog Component for Create/Edit
+interface GroupDialogProps {
+  mode: "create" | "edit";
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  group?: SystemCategoryGroup;
+  onSuccess: (group: SystemCategoryGroup) => void;
+}
+
+function GroupDialog({
+  mode,
+  open,
+  onOpenChange,
+  group,
+  onSuccess,
+}: GroupDialogProps) {
+  const form = useForm<z.infer<typeof systemCategoryGroupSchema>>({
+    resolver: zodResolver(systemCategoryGroupSchema),
+    defaultValues: {
+      code: group?.code || "",
+      name: group?.name || "",
+      description: group?.description || "",
+      status: group?.status === "inactive" ? "inactive" : "active",
+    },
+  });
+
+  const onSubmit: SubmitHandler<
+    z.infer<typeof systemCategoryGroupSchema>
+  > = async (values) => {
+    try {
+      const url =
+        mode === "create"
+          ? "/api/system-category-groups"
+          : `/api/system-category-groups?id=${group?.id}`;
+      const method = mode === "create" ? "POST" : "PUT"; // Or PATCH depending on API
+
+      // Adjust payload if needed (e.g. wrapper or direct)
+      const payload = mode === "edit" ? { ...values, id: group?.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 nhóm danh mục thành công"
+          : "Cập nhật nhóm danh mục thành công",
+      );
+      onSuccess(data); // Check if API returns the full object
+      form.reset();
+    } 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 nhóm danh mục"
+              : "Chỉnh sửa nhóm danh mục"}
+          </DialogTitle>
+        </DialogHeader>
+
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <FormField
+              control={form.control}
+              name="code"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Mã nhóm</FormLabel>
+                  <FormControl>
+                    <FormInput
+                      placeholder="Nhập mã nhóm (ví dụ: USER_TYPE)"
+                      {...field}
+                      disabled={mode === "edit"}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Tên nhóm</FormLabel>
+                  <FormControl>
+                    <FormInput placeholder="Nhập tên nhóm" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name="description"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Mô tả</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Mô tả chi tiết" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </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/settings/sales-rules-settings.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { toast } from "sonner";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Label,
+  Input,
+  Switch,
+  Button,
+  Badge,
+  Alert,
+  AlertDescription,
+} from "../../../../ui";
+import { globalError } from "../../../../ui/feedback/error-dialog";
+import { Settings, DollarSign, Save, RefreshCw } from "lucide-react";
+import type { SalesRulesSettings } from "../../../services/settings-service";
+
+interface SalesRulesSettingsProps {
+  initialSettings?: SalesRulesSettings;
+}
+
+const DEFAULT_SETTINGS: SalesRulesSettings = {
+  paymentRequiredThreshold: 10000000,
+  paymentThresholdEnabled: true,
+  requiredCustomerFields: ["name", "phone", "idNumber"],
+};
+
+export function SalesRulesSettingsComponent({
+  initialSettings,
+}: SalesRulesSettingsProps) {
+  const [settings, setSettings] = useState<SalesRulesSettings>(
+    initialSettings || DEFAULT_SETTINGS,
+  );
+  const [loading, setLoading] = useState(false);
+  const [dirty, setDirty] = useState(false);
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      const res = await fetch("/api/settings/sales-rules");
+      if (res.ok) {
+        const data = await res.json();
+        setSettings(data);
+      }
+    } catch (e) {
+      console.error("Error loading settings:", e);
+    }
+  };
+
+  const handleSave = async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/settings/sales-rules", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(settings),
+      });
+
+      if (!res.ok) throw new Error("Lỗi lưu cấu hình");
+
+      toast.success("Đã lưu cấu hình thành công");
+      setDirty(false);
+    } catch (e: unknown) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      globalError.emit({
+        title: "Lỗi lưu cấu hình",
+        description: error.message || "Đã xảy ra lỗi không xác định",
+        trace: error.stack,
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const updateSetting = <K extends keyof SalesRulesSettings>(
+    key: K,
+    value: SalesRulesSettings[K],
+  ) => {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+    setDirty(true);
+  };
+
+  const formatCurrency = (value: number) => {
+    return new Intl.NumberFormat("vi-VN").format(value);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Payment Threshold Rule */}
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div>
+              <CardTitle className="flex items-center gap-2">
+                <DollarSign className="h-5 w-5 text-green-600" />
+                Quy tắc thanh toán trước
+              </CardTitle>
+              <CardDescription>
+                Yêu cầu thanh toán trước khi tạo đơn đặt hàng cho đơn có giá trị
+                dưới ngưỡng quy định
+              </CardDescription>
+            </div>
+            <Switch
+              checked={settings.paymentThresholdEnabled}
+              onCheckedChange={(checked) =>
+                updateSetting("paymentThresholdEnabled", checked)
+              }
+            />
+          </div>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="threshold">Ngưỡng giá trị đơn hàng (VND)</Label>
+            <div className="flex items-center gap-4">
+              <Input
+                id="threshold"
+                type="number"
+                step={1000000}
+                min={0}
+                value={settings.paymentRequiredThreshold}
+                onChange={(e) =>
+                  updateSetting(
+                    "paymentRequiredThreshold",
+                    Number(e.target.value),
+                  )
+                }
+                disabled={!settings.paymentThresholdEnabled}
+                className="max-w-xs"
+              />
+              <span className="text-sm text-muted-foreground">
+                = {formatCurrency(settings.paymentRequiredThreshold)} đ
+              </span>
+            </div>
+            <p className="text-sm text-muted-foreground">
+              Đơn hàng dưới {formatCurrency(settings.paymentRequiredThreshold)}{" "}
+              VND sẽ yêu cầu thanh toán trước khi tạo đơn đặt hàng.
+            </p>
+          </div>
+
+          {settings.paymentThresholdEnabled && (
+            <Alert>
+              <Settings className="h-4 w-4" />
+              <AlertDescription>
+                Người dùng có quyền{" "}
+                <code className="bg-muted px-1 rounded">
+                  sales-orders:create-without-payment
+                </code>{" "}
+                có thể bỏ qua quy tắc này.
+              </AlertDescription>
+            </Alert>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Required Customer Fields */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Settings className="h-5 w-5 text-blue-600" />
+            Thông tin khách hàng bắt buộc
+          </CardTitle>
+          <CardDescription>
+            Các trường thông tin khách hàng cần có để tạo hóa đơn và hợp đồng
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex flex-wrap gap-2">
+            {["name", "phone", "idNumber", "email", "address"].map((field) => {
+              const isRequired =
+                settings.requiredCustomerFields.includes(field);
+              const fieldLabels: Record<string, string> = {
+                name: "Họ tên",
+                phone: "Số điện thoại",
+                idNumber: "CCCD",
+                email: "Email",
+                address: "Địa chỉ",
+              };
+              return (
+                <Badge
+                  key={field}
+                  variant={isRequired ? "default" : "outline"}
+                  className="cursor-pointer"
+                  onClick={() => {
+                    const newFields = isRequired
+                      ? settings.requiredCustomerFields.filter(
+                          (f) => f !== field,
+                        )
+                      : [...settings.requiredCustomerFields, field];
+                    updateSetting("requiredCustomerFields", newFields);
+                  }}
+                >
+                  {fieldLabels[field]}
+                  {isRequired ? " ✓" : ""}
+                </Badge>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Save Button */}
+      <div className="flex items-center justify-end gap-2">
+        <Button variant="outline" onClick={loadSettings} disabled={loading}>
+          <RefreshCw className="mr-2 h-4 w-4" />
+          Làm mới
+        </Button>
+        <Button onClick={handleSave} disabled={loading || !dirty}>
+          <Save className="mr-2 h-4 w-4" />
+          {loading ? "Đang lưu..." : "Lưu cấu hình"}
+        </Button>
+      </div>
+    </div>
+  );
+}