@goplusvn/core 0.1.0 → 0.1.2

package/src/system/pages/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 "./setting-field";
+
+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>
+  );
+}

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

@@ -0,0 +1,292 @@
+"use client";
+
+import * as React from "react";
+import {
+  Eye,
+  EyeOff,
+  Lock,
+  Check,
+  X,
+  MoreHorizontal,
+  Pencil,
+  Trash2,
+  Power,
+} from "lucide-react";
+import { toast } from "sonner";
+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";
+
+export interface SettingConfig {
+  id: string;
+  key: string;
+  value: string;
+  type: string;
+  category: string;
+  description?: string | null;
+  isEncrypted: boolean;
+  isReadOnly: boolean;
+  status: string;
+}
+
+interface SettingFieldProps {
+  setting: SettingConfig;
+  onUpdate: (key: string, value: string) => Promise<void>;
+  onDelete?: (setting: SettingConfig) => void;
+  onToggleStatus?: (setting: SettingConfig) => void;
+  isHighlighted?: boolean;
+  className?: string;
+}
+
+export function SettingField({
+  setting,
+  onUpdate,
+  onDelete,
+  onToggleStatus,
+  isHighlighted = false,
+  className,
+}: SettingFieldProps) {
+  const [value, setValue] = React.useState(setting.value);
+  const [showSecret, setShowSecret] = React.useState(false);
+  const [isEditing, setIsEditing] = React.useState(false);
+  const [isSaving, setIsSaving] = React.useState(false);
+
+  // Sync with prop changes
+  React.useEffect(() => {
+    setValue(setting.value);
+  }, [setting.value]);
+
+  const handleSave = async () => {
+    setIsSaving(true);
+    try {
+      await onUpdate(setting.key, value);
+      setIsEditing(false);
+      toast.success("Đã lưu thay đổi");
+    } catch (error) {
+      toast.error("Lỗi khi lưu thay đổi");
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleCancel = () => {
+    setValue(setting.value);
+    setIsEditing(false);
+  };
+
+  const renderInput = () => {
+    if (setting.isEncrypted) {
+      return (
+        <div className="relative">
+          <Input
+            type={showSecret ? "text" : "password"}
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            disabled={!isEditing || 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"
+            disabled={!isEditing && !value} // Optional: disable eye if empty and not editing? Actually keeping it enabled is fine to view value.
+          >
+            {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={(checked) => setValue(checked ? "true" : "false")}
+            disabled={!isEditing || isSaving}
+          />
+        );
+
+      case "number":
+        return (
+          <Input
+            type="number"
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            disabled={!isEditing || isSaving}
+            className="font-mono text-sm max-w-32"
+          />
+        );
+
+      case "json":
+        return (
+          <textarea
+            value={value}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              setValue(e.target.value)
+            }
+            disabled={!isEditing || 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) => setValue(e.target.value)}
+            disabled={!isEditing || 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 flex-col md:flex-row md:items-start justify-between gap-2 md:gap-4">
+        <div className="flex-1 min-w-0 w-full">
+          <div className="flex items-center gap-2 flex-wrap">
+            <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>
+          </div>
+          {setting.description && (
+            <p className="text-xs text-muted-foreground mt-1 break-words">
+              {setting.description}
+            </p>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2 w-full md:w-auto mt-2 md:mt-0">
+          <div className="flex-1 md:shrink-0 md:w-64">{renderInput()}</div>
+
+          {/* Action Buttons */}
+          <div className="flex items-center gap-1 shrink-0">
+            {isEditing ? (
+              <>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-8 w-8 text-green-600 hover:text-green-700 hover:bg-green-50"
+                  onClick={handleSave}
+                  disabled={isSaving}
+                >
+                  <Check className="h-4 w-4" />
+                </Button>
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-8 w-8 text-red-600 hover:text-red-700 hover:bg-red-50"
+                  onClick={handleCancel}
+                  disabled={isSaving}
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </>
+            ) : (
+              !setting.isReadOnly && (
+                <Button
+                  size="icon"
+                  variant="ghost"
+                  className="h-8 w-8 opacity-0 group-hover:opacity-100 transition-opacity"
+                  onClick={() => setIsEditing(true)}
+                >
+                  <Pencil className="h-4 w-4" />
+                </Button>
+              )
+            )}
+
+            <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">
+                {!isEditing && !setting.isReadOnly && (
+                  <DropdownMenuItem onClick={() => setIsEditing(true)}>
+                    <Pencil className="h-4 w-4 mr-2" />
+                    Sửa giá trị
+                  </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>
+                )}
+                {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>
+    </div>
+  );
+}