@goplusvn/core 0.1.0 → 0.1.1

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

@@ -0,0 +1,308 @@
+"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 "../../../ui";
+import { cn } from "../../../utils";
+
+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,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input as FormInput,
+  Textarea,
+} from "../../../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/components/settings/setting-dialogs.tsx

@@ -0,0 +1,197 @@
+"use client";
+
+import * as React from "react";
+import { AlertTriangle, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../../../ui/primitives/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../../ui/primitives/dialog";
+
+import type { SettingConfig } from "../../types";
+
+interface DeleteConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  setting: SettingConfig | null;
+  onSuccess: () => void;
+}
+
+export function DeleteConfirmDialog({
+  open,
+  onOpenChange,
+  setting,
+  onSuccess,
+}: DeleteConfirmDialogProps) {
+  const [loading, setLoading] = React.useState(false);
+
+  const handleDelete = async () => {
+    if (!setting) return;
+
+    setLoading(true);
+    try {
+      const res = await fetch("/api/admin/system/settings/delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ key: setting.key }),
+      });
+
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.error || "Failed to delete setting");
+      }
+
+      toast.success("Đã xóa cấu hình");
+      onOpenChange(false);
+      onSuccess();
+    } catch (error) {
+      console.error("Error deleting setting:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Không thể xóa cấu hình",
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <AlertTriangle className="h-5 w-5 text-destructive" />
+            Xác nhận xóa cấu hình
+          </DialogTitle>
+          <DialogDescription>
+            Bạn có chắc chắn muốn xóa cấu hình{" "}
+            <code className="font-mono text-sm bg-muted px-1 rounded">
+              {setting?.key}
+            </code>
+            ? Hành động này không thể hoàn tác.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            Hủy
+          </Button>
+          <Button
+            variant="destructive"
+            onClick={handleDelete}
+            disabled={loading}
+          >
+            {loading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            Xóa
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+interface SuspendConfirmDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  setting: SettingConfig | null;
+  onSuccess: () => void;
+}
+
+export function SuspendConfirmDialog({
+  open,
+  onOpenChange,
+  setting,
+  onSuccess,
+}: SuspendConfirmDialogProps) {
+  const [loading, setLoading] = React.useState(false);
+  const isActive = setting?.status === "active";
+
+  const handleToggle = async () => {
+    if (!setting) return;
+
+    setLoading(true);
+    try {
+      const newStatus = isActive ? "inactive" : "active";
+      const res = await fetch("/api/admin/system/settings/toggle-status", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ key: setting.key, status: newStatus }),
+      });
+
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.error || "Failed to update status");
+      }
+
+      toast.success(
+        isActive ? "Đã tạm ngưng cấu hình" : "Đã kích hoạt cấu hình",
+      );
+      onOpenChange(false);
+      onSuccess();
+    } catch (error) {
+      console.error("Error toggling setting status:", error);
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Không thể cập nhật trạng thái",
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>
+            {isActive ? "Tạm ngưng cấu hình" : "Kích hoạt cấu hình"}
+          </DialogTitle>
+          <DialogDescription>
+            {isActive ? (
+              <>
+                Bạn có chắc chắn muốn tạm ngưng cấu hình{" "}
+                <code className="font-mono text-sm bg-muted px-1 rounded">
+                  {setting?.key}
+                </code>
+                ? Cấu hình sẽ không còn hiệu lực trong hệ thống.
+              </>
+            ) : (
+              <>
+                Bạn có muốn kích hoạt lại cấu hình{" "}
+                <code className="font-mono text-sm bg-muted px-1 rounded">
+                  {setting?.key}
+                </code>
+                ?
+              </>
+            )}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            Hủy
+          </Button>
+          <Button
+            variant={isActive ? "destructive" : "default"}
+            onClick={handleToggle}
+            disabled={loading}
+          >
+            {loading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+            {isActive ? "Tạm ngưng" : "Kích hoạt"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}