@apptimate/ui 6.1.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "6.1.0",
+  "version": "6.3.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/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/item-wizard/ItemFormWizard.tsx

@@ -22,7 +22,7 @@ export interface ItemFormData {
   category_id: string; category_name: string;
   brand_id: string; brand_name: string;
   description: string;
-  sale_price: string; cost_price: string;
+  sale_price: string; cost_price: string; min_sales_price: string;
   has_variants: boolean; tracking_type: string; valuation_method: string;
   // Page 2: Stock & Config
   uom_id: string; uom_name: string;
@@ -41,7 +41,7 @@ export interface ItemFormData {
 
 export interface VariantRow {
   id?: number; sku: string; variant_name: string; barcode: string;
-  sale_price: string; cost_price: string; attribute_values: Record<string, string>;
+  sale_price: string; cost_price: string; min_sales_price: string; attribute_values: Record<string, string>;
 }
 
 export const emptyFormData: ItemFormData = {
@@ -49,7 +49,7 @@ export const emptyFormData: ItemFormData = {
   category_id: "", category_name: "",
   brand_id: "", brand_name: "",
   description: "",
-  sale_price: "0", cost_price: "0",
+  sale_price: "0", cost_price: "0", min_sales_price: "0",
   has_variants: false, tracking_type: "none", valuation_method: "fifo",
   uom_id: "", uom_name: "", purchase_uom_id: "", sales_uom_id: "",
   purchase_uom_conversion: "1", sales_uom_conversion: "1",
@@ -473,7 +473,7 @@ export default function ItemFormWizard({
   const addVariantRow = () => {
     setFormData((p) => ({
       ...p,
-      variants: [...p.variants, { sku: "", variant_name: "", barcode: "", sale_price: "", cost_price: "", attribute_values: {} }],
+      variants: [...p.variants, { sku: "", variant_name: "", barcode: "", sale_price: "", cost_price: "", min_sales_price: "", attribute_values: {} }],
     }));
   };
 
@@ -524,6 +524,7 @@ export default function ItemFormWizard({
         barcode: "",
         sale_price: formData.sale_price || "0",
         cost_price: formData.cost_price || "0",
+        min_sales_price: formData.min_sales_price || "0",
         attribute_values: combo,
       };
     });
@@ -543,13 +544,16 @@ export default function ItemFormWizard({
       {!formData.has_variants ? (
         <div className="p-4 bg-gray-50/50 rounded-xl border border-gray-100">
           <p className="text-[11px] font-bold text-gray-400 uppercase tracking-wider mb-3">Item Pricing</p>
-          <div className="grid grid-cols-2 gap-4">
+          <div className="grid grid-cols-3 gap-4">
             {formData.is_available_sell && (
               <Input label="Sale Price" type="number" placeholder="0.00" value={formData.sale_price} onChange={(e) => update("sale_price", e.target.value)} />
             )}
             {formData.is_available_purchase && (
               <Input label="Cost Price" type="number" placeholder="0.00" value={formData.cost_price} onChange={(e) => update("cost_price", e.target.value)} />
             )}
+            {formData.is_available_sell && (
+              <Input label="Min Sales Price" type="number" placeholder="0.00" value={formData.min_sales_price} onChange={(e) => update("min_sales_price", e.target.value)} />
+            )}
           </div>
         </div>
       ) : (
@@ -577,14 +581,24 @@ export default function ItemFormWizard({
                     </th>
                     <th className="px-4 py-3 font-medium align-top">Barcode</th>
                     {formData.is_available_sell && (
-                      <th className="px-4 py-3 font-medium w-[140px] align-top">
-                        <div className="flex flex-col items-start gap-1">
-                          <span>Sale Price</span>
-                          {formData.variants.length > 1 && (
-                            <button type="button" onClick={() => copyToAll("sale_price")} className="text-primary-600 hover:text-primary-700 font-semibold normal-case text-[11px]">Copy to All</button>
-                          )}
-                        </div>
-                      </th>
+                      <>
+                        <th className="px-4 py-3 font-medium w-[140px] align-top">
+                          <div className="flex flex-col items-start gap-1">
+                            <span>Sale Price</span>
+                            {formData.variants.length > 1 && (
+                              <button type="button" onClick={() => copyToAll("sale_price")} className="text-primary-600 hover:text-primary-700 font-semibold normal-case text-[11px]">Copy to All</button>
+                            )}
+                          </div>
+                        </th>
+                        <th className="px-4 py-3 font-medium w-[140px] align-top">
+                          <div className="flex flex-col items-start gap-1">
+                            <span>Min Sale Price</span>
+                            {formData.variants.length > 1 && (
+                              <button type="button" onClick={() => copyToAll("min_sales_price")} className="text-primary-600 hover:text-primary-700 font-semibold normal-case text-[11px]">Copy to All</button>
+                            )}
+                          </div>
+                        </th>
+                      </>
                     )}
                     {formData.is_available_purchase && (
                       <th className="px-4 py-3 font-medium w-[140px] align-top">
@@ -612,9 +626,14 @@ export default function ItemFormWizard({
                         <Input placeholder="Leave empty to auto-generate" value={v.barcode} onChange={(e) => updateVariant(idx, "barcode", e.target.value)} />
                       </td>
                       {formData.is_available_sell && (
-                        <td className="p-2 min-w-[120px] align-top">
-                          <Input type="number" placeholder="0.00" value={v.sale_price} onChange={(e) => updateVariant(idx, "sale_price", e.target.value)} />
-                        </td>
+                        <>
+                          <td className="p-2 min-w-[120px] align-top">
+                            <Input type="number" placeholder="0.00" value={v.sale_price} onChange={(e) => updateVariant(idx, "sale_price", e.target.value)} />
+                          </td>
+                          <td className="p-2 min-w-[120px] align-top">
+                            <Input type="number" placeholder="0.00" value={v.min_sales_price} onChange={(e) => updateVariant(idx, "min_sales_price", e.target.value)} />
+                          </td>
+                        </>
                       )}
                       {formData.is_available_purchase && (
                         <td className="p-2 min-w-[120px] align-top">

package/src/common-components/print/TemplateRenderer.tsx

@@ -213,6 +213,7 @@ export function replaceTokens(text: string, entityData: any): string {
     if ((val === undefined || val === null) && path.trim() === "inventory_item_variants.sku") val = data.variants?.[0]?.sku || data.sku || data.code;
     if ((val === undefined || val === null) && path.trim() === "inventory_item_variants.barcode") val = data.variants?.[0]?.barcode || data.barcode || data.sku || data.code;
     if ((val === undefined || val === null) && (path.trim() === "inventory_item_variants.sale_price" || path.trim() === "sale_price" || path.trim() === "price")) val = data.sale_price || data.price || data.variants?.[0]?.sale_price || 0;
+    if ((val === undefined || val === null) && (path.trim() === "inventory_item_variants.min_sales_price" || path.trim() === "min_sales_price")) val = data.min_sales_price || data.variants?.[0]?.min_sales_price || 0;
     if ((val === undefined || val === null) && (path.trim() === "inventory_item_variants.cost_price" || path.trim() === "cost_price")) val = data.cost_price || data.variants?.[0]?.cost_price || 0;
     if ((val === undefined || val === null) && path.trim() === "inventory_batches.batch_number") val = data.batch_number || data.batch?.batch_number || "";
     if ((val === undefined || val === null) && path.trim() === "inventory_batches.selling_price") val = data.price || data.selling_price || data.batch?.selling_price || data.sale_price || 0;
@@ -347,6 +348,15 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
     wordBreak: "break-word" as const,
   };
 
+  const ec = typeof line.extra_config === 'string' ? JSON.parse(line.extra_config || '{}') : (line.extra_config || {});
+  
+  if (ec.truncate_single_line) {
+    baseStyle.whiteSpace = "nowrap";
+    baseStyle.overflow = "hidden";
+    baseStyle.textOverflow = "ellipsis";
+    baseStyle.display = "block";
+  }
+
   if (line.border_style && line.border_style !== "none") {
     const bw = `${line.border_width || 1}px`;
     const bc = line.border_color || "#000000";
@@ -360,7 +370,11 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
 
   // Text
   if (line.line_type === "text") {
-    return <div style={baseStyle}>{replaceTokens(line.static_text || "", entityData).trim().split("\n").map((t, i) => <div key={i}>{t || <br />}</div>)}</div>;
+    const content = replaceTokens(line.static_text || "", entityData).trim();
+    if (ec.truncate_single_line) {
+      return <div style={baseStyle}>{content}</div>;
+    }
+    return <div style={baseStyle}>{content.split("\n").map((t, i) => <div key={i}>{t || <br />}</div>)}</div>;
   }
 
   // Token (legacy)
@@ -405,11 +419,14 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
     const childCols = line.extra_config?.columns || line.columns || [];
     return (
       <div style={{ display: "flex", marginTop: `${line.spacing_before || 0}px`, marginBottom: `${line.spacing_after || 0}px`, backgroundColor: line.background_color || "transparent", padding: line.padding || "0", borderRadius: line.border_radius || "0" }}>
-        {childCols.map((col: any, i: number) => (
-          <div key={i} style={{ width: `${col.width_percent || 50}%`, fontFamily: `${col.font_family || line.font_family || defaultFont}, sans-serif`, fontSize: `${col.font_size ? Number(col.font_size) : (line.font_size ? Number(line.font_size) : defaultFontSize)}px`, lineHeight: 1.15, fontWeight: col.font_weight === "bold" ? 700 : col.font_weight === "light" ? 300 : (line.font_weight === "bold" ? 700 : line.font_weight === "light" ? 300 : (isA4 === false ? 600 : 400)), color: col.font_color || line.font_color || defaultColor, textAlign: (col.text_align || col.align || "left") as any, fontStyle: col.is_italic ? "italic" : "normal", textDecoration: col.is_underline ? "underline" : "none", textTransform: (col.text_transform || "none") as any, backgroundColor: col.background_color || "transparent", padding: col.padding || "0", whiteSpace: "pre-wrap" }}>
-            {replaceTokens(col.content || col.static_text || "", entityData).split("\n").map((t, ii) => <div key={ii}>{t || <br />}</div>)}
-          </div>
-        ))}
+        {childCols.map((col: any, i: number) => {
+          const isTruncated = col.truncate_single_line || ec.truncate_single_line;
+          return (
+            <div key={i} style={{ width: `${col.width_percent || 50}%`, fontFamily: `${col.font_family || line.font_family || defaultFont}, sans-serif`, fontSize: `${col.font_size ? Number(col.font_size) : (line.font_size ? Number(line.font_size) : defaultFontSize)}px`, lineHeight: 1.15, fontWeight: col.font_weight === "bold" ? 700 : col.font_weight === "light" ? 300 : (line.font_weight === "bold" ? 700 : line.font_weight === "light" ? 300 : (isA4 === false ? 600 : 400)), color: col.font_color || line.font_color || defaultColor, textAlign: (col.text_align || col.align || "left") as any, fontStyle: col.is_italic ? "italic" : "normal", textDecoration: col.is_underline ? "underline" : "none", textTransform: (col.text_transform || "none") as any, backgroundColor: col.background_color || "transparent", padding: col.padding || "0", whiteSpace: isTruncated ? "nowrap" : "pre-wrap", overflow: isTruncated ? "hidden" : "visible", textOverflow: isTruncated ? "ellipsis" : "clip", display: "block" }}>
+              {isTruncated ? replaceTokens(col.content || col.static_text || "", entityData) : replaceTokens(col.content || col.static_text || "", entityData).split("\n").map((t, ii) => <div key={ii}>{t || <br />}</div>)}
+            </div>
+          );
+        })}
       </div>
     );
   }
@@ -560,6 +577,10 @@ function LineRenderer({ line, defaultFont, defaultColor, defaultFontSize, entity
     let num = 0;
     if (path === 'inventory_item_variants.cost_price' || path === 'cost_price') {
       num = Number(entityData.cost_price || entityData.variants?.[0]?.cost_price || 0);
+    } else if (path === 'inventory_item_variants.min_sales_price' || path === 'min_sales_price') {
+      num = Number(entityData.min_sales_price || entityData.variants?.[0]?.min_sales_price || 0);
+    } else if (path === 'inventory_item_variants.sale_price' || path === 'sale_price' || path === 'price') {
+      num = Number(entityData.sale_price || entityData.price || entityData.variants?.[0]?.sale_price || 0);
     } else {
       let val = entityData;
       for (const k of path.split(".")) {