@goplusvn/core 0.1.0 → 0.1.2

package/src/system/pages/components/settings/system-settings.tsx

@@ -0,0 +1,244 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../../../../ui/primitives/card";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "../../../../ui/primitives/tabs";
+import { Button } from "../../../../ui/primitives/button";
+import { Input } from "../../../../ui/primitives/input";
+import { Label } from "../../../../ui/primitives/label";
+import { Switch } from "../../../../ui/primitives/switch";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+
+interface AuditSettings {
+  retentionDays: number;
+  enabledResources: string[];
+}
+
+interface NotificationSettings {
+  retentionDays: number;
+  channels: {
+    email: boolean;
+    inApp: boolean;
+    telegram: boolean;
+  };
+}
+
+export function SystemSettings() {
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [auditSettings, setAuditSettings] = useState<AuditSettings | null>(
+    null,
+  );
+  const [notifySettings, setNotifySettings] =
+    useState<NotificationSettings | null>(null);
+
+  useEffect(() => {
+    fetch("/api/admin/system/settings")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.data) {
+          setAuditSettings(data.data.audit);
+          setNotifySettings(data.data.notification);
+        }
+      })
+      .catch(() => toast.error("Failed to load settings"))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const saveAuditSettings = async () => {
+    if (!auditSettings) return;
+    setSaving(true);
+    try {
+      const res = await fetch("/api/admin/system/settings", {
+        method: "POST",
+        body: JSON.stringify({ type: "audit", settings: auditSettings }),
+      });
+      if (res.ok) toast.success("Audit settings saved");
+      else throw new Error();
+    } catch {
+      toast.error("Failed to save audit settings");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const saveNotifySettings = async () => {
+    if (!notifySettings) return;
+    setSaving(true);
+    try {
+      const res = await fetch("/api/admin/system/settings", {
+        method: "POST",
+        body: JSON.stringify({
+          type: "notification",
+          settings: notifySettings,
+        }),
+      });
+      if (res.ok) toast.success("Notification settings saved");
+      else throw new Error();
+    } catch {
+      toast.error("Failed to save notification settings");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading)
+    return (
+      <div className="flex justify-center p-8">
+        <Loader2 className="animate-spin h-8 w-8 text-muted-foreground" />
+      </div>
+    );
+
+  return (
+    <Tabs defaultValue="audit" className="w-full">
+      <TabsList>
+        <TabsTrigger value="audit">Audit Logging</TabsTrigger>
+        <TabsTrigger value="notification">Notifications</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="audit" className="space-y-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Audit Log Configuration</CardTitle>
+            <CardDescription>
+              Control how long audit logs are kept and what events are recorded.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-2">
+              <Label htmlFor="retention">Retention Period (Days)</Label>
+              <Input
+                id="retention"
+                type="number"
+                value={auditSettings?.retentionDays || 90}
+                onChange={(e) =>
+                  setAuditSettings((prev) =>
+                    prev
+                      ? { ...prev, retentionDays: parseInt(e.target.value) }
+                      : null,
+                  )
+                }
+              />
+            </div>
+
+            <div className="flex items-center space-x-2">
+              {/* Placeholder for resource selection - for now just informative */}
+              <span className="text-sm text-muted-foreground">
+                Currently logging all resources ('*'). Granular resource
+                selection coming soon.
+              </span>
+            </div>
+
+            <Button onClick={saveAuditSettings} disabled={saving}>
+              {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Save Changes
+            </Button>
+          </CardContent>
+        </Card>
+      </TabsContent>
+
+      <TabsContent value="notification" className="space-y-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Notification System</CardTitle>
+            <CardDescription>
+              Configure notification channels and cleanup policies.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="grid gap-2">
+              <Label htmlFor="notify-retention">Retention Period (Days)</Label>
+              <Input
+                id="notify-retention"
+                type="number"
+                value={notifySettings?.retentionDays || 30}
+                onChange={(e) =>
+                  setNotifySettings((prev) =>
+                    prev
+                      ? { ...prev, retentionDays: parseInt(e.target.value) }
+                      : null,
+                  )
+                }
+              />
+            </div>
+
+            <div className="space-y-4 border rounded p-4">
+              <h4 className="font-medium text-sm">Active Channels</h4>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="channel-inapp">In-App Notifications</Label>
+                <Switch
+                  id="channel-inapp"
+                  checked={notifySettings?.channels.inApp}
+                  onCheckedChange={(checked) =>
+                    setNotifySettings((prev) =>
+                      prev
+                        ? {
+                            ...prev,
+                            channels: { ...prev.channels, inApp: checked },
+                          }
+                        : null,
+                    )
+                  }
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="channel-email">Email Notifications</Label>
+                <Switch
+                  id="channel-email"
+                  checked={notifySettings?.channels.email}
+                  onCheckedChange={(checked) =>
+                    setNotifySettings((prev) =>
+                      prev
+                        ? {
+                            ...prev,
+                            channels: { ...prev.channels, email: checked },
+                          }
+                        : null,
+                    )
+                  }
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <Label htmlFor="channel-telegram">Telegram Notifications</Label>
+                <Switch
+                  id="channel-telegram"
+                  checked={notifySettings?.channels.telegram}
+                  onCheckedChange={(checked) =>
+                    setNotifySettings((prev) =>
+                      prev
+                        ? {
+                            ...prev,
+                            channels: { ...prev.channels, telegram: checked },
+                          }
+                        : null,
+                    )
+                  }
+                />
+              </div>
+            </div>
+
+            <Button onClick={saveNotifySettings} disabled={saving}>
+              {saving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Save Changes
+            </Button>
+          </CardContent>
+        </Card>
+      </TabsContent>
+    </Tabs>
+  );
+}

package/src/system/pages/system-category-page.tsx

@@ -0,0 +1,15 @@
+"use client";
+
+import * as React from "react";
+import { CategoryManager } from "./components/categories/category-manager";
+import type { SystemCategoryGroup } from "../types";
+
+interface SystemCategoryPageProps {
+  initialGroups: SystemCategoryGroup[];
+}
+
+export function SystemCategoryPage({
+  initialGroups,
+}: SystemCategoryPageProps) {
+  return <CategoryManager initialGroups={initialGroups} />;
+}

package/src/system/pages/system-settings-page.tsx

@@ -0,0 +1,380 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { Loader2, RefreshCw, Plus } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "../../utils";
+import { Button } from "../../ui";
+
+import { SETTINGS_GROUPS } from "./components/settings/settings-groups";
+import { SettingsSidebar } from "./components/settings/settings-sidebar";
+import { SettingsSearch } from "./components/settings/settings-search";
+import { SettingsSection } from "./components/settings/settings-section";
+import { SettingField } from "./components/settings/setting-field";
+import type { SettingConfig } from "../types";
+import { SettingFormDialog } from "./components/settings/setting-form-dialog";
+import {
+  DeleteConfirmDialog,
+  SuspendConfirmDialog,
+} from "./components/settings/setting-dialogs";
+
+interface SystemSettingsPageProps {
+  lang: string;
+}
+
+interface SettingsData {
+  items: SettingConfig[];
+  groupedItems: Record<string, SettingConfig[]>;
+}
+
+export function SystemSettingsPage({ lang }: SystemSettingsPageProps) {
+  const router = useRouter();
+  const [loading, setLoading] = React.useState(true);
+  const [settings, setSettings] = React.useState<SettingsData | null>(null);
+  const [activeGroup, setActiveGroup] = React.useState(
+    SETTINGS_GROUPS[0]?.id || "general",
+  );
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const [highlightedKey, setHighlightedKey] = React.useState<string | null>(
+    null,
+  );
+
+  // Dialog states
+  const [formDialogOpen, setFormDialogOpen] = React.useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = React.useState(false);
+  const [suspendDialogOpen, setSuspendDialogOpen] = React.useState(false);
+  const [selectedSetting, setSelectedSetting] =
+    React.useState<SettingConfig | null>(null);
+
+  // Fetch settings
+  const fetchSettings = React.useCallback(async () => {
+    setLoading(true);
+    try {
+      const res = await fetch("/api/admin/system/settings/all");
+      if (!res.ok) throw new Error("Failed to fetch settings");
+      const data = await res.json();
+
+      // Group items by category
+      const items: SettingConfig[] = data.data || [];
+      const groupedItems: Record<string, SettingConfig[]> = {};
+
+      for (const item of items) {
+        const category = item.category || "general";
+        if (!groupedItems[category]) {
+          groupedItems[category] = [];
+        }
+        groupedItems[category].push(item);
+      }
+
+      setSettings({ items, groupedItems });
+    } catch (error) {
+      console.error("Error fetching settings:", error);
+      toast.error("Không thể tải cấu hình hệ thống");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  React.useEffect(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  // Handle setting update
+  const handleUpdate = React.useCallback(async (key: string, value: string) => {
+    try {
+      const res = await fetch("/api/admin/system/settings/update", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ key, value }),
+      });
+
+      if (!res.ok) throw new Error("Failed to update setting");
+
+      // Update local state
+      setSettings((prev) => {
+        if (!prev) return prev;
+        const items = prev.items.map((item) =>
+          item.key === key ? { ...item, value } : item,
+        );
+        const groupedItems: Record<string, SettingConfig[]> = {};
+        for (const item of items) {
+          const category = item.category || "general";
+          if (!groupedItems[category]) {
+            groupedItems[category] = [];
+          }
+          groupedItems[category].push(item);
+        }
+        return { items, groupedItems };
+      });
+    } catch (error) {
+      console.error("Error updating setting:", error);
+      throw error;
+    }
+  }, []);
+
+  // Action handlers
+  const handleDelete = React.useCallback((setting: SettingConfig) => {
+    setSelectedSetting(setting);
+    setDeleteDialogOpen(true);
+  }, []);
+
+  const handleToggleStatus = React.useCallback((setting: SettingConfig) => {
+    setSelectedSetting(setting);
+    setSuspendDialogOpen(true);
+  }, []);
+
+  const handleAddNew = React.useCallback(() => {
+    setSelectedSetting(null);
+    setFormDialogOpen(true);
+  }, []);
+
+  const handleDialogSuccess = React.useCallback(() => {
+    fetchSettings();
+  }, [fetchSettings]);
+
+  // Filter settings based on search query and active group
+  const filteredSettings = React.useMemo(() => {
+    if (!settings) return [];
+
+    let items = settings.items;
+
+    // Filter by active group
+    const group = SETTINGS_GROUPS.find((g) => g.id === activeGroup);
+    if (group) {
+      items = items.filter((item) => {
+        // Special case: phu_quy_* settings should be included in "integrations" group
+        const effectiveCategory = item.key.startsWith("phu_quy_") ? "phu_quy" : item.category;
+        return group.categories.includes(item.category) || group.categories.includes(effectiveCategory);
+      });
+    }
+
+    // Filter by search query
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      items = items.filter(
+        (item) =>
+          item.key.toLowerCase().includes(query) ||
+          item.description?.toLowerCase().includes(query) ||
+          item.category.toLowerCase().includes(query),
+      );
+    }
+
+    return items;
+  }, [settings, activeGroup, searchQuery]);
+
+  // Group filtered settings by category
+  // Special handling: Group settings with key starting with "phu_quy_" into "phu_quy" category
+  const groupedFilteredSettings = React.useMemo(() => {
+    const grouped: Record<string, SettingConfig[]> = {};
+    for (const item of filteredSettings) {
+      // Special case: Group phu_quy_* settings together
+      let category = item.category || "general";
+      if (item.key.startsWith("phu_quy_")) {
+        category = "phu_quy";
+      }
+      
+      if (!grouped[category]) {
+        grouped[category] = [];
+      }
+      grouped[category].push(item);
+    }
+    return grouped;
+  }, [filteredSettings]);
+
+  // Handle search keyboard navigation
+  const handleSearchKeyDown = React.useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && filteredSettings.length > 0) {
+        const firstItem = filteredSettings[0];
+        setHighlightedKey(firstItem.key);
+        document.getElementById(`setting-${firstItem.key}`)?.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
+        setTimeout(() => setHighlightedKey(null), 3000);
+      }
+    },
+    [filteredSettings],
+  );
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-[400px]">
+        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen flex flex-col overflow-hidden bg-background">
+      {/* Header */}
+      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 shrink-0">
+        <div className="container flex flex-col md:flex-row items-start md:items-center justify-between py-4 md:h-16 px-4 gap-4 md:gap-0">
+          <div>
+            <h1 className="text-xl font-semibold">Cài đặt hệ thống</h1>
+            <p className="text-sm text-muted-foreground">
+              Quản lý cấu hình và tùy chỉnh hệ thống
+            </p>
+          </div>
+          <div className="flex items-center gap-2 self-end md:self-auto">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={fetchSettings}
+              disabled={loading}
+              className="hidden sm:flex"
+            >
+              <RefreshCw
+                className={cn("h-4 w-4 mr-2", loading && "animate-spin")}
+              />
+              Làm mới
+            </Button>
+            <Button
+              variant="outline"
+              size="icon"
+              onClick={fetchSettings}
+              disabled={loading}
+              className="sm:hidden"
+            >
+              <RefreshCw
+                className={cn("h-4 w-4", loading && "animate-spin")}
+              />
+            </Button>
+            <Button size="sm" onClick={handleAddNew}>
+              <Plus className="h-4 w-4 md:mr-2" />
+              <span className="hidden md:inline">Thêm cấu hình</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="flex-1 min-h-0 container px-2 md:px-4 py-4 md:py-6 flex flex-col">
+        <div className="flex flex-col md:flex-row gap-4 md:gap-8 h-full min-h-0">
+          {/* Sidebar */}
+          <SettingsSidebar
+            groups={SETTINGS_GROUPS}
+            activeGroup={activeGroup}
+            onGroupChange={setActiveGroup}
+            className="w-full md:w-64 shrink-0 md:overflow-y-auto"
+          />
+
+          {/* Content */}
+          <div className="flex-1 min-w-0 flex flex-col h-full min-h-0">
+            {/* Search */}
+            <SettingsSearch
+              value={searchQuery}
+              onChange={setSearchQuery}
+              onKeyDown={handleSearchKeyDown}
+              resultCount={filteredSettings.length}
+              className="mb-6 shrink-0"
+            />
+
+            {/* Settings Groups */}
+            <div className="flex-1 overflow-y-auto pr-2 space-y-8">
+              {Object.entries(groupedFilteredSettings).length === 0 ? (
+                <div className="text-center py-12">
+                  <p className="text-muted-foreground">
+                    {searchQuery
+                      ? "Không tìm thấy cấu hình phù hợp"
+                      : "Chưa có cấu hình nào trong nhóm này"}
+                  </p>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="mt-4"
+                    onClick={handleAddNew}
+                  >
+                    <Plus className="h-4 w-4 mr-2" />
+                    Thêm cấu hình mới
+                  </Button>
+                </div>
+              ) : (
+                Object.entries(groupedFilteredSettings).map(
+                  ([category, items]) => (
+                    <SettingsSection
+                      key={category}
+                      id={category}
+                      title={formatCategoryName(category)}
+                      count={items.length}
+                    >
+                      {items.map((item) => (
+                        <SettingField
+                          key={item.id}
+                          setting={item}
+                          onUpdate={handleUpdate}
+                          onDelete={handleDelete}
+                          onToggleStatus={handleToggleStatus}
+                          isHighlighted={highlightedKey === item.key}
+                        />
+                      ))}
+                    </SettingsSection>
+                  ),
+                )
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Dialogs */}
+      <SettingFormDialog
+        open={formDialogOpen}
+        onOpenChange={setFormDialogOpen}
+        setting={selectedSetting}
+        onSuccess={handleDialogSuccess}
+      />
+      <DeleteConfirmDialog
+        open={deleteDialogOpen}
+        onOpenChange={setDeleteDialogOpen}
+        setting={selectedSetting}
+        onSuccess={handleDialogSuccess}
+      />
+      <SuspendConfirmDialog
+        open={suspendDialogOpen}
+        onOpenChange={setSuspendDialogOpen}
+        setting={selectedSetting}
+        onSuccess={handleDialogSuccess}
+      />
+    </div>
+  );
+}
+
+// Helper function to format category names
+function formatCategoryName(category: string): string {
+  const names: Record<string, string> = {
+    general: "Cấu hình chung",
+    app: "Ứng dụng",
+    system: "Hệ thống",
+    pricing: "Giá cả",
+    sales: "Bán hàng",
+    purchase: "Mua hàng",
+    inventory: "Kho hàng",
+    zalo: "Zalo",
+    telegram: "Telegram",
+    email: "Email",
+    sms: "SMS",
+    webhook: "Webhook",
+    notifications: "Thông báo",
+    alerts: "Cảnh báo",
+    security: "Bảo mật",
+    auth: "Xác thực",
+    audit: "Nhật ký",
+    automation: "Tự động hóa",
+    cron: "Lịch trình",
+    jobs: "Công việc",
+    scheduler: "Lập lịch",
+    theme: "Giao diện",
+    ui: "Hiển thị",
+    display: "Màn hình",
+    debug: "Debug",
+    cache: "Cache",
+    performance: "Hiệu năng",
+    logs: "Logs",
+    phu_quy: "Phú Quý",
+  };
+  return (
+    names[category] || category.charAt(0).toUpperCase() + category.slice(1)
+  );
+}

package/src/system/schemas/system-category-group.schema.ts

@@ -0,0 +1,46 @@
+import { z } from "zod";
+import { STATUS_ACTIVE, STATUS_INACTIVE, STATUS_VALUES } from "../constants";
+
+/**
+ * System Category Group Validation Schema
+ */
+export const systemCategoryGroupSchema = z.object({
+  code: z
+    .string()
+    .min(1, "Mã nhóm danh mục là bắt buộc")
+    .max(50, "Mã nhóm danh mục tối đa 50 ký tự")
+    .trim(),
+
+  name: z
+    .string()
+    .min(1, "Tên nhóm danh mục là bắt buộc")
+    .max(200, "Tên nhóm danh mục tối đa 200 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) => {
+    if (typeof val === "boolean") {
+      return val ? STATUS_ACTIVE : STATUS_INACTIVE;
+    }
+    if (val === "Active" || val === "Inactive") {
+      return val === "Active" ? STATUS_ACTIVE : STATUS_INACTIVE;
+    }
+    return val;
+  }, z.enum(STATUS_VALUES).default(STATUS_ACTIVE)),
+});
+
+export type SystemCategoryGroupInput = z.infer<
+  typeof systemCategoryGroupSchema
+>;
+export const systemCategoryGroupUpdateSchema =
+  systemCategoryGroupSchema.partial();
+export const systemCategoryGroupBulkSchema = z.object({
+  ids: z.array(z.string()).min(1, "Phải chọn ít nhất 1 nhóm danh mục"),
+  action: z.enum(["delete", "activate", "deactivate"]),
+});