@goplusvn/core 0.1.46 → 0.1.48

package/src/schemas/branch.schema.ts

@@ -44,6 +44,41 @@ export const branchSchema = z.object({
     .nullable()
     .or(z.literal("")),
 
+  position: z
+    .string()
+    .max(255, "Chức vụ tối đa 255 ký tự")
+    .trim()
+    .optional()
+    .nullable(),
+
+  representativePhone: z
+    .string()
+    .max(20, "Số điện thoại tối đa 20 ký tự")
+    .trim()
+    .optional()
+    .nullable(),
+
+  citizenId: z
+    .string()
+    .max(50, "Số CCCD tối đa 50 ký tự")
+    .trim()
+    .optional()
+    .nullable(),
+
+  taxCode: z
+    .string()
+    .max(50, "Mã số thuế tối đa 50 ký tự")
+    .trim()
+    .optional()
+    .nullable(),
+
+  bankAccount: z
+    .string()
+    .max(255, "Số tài khoản tối đa 255 ký tự")
+    .trim()
+    .optional()
+    .nullable(),
+
   status: z.enum(["active", "inactive"]).default("active"),
 });
 

package/src/schemas/user.schema.ts

@@ -3,6 +3,8 @@ import { z } from "zod";
 export const userSchema = z.object({
   name: z.string().min(1, "Tên hiển thị là bắt buộc"),
   email: z.string().email("Email không hợp lệ"),
+  phoneNumber: z.string().optional(),
+  address: z.string().optional(),
   // Support both boolean and status string, normalize to boolean
   isActive: z.preprocess((val) => {
     if (typeof val === "boolean") return val;

package/src/schemas/warehouse.schema.ts

@@ -32,6 +32,8 @@ export const warehouseSchema = z.object({
     .or(z.literal(""))
     .transform((val) => val || ""),
 
+  branchId: z.string().optional(),
+
   status: z.preprocess((val) => {
     // Hỗ trợ boolean từ switch field (true -> active, false -> inactive)
     if (typeof val === "boolean") {

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

@@ -400,7 +400,7 @@ export function UnifiedProfileDialog({
 
   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">
+      <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-border shadow-[0_12px_32px_rgba(0,0,0,0.1)] bg-background rounded-none sm:rounded-[12px] [&>button.absolute]:hidden">
         <DialogHeader className="sr-only">
           <DialogTitle>
             {mode === "create" ? "Tạo mới" : "Chỉnh sửa"}
@@ -409,33 +409,33 @@ export function UnifiedProfileDialog({
 
         <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="shrink-0 flex flex-col border-b border-border bg-muted 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]">
+                  <Avatar className="h-12 w-12 sm:h-14 sm:w-14 rounded-full border border-border">
                     <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">
+                    <AvatarFallback className="text-[16px] sm:text-[18px] font-semibold bg-primary text-primary-foreground 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]"
+                      "absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 sm:w-4 sm:h-4 border-[2px] border-muted rounded-full z-10",
+                      isActive ? "bg-success-semantic" : "bg-text-tertiary"
                     )}
                     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">
+                  <h2 className="text-[18px] sm:text-[20px] font-semibold leading-tight text-foreground">
                     {profileData.name || "Chưa đặt tên"}
                   </h2>
-                  <p className="mt-1 text-[13px] text-[#64748b] dark:text-[#94a3b8]">
+                  <p className="mt-1 text-[13px] text-muted-foreground">
                     {profileData.email || profileData.phone || "Chưa có thông tin liên hệ"}
                   </p>
                 </div>
@@ -455,7 +455,7 @@ export function UnifiedProfileDialog({
                       // dịch kèm `display:block` với độ ưu tiên (0,1,1) cao hơn `inline-flex`
                       // (0,1,0) của span icon+chữ bên trong, nên icon (svg Preflight display:block)
                       // bị đẩy xuống dòng riêng. `!inline-flex` (!important) thắng tuyệt đối.
-                      className="shrink-0 h-9 min-h-0 whitespace-nowrap [&_span]:!inline-flex [&_span]:!items-center [&_span]:!gap-2 [&_span]:overflow-hidden [&_svg]:shrink-0 bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-[#1641CE] focus:border-[#1641CE] rounded-md"
+                      className="shrink-0 h-9 min-h-0 whitespace-nowrap [&_span]:!inline-flex [&_span]:!items-center [&_span]:!gap-2 [&_span]:overflow-hidden [&_svg]:shrink-0 bg-background border-input focus:ring-primary focus:border-primary rounded-md"
                     >
                       <SelectValue placeholder="Chọn loại" />
                     </SelectTrigger>
@@ -465,7 +465,7 @@ export function UnifiedProfileDialog({
                           className="inline-flex items-center gap-2"
                           style={{ whiteSpace: "nowrap" }}
                         >
-                          <UserCog className="h-4 w-4 text-[#1641CE] shrink-0" />
+                          <UserCog className="h-4 w-4 text-primary shrink-0" />
                           Nhân viên
                         </span>
                       </SelectItem>
@@ -474,7 +474,7 @@ export function UnifiedProfileDialog({
                           className="inline-flex items-center gap-2"
                           style={{ whiteSpace: "nowrap" }}
                         >
-                          <User className="h-4 w-4 text-[#059669] shrink-0" />
+                          <User className="h-4 w-4 text-emerald-600 shrink-0" />
                           Khách hàng
                         </span>
                       </SelectItem>
@@ -483,7 +483,7 @@ export function UnifiedProfileDialog({
                           className="inline-flex items-center gap-2"
                           style={{ whiteSpace: "nowrap" }}
                         >
-                          <Store className="h-4 w-4 text-[#EA580C] shrink-0" />
+                          <Store className="h-4 w-4 text-orange-600 shrink-0" />
                           Nhà cung cấp
                         </span>
                       </SelectItem>
@@ -492,17 +492,17 @@ export function UnifiedProfileDialog({
                 ) : (
                   <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">
+                      <span className="text-[12px] px-2.5 py-1 font-semibold rounded-md bg-primary/10 text-primary border border-primary/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">
+                      <span className="text-[12px] px-2.5 py-1 font-semibold rounded-md bg-emerald-600 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">
+                      <span className="text-[12px] px-2.5 py-1 font-semibold rounded-md bg-orange-600 text-white inline-flex items-center">
                         <Store className="h-3.5 w-3.5 mr-1.5" /> Nhà cung cấp
                       </span>
                     )}
@@ -512,7 +512,7 @@ export function UnifiedProfileDialog({
                 <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"
+                  className="border border-border bg-background text-foreground hover:bg-accent 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" />
@@ -542,7 +542,7 @@ export function UnifiedProfileDialog({
                     "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"
+                      : "text-muted-foreground hover:text-foreground"
                   )}
                 >
                   <item.icon
@@ -550,7 +550,7 @@ export function UnifiedProfileDialog({
                       "h-[16px] w-[16px]",
                       activeSection === item.id
                         ? "text-primary dark:text-primary"
-                        : "text-[#94a3b8]"
+                        : "text-muted-foreground"
                     )}
                     strokeWidth={2}
                   />
@@ -564,7 +564,7 @@ export function UnifiedProfileDialog({
           </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="flex-1 bg-background 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" && (
@@ -572,8 +572,8 @@ export function UnifiedProfileDialog({
 
                     <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 className="text-[13px] font-medium text-foreground">
+                          Họ và tên <span className="text-destructive">*</span>
                         </Label>
                         <Input
                           value={profileData.name}
@@ -584,11 +584,11 @@ export function UnifiedProfileDialog({
                             })
                           }
                           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]"
+                          className="bg-background border-input 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>
+                        <Label className="text-[13px] font-medium text-foreground">Email</Label>
                         <Input
                           value={profileData.email}
                           onChange={(e) =>
@@ -598,11 +598,11 @@ export function UnifiedProfileDialog({
                             })
                           }
                           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]"
+                          className="bg-background border-input 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>
+                        <Label className="text-[13px] font-medium text-foreground">Số điện thoại</Label>
                         <Input
                           value={profileData.phone}
                           onChange={(e) =>
@@ -612,11 +612,11 @@ export function UnifiedProfileDialog({
                             })
                           }
                           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]"
+                          className="bg-background border-input 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>
+                        <Label className="text-[13px] font-medium text-foreground">Địa chỉ</Label>
                         <Input
                           value={profileData.address}
                           onChange={(e) =>
@@ -626,14 +626,14 @@ export function UnifiedProfileDialog({
                             })
                           }
                           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]"
+                          className="bg-background border-input 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]">
+                          <Label className="text-[13px] font-medium text-foreground">Trạng thái</Label>
+                          <div className="flex items-center gap-3 h-9 px-3 rounded-[6px] border border-input bg-background">
                             <Switch
                               id="user-active-switch"
                               checked={isActive}
@@ -647,7 +647,7 @@ export function UnifiedProfileDialog({
                             <span
                               className={cn(
                                 "text-[13px] font-bold tracking-[-0.13px]",
-                                isActive ? "text-[#31a24c]" : "text-[#444950]",
+                                isActive ? "text-success-text" : "text-muted-foreground",
                               )}
                             >
                               {isActive ? "Hoạt động" : "Đã khóa"}
@@ -657,7 +657,7 @@ export function UnifiedProfileDialog({
                       )}
                       {/* 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>
+                        <Label className="text-[13px] font-medium text-foreground">Ngày sinh</Label>
                         <DatePicker
                           value={ymdToDate(profileData.birthday)}
                           onValueChange={(d) =>
@@ -668,18 +668,18 @@ export function UnifiedProfileDialog({
                           }
                           formatStr="dd/MM/yyyy"
                           placeholder="dd/mm/yyyy"
-                          buttonClassName="bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]"
+                          buttonClassName="bg-background border-input 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>
+                        <Label className="text-[13px] font-medium text-foreground">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]">
+                          <SelectTrigger className="bg-background border-input focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]">
                             <SelectValue placeholder="Chọn giới tính" />
                           </SelectTrigger>
                           <SelectContent>
@@ -690,7 +690,7 @@ export function UnifiedProfileDialog({
                         </Select>
                       </div>
                       <div className="space-y-1.5">
-                        <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">CCCD/CMND</Label>
+                        <Label className="text-[13px] font-medium text-foreground">CCCD/CMND</Label>
                         <Input
                           value={profileData.idNumber}
                           onChange={(e) =>
@@ -699,14 +699,14 @@ export function UnifiedProfileDialog({
                               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]"
+                          className="bg-background border-input 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]">
+                          <Label className="text-[13px] font-medium text-foreground">
                             Nhóm khách hàng
                           </Label>
                           <Select
@@ -715,7 +715,7 @@ export function UnifiedProfileDialog({
                               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]">
+                            <SelectTrigger className="bg-background border-input focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]">
                               <SelectValue placeholder="Chọn nhóm" />
                             </SelectTrigger>
                             <SelectContent>
@@ -732,8 +732,8 @@ export function UnifiedProfileDialog({
 
                     {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">
+                        <div className="flex items-center justify-between mb-4 border-b border-border pb-2">
+                          <h3 className="text-[18px] font-bold tracking-[-0.14px] text-foreground">
                             Tài khoản đăng nhập
                           </h3>
                           <Switch
@@ -746,7 +746,7 @@ export function UnifiedProfileDialog({
                           <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]">
+                                <Label className="text-[13px] font-medium text-foreground">
                                   Mật khẩu
                                 </Label>
                                 <div className="relative">
@@ -760,13 +760,13 @@ export function UnifiedProfileDialog({
                                       }))
                                     }
                                     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]"
+                                    className="pr-10 bg-background border-input focus:ring-primary focus:border-primary 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]"
+                                    className="absolute right-0 top-0 h-full w-9 text-muted-foreground hover:text-foreground"
                                     onClick={() =>
                                       setShowPassword(!showPassword)
                                     }
@@ -778,10 +778,10 @@ export function UnifiedProfileDialog({
                                     )}
                                   </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]" />
+                                <p className="text-[12px] text-muted-foreground mt-1.5 flex items-center gap-1.5">
+                                  <span className="inline-block w-1.5 h-1.5 rounded-full bg-primary" />
                                   Mặc định:{" "}
-                                  <span className="font-mono font-bold text-[#1c1e21] dark:text-white">
+                                  <span className="font-mono font-bold text-foreground">
                                     Goeat@123456
                                   </span>
                                 </p>
@@ -789,7 +789,7 @@ export function UnifiedProfileDialog({
                             </div>
 
                             <div className="space-y-2 pt-2">
-                              <Label className="text-[13px] font-medium text-[#334155] dark:text-[#cbd5e1]">
+                              <Label className="text-[13px] font-medium text-foreground">
                                 Phân quyền
                               </Label>
                               <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
@@ -801,10 +801,10 @@ export function UnifiedProfileDialog({
                                     <div
                                       key={role.code}
                                       className={cn(
-                                        "flex items-start gap-3 p-3 rounded-md border cursor-pointer hover:bg-slate-50 transition-colors",
+                                        "flex items-start gap-3 p-3 rounded-md border cursor-pointer hover:bg-accent/50 transition-colors",
                                         isSelected
-                                          ? "border-blue-500 bg-blue-50/50"
-                                          : "bg-background border-slate-200 dark:border-slate-800",
+                                          ? "border-primary bg-primary/5"
+                                          : "bg-background border-border",
                                       )}
                                       onClick={() => {
                                         setSelectedRoles((prev) =>
@@ -818,10 +818,10 @@ export function UnifiedProfileDialog({
                                     >
                                       <Checkbox
                                         checked={isSelected}
-                                        className="mt-1 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
+                                        className="mt-1 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
                                       />
                                       <div className="space-y-0.5">
-                                        <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                                        <p className="text-sm font-medium text-foreground">
                                           {role.name}
                                         </p>
                                         <p className="text-xs text-muted-foreground line-clamp-1">
@@ -845,7 +845,7 @@ export function UnifiedProfileDialog({
                   <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>
+                        <Label className="text-[13px] font-medium text-foreground">Phòng ban</Label>
                         <Select
                           value={profileData.departmentId}
                           onValueChange={(val) =>
@@ -855,7 +855,7 @@ export function UnifiedProfileDialog({
                             })
                           }
                         >
-                          <SelectTrigger className="bg-[#ffffff] dark:bg-[#181d26] border-[#dddddd] dark:border-[#333840] focus:ring-[#458fff] focus:border-[#458fff] shadow-sm rounded-[6px]">
+                          <SelectTrigger className="bg-background border-input focus:ring-primary focus:border-primary shadow-sm rounded-[6px]">
                             <SelectValue placeholder="Chọn phòng ban" />
                           </SelectTrigger>
                           <SelectContent>
@@ -868,14 +868,14 @@ export function UnifiedProfileDialog({
                         </Select>
                       </div>
                       <div className="space-y-2">
-                        <Label className="text-[13px] font-medium text-[#41454d] dark:text-[#9297a0]">Chức danh</Label>
+                        <Label className="text-[13px] font-medium text-foreground">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]">
+                          <SelectTrigger className="bg-background border-input focus:ring-primary focus:border-primary shadow-sm rounded-[6px]">
                             <SelectValue placeholder="Chọn chức danh" />
                           </SelectTrigger>
                           <SelectContent>
@@ -889,8 +889,8 @@ export function UnifiedProfileDialog({
                       </div>
                       <div className="col-span-2 space-y-3 pt-2">
                         <div className="flex items-center justify-between gap-3 flex-wrap">
-                          <Label className="text-[13px] font-medium text-[#41454d] dark:text-[#9297a0]">Chi nhánh làm việc</Label>
-                          <span className="inline-flex items-center gap-1 text-[12px] text-[#94a3b8]">
+                          <Label className="text-[13px] font-medium text-foreground">Chi nhánh làm việc</Label>
+                          <span className="inline-flex items-center gap-1 text-[12px] text-muted-foreground">
                             <Star className="h-3 w-3" />
                             Đánh dấu một chi nhánh mặc định
                           </span>
@@ -904,23 +904,23 @@ export function UnifiedProfileDialog({
                               <div
                                 key={branch.id}
                                 className={cn(
-                                  "flex items-center gap-3 p-3 rounded-md border cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors",
+                                  "flex items-center gap-3 p-3 rounded-md border cursor-pointer hover:bg-accent/50 transition-colors",
                                   isSelected
-                                    ? "border-blue-500 bg-blue-50/50 dark:bg-blue-500/10"
-                                    : "bg-background border-slate-200 dark:border-slate-800",
+                                    ? "border-primary bg-primary/5"
+                                    : "bg-background border-border",
                                 )}
                                 onClick={() => toggleBranch(branch.id)}
                               >
                                 <Checkbox
                                   checked={isSelected}
-                                  className="data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
+                                  className="data-[state=checked]:bg-primary data-[state=checked]:border-primary"
                                 />
-                                <span className="flex-1 text-sm font-medium text-slate-900 dark:text-slate-100">
+                                <span className="flex-1 text-sm font-medium text-foreground">
                                   {branch.name}
                                 </span>
                                 {isSelected &&
                                   (isDefault ? (
-                                    <span className="inline-flex items-center gap-1 rounded-full bg-blue-600 px-2 py-0.5 text-[11px] font-semibold text-white shrink-0">
+                                    <span className="inline-flex items-center gap-1 rounded-full bg-primary px-2 py-0.5 text-[11px] font-semibold text-primary-foreground shrink-0">
                                       <Star className="h-3 w-3 fill-current" />
                                       Mặc định
                                     </span>
@@ -932,7 +932,7 @@ export function UnifiedProfileDialog({
                                         markDefaultBranch(branch.id);
                                       }}
                                       title="Đặt làm chi nhánh mặc định"
-                                      className="inline-flex items-center gap-1 rounded-full border border-slate-200 dark:border-slate-700 px-2 py-0.5 text-[11px] font-medium text-slate-500 dark:text-slate-400 hover:border-blue-400 hover:text-blue-600 transition-colors shrink-0"
+                                      className="inline-flex items-center gap-1 rounded-full border border-border px-2 py-0.5 text-[11px] font-medium text-muted-foreground hover:border-primary/50 hover:text-primary transition-colors shrink-0"
                                     >
                                       <Star className="h-3 w-3" />
                                       Đặt mặc định
@@ -951,7 +951,7 @@ export function UnifiedProfileDialog({
                   <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]">
+                        <Label className="text-[13px] font-medium text-foreground">
                           Chọn nhà cung cấp
                         </Label>
                         <Select
@@ -960,7 +960,7 @@ export function UnifiedProfileDialog({
                             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]">
+                          <SelectTrigger className="bg-background border-input focus:ring-primary focus:border-primary shadow-sm rounded-[6px]">
                             <SelectValue placeholder="Chọn nhà cung cấp" />
                           </SelectTrigger>
                           <SelectContent>
@@ -972,7 +972,7 @@ export function UnifiedProfileDialog({
                           </SelectContent>
                         </Select>
                       </div>
-                      <div className="rounded-md bg-blue-50 p-4 text-sm text-blue-700 flex items-start gap-3">
+                      <div className="rounded-md bg-info-subtle p-4 text-sm text-info-text 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 đã
@@ -986,14 +986,14 @@ export function UnifiedProfileDialog({
 
                 {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="sticky -top-4 sm:-top-5 pt-2 sm:pt-2 pb-4 -mx-4 sm:-mx-5 px-4 sm:px-5 bg-background/95 backdrop-blur-sm z-10 border-b border-border 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]" />
+                        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                         <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]"
+                          className="pl-9 bg-background border-input focus:ring-primary focus:border-primary shadow-sm rounded-md h-9 text-[13px]"
                         />
                       </div>
                     </div>
@@ -1005,10 +1005,10 @@ export function UnifiedProfileDialog({
                           <div
                             key={role.code}
                             className={cn(
-                              "flex items-start gap-3 p-3 rounded-md border cursor-pointer hover:bg-slate-50 transition-colors",
+                              "flex items-start gap-3 p-3 rounded-md border cursor-pointer hover:bg-accent/50 transition-colors",
                               isSelected
-                                ? "border-blue-500 bg-blue-50/50"
-                                : "bg-background border-slate-200 dark:border-slate-800",
+                                ? "border-primary bg-primary/5"
+                                : "bg-background border-border",
                             )}
                             onClick={() => {
                               setSelectedRoles((prev) =>
@@ -1020,10 +1020,10 @@ export function UnifiedProfileDialog({
                           >
                             <Checkbox
                               checked={isSelected}
-                              className="mt-1 data-[state=checked]:bg-blue-600 data-[state=checked]:border-blue-600"
+                              className="mt-1 data-[state=checked]:bg-primary data-[state=checked]:border-primary"
                             />
                             <div className="space-y-0.5">
-                              <p className="text-sm font-medium text-slate-900 dark:text-slate-100">
+                              <p className="text-sm font-medium text-foreground">
                                 {role.name}
                               </p>
                               <p className="text-xs text-muted-foreground line-clamp-1">
@@ -1049,7 +1049,7 @@ export function UnifiedProfileDialog({
                       </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>
+                          <Label className="text-[13px] font-medium text-foreground">Mật khẩu mới</Label>
                           <div className="relative">
                             <Input
                               type={showPassword ? "text" : "password"}
@@ -1060,7 +1060,7 @@ export function UnifiedProfileDialog({
                                   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]"
+                              className="pr-10 bg-background border-input focus:ring-primary focus:border-primary shadow-sm rounded-[6px]"
                             />
                             <Button
                               type="button"
@@ -1078,7 +1078,7 @@ export function UnifiedProfileDialog({
                           </div>
                         </div>
                         <div className="space-y-2">
-                          <Label className="text-[13px] font-medium text-[#41454d] dark:text-[#9297a0]">
+                          <Label className="text-[13px] font-medium text-foreground">
                             Xác nhận mật khẩu
                           </Label>
                           <Input
@@ -1090,7 +1090,7 @@ export function UnifiedProfileDialog({
                                 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]"
+                            className="bg-background border-input focus:ring-primary focus:border-primary shadow-sm rounded-[6px]"
                           />
                         </div>
                       </div>