@apptimate/ui 6.2.0 → 6.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "6.2.0",
+  "version": "6.4.0",
   "main": "src/index.tsx",
   "types": "src/index.tsx",
   "dependencies": {

package/src/base-components/Modal.tsx

@@ -102,7 +102,7 @@ export const Modal = ({ isOpen, onClose, title, children, className, footer, bac
                         {/* Body */}
                         <div className={cn(
                             "flex-1",
-                            size === 'full' ? "overflow-hidden p-0" : "overflow-y-auto px-5 sm:px-8 py-5 sm:py-7"
+                            size === 'full' ? "overflow-hidden p-0" : "overflow-auto px-5 sm:px-8 py-5 sm:py-7"
                         )}>
                             {children}
                         </div>

package/src/base-components/SearchableSelect.tsx

@@ -57,6 +57,8 @@ export interface SearchableSelectProps<T = Record<string, unknown>> {
     allowClear?: boolean;
     /** Disabled state */
     disabled?: boolean;
+    /** Required state */
+    required?: boolean;
     /** Label text above the select */
     label?: string;
     /** Error message below the select */

package/src/base-components/Table.tsx

@@ -10,7 +10,7 @@ export interface TableProps {
 
 export const Table = ({ children, className }: TableProps) => {
     return (
-        <div className={cn("w-full", className)}>
+        <div className={cn("w-full overflow-x-auto", className)}>
             <table className="w-full text-left lg:min-w-[600px] border-separate border-spacing-0 block lg:table">
                 {children}
             </table>

package/src/common-components/DashboardLayout.tsx

@@ -6,7 +6,7 @@ import { Dropdown, DropdownItem } from '../base-components/Dropdown';
 
 import Link from 'next/link';
 import { usePathname, useRouter } from 'next/navigation';
-import { cn } from '@apptimate/core-lib';
+import { cn, getProjectConstructionGroups } from '@apptimate/core-lib';
 
 export type DashboardMenuConfig = {
   id: string;
@@ -75,7 +75,7 @@ export function DashboardLayout({
   // Helper to build hierarchy
   const flattenedOrganizations = React.useMemo(() => {
     if (!organizations || organizations.length === 0) return [];
-    
+
     const orgMap = new Map<number, any>();
     const roots: any[] = [];
 
@@ -103,14 +103,42 @@ export function DashboardLayout({
     return flattened;
   }, [organizations]);
 
+
+  // Override menus if it's a project organization
+  const effectiveMenus = React.useMemo(() => {
+    if (selectedOrganization?.organization_type !== 'project') return menus;
+
+    const projectMatch = pathname.match(/^(?:\/construction)?\/projects\/(\d+)(?:\/|$)/);
+    const projectId = projectMatch ? projectMatch[1] : 'current';
+
+    return menus.map(menu => {
+      if (menu.id === 'construction') {
+        return {
+          ...menu,
+          groups: getProjectConstructionGroups(projectId)
+        };
+      }
+      return menu;
+    });
+  }, [menus, selectedOrganization, pathname]);
+
   // Find which main menu should be active based on current path.
   // When basePath is set, prefer the menu whose items are mostly within basePath.
   const fullPath = basePath + (pathname === "/" && basePath ? "" : pathname);
   const currentMainMenu = (() => {
-    let bestMenu = menus[0];
+    let bestMenu = effectiveMenus[0];
+
+    // Default to construction if organization is a project
+    if (selectedOrganization?.organization_type === 'project') {
+      const constructionMenu = effectiveMenus.find(m => m.id === 'construction');
+      if (constructionMenu) {
+        bestMenu = constructionMenu;
+      }
+    }
+
     let bestScore = -1;
     let bestInternalCount = -1;
-    for (const menu of menus) {
+    for (const menu of effectiveMenus) {
       for (const group of menu.groups) {
         for (const item of group.items) {
           if (fullPath === item.path || fullPath.startsWith(item.path + "/")) {
@@ -138,7 +166,7 @@ export function DashboardLayout({
     }
   }, [currentMainMenu?.id]);
 
-  const activeMenu = menus.find(m => m.id === activeMenuId) || menus[0];
+  const activeMenu = effectiveMenus.find(m => m.id === activeMenuId) || effectiveMenus[0];
 
   const handleMainMenuSelect = (menu: DashboardMenuConfig) => {
     setActiveMenuId(menu.id);
@@ -218,7 +246,7 @@ export function DashboardLayout({
           }
         `}} />
         <nav className="flex flex-col gap-6 flex-1 w-full sidebar-scroll pb-4">
-          {menus.map((menu) => {
+          {effectiveMenus.map((menu) => {
             const isActive = activeMenuId === menu.id;
             return (
               <div
@@ -300,79 +328,79 @@ export function DashboardLayout({
                 <PanelLeftClose size={18} />
               </button>
             </div>
-          <div className="flex-1 overflow-y-auto px-4 space-y-6">
-            {activeMenu.groups.map((group) => (
-              <div key={group.id}>
-                {group.label && (
-                  <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 empty:hidden">{group.label}</h3>
-                )}
-                <nav className="flex flex-col gap-1">
-                  {group.items.map((item) => {
-                    // Find the longest matching path in this group to avoid parent paths being active
-                    const allGroupItems = activeMenu.groups.flatMap(g => g.items);
-                    const matchingItems = allGroupItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
-                    const longestMatch = matchingItems.sort((a, b) => b.path.length - a.path.length)[0];
-                    const isItemActive = longestMatch?.path === item.path;
-                    const isInternal = basePath
-                      ? item.path.startsWith(basePath)
-                      : !externalPaths.some(ext => item.path.startsWith(ext));
-                    const href = basePath && isInternal ? item.path.replace(basePath, "") || "/" : item.path;
-
-                    const className = `px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${isItemActive
-                      ? "bg-[#F4F5F7] text-[#2D3142] font-semibold"
-                      : "text-gray-500 font-medium hover:bg-gray-50"
-                      }`;
-
-                    const content = (
-                      <>
-                        <div className="flex items-center gap-3">
-                          {item.icon && <span className={`${isItemActive ? 'text-[#2D3142]' : 'text-gray-400'}`}>{item.icon}</span>}
-                          <span>{item.label}</span>
-                        </div>
-                        {item.badge && <div>{item.badge}</div>}
-                      </>
-                    );
-
-                    return isInternal ? (
-                      <Link key={item.id} href={href} className={className}>
-                        {content}
-                      </Link>
-                    ) : (
-                      <a key={item.id} href={href} className={className}>
-                        {content}
-                      </a>
-                    );
-                  })}
-                </nav>
-              </div>
-            ))}
-          </div>
-
-          {/* Organization Selector - Bottom of Secondary Sidebar */}
-          {organizations.length > 0 && (
-            <div className="px-4 pt-4 mt-2 border-t border-gray-100">
-              <button
-                id="org-selector-desktop"
-                onClick={() => setIsOrgModalOpen(true)}
-                className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl bg-[#F4F5F7] hover:bg-gray-200/70 transition-all duration-200 group cursor-pointer"
-              >
-                <div className={cn(
-                  "w-8 h-8 rounded-lg flex items-center justify-center shrink-0 shadow-sm",
-                  selectedOrganization?.organization_type === 'project'
-                    ? "bg-gradient-to-br from-teal-400 to-teal-600"
-                    : "bg-gradient-to-br from-indigo-500 to-purple-600"
-                )}>
-                  <Building2 size={14} className="text-white" />
+            <div className="flex-1 overflow-y-auto px-4 space-y-6">
+              {activeMenu.groups.map((group) => (
+                <div key={group.id}>
+                  {group.label && (
+                    <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2 empty:hidden">{group.label}</h3>
+                  )}
+                  <nav className="flex flex-col gap-1">
+                    {group.items.map((item) => {
+                      // Find the longest matching path in this group to avoid parent paths being active
+                      const allGroupItems = activeMenu.groups.flatMap(g => g.items);
+                      const matchingItems = allGroupItems.filter(i => fullPath === i.path || fullPath.startsWith(`${i.path}/`));
+                      const longestMatch = matchingItems.sort((a, b) => b.path.length - a.path.length)[0];
+                      const isItemActive = longestMatch?.path === item.path;
+                      const isInternal = basePath
+                        ? item.path.startsWith(basePath)
+                        : !externalPaths.some(ext => item.path.startsWith(ext));
+                      const href = basePath && isInternal ? item.path.replace(basePath, "") || "/" : item.path;
+
+                      const className = `px-3 py-2 rounded-lg text-sm transition-colors flex items-center justify-between ${isItemActive
+                        ? "bg-[#F4F5F7] text-[#2D3142] font-semibold"
+                        : "text-gray-500 font-medium hover:bg-gray-50"
+                        }`;
+
+                      const content = (
+                        <>
+                          <div className="flex items-center gap-3">
+                            {item.icon && <span className={`${isItemActive ? 'text-[#2D3142]' : 'text-gray-400'}`}>{item.icon}</span>}
+                            <span>{item.label}</span>
+                          </div>
+                          {item.badge && <div>{item.badge}</div>}
+                        </>
+                      );
+
+                      return isInternal ? (
+                        <Link key={item.id} href={href} className={className}>
+                          {content}
+                        </Link>
+                      ) : (
+                        <a key={item.id} href={href} className={className}>
+                          {content}
+                        </a>
+                      );
+                    })}
+                  </nav>
                 </div>
-                <div className="flex-1 min-w-0 text-left">
-                  <p className="text-[11px] font-semibold text-gray-400 uppercase tracking-wider leading-none mb-0.5">Organization</p>
-                  <p className="text-[13px] font-bold text-[#2D3142] truncate leading-tight">{orgDisplayName}</p>
-                </div>
-                <ChevronRight size={14} className="text-gray-400 group-hover:text-[#2D3142] transition-colors shrink-0" />
-              </button>
+              ))}
             </div>
-          )}
-        </aside>
+
+            {/* Organization Selector - Bottom of Secondary Sidebar */}
+            {organizations.length > 0 && (
+              <div className="px-4 pt-4 mt-2 border-t border-gray-100">
+                <button
+                  id="org-selector-desktop"
+                  onClick={() => setIsOrgModalOpen(true)}
+                  className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl bg-[#F4F5F7] hover:bg-gray-200/70 transition-all duration-200 group cursor-pointer"
+                >
+                  <div className={cn(
+                    "w-8 h-8 rounded-lg flex items-center justify-center shrink-0 shadow-sm",
+                    selectedOrganization?.organization_type === 'project'
+                      ? "bg-gradient-to-br from-teal-400 to-teal-600"
+                      : "bg-gradient-to-br from-indigo-500 to-purple-600"
+                  )}>
+                    <Building2 size={14} className="text-white" />
+                  </div>
+                  <div className="flex-1 min-w-0 text-left">
+                    <p className="text-[11px] font-semibold text-gray-400 uppercase tracking-wider leading-none mb-0.5">Organization</p>
+                    <p className="text-[13px] font-bold text-[#2D3142] truncate leading-tight">{orgDisplayName}</p>
+                  </div>
+                  <ChevronRight size={14} className="text-gray-400 group-hover:text-[#2D3142] transition-colors shrink-0" />
+                </button>
+              </div>
+            )}
+          </aside>
 
         </>
       )}
@@ -451,7 +479,7 @@ export function DashboardLayout({
 
             <div className="flex-1 overflow-y-auto py-6 px-4">
               <nav className="flex flex-col gap-8">
-                {menus.map((menu) => (
+                {effectiveMenus.map((menu) => (
                   <div key={menu.id}>
                     <div className="flex items-center gap-3 text-[#2D3142] font-bold mb-3 px-2">
                       {React.cloneElement(menu.icon as React.ReactElement<any>, {
@@ -567,7 +595,7 @@ export function DashboardLayout({
                   const isSelected = selectedOrganization?.id === org.id;
                   const pl = org._level > 0 ? org._level * 24 : 0;
                   const isProject = org.organization_type === 'project';
-                  
+
                   return (
                     <button
                       key={org.id}

package/src/common-components/PaymentSection.tsx

@@ -405,6 +405,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                 <select value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
                   disabled={field.readonly}
+                  required={field.required}
                   className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
                   <option value="">Select...</option>
                   {bankAccounts.map((b) => (<option key={b.id} value={b.id}>{b.bank_name} - {b.account_number}</option>))}
@@ -413,6 +414,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                 <select value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value ? Number(e.target.value) : "" } })}
                   disabled={field.readonly}
+                  required={field.required}
                   className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
                   <option value="">Select Material...</option>
                   {materialTypes.map((m) => (<option key={m.id} value={m.id}>{m.name}</option>))}
@@ -421,6 +423,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                 <select value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
                   disabled={field.readonly}
+                  required={field.required}
                   className="w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all disabled:opacity-50 disabled:cursor-not-allowed">
                   <option value="">Select...</option>
                   {field.options?.map((o) => (<option key={o.value} value={o.value}>{o.label}</option>))}
@@ -445,6 +448,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                     });
                   }}
                   disabled={field.readonly}
+                  required={field.required}
                   placeholder="Select..."
                   loadOptions={async () => field.options || []}
                 />
@@ -488,6 +492,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                     }}
                     placeholder="Search cheque number..."
                     disabled={field.readonly}
+                    required={field.required}
                   />
                   {entry.metadata._display_bank_name && (
                     <div className="text-[11px] text-foreground-subtle mt-1 flex items-center gap-1.5 font-medium px-1">
@@ -502,6 +507,7 @@ function PaymentEntryRow({ entry, mode, bankAccounts, materialTypes = [], onUpda
                   value={entry.metadata[field.key] || ""}
                   onChange={(e) => onUpdate({ metadata: { ...entry.metadata, [field.key]: e.target.value } })}
                   readOnly={field.readonly}
+                  required={field.required}
                   className={cn("w-full bg-surface-1 border-[1.5px] border-border-subtle rounded-[8px] px-2.5 py-2.5 text-[12px] text-foreground-1 outline-none focus:border-primary/40 transition-all [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none", field.readonly && "opacity-60 bg-surface-0 cursor-not-allowed border-border")} />
               )}
             </div>

package/src/common-components/pickers/modals/SerialSelectionModal.tsx

@@ -13,6 +13,7 @@ interface SerialSelectionModalProps {
   variant: TransactionItemVariant | null;
   allowCreate?: boolean;
   initialSerials?: string[];
+  initialSerialObjects?: {id: number, serial_number: string}[];
   warehouseId?: number;
   onConfirm: (serials: string[], serialObjects?: {id: number, serial_number: string}[]) => void;
 }
@@ -24,10 +25,12 @@ export function SerialSelectionModal({
   variant,
   allowCreate = false,
   initialSerials = [],
+  initialSerialObjects = [],
   warehouseId,
   onConfirm
 }: SerialSelectionModalProps) {
   const [serials, setSerials] = useState<string[]>([]);
+  const [selectedSerialObjects, setSelectedSerialObjects] = useState<{id: number, serial_number: string}[]>([]);
   const [inputValue, setInputValue] = useState("");
   const [availableSerials, setAvailableSerials] = useState<any[]>([]);
   const [isLoading, setIsLoading] = useState(false);
@@ -35,6 +38,7 @@ export function SerialSelectionModal({
   useEffect(() => {
     if (isOpen) {
       setSerials(initialSerials);
+      setSelectedSerialObjects(initialSerialObjects);
       setInputValue("");
     }
   }, [isOpen, item, allowCreate]);
@@ -81,6 +85,7 @@ export function SerialSelectionModal({
 
   const handleAddSerial = (e?: React.FormEvent) => {
     e?.preventDefault();
+    e?.stopPropagation();
     // Allow comma or space separated parsing
     const rawTokens = inputValue.split(/[\s,]+/);
     let addedCount = 0;
@@ -106,11 +111,13 @@ export function SerialSelectionModal({
     setSerials(serials.filter(v => v !== s));
   };
 
-  const toggleSelectSerial = (s: string) => {
-    if (serials.includes(s)) {
-      setSerials(serials.filter(v => v !== s));
+  const toggleSelectSerial = (s: any) => {
+    if (serials.includes(s.serial_number)) {
+      setSerials(serials.filter(v => v !== s.serial_number));
+      setSelectedSerialObjects(prev => prev.filter(v => v.serial_number !== s.serial_number));
     } else {
-      setSerials([...serials, s]);
+      setSerials([...serials, s.serial_number]);
+      setSelectedSerialObjects(prev => [...prev, { id: s.id, serial_number: s.serial_number }]);
     }
   };
 
@@ -121,10 +128,9 @@ export function SerialSelectionModal({
     }
     
     if (!allowCreate) {
-      const serialObjects = availableSerials
-        .filter(s => serials.includes(s.serial_number))
-        .map(s => ({ id: s.id, serial_number: s.serial_number }));
-      onConfirm(serials, serialObjects);
+      // Ensure we only pass objects that are currently in the selected serials array
+      const finalObjects = selectedSerialObjects.filter(obj => serials.includes(obj.serial_number));
+      onConfirm(serials, finalObjects);
     } else {
       onConfirm(serials);
     }
@@ -172,7 +178,11 @@ export function SerialSelectionModal({
 
             <div className="flex flex-col border border-border-subtle rounded-xl overflow-hidden bg-surface-0 min-h-[250px] shadow-sm">
               <div className="p-3 border-b border-border-subtle bg-surface-hover">
-                <form onSubmit={handleAddSerial} className="flex gap-2">
+                <form 
+                  onSubmit={handleAddSerial} 
+                  onKeyDown={(e) => e.key === 'Enter' && e.stopPropagation()}
+                  className="flex gap-2"
+                >
                   <input
                     type="text"
                     autoFocus
@@ -233,7 +243,7 @@ export function SerialSelectionModal({
                         type="checkbox"
                         className="w-4 h-4 rounded border-border-subtle text-primary focus:ring-primary"
                         checked={serials.includes(s.serial_number)}
-                        onChange={() => toggleSelectSerial(s.serial_number)}
+                        onChange={() => toggleSelectSerial(s)}
                       />
                       <span className="font-mono text-[13px] text-foreground-1">{s.serial_number}</span>
                     </label>

package/src/common-components/transaction/MetadataPanel.tsx

@@ -155,7 +155,7 @@ export function MetadataPanel({
             onChange={(p) => onPartyChange(p?.id ?? null, p ? { id: p.id, name: p.name, code: p.code, type: p.type } : undefined)}
             label={config.partyLabel}
             partyType={config.partyType}
-            isRequired
+            isRequired={config.type !== 'pos'}
             disabled={config.disablePartySelection}
           />
         )
@@ -248,8 +248,8 @@ export function MetadataPanel({
 
       {/* ── Submit Button ── */}
       <Button
+        type="submit"
         color="primary"
-        onClick={onSubmit}
         isDisabled={lineItems.length === 0}
         isLoading={isSubmitting}
         className="!w-full !py-4 !text-[14px] !font-semibold !rounded-[10px]"