@goplusvn/core 0.1.0 → 0.1.1

package/src/user/components/unified-profile-dialog.tsx

@@ -0,0 +1,1019 @@
+"use client";
+
+import { useState, useEffect, useMemo } from "react";
+import useSWR from "swr";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  Button,
+  Input,
+  Label,
+  Checkbox,
+  Badge,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from "../../ui";
+import { toast } from "sonner";
+import { cn } from "../../utils";
+import {
+  X,
+  Search,
+  Eye,
+  EyeOff,
+  Loader2,
+  Ban,
+  UserCog,
+  Store,
+  CheckCircle2,
+  User,
+  Briefcase,
+  ShieldCheck,
+  KeyRound,
+} from "lucide-react";
+
+interface UnifiedProfileDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  data?: any;
+  mode?: "create" | "edit" | "view";
+  viewMode: "admin" | "crm" | "srm";
+  roles?: any[];
+  onSaveProfile?: (data: any, id?: string) => Promise<void>;
+  onSaveRoles?: (userId: string, roleCodes: string[]) => Promise<void>;
+  onSavePassword?: (userId: string, password: string) => Promise<void>;
+}
+
+const fetcher = async (url: string) => {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error("Failed to fetch");
+  const data = await res.json();
+  return Array.isArray(data) ? data : data.items || data.data || [];
+};
+
+export function UnifiedProfileDialog({
+  open,
+  onOpenChange,
+  data,
+  mode = "edit",
+  viewMode = "admin",
+  roles = [],
+  onSaveProfile,
+  onSaveRoles,
+  onSavePassword,
+}: UnifiedProfileDialogProps) {
+  // -- Data Fetching --
+  const { data: departments } = useSWR<{ id: string; name: string }[]>(
+    "/api/departments?status=active",
+    fetcher,
+  );
+  const { data: jobTitles } = useSWR<{ id: string; name: string }[]>(
+    "/api/job-titles?status=active",
+    fetcher,
+  );
+  const { data: suppliers } = useSWR<{ id: string; name: string }[]>(
+    "/api/suppliers?pageSize=100",
+    fetcher,
+  );
+  const { data: customerGroups } = useSWR<{ id: string; name: string }[]>(
+    "/api/crud/customer-groups?status=active",
+    fetcher,
+  );
+  const { data: branches } = useSWR<{ id: string; name: string }[]>(
+    "/api/branches",
+    fetcher,
+  );
+
+  // -- State --
+  const [activeSection, setActiveSection] = useState("general");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState("");
+
+  // Form State
+  const [userType, setUserType] = useState<string>("employee");
+  const [profileData, setProfileData] = useState<any>({});
+  const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
+  const [selectedBranches, setSelectedBranches] = useState<string[]>([]);
+  const [passwordData, setPasswordData] = useState({
+    password: "",
+    confirm: "",
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [roleSearchQuery, setRoleSearchQuery] = useState("");
+  const [enableAccount, setEnableAccount] = useState(false);
+
+  const displayData = data || {};
+
+  // Derived state
+  const isCustomer = viewMode === "crm" || userType === "customer";
+
+  // -- Navigation Items (Conditional) --
+  const navItems = useMemo(() => {
+    // For Customers: Only ONE section with all info merged
+    if (isCustomer) {
+      return [{ id: "general", label: "Thông tin khách hàng", icon: User }];
+    }
+
+    // For Employees/Suppliers: Multiple sections
+    const items: { id: string; label: string; icon: any }[] = [
+      { id: "general", label: "Thông tin chung", icon: User },
+    ];
+
+    if (userType === "employee") {
+      items.push({ id: "work", label: "Công việc", icon: Briefcase });
+    }
+
+    if (userType === "supplier") {
+      items.push({ id: "supplier_link", label: "Nhà cung cấp", icon: Store });
+    }
+
+    // Roles & Security for users with accounts
+    items.push({ id: "roles", label: "Phân quyền", icon: ShieldCheck });
+    items.push({ id: "security", label: "Bảo mật", icon: KeyRound });
+
+    return items;
+  }, [userType, isCustomer]);
+
+  // -- Initialization --
+  useEffect(() => {
+    if (open) {
+      setError("");
+      setIsSubmitting(false);
+      setActiveSection("general");
+
+      if (mode === "create") {
+        const initialType =
+          viewMode === "crm"
+            ? "customer"
+            : viewMode === "srm"
+              ? "supplier"
+              : "employee";
+        setUserType(initialType);
+        setProfileData({
+          status: "active",
+          name: "",
+          email: "",
+          phone: "",
+          address: "",
+          departmentId: "",
+          jobTitleId: "",
+          supplierId: "",
+          groupId: "",
+          idNumber: "",
+          gender: "",
+          birthday: "",
+        });
+        setSelectedRoles([]);
+        setSelectedBranches([]);
+        setPasswordData({ password: "", confirm: "" });
+        setEnableAccount(false);
+      } else {
+        const d = displayData;
+        let type = "employee";
+        if (viewMode === "crm" || d.userType === "customer" || d.customerId)
+          type = "customer";
+        else if (d.userType === "supplier" || d.supplierId) type = "supplier";
+        else if (d.userType) type = d.userType;
+
+        setUserType(type);
+        setProfileData({
+          status: d.status || "active",
+          name: d.name || "",
+          email: d.email || "",
+          phone: d.phone || d.profiles?.phone || "",
+          address: d.address || d.profiles?.address || "",
+          departmentId: d.departmentId || d.profiles?.departmentId || "",
+          jobTitleId: d.jobTitleId || d.profiles?.jobTitleId || "",
+          supplierId: d.supplierId || d.profiles?.supplierId || "",
+          groupId: d.groupId || "",
+          idNumber: d.idNumber || "",
+          gender: d.gender || "",
+          birthday: d.birthday
+            ? new Date(d.birthday).toISOString().split("T")[0]
+            : "",
+        });
+        const roles = d.roleCodes || [];
+        setSelectedRoles(roles);
+        setSelectedBranches(d.branchIds || []);
+        setPasswordData({ password: "", confirm: "" });
+        // Enable account if user has roles or if it's not a customer (employees always have accounts?)
+        // For now, if roles exist, we assume account is enabled.
+        setEnableAccount(roles.length > 0 || type !== "customer");
+      }
+    }
+  }, [open, data, mode, viewMode]);
+
+  useEffect(() => {
+    if (open && branches?.length === 1) {
+      if (mode === "create" || (data?.branchIds?.length || 0) === 0) {
+        if (selectedBranches.length === 0) {
+          setSelectedBranches([branches[0].id]);
+        }
+      }
+    }
+  }, [open, branches, mode, data]);
+
+  // -- Helpers --
+  const getInitials = (name: string | null) => {
+    if (!name) return "U";
+    return name
+      .split(" ")
+      .map((n) => n[0])
+      .join("")
+      .toUpperCase()
+      .slice(0, 2);
+  };
+
+  const filteredRoles = useMemo(() => {
+    if (!roleSearchQuery.trim()) return roles;
+    const query = roleSearchQuery.toLowerCase();
+    return roles.filter(
+      (r) =>
+        r.name.toLowerCase().includes(query) ||
+        r.code.toLowerCase().includes(query),
+    );
+  }, [roles, roleSearchQuery]);
+
+  // -- Save Handler --
+  const handleSave = async () => {
+    try {
+      setIsSubmitting(true);
+      setError("");
+
+      // Prepare payload
+      const payload: any = {
+        ...profileData,
+        userType, // Add userType to payload
+        roleCodes: selectedRoles,
+        branchIds: selectedBranches,
+      };
+
+      // Handle Password for Customer
+      if (isCustomer) {
+        if (enableAccount) {
+          if (passwordData.password) {
+            if (passwordData.password !== passwordData.confirm) {
+              setError("Mật khẩu xác nhận không khớp");
+              setIsSubmitting(false);
+              return;
+            }
+            if (passwordData.password.length < 6) {
+              setError("Mật khẩu phải có ít nhất 6 ký tự");
+              setIsSubmitting(false);
+              return;
+            }
+            payload.password = passwordData.password;
+          } else if (mode === "create") {
+            // If creating a customer account, password is required
+            setError("Mật khẩu là bắt buộc cho tài khoản khách hàng mới");
+            setIsSubmitting(false);
+            return;
+          }
+        } else {
+          // If account not enabled, default or clear
+          if (mode === "create") {
+            payload.password = "Goeat@123456";
+          } else {
+            delete payload.password;
+            payload.roleCodes = [];
+          }
+        }
+      } else {
+        if (passwordData.password) {
+          if (passwordData.password !== passwordData.confirm) {
+            setError("Mật khẩu xác nhận không khớp");
+            setIsSubmitting(false);
+            return;
+          }
+          if (passwordData.password.length < 6) {
+            setError("Mật khẩu phải có ít nhất 6 ký tự");
+            setIsSubmitting(false);
+            return;
+          }
+          payload.password = passwordData.password;
+        } else if (mode === "create") {
+          setError("Mật khẩu là bắt buộc cho tài khoản mới");
+          setIsSubmitting(false);
+          return;
+        }
+      }
+
+      if (!payload.name) {
+        setError("Tên là bắt buộc");
+        setIsSubmitting(false);
+        return;
+      }
+
+      // Call API
+      if (mode === "create") {
+        if (onSaveProfile) await onSaveProfile(payload);
+        toast.success("Đã tạo hồ sơ mới thành công");
+      } else {
+        // Save all data at once (profile + roles + branches)
+        if (onSaveProfile) {
+          await onSaveProfile(payload, data.id);
+        }
+
+        // Also save password if provided
+        if (payload.password && onSavePassword) {
+          await onSavePassword(data.id, payload.password);
+        }
+
+        toast.success("Đã lưu thông tin");
+      }
+
+      onOpenChange(false);
+    } catch (e: any) {
+      console.error(e);
+      setError(e.message || "Đã xảy ra lỗi");
+      toast.error("Đã xảy ra lỗi khi lưu thông tin");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // -- Render Helpers --
+  const isActive = profileData.status === "active";
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-[100dvw] h-[100dvh] max-w-none max-h-none sm:w-auto sm:max-w-5xl sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-[#dee3e9] dark:border-[#1c1e21] shadow-[0_12px_32px_rgba(0,0,0,0.1)] bg-[#ffffff] dark:bg-[#0a1317] rounded-none sm:rounded-[12px] [&>button.absolute]:hidden">
+        <DialogHeader className="sr-only">
+          <DialogTitle>
+            {mode === "create" ? "Tạo mới" : "Chỉnh sửa"}
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col w-full h-full overflow-hidden">
+          {/* TOP HEADER: Profile Info + Actions */}
+          <div className="shrink-0 flex flex-col border-b border-[#e2e8f0] dark:border-[#334155] bg-[#f8fafc] dark:bg-[#0f172a] px-6 pt-5 pb-0">
+            <div className="flex flex-col sm:flex-row sm:items-start justify-between gap-4 pb-5">
+              {/* Profile Header */}
+              <div className="flex items-center gap-4">
+                <div className="relative">
+                  <Avatar className="h-12 w-12 sm:h-14 sm:w-14 rounded-full border border-[#e2e8f0] dark:border-[#334155]">
+                    <AvatarImage
+                      src={displayData.avatar}
+                      className="object-cover rounded-full"
+                    />
+                    <AvatarFallback className="text-[16px] sm:text-[18px] font-semibold bg-[#1641CE] text-white dark:bg-[#1E40AF] dark:text-white rounded-full">
+                      {getInitials(profileData.name)}
+                    </AvatarFallback>
+                  </Avatar>
+                  <div
+                    className={cn(
+                      "absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 sm:w-4 sm:h-4 border-[2px] border-[#f8fafc] dark:border-[#0f172a] rounded-full z-10",
+                      isActive ? "bg-[#10b981]" : "bg-[#cbd5e1]"
+                    )}
+                    title={isActive ? "Hoạt động" : "Đã khóa"}
+                  />
+                </div>
+                <div>
+                  <h2 className="text-[18px] sm:text-[20px] font-semibold leading-tight text-[#0f172a] dark:text-white">
+                    {profileData.name || "Chưa đặt tên"}
+                  </h2>
+                  <p className="mt-1 text-[13px] text-[#64748b] dark:text-[#94a3b8]">
+                    {profileData.email || profileData.phone || "Chưa có thông tin liên hệ"}
+                  </p>
+                </div>
+              </div>
+
+              {/* Actions & User Type */}
+              <div className="flex items-center gap-2 sm:gap-3 shrink-0">
+                {viewMode === "admin" ? (
+                  <Select
+                    value={userType}
+                    onValueChange={(val) => setUserType(val)}
+                    disabled={mode === "view"}
+                  >
+                    <SelectTrigger className="w-[140px] bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-[#1641CE] focus:border-[#1641CE] h-9 rounded-md">
+                      <SelectValue placeholder="Chọn loại" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="employee">
+                        <span className="flex items-center gap-2">
+                          <UserCog className="h-4 w-4 text-[#1641CE]" />
+                          Nhân viên
+                        </span>
+                      </SelectItem>
+                      <SelectItem value="customer">
+                        <span className="flex items-center gap-2">
+                          <User className="h-4 w-4 text-[#059669]" />
+                          Khách hàng
+                        </span>
+                      </SelectItem>
+                      <SelectItem value="supplier">
+                        <span className="flex items-center gap-2">
+                          <Store className="h-4 w-4 text-[#EA580C]" />
+                          Nhà cung cấp
+                        </span>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                ) : (
+                  <div className="flex items-center gap-1.5 shrink-0">
+                    {userType === "employee" && (
+                      <span className="text-[12px] px-2.5 py-1 font-semibold rounded-md bg-[#1641CE]/10 text-[#1641CE] border border-[#1641CE]/20 inline-flex items-center">
+                        <UserCog className="h-3.5 w-3.5 mr-1.5" /> Nhân viên
+                      </span>
+                    )}
+                    {userType === "customer" && (
+                      <span className="text-[12px] px-2.5 py-1 font-semibold rounded-md bg-[#059669] text-white inline-flex items-center">
+                        <User className="h-3.5 w-3.5 mr-1.5" /> Khách hàng
+                      </span>
+                    )}
+                    {userType === "supplier" && (
+                      <span className="text-[12px] px-2.5 py-1 font-semibold rounded-md bg-[#EA580C] text-white inline-flex items-center">
+                        <Store className="h-3.5 w-3.5 mr-1.5" /> Nhà cung cấp
+                      </span>
+                    )}
+                  </div>
+                )}
+                
+                <Button
+                  variant="outline"
+                  onClick={() => onOpenChange(false)}
+                  className="border border-[#e2e8f0] bg-white dark:border-[#334155] text-[#475569] dark:text-white dark:bg-[#1e293b] hover:bg-[#f1f5f9] gap-2 h-9 rounded-md px-4 text-[13px] font-medium"
+                >
+                  <span className="hidden sm:inline">Đóng</span>
+                  <X className="h-4 w-4 sm:hidden" />
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={isSubmitting}
+                  className="bg-primary hover:bg-primary/90 text-primary-foreground min-w-[80px] h-9 px-5 gap-2 font-medium text-[13px] rounded-md"
+                >
+                  {isSubmitting ? (
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                  ) : (
+                    <CheckCircle2 className="h-4 w-4" />
+                  )}
+                  <span>{mode === "create" ? "Tạo" : "Lưu"}</span>
+                </Button>
+              </div>
+            </div>
+
+            {/* Corporate Navy Underline Tabs */}
+            <nav className="flex gap-6 overflow-x-auto hide-scrollbar">
+              {navItems.map((item) => (
+                <button
+                  key={item.id}
+                  onClick={() => setActiveSection(item.id)}
+                  className={cn(
+                    "relative pb-3 text-[14px] font-medium transition-all whitespace-nowrap flex items-center gap-2",
+                    activeSection === item.id
+                      ? "text-primary dark:text-primary"
+                      : "text-[#64748b] hover:text-[#0f172a] dark:text-[#94a3b8] dark:hover:text-white"
+                  )}
+                >
+                  <item.icon
+                    className={cn(
+                      "h-[16px] w-[16px]",
+                      activeSection === item.id
+                        ? "text-primary dark:text-primary"
+                        : "text-[#94a3b8]"
+                    )}
+                    strokeWidth={2}
+                  />
+                  {item.label}
+                  {activeSection === item.id && (
+                    <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-primary dark:bg-primary rounded-t-sm" />
+                  )}
+                </button>
+              ))}
+            </nav>
+          </div>
+
+          {/* MAIN CONTENT AREA */}
+          <div className="flex-1 bg-white dark:bg-[#0f172a] overflow-y-auto overscroll-contain touch-pan-y" style={{ WebkitOverflowScrolling: 'touch' }}>
+              <div className="p-4 sm:p-5 max-w-4xl mx-auto space-y-4 pb-20">
+                {/* General Section */}
+                {activeSection === "general" && (
+                  <div className="space-y-4 animate-in fade-in zoom-in-95 duration-200">
+
+                    <div className="grid md:grid-cols-2 gap-x-6 gap-y-4">
+                      <div className="space-y-1.5">
+                        <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">
+                          Họ và tên <span className="text-[#e41e3f]">*</span>
+                        </Label>
+                        <Input
+                          value={profileData.name}
+                          onChange={(e) =>
+                            setProfileData({
+                              ...profileData,
+                              name: e.target.value,
+                            })
+                          }
+                          placeholder="Nguyễn Văn A"
+                          className="bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">Email</Label>
+                        <Input
+                          value={profileData.email}
+                          onChange={(e) =>
+                            setProfileData({
+                              ...profileData,
+                              email: e.target.value,
+                            })
+                          }
+                          placeholder="email@example.com"
+                          className="bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">Số điện thoại</Label>
+                        <Input
+                          value={profileData.phone}
+                          onChange={(e) =>
+                            setProfileData({
+                              ...profileData,
+                              phone: e.target.value,
+                            })
+                          }
+                          placeholder="0912..."
+                          className="bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">Địa chỉ</Label>
+                        <Input
+                          value={profileData.address}
+                          onChange={(e) =>
+                            setProfileData({
+                              ...profileData,
+                              address: e.target.value,
+                            })
+                          }
+                          placeholder="Số nhà, đường..."
+                          className="bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]"
+                        />
+                      </div>
+                      {/* Status Toggle */}
+                      {viewMode === "admin" && (
+                        <div className="space-y-1.5">
+                          <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">Trạng thái</Label>
+                          <div className="flex items-center gap-3 h-9 px-3 rounded-[6px] border border-[#ced0d4] dark:border-[#333840] bg-[#ffffff] dark:bg-[#0a1317]">
+                            <Switch
+                              id="user-active-switch"
+                              checked={isActive}
+                              onCheckedChange={(checked) =>
+                                setProfileData({
+                                  ...profileData,
+                                  status: checked ? "active" : "inactive",
+                                })
+                              }
+                            />
+                            <span
+                              className={cn(
+                                "text-[13px] font-bold tracking-[-0.13px]",
+                                isActive ? "text-[#31a24c]" : "text-[#444950]",
+                              )}
+                            >
+                              {isActive ? "Hoạt động" : "Đã khóa"}
+                            </span>
+                          </div>
+                        </div>
+                      )}
+                      {/* Additional Info for All */}
+                      <div className="space-y-1.5">
+                        <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">Ngày sinh</Label>
+                        <Input
+                          type="date"
+                          value={profileData.birthday}
+                          onChange={(e) =>
+                            setProfileData({
+                              ...profileData,
+                              birthday: e.target.value,
+                            })
+                          }
+                          className="bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]"
+                        />
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">Giới tính</Label>
+                        <Select
+                          value={profileData.gender}
+                          onValueChange={(val) =>
+                            setProfileData({ ...profileData, gender: val })
+                          }
+                        >
+                          <SelectTrigger className="bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]">
+                            <SelectValue placeholder="Chọn giới tính" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="male">Nam</SelectItem>
+                            <SelectItem value="female">Nữ</SelectItem>
+                            <SelectItem value="other">Khác</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-1.5">
+                        <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">CCCD/CMND</Label>
+                        <Input
+                          value={profileData.idNumber}
+                          onChange={(e) =>
+                            setProfileData({
+                              ...profileData,
+                              idNumber: e.target.value,
+                            })
+                          }
+                          className="bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]"
+                        />
+                      </div>
+
+                      {/* Customer Specific */}
+                      {isCustomer && (
+                        <div className="space-y-1.5">
+                          <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">
+                            Nhóm khách hàng
+                          </Label>
+                          <Select
+                            value={profileData.groupId}
+                            onValueChange={(val) =>
+                              setProfileData({ ...profileData, groupId: val })
+                            }
+                          >
+                            <SelectTrigger className="bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]">
+                              <SelectValue placeholder="Chọn nhóm" />
+                            </SelectTrigger>
+                            <SelectContent>
+                              {customerGroups?.map((g) => (
+                                <SelectItem key={g.id} value={g.id}>
+                                  {g.name}
+                                </SelectItem>
+                              ))}
+                            </SelectContent>
+                          </Select>
+                        </div>
+                      )}
+                    </div>
+
+                    {isCustomer && (
+                      <div className="pt-4">
+                        <div className="flex items-center justify-between mb-4 border-b border-[#dee3e9] pb-2">
+                          <h3 className="text-[18px] font-bold tracking-[-0.14px] text-[#0a1317] dark:text-white">
+                            Tài khoản đăng nhập
+                          </h3>
+                          <Switch
+                            checked={enableAccount}
+                            onCheckedChange={setEnableAccount}
+                          />
+                        </div>
+
+                        {enableAccount && (
+                          <div className="space-y-4 animate-in fade-in slide-in-from-top-2">
+                            <div className="grid md:grid-cols-2 gap-x-6 gap-y-4">
+                              <div className="space-y-1.5 col-span-2 md:col-span-1">
+                                <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">
+                                  Mật khẩu
+                                </Label>
+                                <div className="relative">
+                                  <Input
+                                    type={showPassword ? "text" : "password"}
+                                    value={passwordData.password}
+                                    onChange={(e) =>
+                                      setPasswordData((prev) => ({
+                                        ...prev,
+                                        password: e.target.value,
+                                      }))
+                                    }
+                                    placeholder="Nhập mật khẩu"
+                                    className="pr-10 bg-[#ffffff] dark:bg-[#0a1317] border-[#ced0d4] dark:border-[#333840] focus:ring-[#0064e0] focus:border-[#0064e0] rounded-[6px] h-9 text-[14px]"
+                                  />
+                                  <Button
+                                    type="button"
+                                    variant="ghost"
+                                    size="icon"
+                                    className="absolute right-0 top-0 h-full w-9 text-[#444950] hover:text-[#0a1317]"
+                                    onClick={() =>
+                                      setShowPassword(!showPassword)
+                                    }
+                                  >
+                                    {showPassword ? (
+                                      <EyeOff className="h-4 w-4" />
+                                    ) : (
+                                      <Eye className="h-4 w-4" />
+                                    )}
+                                  </Button>
+                                </div>
+                                <p className="text-[12px] text-[#444950] mt-1.5 flex items-center gap-1.5">
+                                  <span className="inline-block w-1.5 h-1.5 rounded-full bg-[#0064e0]" />
+                                  Mặc định:{" "}
+                                  <span className="font-mono font-bold text-[#1c1e21] dark:text-white">
+                                    Goeat@123456
+                                  </span>
+                                </p>
+                              </div>
+                            </div>
+
+                            <div className="space-y-2 pt-2">
+                              <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">
+                                Phân quyền
+                              </Label>
+                              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                                {filteredRoles.map((role) => {
+                                  const isSelected = selectedRoles.includes(
+                                    role.code,
+                                  );
+                                  return (
+                                    <div
+                                      key={role.code}
+                                      className={cn(
+                                        "flex items-start gap-3 p-3 rounded-md border cursor-pointer hover:bg-slate-50 transition-colors",
+                                        isSelected
+                                          ? "border-blue-500 bg-blue-50/50"
+                                          : "bg-background border-slate-200 dark:border-slate-800",
+                                      )}
+                                      onClick={() => {
+                                        setSelectedRoles((prev) =>
+                                          prev.includes(role.code)
+                                            ? prev.filter(
+                                              (c) => c !== role.code,
+                                            )
+                                            : [...prev, role.code],
+                                        );
+                                      }}
+                                    >
+                                      <Checkbox
+                                        checked={isSelected}
+                                        className="mt-1 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
+                                      />
+                                      <div className="space-y-0.5">
+                                        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                                          {role.name}
+                                        </p>
+                                        <p className="text-xs text-muted-foreground line-clamp-1">
+                                          {role.description || role.code}
+                                        </p>
+                                      </div>
+                                    </div>
+                                  );
+                                })}
+                              </div>
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+
+                {/* Work Section */}
+                {activeSection === "work" && (
+                  <div className="space-y-4 animate-in fade-in zoom-in-95 duration-200">
+                    <div className="grid md:grid-cols-2 gap-x-8 gap-y-6">
+                      <div className="space-y-2">
+                        <Label className="text-[13px] font-medium text-[#41454d] dark:text-[#9297a0]">Phòng ban</Label>
+                        <Select
+                          value={profileData.departmentId}
+                          onValueChange={(val) =>
+                            setProfileData({
+                              ...profileData,
+                              departmentId: val,
+                            })
+                          }
+                        >
+                          <SelectTrigger className="bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] focus:ring-[#458fff] focus:border-[#458fff] shadow-sm rounded-[6px]">
+                            <SelectValue placeholder="Chọn phòng ban" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {departments?.map((d) => (
+                              <SelectItem key={d.id} value={d.id}>
+                                {d.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="space-y-2">
+                        <Label className="text-[13px] font-medium text-[#41454d] dark:text-[#9297a0]">Chức danh</Label>
+                        <Select
+                          value={profileData.jobTitleId}
+                          onValueChange={(val) =>
+                            setProfileData({ ...profileData, jobTitleId: val })
+                          }
+                        >
+                          <SelectTrigger className="bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] focus:ring-[#458fff] focus:border-[#458fff] shadow-sm rounded-[6px]">
+                            <SelectValue placeholder="Chọn chức danh" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {jobTitles?.map((j) => (
+                              <SelectItem key={j.id} value={j.id}>
+                                {j.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="col-span-2 space-y-3 pt-2">
+                        <Label className="text-[13px] font-medium text-[#41454d] dark:text-[#9297a0]">Chi nhánh làm việc</Label>
+                        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                          {branches?.map((branch) => {
+                            const isSelected = selectedBranches.includes(branch.id);
+                            return (
+                              <div
+                                key={branch.id}
+                                className={cn(
+                                  "flex items-center gap-3 p-3 rounded-md border cursor-pointer hover:bg-slate-50 transition-colors",
+                                  isSelected
+                                    ? "border-blue-500 bg-blue-50/50"
+                                    : "bg-background border-slate-200 dark:border-slate-800",
+                                )}
+                                onClick={() => {
+                                  setSelectedBranches((prev) =>
+                                    prev.includes(branch.id)
+                                      ? prev.filter((id) => id !== branch.id)
+                                      : [...prev, branch.id],
+                                  );
+                                }}
+                              >
+                                <Checkbox
+                                  checked={isSelected}
+                                  className="data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
+                                />
+                                <span className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                                  {branch.name}
+                                </span>
+                              </div>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {activeSection === "supplier_link" && (
+                  <div className="space-y-4 animate-in fade-in zoom-in-95 duration-200">
+                    <div className="max-w-2xl space-y-6">
+                      <div className="space-y-2">
+                        <Label className="text-[13px] font-medium text-[#41454d] dark:text-[#9297a0]">
+                          Chọn nhà cung cấp
+                        </Label>
+                        <Select
+                          value={profileData.supplierId}
+                          onValueChange={(val) =>
+                            setProfileData({ ...profileData, supplierId: val })
+                          }
+                        >
+                          <SelectTrigger className="bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] focus:ring-[#458fff] focus:border-[#458fff] shadow-sm rounded-[6px]">
+                            <SelectValue placeholder="Chọn nhà cung cấp" />
+                          </SelectTrigger>
+                          <SelectContent>
+                            {suppliers?.map((s) => (
+                              <SelectItem key={s.id} value={s.id}>
+                                {s.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </div>
+                      <div className="rounded-md bg-blue-50 p-4 text-sm text-blue-700 flex items-start gap-3">
+                        <Store className="h-5 w-5 mt-0.5 shrink-0" />
+                        <p>
+                          Tài khoản này sẽ được liên kết với nhà cung cấp đã
+                          chọn. Người dùng sẽ có quyền truy cập vào dữ liệu và
+                          chức năng dành riêng cho nhà cung cấp này.
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {activeSection === "roles" && (
+                  <div className="animate-in fade-in zoom-in-95 duration-200">
+                    <div className="sticky -top-4 sm:-top-5 pt-2 sm:pt-2 pb-4 -mx-4 sm:-mx-5 px-4 sm:px-5 bg-white/95 dark:bg-[#0f172a]/95 backdrop-blur-sm z-10 border-b border-[#e2e8f0] dark:border-[#334155] mb-4 shadow-sm">
+                      <div className="relative max-w-md">
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#64748b]" />
+                        <Input
+                          placeholder="Tìm kiếm vai trò..."
+                          value={roleSearchQuery}
+                          onChange={(e) => setRoleSearchQuery(e.target.value)}
+                          className="pl-9 bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary shadow-sm rounded-md h-9 text-[13px]"
+                        />
+                      </div>
+                    </div>
+
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                      {filteredRoles.map((role) => {
+                        const isSelected = selectedRoles.includes(role.code);
+                        return (
+                          <div
+                            key={role.code}
+                            className={cn(
+                              "flex items-start gap-3 p-3 rounded-md border cursor-pointer hover:bg-slate-50 transition-colors",
+                              isSelected
+                                ? "border-blue-500 bg-blue-50/50"
+                                : "bg-background border-slate-200 dark:border-slate-800",
+                            )}
+                            onClick={() => {
+                              setSelectedRoles((prev) =>
+                                prev.includes(role.code)
+                                  ? prev.filter((c) => c !== role.code)
+                                  : [...prev, role.code],
+                              );
+                            }}
+                          >
+                            <Checkbox
+                              checked={isSelected}
+                              className="mt-1 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
+                            />
+                            <div className="space-y-0.5">
+                              <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                                {role.name}
+                              </p>
+                              <p className="text-xs text-muted-foreground line-clamp-1">
+                                {role.description || role.code}
+                              </p>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                {activeSection === "security" && (
+                  <div className="space-y-4 animate-in fade-in zoom-in-95 duration-200">
+                    <div className="max-w-xl space-y-6">
+                      <div className="flex items-center gap-3 rounded-md bg-amber-50 p-4 text-sm text-amber-900 border border-amber-100">
+                        <ShieldCheck className="h-5 w-5 shrink-0 text-amber-600" />
+                        <span>
+                          Mật khẩu mạnh giúp bảo vệ tài khoản khỏi truy cập trái
+                          phép. Sử dụng ít nhất 6 ký tự bao gồm chữ và số.
+                        </span>
+                      </div>
+                      <div className="grid md:grid-cols-2 gap-x-8 gap-y-6">
+                        <div className="space-y-2">
+                          <Label className="text-[13px] font-medium text-[#41454d] dark:text-[#9297a0]">Mật khẩu mới</Label>
+                          <div className="relative">
+                            <Input
+                              type={showPassword ? "text" : "password"}
+                              value={passwordData.password}
+                              onChange={(e) =>
+                                setPasswordData((prev) => ({
+                                  ...prev,
+                                  password: e.target.value,
+                                }))
+                              }
+                              className="pr-10 bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] focus:ring-[#458fff] focus:border-[#458fff] shadow-sm rounded-[6px]"
+                            />
+                            <Button
+                              type="button"
+                              variant="ghost"
+                              size="icon"
+                              className="absolute right-0 top-0 h-full w-9 text-muted-foreground hover:text-foreground"
+                              onClick={() => setShowPassword(!showPassword)}
+                            >
+                              {showPassword ? (
+                                <EyeOff className="h-4 w-4" />
+                              ) : (
+                                <Eye className="h-4 w-4" />
+                              )}
+                            </Button>
+                          </div>
+                        </div>
+                        <div className="space-y-2">
+                          <Label className="text-[13px] font-medium text-[#41454d] dark:text-[#9297a0]">
+                            Xác nhận mật khẩu
+                          </Label>
+                          <Input
+                            type="password"
+                            value={passwordData.confirm}
+                            onChange={(e) =>
+                              setPasswordData((prev) => ({
+                                ...prev,
+                                confirm: e.target.value,
+                              }))
+                            }
+                            className="bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] focus:ring-[#458fff] focus:border-[#458fff] shadow-sm rounded-[6px]"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                {error && (
+                  <div className="p-4 text-sm text-destructive bg-destructive/5 border border-destructive/20 rounded-md flex items-center gap-2 animate-in fade-in slide-in-from-bottom-2">
+                    <Ban className="h-4 w-4" />
+                    {error}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+      </DialogContent>
+    </Dialog>
+  );
+}