@apptimate/ui 1.0.0 → 1.2.0

package/src/common-components/DashboardLayout.tsx

@@ -0,0 +1,473 @@
+"use client";
+
+import React, { useState } from 'react';
+import { Briefcase, CreditCard, Settings, Menu, X, LogOut, User as UserIcon, Building2, ChevronRight, Check } from 'lucide-react';
+import { Dropdown, DropdownItem } from '../base-components/Dropdown';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { cn } from '@apptimate/core-lib';
+
+export type DashboardMenuConfig = {
+  id: string;
+  label: string;
+  icon: React.ReactNode;
+  groups: {
+    id: string;
+    label: string;
+    items: {
+      id: string;
+      label: string;
+      path: string;
+    }[]
+  }[]
+};
+
+export type UserConfig = {
+  name: string;
+  avatar?: string;
+  role?: string;
+};
+
+export type OrganizationConfig = {
+  id: number;
+  name: string;
+  code?: string;
+  organization_type?: string;
+};
+
+export function DashboardLayout({
+  children,
+  logo,
+  menus = [],
+  basePath = "",
+  externalPaths = [],
+  user,
+  onLogout,
+  onProfile,
+  organizations = [],
+  selectedOrganization,
+  onOrganizationChange
+}: {
+  children: React.ReactNode;
+  logo?: React.ReactNode;
+  menus?: DashboardMenuConfig[];
+  basePath?: string;
+  externalPaths?: string[];
+  user?: UserConfig;
+  onLogout?: () => void;
+  onProfile?: () => void;
+  organizations?: OrganizationConfig[];
+  selectedOrganization?: OrganizationConfig | null;
+  onOrganizationChange?: (org: OrganizationConfig) => void;
+}) {
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [isOrgModalOpen, setIsOrgModalOpen] = useState(false);
+  const pathname = usePathname() || "";
+
+  // Find which main menu should be active based on current path, or default to first
+  const fullPath = basePath + (pathname === "/" && basePath ? "" : pathname);
+
+  const currentMainMenu = menus.find(menu =>
+    menu.groups.some(group => group.items.some(item => 
+      fullPath === item.path || 
+      fullPath.startsWith(item.path + "/") || 
+      item.path.startsWith(fullPath + "/")
+    ))
+  ) || menus[0];
+
+  const [activeMenuId, setActiveMenuId] = useState(currentMainMenu?.id || "");
+
+  // Keep it updated if route changes and matches another main menu
+  React.useEffect(() => {
+    if (currentMainMenu) {
+      setActiveMenuId(currentMainMenu.id);
+    }
+  }, [currentMainMenu?.id]);
+
+  const activeMenu = menus.find(m => m.id === activeMenuId) || menus[0];
+
+  const handleSelectOrg = (org: OrganizationConfig) => {
+    onOrganizationChange?.(org);
+    setIsOrgModalOpen(false);
+  };
+
+  // Truncated org name for display
+  const orgDisplayName = selectedOrganization?.name
+    ? (selectedOrganization.name.length > 22 ? selectedOrganization.name.substring(0, 20) + '…' : selectedOrganization.name)
+    : 'Select Org';
+
+  return (
+    <div className="flex h-screen bg-[#F4F5F7] overflow-hidden font-sans">
+      {/* Desktop Global Sidebar */}
+      <aside className="hidden md:flex w-[80px] bg-white border-r border-gray-200 flex-col items-center py-6 shrink-0 z-20">
+        <div className="w-12 h-12 flex items-center justify-center mb-8">
+          {logo}
+        </div>
+
+        <nav className="flex flex-col gap-6 flex-1 w-full">
+          {menus.map((menu) => {
+            const isActive = activeMenuId === menu.id;
+            return (
+              <div
+                key={menu.id}
+                onClick={() => setActiveMenuId(menu.id)}
+                className={`flex flex-col items-center justify-center gap-1.5 cursor-pointer transition-colors ${isActive ? "text-[#2D3142]" : "text-gray-400 hover:text-[#2D3142]"
+                  }`}
+              >
+                {/* Clone the icon to dynamically apply styling based on active state */}
+                {React.cloneElement(menu.icon as React.ReactElement, {
+                  size: 22,
+                  className: isActive ? "stroke-[2.5]" : "stroke-[2]"
+                })}
+                <span className={`text-[11px] ${isActive ? "font-bold" : "font-medium"}`}>{menu.label}</span>
+              </div>
+            );
+          })}
+        </nav>
+
+        <div className="mt-auto flex flex-col items-center">
+          <Dropdown
+            align="left"
+            valign="top"
+            className="w-full flex justify-center"
+            trigger={
+              <div className="w-10 h-10 rounded-full bg-[#2D3142] flex items-center justify-center text-white text-[10px] font-bold shadow-md cursor-pointer hover:bg-[#3d4258] transition-colors overflow-hidden border-2 border-white">
+                {user?.avatar ? (
+                  <img src={user.avatar} alt={user.name} className="w-full h-full object-cover" />
+                ) : (
+                  user?.name ? user.name.substring(0, 2).toUpperCase() : "User"
+                )}
+              </div>
+            }
+          >
+            <div className="px-3 py-2 border-b border-gray-50 mb-1">
+              <p className="text-[13px] font-bold text-[#2D3142] truncate">{user?.name || "Guest"}</p>
+              <p className="text-[11px] text-gray-400 font-medium truncate">{user?.role || "Member"}</p>
+            </div>
+
+            <div className="my-1 h-px bg-gray-50" />
+
+            <DropdownItem onClick={onLogout} className="text-danger-600 hover:bg-danger-50 hover:text-danger-700">
+              <LogOut size={16} />
+              <span>Log out</span>
+            </DropdownItem>
+          </Dropdown>
+        </div>
+      </aside>
+
+      {/* Desktop Secondary Sidebar */}
+      {activeMenu && activeMenu.groups.length > 0 && (
+        <aside className="hidden md:flex w-[240px] bg-white border-gray-200 flex-col py-8 shrink-0 z-10">
+          <h2 className="px-6 text-xl font-bold text-[#2D3142]/80 mb-6">{activeMenu.label}</h2>
+          <div className="flex-1 overflow-y-auto px-4 space-y-6">
+            {activeMenu.groups.map((group) => (
+              <div key={group.id}>
+                <h3 className="px-2 text-xs font-bold text-gray-400 uppercase tracking-wider mb-2">{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 block ${isItemActive
+                      ? "bg-[#F4F5F7] text-[#2D3142] font-semibold"
+                      : "text-gray-500 font-medium hover:bg-gray-50"
+                      }`;
+
+                    return isInternal ? (
+                      <Link key={item.id} href={href} className={className}>
+                        {item.label}
+                      </Link>
+                    ) : (
+                      <a key={item.id} href={href} className={className}>
+                        {item.label}
+                      </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="w-8 h-8 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shrink-0 shadow-sm">
+                  <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>
+      )}
+
+      {/* Main Content Area & Mobile Header */}
+      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+        {/* Mobile Header */}
+        <header className="md:hidden flex items-center justify-between p-4 bg-white border-b border-gray-200 shrink-0 z-10">
+          <div className="flex items-center justify-center w-8 h-8">
+            {logo}
+          </div>
+
+          <div className="flex items-center gap-2">
+            {/* Organization Selector - Mobile Header */}
+            {organizations.length > 0 && selectedOrganization && (
+              <button
+                id="org-selector-mobile"
+                onClick={() => setIsOrgModalOpen(true)}
+                className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg bg-[#F4F5F7] hover:bg-gray-200/70 transition-all cursor-pointer"
+              >
+                <div className="w-5 h-5 rounded-md bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shrink-0">
+                  <Building2 size={10} className="text-white" />
+                </div>
+                <span className="text-[12px] font-semibold text-[#2D3142] max-w-[100px] truncate">
+                  {selectedOrganization.code || selectedOrganization.name?.substring(0, 10)}
+                </span>
+              </button>
+            )}
+            <button
+              className="p-1.5 rounded-md hover:bg-gray-100 text-[#2D3142]"
+              onClick={() => setIsMobileMenuOpen(true)}
+            >
+              <Menu size={24} />
+            </button>
+          </div>
+        </header>
+
+        {/* Main Content Scrollable Area */}
+        <main className="flex-1 p-4 md:p-6 lg:p-8 overflow-hidden min-h-0">
+          <div className="bg-white rounded-2xl h-full p-4 md:p-8 flex flex-col overflow-y-auto">
+            {children}
+          </div>
+        </main>
+      </div>
+
+      {/* Mobile Drawer Overlay */}
+      {isMobileMenuOpen && (
+        <div className="fixed inset-0 z-50 flex md:hidden">
+          {/* Backdrop */}
+          <div
+            className="fixed inset-0 bg-[#1a1a2e]/50 backdrop-blur-sm transition-opacity"
+            onClick={() => setIsMobileMenuOpen(false)}
+          />
+
+          {/* Drawer Content */}
+          <div className="relative flex w-[80%] max-w-[300px] flex-col bg-white h-full shadow-2xl animate-in slide-in-from-left-full duration-300">
+            <div className="flex items-center justify-between p-5 border-b border-gray-100">
+              <div className="flex items-center gap-3">
+                <div className="flex items-center justify-center w-8 h-8">
+                  {logo}
+                </div>
+                <span className="font-bold text-[#2D3142] tracking-tight">Apptimate</span>
+              </div>
+              <button
+                className="p-1.5 rounded-md hover:bg-gray-100 text-gray-500"
+                onClick={() => setIsMobileMenuOpen(false)}
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            <div className="flex-1 overflow-y-auto py-6 px-4">
+              <nav className="flex flex-col gap-8">
+                {menus.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, {
+                        size: 20,
+                        className: "stroke-[2.5]"
+                      })}
+                      <span>{menu.label}</span>
+                    </div>
+
+                    <div className="flex flex-col pl-4 border-l-2 border-gray-100 ml-4 gap-4">
+                      {menu.groups.map(group => (
+                        <div key={group.id} className="flex flex-col gap-1">
+                          <span className="text-xs font-bold text-gray-400 uppercase tracking-wider mb-1 px-3">
+                            {group.label}
+                          </span>
+                          {group.items.map(item => {
+                            const allMenuItems = menu.groups.flatMap(g => g.items);
+                            const matchingItems = allMenuItems.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 block ${isItemActive
+                              ? "bg-[#F4F5F7] text-[#2D3142] font-semibold"
+                              : "text-gray-500 font-medium hover:bg-gray-50"
+                              }`;
+
+                            return isInternal ? (
+                              <Link
+                                key={item.id}
+                                href={href}
+                                onClick={() => setIsMobileMenuOpen(false)}
+                                className={className}
+                              >
+                                {item.label}
+                              </Link>
+                            ) : (
+                              <a
+                                key={item.id}
+                                href={href}
+                                onClick={() => setIsMobileMenuOpen(false)}
+                                className={className}
+                              >
+                                {item.label}
+                              </a>
+                            );
+                          })}
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                ))}
+              </nav>
+            </div>
+
+            <div className="p-4 border-t border-gray-100 flex items-center gap-3">
+              <div className="w-10 h-10 rounded-full bg-[#2D3142] flex items-center justify-center text-white text-[10px] font-bold shrink-0 overflow-hidden">
+                {user?.avatar ? (
+                  <img src={user.avatar} alt={user?.name || 'User'} className="w-full h-full object-cover" />
+                ) : (
+                  user?.name ? user.name.substring(0, 2).toUpperCase() : "User"
+                )}
+              </div>
+              <div className="flex flex-col">
+                <span className="text-sm font-semibold text-[#2D3142]">{user?.name || "Guest"}</span>
+                <span className="text-xs text-gray-500">{user?.role || "Member"}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Organization Selector Modal */}
+      {isOrgModalOpen && (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
+          {/* Backdrop */}
+          <div
+            className="absolute inset-0 bg-[#1a1a2e]/60 backdrop-blur-sm"
+            onClick={() => setIsOrgModalOpen(false)}
+          />
+
+          {/* Modal */}
+          <div
+            className="relative w-full max-w-[440px] bg-white rounded-2xl shadow-[0_20px_60px_rgba(0,0,0,0.2)] overflow-hidden"
+            style={{ animation: 'orgModalIn 0.25s cubic-bezier(0.16, 1, 0.3, 1)' }}
+          >
+            {/* Header */}
+            <div className="flex items-center justify-between px-6 py-5 border-b border-gray-100">
+              <div className="flex items-center gap-3">
+                <div className="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-sm">
+                  <Building2 size={16} className="text-white" />
+                </div>
+                <div>
+                  <h3 className="text-[16px] font-bold text-[#2D3142] tracking-tight">Switch Organization</h3>
+                  <p className="text-[12px] text-gray-400 font-medium">Select the organization to work with</p>
+                </div>
+              </div>
+              <button
+                onClick={() => setIsOrgModalOpen(false)}
+                className="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:bg-gray-100 hover:text-[#2D3142] transition-all"
+              >
+                <X size={18} />
+              </button>
+            </div>
+
+            {/* Organization List */}
+            <div className="px-4 py-3 max-h-[360px] overflow-y-auto">
+              <div className="flex flex-col gap-1">
+                {organizations.map((org) => {
+                  const isSelected = selectedOrganization?.id === org.id;
+                  return (
+                    <button
+                      key={org.id}
+                      id={`org-option-${org.id}`}
+                      onClick={() => handleSelectOrg(org)}
+                      className={cn(
+                        "w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left transition-all duration-150 cursor-pointer",
+                        isSelected
+                          ? "bg-indigo-50 border border-indigo-200 shadow-sm"
+                          : "hover:bg-gray-50 border border-transparent"
+                      )}
+                    >
+                      <div className={cn(
+                        "w-9 h-9 rounded-lg flex items-center justify-center shrink-0 transition-colors",
+                        isSelected
+                          ? "bg-gradient-to-br from-indigo-500 to-purple-600 shadow-sm"
+                          : "bg-gray-100"
+                      )}>
+                        <Building2 size={14} className={isSelected ? "text-white" : "text-gray-500"} />
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className={cn(
+                          "text-[14px] font-semibold truncate leading-tight",
+                          isSelected ? "text-indigo-700" : "text-[#2D3142]"
+                        )}>
+                          {org.name}
+                        </p>
+                        <p className="text-[11px] text-gray-400 font-medium truncate">
+                          {org.code && <span className="uppercase">{org.code}</span>}
+                          {org.code && org.organization_type && <span className="mx-1">·</span>}
+                          {org.organization_type && <span className="capitalize">{org.organization_type}</span>}
+                          {!org.code && !org.organization_type && <span>ID: {org.id}</span>}
+                        </p>
+                      </div>
+                      {isSelected && (
+                        <div className="w-6 h-6 rounded-full bg-indigo-500 flex items-center justify-center shrink-0">
+                          <Check size={12} className="text-white stroke-[3]" />
+                        </div>
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Footer */}
+            <div className="px-6 py-4 border-t border-gray-100 bg-gray-50/50">
+              <p className="text-[11px] text-gray-400 font-medium text-center">
+                All data and actions will be scoped to the selected organization
+              </p>
+            </div>
+          </div>
+
+          <style dangerouslySetInnerHTML={{ __html: `
+            @keyframes orgModalIn {
+              from {
+                opacity: 0;
+                transform: scale(0.95) translateY(10px);
+              }
+              to {
+                opacity: 1;
+                transform: scale(1) translateY(0);
+              }
+            }
+          `}} />
+        </div>
+      )}
+    </div>
+  );
+}