@goplusvn/core 0.1.0 → 0.1.2

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

@@ -0,0 +1,372 @@
+"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/primitives/button";
+
+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 SettingsPageProps {
+  lang: string;
+}
+
+interface SettingsData {
+  items: SettingConfig[];
+  groupedItems: Record<string, SettingConfig[]>;
+}
+
+export function SettingsPage({ lang }: SettingsPageProps) {
+  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 handleEdit = React.useCallback((setting: SettingConfig) => {
+    setSelectedSetting(setting);
+    setFormDialogOpen(true);
+  }, []);
+
+  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="min-h-screen">
+      {/* Header */}
+      <div className="border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 sticky top-0 z-10">
+        <div className="container flex items-center justify-between h-16 px-4">
+          <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">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={fetchSettings}
+              disabled={loading}
+            >
+              <RefreshCw
+                className={cn("h-4 w-4 mr-2", loading && "animate-spin")}
+              />
+              Làm mới
+            </Button>
+            <Button size="sm" onClick={handleAddNew}>
+              <Plus className="h-4 w-4 mr-2" />
+              Thêm cấu hình
+            </Button>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className="container px-4 py-6">
+        <div className="flex gap-8">
+          {/* Sidebar */}
+          <SettingsSidebar
+            groups={SETTINGS_GROUPS}
+            activeGroup={activeGroup}
+            onGroupChange={setActiveGroup}
+            className="hidden md:block"
+          />
+
+          {/* Content */}
+          <div className="flex-1 min-w-0">
+            {/* Search */}
+            <SettingsSearch
+              value={searchQuery}
+              onChange={setSearchQuery}
+              onKeyDown={handleSearchKeyDown}
+              resultCount={filteredSettings.length}
+              className="mb-6"
+            />
+
+            {/* Settings Groups */}
+            <div className="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}
+                          onEdit={handleEdit}
+                          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",
+    phu_quy: "Phú Quý",
+    integrations: "Tích hợp",
+    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",
+  };
+  return (
+    names[category] || category.charAt(0).toUpperCase() + category.slice(1)
+  );
+}

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

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React from "react";
+import { Search, Command } from "lucide-react";
+import { cn } from "../../../../utils";
+import { Input } from "../../../../ui/primitives/input";
+
+interface SettingsSearchProps {
+  value: string;
+  onChange: (value: string) => void;
+  onKeyDown?: (e: React.KeyboardEvent) => void;
+  className?: string;
+  resultCount?: number;
+}
+
+export function SettingsSearch({
+  value,
+  onChange,
+  onKeyDown,
+  className,
+  resultCount,
+}: SettingsSearchProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+
+  // Global keyboard shortcut (Cmd+K / Ctrl+K)
+  React.useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        inputRef.current?.focus();
+      }
+      if (e.key === "Escape" && document.activeElement === inputRef.current) {
+        inputRef.current?.blur();
+        onChange("");
+      }
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [onChange]);
+
+  return (
+    <div className={cn("relative", className)}>
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          ref={inputRef}
+          type="text"
+          placeholder="Tìm kiếm cấu hình..."
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={onKeyDown}
+          className={cn(
+            "pl-9 pr-20 h-11 bg-muted/50 border-0 focus-visible:bg-background focus-visible:ring-1",
+            "placeholder:text-muted-foreground/60 text-sm",
+          )}
+        />
+        <div className="absolute right-3 top-1/2 -translate-y-1/2 flex items-center gap-1">
+          {resultCount !== undefined && value && (
+            <span className="text-xs text-muted-foreground mr-2">
+              {resultCount} kết quả
+            </span>
+          )}
+          <kbd className="hidden sm:inline-flex items-center gap-0.5 px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground bg-muted rounded border">
+            <Command className="h-2.5 w-2.5" />K
+          </kbd>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { cn } from "../../../../utils";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "../../../../ui/data-display/collapsible";
+
+interface SettingsSectionProps {
+  id: string;
+  title: string;
+  description?: string;
+  count?: number;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function SettingsSection({
+  id,
+  title,
+  description,
+  count,
+  defaultOpen = true,
+  children,
+  className,
+}: SettingsSectionProps) {
+  const [isOpen, setIsOpen] = React.useState(defaultOpen);
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className={cn("space-y-3", className)}
+    >
+      <div id={`section-${id}`} className="scroll-mt-20">
+        <CollapsibleTrigger asChild>
+          <button className="flex items-center gap-2 w-full group text-left">
+            <ChevronDown
+              className={cn(
+                "h-4 w-4 text-muted-foreground transition-transform duration-200",
+                !isOpen && "-rotate-90",
+              )}
+            />
+            <div className="flex-1 flex items-center justify-between">
+              <div>
+                <h3 className="text-sm font-semibold text-foreground group-hover:text-primary transition-colors">
+                  {title}
+                </h3>
+                {description && (
+                  <p className="text-xs text-muted-foreground mt-0.5">
+                    {description}
+                  </p>
+                )}
+              </div>
+              {count !== undefined && (
+                <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
+                  {count}
+                </span>
+              )}
+            </div>
+          </button>
+        </CollapsibleTrigger>
+      </div>
+
+      <CollapsibleContent className="space-y-2">
+        <div className="ml-6 space-y-1 border-l pl-4">{children}</div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

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

@@ -0,0 +1,81 @@
+"use client";
+
+import * as React from "react";
+import {
+  Settings,
+  TrendingUp,
+  Plug,
+  Bell,
+  Shield,
+  Bot,
+  Palette,
+  Wrench,
+} from "lucide-react";
+import { cn } from "../../../../utils";
+import type { SettingGroup } from "./settings-groups";
+
+interface SettingsSidebarProps {
+  groups: SettingGroup[];
+  activeGroup: string;
+  onGroupChange: (groupId: string) => void;
+  className?: string;
+}
+
+const iconMap: Record<string, React.ComponentType<{ className?: string }>> = {
+  Settings,
+  TrendingUp,
+  Plug,
+  Bell,
+  Shield,
+  Bot,
+  Palette,
+  Wrench,
+};
+
+export function SettingsSidebar({
+  groups,
+  activeGroup,
+  onGroupChange,
+  className,
+}: SettingsSidebarProps) {
+  return (
+    <nav className={cn("w-full md:w-64 shrink-0", className)}>
+      <div className="flex md:flex-col gap-2 overflow-x-auto md:overflow-visible pb-2 md:pb-0 snap-x custom-scrollbar">
+        {groups.map((group) => {
+          const Icon = iconMap[group.icon] || Settings;
+          const isActive = activeGroup === group.id;
+
+          return (
+            <button
+              key={group.id}
+              onClick={() => onGroupChange(group.id)}
+              className={cn(
+                "snap-start shrink-0 flex items-center gap-2 px-3 py-2 md:py-2.5 rounded-full md:rounded-lg text-left transition-all duration-200",
+                "bg-muted/50 md:bg-transparent hover:bg-accent/50",
+                isActive &&
+                  "bg-primary text-primary-foreground md:bg-primary/10 md:text-primary font-medium md:border-l-2 md:border-transparent md:data-[active=true]:border-primary"
+              )}
+            >
+              <Icon
+                className={cn(
+                  "h-4 w-4 shrink-0",
+                  isActive ? "text-primary-foreground md:text-primary" : "text-muted-foreground",
+                )}
+              />
+              <div className="min-w-0">
+                <p
+                  className={cn(
+                    "text-sm whitespace-nowrap",
+                    !isActive && "text-foreground/80",
+                  )}
+                >
+                  {group.label}
+                </p>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}