@goplusvn/core 0.1.43 → 0.1.44

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 0.1.44 — UnifiedProfileDialog: chi nhánh mặc định + ngày sinh DatePicker + fix Select loại người dùng
+
+**Ngày sinh dùng `DatePicker` (thay `<input type="date">`):** ô ngày sinh cũ khó
+nhập tay và không đồng bộ style; nay dùng `DatePicker` (gõ được `dd/MM/yyyy` +
+lịch popover). Cầu nối 2 chiều `ymdToDate`/`dateToYmd` giữ nguyên định dạng lưu
+`"yyyy-MM-dd"`, neo giờ 00:00 địa phương để tránh lệch ngày do timezone.
+
+**Chi nhánh mặc định (`UserBranch.isDefault`):**
+
+- Tab "Công việc" của dialog người dùng: mỗi chi nhánh đã chọn có nút "⭐ Đặt
+  mặc định"; chi nhánh mặc định hiện badge "Mặc định". Chọn chi nhánh đầu tiên
+  tự động thành mặc định; bỏ chọn chi nhánh đang là mặc định thì tự thăng chi
+  nhánh còn lại kế tiếp.
+- Payload gửi thêm `defaultBranchId` (đã lọc để luôn nằm trong `branchIds`, fallback
+  `branchIds[0]`). App đọc field này thay cho hard-code `isDefault: index === 0`.
+- Đọc lại `data.defaultBranchId` khi mở dialog ở chế độ sửa (fallback `branchIds[0]`).
+
+**Fix Select "Loại người dùng" icon + chữ rớt 2 dòng:** base `SelectTrigger` của
+core có `[&_span]:line-clamp-none` — selector này (`.trigger span`, độ ưu tiên
+`0,1,1`) biên dịch kèm `display:block`, THẮNG class `inline-flex` (`0,1,0`) trên
+span icon+chữ bên trong, nên (cộng với Preflight `svg{display:block}`) icon bị
+đẩy xuống dòng riêng. Nới chiều ngang KHÔNG chữa vì đây là lỗi xếp dọc. Fix:
+trigger dùng `[&_span]:!inline-flex [&_span]:!items-center [&_span]:!gap-2`
+(`!important` thắng tuyệt đối `line-clamp-none` bất kể thứ tự stylesheet) +
+`[&_svg]:shrink-0`, `whitespace-nowrap`, `style={{width:210}}`. Kiểm chứng bằng
+repro Radix+Tailwind: span trong đổi `display` từ `block` → `flex`.
+
 ## 0.1.34 — Tab navigation: gom nhóm module, tiêu đề tab chi tiết, nút làm tươi
 
 **PageTabs:**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@goplusvn/core",
   "description": "GoPlusVN Platform Kit - ERP kernel: layout, RBAC, CRUD, multi-tenant, system pages",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org",

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

@@ -21,6 +21,7 @@ import {
   SelectTrigger,
   SelectValue,
   Switch,
+  DatePicker,
 } from "../../ui";
 import { toast } from "sonner";
 import { cn } from "../../utils";
@@ -38,6 +39,7 @@ import {
   Briefcase,
   ShieldCheck,
   KeyRound,
+  Star,
 } from "lucide-react";
 
 interface UnifiedProfileDialogProps {
@@ -59,6 +61,22 @@ const fetcher = async (url: string) => {
   return Array.isArray(data) ? data : data.items || data.data || [];
 };
 
+// birthday được lưu/gửi dưới dạng chuỗi "yyyy-MM-dd" (như input date cũ).
+// DatePicker làm việc với Date nên cần cầu nối 2 chiều, tránh lệch ngày do TZ
+// bằng cách neo giờ 00:00 địa phương và tự dựng chuỗi (không dùng toISOString).
+const ymdToDate = (s?: string): Date | undefined => {
+  if (!s) return undefined;
+  const d = new Date(`${s}T00:00:00`);
+  return isNaN(d.getTime()) ? undefined : d;
+};
+const dateToYmd = (d?: Date): string => {
+  if (!d) return "";
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+};
+
 export function UnifiedProfileDialog({
   open,
   onOpenChange,
@@ -102,6 +120,7 @@ export function UnifiedProfileDialog({
   const [profileData, setProfileData] = useState<any>({});
   const [selectedRoles, setSelectedRoles] = useState<string[]>([]);
   const [selectedBranches, setSelectedBranches] = useState<string[]>([]);
+  const [defaultBranchId, setDefaultBranchId] = useState<string | null>(null);
   const [passwordData, setPasswordData] = useState({
     password: "",
     confirm: "",
@@ -173,6 +192,7 @@ export function UnifiedProfileDialog({
         });
         setSelectedRoles([]);
         setSelectedBranches([]);
+        setDefaultBranchId(null);
         setPasswordData({ password: "", confirm: "" });
         setEnableAccount(false);
       } else {
@@ -203,6 +223,9 @@ export function UnifiedProfileDialog({
         const roles = d.roleCodes || [];
         setSelectedRoles(roles);
         setSelectedBranches(d.branchIds || []);
+        setDefaultBranchId(
+          d.defaultBranchId || (d.branchIds && d.branchIds[0]) || null,
+        );
         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.
@@ -216,11 +239,39 @@ export function UnifiedProfileDialog({
       if (mode === "create" || (data?.branchIds?.length || 0) === 0) {
         if (selectedBranches.length === 0) {
           setSelectedBranches([branches[0].id]);
+          setDefaultBranchId(branches[0].id);
         }
       }
     }
   }, [open, branches, mode, data]);
 
+  // -- Branch selection helpers --
+  // Toggle a branch's membership while keeping a valid default branch.
+  const toggleBranch = (branchId: string) => {
+    if (selectedBranches.includes(branchId)) {
+      const next = selectedBranches.filter((id) => id !== branchId);
+      setSelectedBranches(next);
+      // Removing the current default → promote the first remaining branch.
+      if (defaultBranchId === branchId) {
+        setDefaultBranchId(next[0] ?? null);
+      }
+    } else {
+      setSelectedBranches([...selectedBranches, branchId]);
+      // First branch selected becomes the default automatically.
+      if (!defaultBranchId) {
+        setDefaultBranchId(branchId);
+      }
+    }
+  };
+
+  // Mark a (selected) branch as the default working branch.
+  const markDefaultBranch = (branchId: string) => {
+    if (!selectedBranches.includes(branchId)) {
+      setSelectedBranches((prev) => [...prev, branchId]);
+    }
+    setDefaultBranchId(branchId);
+  };
+
   // -- Helpers --
   const getInitials = (name: string | null) => {
     if (!name) return "U";
@@ -254,6 +305,10 @@ export function UnifiedProfileDialog({
         userType, // Add userType to payload
         roleCodes: selectedRoles,
         branchIds: selectedBranches,
+        defaultBranchId:
+          defaultBranchId && selectedBranches.includes(defaultBranchId)
+            ? defaultBranchId
+            : (selectedBranches[0] ?? null),
       };
 
       // Handle Password for Customer
@@ -394,25 +449,41 @@ export function UnifiedProfileDialog({
                     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">
+                    <SelectTrigger
+                      style={{ width: 210 }}
+                      // Base SelectTrigger có `[&_span]:line-clamp-none` — selector này biên
+                      // 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"
+                    >
                       <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]" />
+                        <span
+                          className="inline-flex items-center gap-2"
+                          style={{ whiteSpace: "nowrap" }}
+                        >
+                          <UserCog className="h-4 w-4 text-[#1641CE] shrink-0" />
                           Nhân viên
                         </span>
                       </SelectItem>
                       <SelectItem value="customer">
-                        <span className="flex items-center gap-2">
-                          <User className="h-4 w-4 text-[#059669]" />
+                        <span
+                          className="inline-flex items-center gap-2"
+                          style={{ whiteSpace: "nowrap" }}
+                        >
+                          <User className="h-4 w-4 text-[#059669] shrink-0" />
                           Khách hàng
                         </span>
                       </SelectItem>
                       <SelectItem value="supplier">
-                        <span className="flex items-center gap-2">
-                          <Store className="h-4 w-4 text-[#EA580C]" />
+                        <span
+                          className="inline-flex items-center gap-2"
+                          style={{ whiteSpace: "nowrap" }}
+                        >
+                          <Store className="h-4 w-4 text-[#EA580C] shrink-0" />
                           Nhà cung cấp
                         </span>
                       </SelectItem>
@@ -587,16 +658,17 @@ 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>
-                        <Input
-                          type="date"
-                          value={profileData.birthday}
-                          onChange={(e) =>
+                        <DatePicker
+                          value={ymdToDate(profileData.birthday)}
+                          onValueChange={(d) =>
                             setProfileData({
                               ...profileData,
-                              birthday: e.target.value,
+                              birthday: dateToYmd(d),
                             })
                           }
-                          className="bg-white dark:bg-[#1e293b] border-[#e2e8f0] dark:border-[#334155] focus:ring-primary focus:border-primary rounded-md h-9 text-[13px]"
+                          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]"
                         />
                       </div>
                       <div className="space-y-1.5">
@@ -816,34 +888,56 @@ export function UnifiedProfileDialog({
                         </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="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]">
+                            <Star className="h-3 w-3" />
+                            Đánh dấu một chi nhánh mặc định
+                          </span>
+                        </div>
                         <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
                           {branches?.map((branch) => {
                             const isSelected = selectedBranches.includes(branch.id);
+                            const isDefault =
+                              isSelected && defaultBranchId === 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",
+                                  "flex items-center gap-3 p-3 rounded-md border cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/40 transition-colors",
                                   isSelected
-                                    ? "border-blue-500 bg-blue-50/50"
+                                    ? "border-blue-500 bg-blue-50/50 dark:bg-blue-500/10"
                                     : "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],
-                                  );
-                                }}
+                                onClick={() => toggleBranch(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">
+                                <span className="flex-1 text-sm font-medium text-slate-900 dark:text-slate-100">
                                   {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">
+                                      <Star className="h-3 w-3 fill-current" />
+                                      Mặc định
+                                    </span>
+                                  ) : (
+                                    <button
+                                      type="button"
+                                      onClick={(e) => {
+                                        e.stopPropagation();
+                                        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"
+                                    >
+                                      <Star className="h-3 w-3" />
+                                      Đặt mặc định
+                                    </button>
+                                  ))}
                               </div>
                             );
                           })}