@goplusvn/core 0.1.0 → 0.1.1

package/src/system/components/settings/setting-field.tsx

@@ -0,0 +1,291 @@
+"use client";
+
+import * as React from "react";
+import {
+  Eye,
+  EyeOff,
+  Lock,
+  Check,
+  X,
+  MoreHorizontal,
+  Pencil,
+  Trash2,
+  Power,
+} from "lucide-react";
+import { cn } from "../../../utils";
+import { Input } from "../../../ui/primitives/input";
+import { Switch } from "../../../ui/primitives/switch";
+import { Label } from "../../../ui/primitives/label";
+import { Badge } from "../../../ui/primitives/badge";
+import { Button } from "../../../ui/primitives/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../../../ui/primitives/dropdown-menu";
+import type { SettingConfig } from "../../types";
+
+interface SettingFieldProps {
+  setting: SettingConfig;
+  onUpdate: (key: string, value: string) => Promise<void>;
+  onEdit?: (setting: SettingConfig) => void;
+  onDelete?: (setting: SettingConfig) => void;
+  onToggleStatus?: (setting: SettingConfig) => void;
+  isHighlighted?: boolean;
+  className?: string;
+}
+
+export function SettingField({
+  setting,
+  onUpdate,
+  onEdit,
+  onDelete,
+  onToggleStatus,
+  isHighlighted = false,
+  className,
+}: SettingFieldProps) {
+  const [value, setValue] = React.useState(setting.value);
+  const [showSecret, setShowSecret] = React.useState(false);
+  const [isSaving, setIsSaving] = React.useState(false);
+  const [saveStatus, setSaveStatus] = React.useState<
+    "idle" | "saving" | "success" | "error"
+  >("idle");
+  const debounceRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  // Sync with prop changes
+  React.useEffect(() => {
+    setValue(setting.value);
+  }, [setting.value]);
+
+  const handleChange = React.useCallback(
+    async (newValue: string) => {
+      setValue(newValue);
+
+      // Clear previous debounce
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+
+      // Debounce save
+      debounceRef.current = setTimeout(async () => {
+        if (newValue !== setting.value && !setting.isReadOnly) {
+          setIsSaving(true);
+          setSaveStatus("saving");
+          try {
+            await onUpdate(setting.key, newValue);
+            setSaveStatus("success");
+            setTimeout(() => setSaveStatus("idle"), 2000);
+          } catch {
+            setSaveStatus("error");
+            setTimeout(() => setSaveStatus("idle"), 3000);
+          } finally {
+            setIsSaving(false);
+          }
+        }
+      }, 500);
+    },
+    [setting.key, setting.value, setting.isReadOnly, onUpdate],
+  );
+
+  const handleBooleanChange = React.useCallback(
+    async (checked: boolean) => {
+      const newValue = checked ? "true" : "false";
+      setValue(newValue);
+
+      if (!setting.isReadOnly) {
+        setIsSaving(true);
+        setSaveStatus("saving");
+        try {
+          await onUpdate(setting.key, newValue);
+          setSaveStatus("success");
+          setTimeout(() => setSaveStatus("idle"), 2000);
+        } catch {
+          setSaveStatus("error");
+          setTimeout(() => setSaveStatus("idle"), 3000);
+        } finally {
+          setIsSaving(false);
+        }
+      }
+    },
+    [setting.key, setting.isReadOnly, onUpdate],
+  );
+
+  const renderInput = () => {
+    if (setting.isEncrypted) {
+      return (
+        <div className="relative">
+          <Input
+            type={showSecret ? "text" : "password"}
+            value={value}
+            onChange={(e) => handleChange(e.target.value)}
+            disabled={setting.isReadOnly || isSaving}
+            className="pr-10 font-mono text-sm"
+          />
+          <button
+            type="button"
+            onClick={() => setShowSecret(!showSecret)}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+          >
+            {showSecret ? (
+              <EyeOff className="h-4 w-4" />
+            ) : (
+              <Eye className="h-4 w-4" />
+            )}
+          </button>
+        </div>
+      );
+    }
+
+    switch (setting.type) {
+      case "boolean":
+        return (
+          <Switch
+            checked={value === "true"}
+            onCheckedChange={handleBooleanChange}
+            disabled={setting.isReadOnly || isSaving}
+          />
+        );
+
+      case "number":
+        return (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => handleChange(e.target.value)}
+            disabled={setting.isReadOnly || isSaving}
+            className="font-mono text-sm max-w-32"
+          />
+        );
+
+      case "json":
+        return (
+          <textarea
+            value={value}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              handleChange(e.target.value)
+            }
+            disabled={setting.isReadOnly || isSaving}
+            className={cn(
+              "flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm",
+              "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+              "disabled:cursor-not-allowed disabled:opacity-50 font-mono text-xs resize-y",
+            )}
+            spellCheck={false}
+          />
+        );
+
+      default:
+        return (
+          <Input
+            type="text"
+            value={value}
+            onChange={(e) => handleChange(e.target.value)}
+            disabled={setting.isReadOnly || isSaving}
+            className="text-sm"
+          />
+        );
+    }
+  };
+
+  return (
+    <div
+      id={`setting-${setting.key}`}
+      className={cn(
+        "group p-3 rounded-lg transition-all duration-200",
+        "hover:bg-muted/50",
+        isHighlighted && "bg-primary/5 ring-1 ring-primary/20",
+        setting.status === "inactive" && "opacity-60",
+        className,
+      )}
+    >
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <Label
+              htmlFor={`input-${setting.key}`}
+              className="text-sm font-medium cursor-pointer"
+            >
+              {setting.key}
+            </Label>
+            {setting.status === "inactive" && (
+              <Badge
+                variant="secondary"
+                className="text-[10px] h-4 px-1 bg-orange-100 text-orange-700"
+              >
+                Tạm ngưng
+              </Badge>
+            )}
+            {setting.isReadOnly && (
+              <Lock className="h-3 w-3 text-muted-foreground" />
+            )}
+            {setting.isEncrypted && (
+              <Badge variant="secondary" className="text-[10px] h-4 px-1">
+                Encrypted
+              </Badge>
+            )}
+            <Badge variant="outline" className="text-[10px] h-4 px-1">
+              {setting.type}
+            </Badge>
+            {saveStatus === "success" && (
+              <Check className="h-3.5 w-3.5 text-green-500 animate-in fade-in" />
+            )}
+            {saveStatus === "error" && (
+              <X className="h-3.5 w-3.5 text-destructive animate-in fade-in" />
+            )}
+          </div>
+          {setting.description && (
+            <p className="text-xs text-muted-foreground mt-1">
+              {setting.description}
+            </p>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <div className="shrink-0 w-64">{renderInput()}</div>
+
+          {/* Action Menu */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+              >
+                <MoreHorizontal className="h-4 w-4" />
+                <span className="sr-only">Hành động</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {onEdit && (
+                <DropdownMenuItem onClick={() => onEdit(setting)}>
+                  <Pencil className="h-4 w-4 mr-2" />
+                  Sửa
+                </DropdownMenuItem>
+              )}
+              {onToggleStatus && (
+                <DropdownMenuItem onClick={() => onToggleStatus(setting)}>
+                  <Power className="h-4 w-4 mr-2" />
+                  {setting.status === "active" ? "Tạm ngưng" : "Kích hoạt"}
+                </DropdownMenuItem>
+              )}
+              {(onEdit || onToggleStatus) && onDelete && (
+                <DropdownMenuSeparator />
+              )}
+              {onDelete && !setting.isReadOnly && (
+                <DropdownMenuItem
+                  onClick={() => onDelete(setting)}
+                  className="text-destructive focus:text-destructive"
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Xóa
+                </DropdownMenuItem>
+              )}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/system/components/settings/setting-form-dialog.tsx

@@ -0,0 +1,308 @@
+"use client";
+
+import * as React from "react";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { cn } from "../../../utils";
+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 {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "../../../ui/primitives/dialog";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../../../ui/primitives/select";
+
+import type { SettingConfig } from "../../types";
+import { SETTINGS_GROUPS } from "./settings-groups";
+
+interface SettingFormDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  setting?: SettingConfig | null;
+  onSuccess: () => void;
+}
+
+const SETTING_TYPES = [
+  { value: "string", label: "Chuỗi (String)" },
+  { value: "number", label: "Số (Number)" },
+  { value: "boolean", label: "Đúng/Sai (Boolean)" },
+  { value: "json", label: "JSON" },
+  { value: "date", label: "Ngày (Date)" },
+];
+
+const CATEGORY_OPTIONS = SETTINGS_GROUPS.flatMap((group) =>
+  group.categories.map((cat) => ({
+    value: cat,
+    label: cat.charAt(0).toUpperCase() + cat.slice(1),
+    group: group.label,
+  })),
+).filter(
+  (cat, index, self) => index === self.findIndex((c) => c.value === cat.value),
+);
+
+export function SettingFormDialog({
+  open,
+  onOpenChange,
+  setting,
+  onSuccess,
+}: SettingFormDialogProps) {
+  const isEdit = !!setting;
+  const [loading, setLoading] = React.useState(false);
+
+  // Form state
+  const [key, setKey] = React.useState("");
+  const [value, setValue] = React.useState("");
+  const [type, setType] = React.useState("string");
+  const [category, setCategory] = React.useState("general");
+  const [description, setDescription] = React.useState("");
+  const [isEncrypted, setIsEncrypted] = React.useState(false);
+  const [isReadOnly, setIsReadOnly] = React.useState(false);
+
+  // Reset form when dialog opens/closes or setting changes
+  React.useEffect(() => {
+    if (open && setting) {
+      setKey(setting.key);
+      setValue(setting.value);
+      setType(setting.type);
+      setCategory(setting.category);
+      setDescription(setting.description || "");
+      setIsEncrypted(setting.isEncrypted);
+      setIsReadOnly(setting.isReadOnly);
+    } else if (open && !setting) {
+      setKey("");
+      setValue("");
+      setType("string");
+      setCategory("general");
+      setDescription("");
+      setIsEncrypted(false);
+      setIsReadOnly(false);
+    }
+  }, [open, setting]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!key.trim()) {
+      toast.error("Vui lòng nhập Key");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      const endpoint = isEdit
+        ? "/api/admin/system/settings/update-full"
+        : "/api/admin/system/settings/create";
+
+      const res = await fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          key: key.trim(),
+          value,
+          type,
+          category,
+          description: description.trim() || null,
+          isEncrypted,
+          isReadOnly,
+        }),
+      });
+
+      if (!res.ok) {
+        const error = await res.json();
+        throw new Error(error.error || "Failed to save setting");
+      }
+
+      toast.success(isEdit ? "Đã cập nhật cấu hình" : "Đã tạo cấu hình mới");
+      onOpenChange(false);
+      onSuccess();
+    } catch (error) {
+      console.error("Error saving setting:", error);
+      toast.error(
+        error instanceof Error ? error.message : "Không thể lưu cấu hình",
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>
+            {isEdit ? "Sửa cấu hình" : "Thêm cấu hình mới"}
+          </DialogTitle>
+          <DialogDescription>
+            {isEdit
+              ? "Cập nhật thông tin cấu hình hệ thống"
+              : "Tạo một cấu hình hệ thống mới"}
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Key */}
+          <div className="space-y-2">
+            <Label htmlFor="key">Key *</Label>
+            <Input
+              id="key"
+              value={key}
+              onChange={(e) => setKey(e.target.value)}
+              placeholder="app.setting.name"
+              disabled={isEdit || loading}
+              className="font-mono text-sm"
+            />
+            <p className="text-xs text-muted-foreground">
+              Định danh duy nhất, chỉ chứa chữ, số, dấu chấm, gạch dưới
+            </p>
+          </div>
+
+          {/* Value */}
+          <div className="space-y-2">
+            <Label htmlFor="value">Giá trị</Label>
+            {type === "json" ? (
+              <textarea
+                id="value"
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                placeholder='{"key": "value"}'
+                disabled={loading}
+                className={cn(
+                  "flex min-h-[100px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm",
+                  "placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+                  "disabled:cursor-not-allowed disabled:opacity-50 font-mono resize-y",
+                )}
+                spellCheck={false}
+              />
+            ) : type === "boolean" ? (
+              <div className="flex items-center gap-2">
+                <Switch
+                  checked={value === "true"}
+                  onCheckedChange={(checked) =>
+                    setValue(checked ? "true" : "false")
+                  }
+                  disabled={loading}
+                />
+                <span className="text-sm text-muted-foreground">
+                  {value === "true" ? "Bật" : "Tắt"}
+                </span>
+              </div>
+            ) : (
+              <Input
+                id="value"
+                type={type === "number" ? "number" : "text"}
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                placeholder="Nhập giá trị..."
+                disabled={loading}
+              />
+            )}
+          </div>
+
+          {/* Type & Category Row */}
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="type">Loại dữ liệu</Label>
+              <Select value={type} onValueChange={setType} disabled={loading}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {SETTING_TYPES.map((t) => (
+                    <SelectItem key={t.value} value={t.value}>
+                      {t.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="category">Danh mục</Label>
+              <Select
+                value={category}
+                onValueChange={setCategory}
+                disabled={loading}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {CATEGORY_OPTIONS.map((c) => (
+                    <SelectItem key={c.value} value={c.value}>
+                      {c.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          {/* Description */}
+          <div className="space-y-2">
+            <Label htmlFor="description">Mô tả</Label>
+            <Input
+              id="description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+              placeholder="Mô tả ngắn gọn về cấu hình này..."
+              disabled={loading}
+            />
+          </div>
+
+          {/* Flags */}
+          <div className="flex items-center gap-6 pt-2">
+            <div className="flex items-center gap-2">
+              <Switch
+                id="isEncrypted"
+                checked={isEncrypted}
+                onCheckedChange={setIsEncrypted}
+                disabled={loading}
+              />
+              <Label htmlFor="isEncrypted" className="text-sm cursor-pointer">
+                Mã hóa giá trị
+              </Label>
+            </div>
+            <div className="flex items-center gap-2">
+              <Switch
+                id="isReadOnly"
+                checked={isReadOnly}
+                onCheckedChange={setIsReadOnly}
+                disabled={loading}
+              />
+              <Label htmlFor="isReadOnly" className="text-sm cursor-pointer">
+                Chỉ đọc
+              </Label>
+            </div>
+          </div>
+
+          <DialogFooter className="pt-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => onOpenChange(false)}
+              disabled={loading}
+            >
+              Hủy
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              {isEdit ? "Cập nhật" : "Tạo mới"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/system/components/settings/settings-groups.ts

@@ -0,0 +1,80 @@
+/**
+ * Settings Groups Configuration
+ * Defines the structure and organization of system settings
+ */
+import type { SettingGroup } from "../../types";
+
+export const SETTINGS_GROUPS: SettingGroup[] = [
+  {
+    id: "general",
+    label: "Cấu hình chung",
+    icon: "Settings",
+    description: "Thông tin cơ bản và thiết lập chung của hệ thống",
+    categories: ["general", "app", "system"],
+  },
+  {
+    id: "business",
+    label: "Kinh doanh",
+    icon: "TrendingUp",
+    description: "Cấu hình liên quan đến hoạt động kinh doanh",
+    categories: ["pricing", "sales", "purchase", "inventory"],
+  },
+  {
+    id: "integrations",
+    label: "Tích hợp",
+    icon: "Plug",
+    description: "Kết nối với các dịch vụ và nền tảng bên ngoài",
+    categories: ["zalo", "telegram", "email", "sms", "webhook"],
+  },
+  {
+    id: "notifications",
+    label: "Thông báo",
+    icon: "Bell",
+    description: "Cấu hình kênh thông báo và cảnh báo",
+    categories: ["notifications", "alerts"],
+  },
+  {
+    id: "security",
+    label: "Bảo mật",
+    icon: "Shield",
+    description: "Cài đặt bảo mật và quyền truy cập",
+    categories: ["security", "auth", "audit"],
+  },
+  {
+    id: "automation",
+    label: "Tự động hóa",
+    icon: "Bot",
+    description: "Cấu hình các tác vụ và quy trình tự động",
+    categories: ["automation", "cron", "jobs", "scheduler"],
+  },
+  {
+    id: "appearance",
+    label: "Giao diện",
+    icon: "Palette",
+    description: "Tùy chỉnh giao diện và trải nghiệm người dùng",
+    categories: ["theme", "ui", "display"],
+  },
+  {
+    id: "advanced",
+    label: "Nâng cao",
+    icon: "Wrench",
+    description: "Cài đặt kỹ thuật và phát triển",
+    categories: ["debug", "cache", "performance", "logs"],
+  },
+];
+
+/**
+ * Get settings group by ID
+ */
+export function getSettingsGroup(id: string): SettingGroup | undefined {
+  return SETTINGS_GROUPS.find((group) => group.id === id);
+}
+
+/**
+ * Get settings group by category
+ */
+export function getSettingsGroupByCategory(
+  category: string,
+): SettingGroup | undefined {
+  return SETTINGS_GROUPS.find((group) => group.categories.includes(category));
+}