@apptimate/ui 6.2.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apptimate/ui",
-  "version": "6.2.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}