@adminide-stack/clock-tik-browser 12.0.17-alpha.0 → 12.0.17-alpha.2

package/lib/pages/LandingPage/components/BuildingSoftwareScene.js

@@ -0,0 +1,1679 @@
+import {jsxs,Fragment,jsx}from'react/jsx-runtime';import {useState}from'react';import {Settings,BarChart3,Calendar,UserCircle,Folder,Globe,Users,FileText,PieChart,Building,Clock,MoreHorizontal,TrendingUp,Search,Plus,Inbox,Send,Trash2,Archive,X,Mail,CheckCircle2,Notebook,Home}from'lucide-react';import {ImageCard}from'./ImageCard.js';import {ProfileCard}from'./ProfilesCard.js';import {ToastContainer}from'./ToastContainer.js';import {Images}from'./Assets.js';const BuildingSoftwareScene = ({
+  progress
+}) => {
+  const [activePage, setActivePage] = useState(null);
+  const getElementProgress = (start, duration = 0.1) => {
+    return Math.max(0, Math.min(1, (progress - start) / duration));
+  };
+  const dashboardProgress = getElementProgress(0, 0.15);
+  const cardProgress = getElementProgress(0.35, 0.1);
+  const image1Progress = getElementProgress(0.48, 0.08);
+  const image2Progress = getElementProgress(0.6, 0.08);
+  const image3Progress = getElementProgress(0.63, 0.08);
+  // Toast progress values
+  const toast1Progress = getElementProgress(0.2, 0.08);
+  const toast2Progress = getElementProgress(0.28, 0.08);
+  const toast3Progress = getElementProgress(0.42, 0.08);
+  const toast4Progress = getElementProgress(0.54, 0.08);
+  const toast5Progress = getElementProgress(0.66, 0.08);
+  // Hide toasts when scrolling past the hero section (after ~85% progress)
+  const toastsVisible = progress < 0.85;
+  return jsxs(Fragment, {
+    children: [jsx("style", {
+      children: `
+                    @keyframes pulse-red {
+                        0%, 100% {
+                            opacity: 1;
+                            transform: scale(1);
+                        }
+                        50% {
+                            opacity: 0.7;
+                            transform: scale(1.2);
+                        }
+                    }
+                    @keyframes spectrum-spread {
+                        0% {
+                            transform: translate(-50%, -50%) scale(1);
+                            opacity: 0.8;
+                        }
+                        100% {
+                            transform: translate(-50%, -50%) scale(3);
+                            opacity: 0;
+                        }
+                    }
+                    .animate-pulse-red {
+                        animation: pulse-red 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+                        transform-origin: center center;
+                    }
+                    .spectrum-dot {
+                        position: relative;
+                        display: inline-block;
+                    }
+                    .spectrum-dot::before,
+                    .spectrum-dot::after {
+                        content: '';
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        width: 100%;
+                        height: 100%;
+                        border: 1.5px solid #E33A2C;
+                        border-radius: 50%;
+                        transform: translate(-50%, -50%) scale(1);
+                        transform-origin: center center;
+                        pointer-events: none;
+                    }
+                    .spectrum-dot-white::before,
+                    .spectrum-dot-white::after {
+                        border-color: white;
+                    }
+                    .spectrum-dot::before {
+                        animation: spectrum-spread 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+                    }
+                    .spectrum-dot::after {
+                        animation: spectrum-spread 2s cubic-bezier(0.4, 0, 0.6, 1) infinite 0.6s;
+                    }
+                `
+    }), jsxs("div", {
+      className: "w-full max-w-[1200px] mx-auto px-5 relative",
+      children: [jsxs("div", {
+        className: "relative transition-all duration-500",
+        style: {
+          opacity: dashboardProgress,
+          transform: `translateY(${(1 - dashboardProgress) * 50}px) scale(${0.9 + dashboardProgress * 0.1})`
+        },
+        children: [jsx("div", {
+          className: "rounded-xl overflow-hidden relative",
+          style: {
+            background: '#FEF3C7',
+            boxShadow: '0px 12px 36px -16px rgba(255, 255, 255, 0.20) inset, 0px 32px 44px 0px rgba(0, 0, 0, 0.16)'
+          },
+          children: jsxs("div", {
+            className: "relative",
+            children: [jsx("div", {
+              className: "mask-border p-[0.75px] z-[1] absolute inset-0",
+              style: {
+                backgroundImage: 'linear-gradient(to bottom, rgba(255,255,255,0.24), transparent 45%), linear-gradient(to bottom, rgba(255,255,255,0.12), rgba(255,255,255,0.06) 100%)'
+              }
+            }), jsxs("div", {
+              className: "relative rounded-xl overflow-clip bg-white",
+              children: [jsxs("div", {
+                className: "h-14 flex items-center px-6 gap-4 border-b",
+                style: {
+                  background: '#1F2937',
+                  borderColor: 'rgba(255, 255, 255, 0.1)'
+                },
+                children: [jsxs("div", {
+                  className: "flex items-center gap-2",
+                  children: [jsx("div", {
+                    className: "w-7 h-7 rounded bg-gradient-to-br from-[#E33A2C] to-[#F6C945]"
+                  }), jsx("span", {
+                    className: "text-base font-semibold text-white",
+                    children: "Clockbook"
+                  })]
+                }), jsxs("div", {
+                  className: "flex-1 flex items-center gap-6 ml-8",
+                  children: [jsx("span", {
+                    className: "text-sm text-white/80 hover:text-white cursor-pointer",
+                    children: "Home"
+                  }), jsx("span", {
+                    className: "text-sm text-white/80 hover:text-white cursor-pointer",
+                    children: "Getting Started"
+                  })]
+                }), jsxs("div", {
+                  className: "flex items-center gap-2",
+                  children: [jsx(Settings, {
+                    className: "w-4 h-4 text-white/60"
+                  }), jsxs("div", {
+                    className: "relative",
+                    children: [jsx("div", {
+                      className: "w-6 h-6 rounded-full bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center text-xs text-white font-medium",
+                      children: "CB"
+                    }), jsx("div", {
+                      className: "spectrum-dot spectrum-dot-white absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-white animate-pulse-red"
+                    })]
+                  })]
+                })]
+              }), jsx("div", {
+                className: "absolute top-16 right-6",
+                children: jsxs("button", {
+                  className: "px-4 py-2 bg-[#E33A2C] text-white text-sm font-medium rounded-md hover:bg-[#c82f23] transition-colors flex items-center gap-2 relative",
+                  children: [jsx("span", {
+                    children: "+ New Dashboard"
+                  }), jsx("div", {
+                    className: "spectrum-dot spectrum-dot-white absolute -top-1 -right-1 w-2.5 h-2.5 rounded-full bg-white animate-pulse-red"
+                  })]
+                })
+              }), jsxs("div", {
+                className: "flex h-[560px]",
+                children: [jsxs("div", {
+                  className: "w-14 flex flex-col items-center py-4 gap-3 border-r",
+                  style: {
+                    background: '#1F2937',
+                    borderColor: 'rgba(255, 255, 255, 0.1)'
+                  },
+                  children: [jsx("div", {
+                    className: "w-8 h-8 rounded-lg bg-[#E33A2C] cursor-pointer flex items-center justify-center",
+                    onClick: () => setActivePage('dashboard'),
+                    children: jsx(BarChart3, {
+                      className: "w-4 h-4 text-white"
+                    })
+                  }), jsxs("div", {
+                    className: "relative",
+                    children: [jsx(Calendar, {
+                      className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                    }), jsx("div", {
+                      className: "spectrum-dot absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
+                      onClick: e => {
+                        e.stopPropagation();
+                        setActivePage('home');
+                      }
+                    })]
+                  }), jsx(UserCircle, {
+                    className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                  }), jsxs("div", {
+                    className: "relative",
+                    children: [jsx(Folder, {
+                      className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                    }), jsx("div", {
+                      className: "spectrum-dot absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
+                      onClick: e => {
+                        e.stopPropagation();
+                        setActivePage('mail');
+                      }
+                    })]
+                  }), jsx(Globe, {
+                    className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                  }), jsx(Settings, {
+                    className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                  }), jsxs("div", {
+                    className: "relative",
+                    children: [jsx(Users, {
+                      className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                    }), jsx("div", {
+                      className: "spectrum-dot absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
+                      onClick: e => {
+                        e.stopPropagation();
+                        setActivePage('chats');
+                      }
+                    })]
+                  }), jsx(FileText, {
+                    className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                  }), jsx(PieChart, {
+                    className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                  }), jsx(Building, {
+                    className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                  }), jsxs("div", {
+                    className: "relative",
+                    children: [jsx(Clock, {
+                      className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                    }), jsx("div", {
+                      className: "spectrum-dot absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
+                      onClick: e => {
+                        e.stopPropagation();
+                        setActivePage('search');
+                      }
+                    })]
+                  }), jsx(MoreHorizontal, {
+                    className: "w-5 h-5 text-white/60 cursor-pointer hover:text-white"
+                  })]
+                }), jsx("div", {
+                  className: "flex-1 bg-white p-8 overflow-y-auto",
+                  children: activePage ? jsx(PageView, {
+                    page: activePage,
+                    onClose: () => setActivePage(null)
+                  }) : jsxs(Fragment, {
+                    children: [jsxs("div", {
+                      className: "flex gap-6 mb-6 border-b",
+                      children: [jsx("div", {
+                        className: "pb-2 border-b-2 border-[#E33A2C]",
+                        children: jsx("span", {
+                          className: "text-sm font-medium text-gray-900",
+                          children: "My Dashboard"
+                        })
+                      }), jsxs("div", {
+                        className: "pb-2 relative",
+                        children: [jsx("span", {
+                          className: "text-sm font-medium text-gray-600",
+                          children: "Productivity"
+                        }), jsx("div", {
+                          className: "spectrum-dot absolute top-0 right-0 w-2 h-2 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
+                          onClick: e => {
+                            e.stopPropagation();
+                            setActivePage('productivity');
+                          }
+                        })]
+                      }), jsx("div", {
+                        className: "pb-2",
+                        children: jsx("span", {
+                          className: "text-sm font-medium text-gray-600",
+                          children: "Collaboration"
+                        })
+                      })]
+                    }), jsxs("div", {
+                      className: "grid grid-cols-4 gap-4 mb-6",
+                      children: [jsxs("div", {
+                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        children: [jsx("div", {
+                          className: "text-xs text-gray-500 mb-1",
+                          children: "New Customers"
+                        }), jsx("div", {
+                          className: "text-xl font-semibold text-gray-900",
+                          children: "25.42k"
+                        }), jsxs("div", {
+                          className: "flex items-center gap-1 mt-1",
+                          children: [jsx(TrendingUp, {
+                            className: "w-3 h-3 text-green-500"
+                          }), jsx("span", {
+                            className: "text-xs text-green-500",
+                            children: "36.6%"
+                          })]
+                        })]
+                      }), jsxs("div", {
+                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        children: [jsx("div", {
+                          className: "text-xs text-gray-500 mb-1",
+                          children: "New Revenue"
+                        }), jsx("div", {
+                          className: "text-xl font-semibold text-gray-900",
+                          children: "3.51M"
+                        }), jsxs("div", {
+                          className: "flex items-center gap-1 mt-1",
+                          children: [jsx(TrendingUp, {
+                            className: "w-3 h-3 text-green-500"
+                          }), jsx("span", {
+                            className: "text-xs text-green-500",
+                            children: "18.7%"
+                          })]
+                        })]
+                      }), jsxs("div", {
+                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        children: [jsx("div", {
+                          className: "text-xs text-gray-500 mb-1",
+                          children: "Net MRR"
+                        }), jsx("div", {
+                          className: "text-xl font-semibold text-gray-900",
+                          children: "46.82M"
+                        }), jsxs("div", {
+                          className: "flex items-center gap-1 mt-1",
+                          children: [jsx(TrendingUp, {
+                            className: "w-3 h-3 text-green-500"
+                          }), jsx("span", {
+                            className: "text-xs text-green-500",
+                            children: "36.6%"
+                          })]
+                        })]
+                      }), jsxs("div", {
+                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        children: [jsx("div", {
+                          className: "text-xs text-gray-500 mb-1",
+                          children: "Net Cancellation"
+                        }), jsx("div", {
+                          className: "text-xl font-semibold text-gray-900",
+                          children: "14.93k"
+                        }), jsxs("div", {
+                          className: "flex items-center gap-1 mt-1",
+                          children: [jsx(TrendingUp, {
+                            className: "w-3 h-3 text-red-500 rotate-180"
+                          }), jsx("span", {
+                            className: "text-xs text-red-500",
+                            children: "-0.74%"
+                          })]
+                        })]
+                      })]
+                    }), jsxs("div", {
+                      className: "grid grid-cols-2 gap-4",
+                      children: [jsxs("div", {
+                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        children: [jsx("div", {
+                          className: "text-sm font-semibold text-gray-900 mb-3",
+                          children: "Leads - MQL to SQL"
+                        }), jsx("div", {
+                          className: "h-32 bg-gradient-to-t from-blue-50 to-transparent rounded flex items-end justify-center",
+                          children: jsx("div", {
+                            className: "text-xs text-gray-500",
+                            children: "Chart visualization"
+                          })
+                        })]
+                      }), jsxs("div", {
+                        className: "bg-white border border-gray-200 rounded-lg p-4",
+                        children: [jsx("div", {
+                          className: "text-sm font-semibold text-gray-900 mb-3",
+                          children: "Cash Flow Monthly Trend"
+                        }), jsx("div", {
+                          className: "h-32 bg-gradient-to-t from-green-50 to-transparent rounded flex items-end justify-center",
+                          children: jsx("div", {
+                            className: "text-xs text-gray-500",
+                            children: "Chart visualization"
+                          })
+                        })]
+                      })]
+                    })]
+                  })
+                })]
+              }), jsxs("div", {
+                className: "h-10 flex items-center px-4 gap-4 border-t",
+                style: {
+                  background: '#F3F4F6',
+                  borderColor: 'rgba(0, 0, 0, 0.1)'
+                },
+                children: [jsxs("div", {
+                  className: "relative",
+                  children: [jsx("span", {
+                    className: "text-xs text-gray-600 font-medium cursor-pointer hover:text-gray-900",
+                    children: "Chats"
+                  }), jsx("div", {
+                    className: "spectrum-dot absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
+                    onClick: e => {
+                      e.stopPropagation();
+                      setActivePage('chats');
+                    }
+                  })]
+                }), jsx("span", {
+                  className: "text-xs text-gray-500 cursor-pointer hover:text-gray-700",
+                  children: "Channels"
+                }), jsx("span", {
+                  className: "text-xs text-gray-500 cursor-pointer hover:text-gray-700",
+                  children: "Contacts"
+                }), jsx("div", {
+                  className: "flex-1 flex items-center justify-center",
+                  children: jsxs("div", {
+                    className: "relative w-full max-w-md",
+                    children: [jsx("input", {
+                      type: "text",
+                      placeholder: "Here is your Smart Chat (Ctrl+Space)",
+                      className: "w-full px-3 py-1.5 text-xs bg-white border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-[#E33A2C]/20 focus:border-[#E33A2C]"
+                    }), jsx("div", {
+                      className: "spectrum-dot absolute -top-0.5 -right-1 w-2.5 h-2.5 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
+                      onClick: e => {
+                        e.stopPropagation();
+                        setActivePage('notebook');
+                      }
+                    })]
+                  })
+                }), jsxs("div", {
+                  className: "relative",
+                  children: [jsx(FileText, {
+                    className: "w-4 h-4 text-gray-500 cursor-pointer hover:text-gray-700"
+                  }), jsx("div", {
+                    className: "spectrum-dot absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full bg-[#E33A2C] animate-pulse-red cursor-pointer z-10",
+                    onClick: e => {
+                      e.stopPropagation();
+                      setActivePage('notebook');
+                    }
+                  })]
+                })]
+              })]
+            })]
+          })
+        }), jsx(ProfileCard, {
+          name: "Sarah Chen",
+          role: "Frontend Developer",
+          avatarGradient: "bg-gradient-to-br from-purple-400 to-pink-500",
+          progress: cardProgress,
+          className: "-bottom-16 left-8 w-64"
+        }), jsx(ImageCard, {
+          width: "50%",
+          height: "auto",
+          gradient: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
+          progress: image1Progress,
+          className: "top-12 -left-16 z-999",
+          iconSize: "w-14 h-14",
+          imageUrl: Images.clockbook.analytics,
+          alt: "Clockbook Analytics Dashboard"
+        }), jsx(ImageCard, {
+          width: "50%",
+          height: "auto",
+          gradient: "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)",
+          progress: image2Progress,
+          className: "top-10 right-20 z-999",
+          iconSize: "w-8 h-8",
+          imageUrl: Images.clockbook.collaboration,
+          alt: "Clockbook Collaboration Tools"
+        }), jsx(ImageCard, {
+          width: "50%",
+          height: "auto",
+          gradient: "linear-gradient(135deg, #fa709a 0%, #fee140 100%)",
+          progress: image3Progress,
+          className: "bottom-10 right-4 z-999",
+          iconSize: "w-10 h-10",
+          imageUrl: Images.clockbook.finance,
+          alt: "Clockbook Finance Management"
+        })]
+      }), jsx(ToastContainer, {
+        isVisible: toastsVisible,
+        toastProgresses: {
+          toast1: toast1Progress,
+          toast2: toast2Progress,
+          toast3: toast3Progress,
+          toast4: toast4Progress,
+          toast5: toast5Progress
+        }
+      })]
+    })]
+  });
+};
+// Page View Component
+function PageView({
+  page,
+  onClose
+}) {
+  const pageConfig = {
+    productivity: {
+      title: 'Productivity',
+      icon: TrendingUp,
+      content: jsxs("div", {
+        className: "grid grid-cols-2 gap-6",
+        children: [jsxs("div", {
+          className: "bg-white border border-gray-200 rounded-lg p-6",
+          children: [jsx("div", {
+            className: "flex items-center justify-between mb-4",
+            children: jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [jsx(CheckCircle2, {
+                className: "w-5 h-5 text-green-500"
+              }), jsx("h3", {
+                className: "text-lg font-semibold text-gray-900",
+                children: "My Tasks (Projects)"
+              })]
+            })
+          }), jsxs("div", {
+            className: "space-y-3",
+            children: [jsxs("div", {
+              className: "flex items-start gap-3 p-3 bg-gray-50 rounded-lg",
+              children: [jsx("input", {
+                type: "checkbox",
+                className: "w-4 h-4 mt-1",
+                defaultChecked: true
+              }), jsxs("div", {
+                className: "flex-1",
+                children: [jsx("div", {
+                  className: "text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded inline-block mb-1",
+                  children: "In Progress"
+                }), jsx("div", {
+                  className: "text-sm font-medium text-gray-900 mt-1",
+                  children: "Create an enhancement list based on feedback"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500 mt-1",
+                  children: "Website Development"
+                })]
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-3 p-3 bg-gray-50 rounded-lg",
+              children: [jsx("input", {
+                type: "checkbox",
+                className: "w-4 h-4 mt-1"
+              }), jsxs("div", {
+                className: "flex-1",
+                children: [jsx("div", {
+                  className: "text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded inline-block mb-1",
+                  children: "In Progress"
+                }), jsx("div", {
+                  className: "text-sm font-medium text-gray-900 mt-1",
+                  children: "Review and approve design mockups"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500 mt-1",
+                  children: "UI/UX Project"
+                })]
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-3 p-3 bg-gray-50 rounded-lg",
+              children: [jsx("input", {
+                type: "checkbox",
+                className: "w-4 h-4 mt-1"
+              }), jsxs("div", {
+                className: "flex-1",
+                children: [jsx("div", {
+                  className: "text-xs text-blue-600 bg-blue-50 px-2 py-0.5 rounded inline-block mb-1",
+                  children: "In Progress"
+                }), jsx("div", {
+                  className: "text-sm font-medium text-gray-900 mt-1",
+                  children: "Update project documentation"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500 mt-1",
+                  children: "Product Management"
+                })]
+              })]
+            })]
+          })]
+        }), jsxs("div", {
+          className: "bg-white border border-gray-200 rounded-lg p-6",
+          children: [jsxs("div", {
+            className: "flex items-center justify-between mb-4",
+            children: [jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [jsx(Mail, {
+                className: "w-5 h-5 text-gray-600"
+              }), jsx("h3", {
+                className: "text-lg font-semibold text-gray-900",
+                children: "All Mails"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [jsx("select", {
+                className: "text-xs border border-gray-300 rounded px-2 py-1",
+                children: jsx("option", {
+                  children: "Inbox"
+                })
+              }), jsx(MoreHorizontal, {
+                className: "w-4 h-4 text-gray-400"
+              })]
+            })]
+          }), jsxs("div", {
+            className: "space-y-2",
+            children: [jsxs("div", {
+              className: "flex items-start gap-3 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsx("div", {
+                className: "w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium mt-0.5",
+                children: "DS"
+              }), jsxs("div", {
+                className: "flex-1 min-w-0",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900 truncate",
+                  children: "Darrell Steward"
+                }), jsx("div", {
+                  className: "text-xs text-gray-600 truncate",
+                  children: "Project update required - Q4 planning"
+                }), jsx("div", {
+                  className: "text-xs text-gray-400 mt-0.5",
+                  children: "Today"
+                })]
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-3 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsx("div", {
+                className: "w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs font-medium mt-0.5",
+                children: "AM"
+              }), jsxs("div", {
+                className: "flex-1 min-w-0",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900 truncate",
+                  children: "Arlene McCoy"
+                }), jsx("div", {
+                  className: "text-xs text-gray-600 truncate",
+                  children: "Meeting scheduled for next week"
+                }), jsx("div", {
+                  className: "text-xs text-gray-400 mt-0.5",
+                  children: "Today"
+                })]
+              })]
+            }), jsxs("div", {
+              className: "flex items-start gap-3 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsx("div", {
+                className: "w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-medium mt-0.5",
+                children: "FM"
+              }), jsxs("div", {
+                className: "flex-1 min-w-0",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900 truncate",
+                  children: "Floyd Miles"
+                }), jsx("div", {
+                  className: "text-xs text-gray-600 truncate",
+                  children: "Budget approval needed"
+                }), jsx("div", {
+                  className: "text-xs text-gray-400 mt-0.5",
+                  children: "Today"
+                })]
+              })]
+            })]
+          })]
+        }), jsxs("div", {
+          className: "bg-white border border-gray-200 rounded-lg p-6",
+          children: [jsxs("div", {
+            className: "flex items-center gap-2 mb-4",
+            children: [jsx(FileText, {
+              className: "w-5 h-5 text-gray-600"
+            }), jsx("h3", {
+              className: "text-lg font-semibold text-gray-900",
+              children: "Recent Files"
+            })]
+          }), jsxs("div", {
+            className: "space-y-3",
+            children: [jsxs("div", {
+              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsxs("div", {
+                className: "flex items-center gap-3",
+                children: [jsx(FileText, {
+                  className: "w-5 h-5 text-blue-500"
+                }), jsxs("div", {
+                  children: [jsx("div", {
+                    className: "text-sm font-medium text-gray-900",
+                    children: "Blog Details Content"
+                  }), jsx("div", {
+                    className: "text-xs text-gray-500",
+                    children: "Last Opened by You"
+                  })]
+                })]
+              }), jsx("div", {
+                className: "text-xs text-gray-400",
+                children: "16 Jun"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsxs("div", {
+                className: "flex items-center gap-3",
+                children: [jsx(FileText, {
+                  className: "w-5 h-5 text-green-500"
+                }), jsxs("div", {
+                  children: [jsx("div", {
+                    className: "text-sm font-medium text-gray-900",
+                    children: "Attendance sheet"
+                  }), jsx("div", {
+                    className: "text-xs text-gray-500",
+                    children: "Last Opened by You"
+                  })]
+                })]
+              }), jsx("div", {
+                className: "text-xs text-gray-400",
+                children: "27 Aug"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsxs("div", {
+                className: "flex items-center gap-3",
+                children: [jsx(FileText, {
+                  className: "w-5 h-5 text-purple-500"
+                }), jsxs("div", {
+                  children: [jsx("div", {
+                    className: "text-sm font-medium text-gray-900",
+                    children: "Website Header Graphic"
+                  }), jsx("div", {
+                    className: "text-xs text-gray-500",
+                    children: "Last Opened by You"
+                  })]
+                })]
+              }), jsx("div", {
+                className: "text-xs text-gray-400",
+                children: "16 Aug"
+              })]
+            })]
+          })]
+        }), jsxs("div", {
+          className: "bg-white border border-gray-200 rounded-lg p-6",
+          children: [jsxs("div", {
+            className: "flex items-center gap-2 mb-4",
+            children: [jsx(PieChart, {
+              className: "w-5 h-5 text-gray-600"
+            }), jsx("h3", {
+              className: "text-lg font-semibold text-gray-900",
+              children: "My Top Expenses"
+            })]
+          }), jsx("div", {
+            className: "flex items-center justify-center h-48 bg-gray-50 rounded-lg mb-4",
+            children: jsxs("div", {
+              className: "text-center",
+              children: [jsx("div", {
+                className: "w-32 h-32 rounded-full border-8 border-orange-300 border-t-orange-500 border-r-blue-500 border-b-green-500 border-l-purple-500 mb-4 mx-auto"
+              }), jsx("div", {
+                className: "text-xs text-gray-500",
+                children: "Pie Chart Visualization"
+              })]
+            })
+          }), jsxs("div", {
+            className: "space-y-2",
+            children: [jsxs("div", {
+              className: "flex items-center justify-between text-sm",
+              children: [jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [jsx("div", {
+                  className: "w-3 h-3 rounded-full bg-orange-500"
+                }), jsx("span", {
+                  className: "text-gray-700",
+                  children: "Lodging"
+                })]
+              }), jsx("span", {
+                className: "text-gray-900 font-medium",
+                children: "28%"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between text-sm",
+              children: [jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [jsx("div", {
+                  className: "w-3 h-3 rounded-full bg-blue-500"
+                }), jsx("span", {
+                  className: "text-gray-700",
+                  children: "Goods Sold"
+                })]
+              }), jsx("span", {
+                className: "text-gray-900 font-medium",
+                children: "20%"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between text-sm",
+              children: [jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [jsx("div", {
+                  className: "w-3 h-3 rounded-full bg-green-500"
+                }), jsx("span", {
+                  className: "text-gray-700",
+                  children: "Marketing"
+                })]
+              }), jsx("span", {
+                className: "text-gray-900 font-medium",
+                children: "22%"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between text-sm",
+              children: [jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [jsx("div", {
+                  className: "w-3 h-3 rounded-full bg-purple-500"
+                }), jsx("span", {
+                  className: "text-gray-700",
+                  children: "Hardware"
+                })]
+              }), jsx("span", {
+                className: "text-gray-900 font-medium",
+                children: "10%"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between text-sm",
+              children: [jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [jsx("div", {
+                  className: "w-3 h-3 rounded-full bg-gray-500"
+                }), jsx("span", {
+                  className: "text-gray-700",
+                  children: "Other Expense"
+                })]
+              }), jsx("span", {
+                className: "text-gray-900 font-medium",
+                children: "20%"
+              })]
+            })]
+          })]
+        })]
+      })
+    },
+    home: {
+      title: 'Home',
+      icon: Home,
+      content: jsxs("div", {
+        className: "space-y-6",
+        children: [jsxs("div", {
+          className: "bg-gradient-to-r from-[#E33A2C] to-[#F6C945] rounded-lg p-6 text-white",
+          children: [jsx("h2", {
+            className: "text-2xl font-semibold mb-2",
+            children: "Welcome to Clockbook"
+          }), jsx("p", {
+            className: "text-white/90",
+            children: "Your unified business platform for managing everything in one place."
+          })]
+        }), jsxs("div", {
+          className: "grid grid-cols-4 gap-4",
+          children: [jsxs("div", {
+            className: "bg-white border border-gray-200 rounded-lg p-4",
+            children: [jsx("div", {
+              className: "text-xs text-gray-500 mb-1",
+              children: "Total Users"
+            }), jsx("div", {
+              className: "text-2xl font-semibold text-gray-900",
+              children: "1,234"
+            }), jsxs("div", {
+              className: "flex items-center gap-1 mt-2",
+              children: [jsx(TrendingUp, {
+                className: "w-3 h-3 text-green-500"
+              }), jsx("span", {
+                className: "text-xs text-green-500",
+                children: "12.5%"
+              })]
+            })]
+          }), jsxs("div", {
+            className: "bg-white border border-gray-200 rounded-lg p-4",
+            children: [jsx("div", {
+              className: "text-xs text-gray-500 mb-1",
+              children: "Active Projects"
+            }), jsx("div", {
+              className: "text-2xl font-semibold text-gray-900",
+              children: "48"
+            }), jsxs("div", {
+              className: "flex items-center gap-1 mt-2",
+              children: [jsx(TrendingUp, {
+                className: "w-3 h-3 text-green-500"
+              }), jsx("span", {
+                className: "text-xs text-green-500",
+                children: "8.2%"
+              })]
+            })]
+          }), jsxs("div", {
+            className: "bg-white border border-gray-200 rounded-lg p-4",
+            children: [jsx("div", {
+              className: "text-xs text-gray-500 mb-1",
+              children: "Tasks Completed"
+            }), jsx("div", {
+              className: "text-2xl font-semibold text-gray-900",
+              children: "892"
+            }), jsxs("div", {
+              className: "flex items-center gap-1 mt-2",
+              children: [jsx(TrendingUp, {
+                className: "w-3 h-3 text-green-500"
+              }), jsx("span", {
+                className: "text-xs text-green-500",
+                children: "24.1%"
+              })]
+            })]
+          }), jsxs("div", {
+            className: "bg-white border border-gray-200 rounded-lg p-4",
+            children: [jsx("div", {
+              className: "text-xs text-gray-500 mb-1",
+              children: "Revenue This Month"
+            }), jsx("div", {
+              className: "text-2xl font-semibold text-gray-900",
+              children: "$125k"
+            }), jsxs("div", {
+              className: "flex items-center gap-1 mt-2",
+              children: [jsx(TrendingUp, {
+                className: "w-3 h-3 text-green-500"
+              }), jsx("span", {
+                className: "text-xs text-green-500",
+                children: "15.3%"
+              })]
+            })]
+          })]
+        }), jsxs("div", {
+          className: "grid grid-cols-3 gap-4",
+          children: [jsxs("div", {
+            className: "bg-white border border-gray-200 rounded-lg p-6",
+            children: [jsxs("div", {
+              className: "flex items-center gap-3 mb-4",
+              children: [jsx("div", {
+                className: "w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center",
+                children: jsx(Mail, {
+                  className: "w-6 h-6 text-blue-600"
+                })
+              }), jsxs("div", {
+                children: [jsx("h3", {
+                  className: "text-lg font-semibold text-gray-900",
+                  children: "Mail"
+                }), jsx("p", {
+                  className: "text-xs text-gray-500",
+                  children: "12 unread messages"
+                })]
+              })]
+            }), jsx("button", {
+              className: "w-full px-4 py-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 text-sm font-medium",
+              children: "View Inbox"
+            })]
+          }), jsxs("div", {
+            className: "bg-white border border-gray-200 rounded-lg p-6",
+            children: [jsxs("div", {
+              className: "flex items-center gap-3 mb-4",
+              children: [jsx("div", {
+                className: "w-12 h-12 rounded-lg bg-green-100 flex items-center justify-center",
+                children: jsx(CheckCircle2, {
+                  className: "w-6 h-6 text-green-600"
+                })
+              }), jsxs("div", {
+                children: [jsx("h3", {
+                  className: "text-lg font-semibold text-gray-900",
+                  children: "Tasks"
+                }), jsx("p", {
+                  className: "text-xs text-gray-500",
+                  children: "5 pending tasks"
+                })]
+              })]
+            }), jsx("button", {
+              className: "w-full px-4 py-2 bg-green-50 text-green-600 rounded-lg hover:bg-green-100 text-sm font-medium",
+              children: "View Tasks"
+            })]
+          }), jsxs("div", {
+            className: "bg-white border border-gray-200 rounded-lg p-6",
+            children: [jsxs("div", {
+              className: "flex items-center gap-3 mb-4",
+              children: [jsx("div", {
+                className: "w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center",
+                children: jsx(Calendar, {
+                  className: "w-6 h-6 text-purple-600"
+                })
+              }), jsxs("div", {
+                children: [jsx("h3", {
+                  className: "text-lg font-semibold text-gray-900",
+                  children: "Calendar"
+                }), jsx("p", {
+                  className: "text-xs text-gray-500",
+                  children: "3 meetings today"
+                })]
+              })]
+            }), jsx("button", {
+              className: "w-full px-4 py-2 bg-purple-50 text-purple-600 rounded-lg hover:bg-purple-100 text-sm font-medium",
+              children: "View Calendar"
+            })]
+          })]
+        }), jsxs("div", {
+          className: "bg-white border border-gray-200 rounded-lg p-6",
+          children: [jsx("h3", {
+            className: "text-lg font-semibold text-gray-900 mb-4",
+            children: "Recent Activity"
+          }), jsxs("div", {
+            className: "space-y-3",
+            children: [jsxs("div", {
+              className: "flex items-center gap-3 p-3 bg-gray-50 rounded-lg",
+              children: [jsx("div", {
+                className: "w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium",
+                children: "JD"
+              }), jsxs("div", {
+                className: "flex-1",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "John Doe completed a task"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "2 hours ago"
+                })]
+              })]
+            }), jsxs("div", {
+              className: "flex items-center gap-3 p-3 bg-gray-50 rounded-lg",
+              children: [jsx("div", {
+                className: "w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white text-xs font-medium",
+                children: "JS"
+              }), jsxs("div", {
+                className: "flex-1",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Jane Smith shared a file"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "4 hours ago"
+                })]
+              })]
+            }), jsxs("div", {
+              className: "flex items-center gap-3 p-3 bg-gray-50 rounded-lg",
+              children: [jsx("div", {
+                className: "w-8 h-8 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs font-medium",
+                children: "MB"
+              }), jsxs("div", {
+                className: "flex-1",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Mike Brown created a new project"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "6 hours ago"
+                })]
+              })]
+            })]
+          })]
+        })]
+      })
+    },
+    mail: {
+      title: 'Mail',
+      icon: Mail,
+      content: jsxs("div", {
+        className: "flex gap-4 h-full",
+        children: [jsxs("div", {
+          className: "w-64 border-r border-gray-200 pr-4",
+          children: [jsxs("button", {
+            className: "w-full mb-4 px-4 py-2 bg-[#E33A2C] text-white text-sm font-medium rounded-lg hover:bg-[#c82f23] transition-colors flex items-center justify-center gap-2",
+            children: [jsx(Plus, {
+              className: "w-4 h-4"
+            }), "New Mail"]
+          }), jsxs("div", {
+            className: "flex gap-2 mb-4 border-b border-gray-200",
+            children: [jsx("button", {
+              className: "pb-2 px-2 text-sm font-medium text-[#E33A2C] border-b-2 border-[#E33A2C]",
+              children: "Mail"
+            }), jsx("button", {
+              className: "pb-2 px-2 text-sm text-gray-600",
+              children: "Streams"
+            }), jsx("button", {
+              className: "pb-2 px-2 text-sm text-gray-600",
+              children: "Settings"
+            })]
+          }), jsxs("div", {
+            className: "space-y-1",
+            children: [jsx("div", {
+              className: "text-xs font-semibold text-gray-500 uppercase mb-2",
+              children: "Folders"
+            }), jsxs("div", {
+              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [jsx(Inbox, {
+                  className: "w-4 h-4 text-gray-400"
+                }), jsx("span", {
+                  className: "text-sm text-gray-700",
+                  children: "Inbox"
+                })]
+              }), jsx("span", {
+                className: "text-xs text-gray-500",
+                children: "13"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [jsx(FileText, {
+                  className: "w-4 h-4 text-gray-400"
+                }), jsx("span", {
+                  className: "text-sm text-gray-700",
+                  children: "Drafts"
+                })]
+              }), jsx("span", {
+                className: "text-xs text-gray-500",
+                children: "18"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [jsx(FileText, {
+                  className: "w-4 h-4 text-gray-400"
+                }), jsx("span", {
+                  className: "text-sm text-gray-700",
+                  children: "Templates"
+                })]
+              }), jsx("span", {
+                className: "text-xs text-gray-500",
+                children: "5"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsx(FileText, {
+                className: "w-4 h-4 text-gray-400"
+              }), jsx("span", {
+                className: "text-sm text-gray-700",
+                children: "Snoozed"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsx(Send, {
+                className: "w-4 h-4 text-gray-400"
+              }), jsx("span", {
+                className: "text-sm text-gray-700",
+                children: "Sent"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsx(FileText, {
+                className: "w-4 h-4 text-gray-400"
+              }), jsx("span", {
+                className: "text-sm text-gray-700",
+                children: "Spam"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsx(Trash2, {
+                className: "w-4 h-4 text-gray-400"
+              }), jsx("span", {
+                className: "text-sm text-gray-700",
+                children: "Trash"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center justify-between p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsxs("div", {
+                className: "flex items-center gap-2",
+                children: [jsx(FileText, {
+                  className: "w-4 h-4 text-gray-400"
+                }), jsx("span", {
+                  className: "text-sm text-gray-700",
+                  children: "Outbox"
+                })]
+              }), jsx("span", {
+                className: "text-xs text-gray-500",
+                children: "2"
+              })]
+            }), jsxs("div", {
+              className: "flex items-center gap-2 p-2 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsx(Archive, {
+                className: "w-4 h-4 text-gray-400"
+              }), jsx("span", {
+                className: "text-sm text-gray-700",
+                children: "Archive"
+              })]
+            })]
+          })]
+        }), jsxs("div", {
+          className: "flex-1 border-r border-gray-200 pr-4",
+          children: [jsxs("div", {
+            className: "flex items-center justify-between mb-4",
+            children: [jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [jsx("select", {
+                className: "text-sm border border-gray-300 rounded px-3 py-1.5",
+                children: jsx("option", {
+                  children: "Blog"
+                })
+              }), jsx("button", {
+                className: "text-sm text-gray-600 hover:text-gray-900",
+                children: "Move to"
+              }), jsx("button", {
+                className: "text-sm text-gray-600 hover:text-gray-900",
+                children: "Tag as"
+              })]
+            }), jsx(MoreHorizontal, {
+              className: "w-5 h-5 text-gray-400"
+            })]
+          }), jsxs("div", {
+            className: "space-y-1",
+            children: [jsx("div", {
+              className: "text-xs font-semibold text-gray-500 mb-2",
+              children: "2020"
+            }), jsxs("div", {
+              className: "p-3 bg-blue-50 border-l-2 border-blue-500 rounded cursor-pointer hover:bg-blue-100",
+              children: [jsx("div", {
+                className: "text-sm font-medium text-gray-900",
+                children: "Elena Brown"
+              }), jsx("div", {
+                className: "text-xs text-gray-600 mt-1",
+                children: "SketcheZ - Product Screensh..."
+              }), jsx("div", {
+                className: "text-xs text-gray-400 mt-1",
+                children: "JUN 19, 2020"
+              })]
+            }), jsx("div", {
+              className: "text-xs font-semibold text-gray-500 mt-4 mb-2",
+              children: "2018"
+            }), jsxs("div", {
+              className: "p-3 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsx("div", {
+                className: "text-sm font-medium text-gray-900",
+                children: "Carl Mendez"
+              }), jsx("div", {
+                className: "text-xs text-gray-600 mt-1",
+                children: "Re: Agile Process"
+              }), jsx("div", {
+                className: "text-xs text-gray-400 mt-1",
+                children: "APR 26, 2018"
+              })]
+            }), jsx("div", {
+              className: "text-xs font-semibold text-gray-500 mt-4 mb-2",
+              children: "2016"
+            }), jsxs("div", {
+              className: "p-3 hover:bg-gray-50 rounded cursor-pointer",
+              children: [jsx("div", {
+                className: "text-sm font-medium text-gray-900",
+                children: "Hannah O'Brien"
+              }), jsx("div", {
+                className: "text-xs text-gray-600 mt-1",
+                children: "Re: Comparison page: Zoho Mai..."
+              }), jsx("div", {
+                className: "text-xs text-gray-400 mt-1",
+                children: "JUL 29, 2016"
+              })]
+            })]
+          })]
+        }), jsxs("div", {
+          className: "w-96",
+          children: [jsxs("div", {
+            className: "flex items-center justify-between mb-4",
+            children: [jsxs("div", {
+              className: "flex items-center gap-2",
+              children: [jsx("button", {
+                className: "text-xs text-gray-600 hover:text-gray-900",
+                children: "Reminder"
+              }), jsx("button", {
+                className: "text-xs text-gray-600 hover:text-gray-900",
+                children: "Add Task"
+              }), jsx("button", {
+                className: "text-xs text-gray-600 hover:text-gray-900",
+                children: "Permalink"
+              }), jsx("button", {
+                className: "text-xs text-gray-600 hover:text-gray-900",
+                children: "Snooze"
+              })]
+            }), jsx(X, {
+              className: "w-4 h-4 text-gray-400 cursor-pointer"
+            })]
+          }), jsxs("div", {
+            className: "border border-gray-200 rounded-lg p-4",
+            children: [jsxs("div", {
+              className: "flex items-start gap-3 mb-4",
+              children: [jsx("div", {
+                className: "w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm font-medium",
+                children: "EB"
+              }), jsxs("div", {
+                className: "flex-1",
+                children: [jsx("div", {
+                  className: "text-sm font-semibold text-gray-900",
+                  children: "Elena Brown"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "JUN 19, 2020 4:00 PM"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "Zylker Content Experts"
+                })]
+              })]
+            }), jsx("div", {
+              className: "text-sm font-semibold text-gray-900 mb-3",
+              children: "SketcheZ - Product Screenshots"
+            }), jsxs("div", {
+              className: "text-sm text-gray-700 leading-relaxed mb-4",
+              children: ["Hello Ankit Sharma,", jsx("br", {}), jsx("br", {}), "As mentioned in the streams post, I managed to snag few product screenshots. Find the below attachments for reference.", jsx("br", {}), jsx("br", {}), "Elena Brown,", jsx("br", {}), "Event Marketer", jsx("br", {}), "Zylker Games LLC", jsx("br", {}), "New York, NY 10001, USA", jsx("br", {}), "Contact no: 9660-6754", jsx("br", {}), "www.zylker.com"]
+            }), jsxs("div", {
+              className: "border-t border-gray-200 pt-4",
+              children: [jsx("div", {
+                className: "text-sm font-medium text-gray-900 mb-2",
+                children: "3 Attachments"
+              }), jsxs("div", {
+                className: "flex items-center gap-2 text-xs text-blue-600 mb-3",
+                children: [jsx("span", {
+                  className: "cursor-pointer hover:underline",
+                  children: "Download as Zip"
+                }), jsx("span", {
+                  children: "|"
+                }), jsx("span", {
+                  className: "cursor-pointer hover:underline",
+                  children: "Add to >"
+                })]
+              }), jsxs("div", {
+                className: "grid grid-cols-2 gap-2",
+                children: [jsxs("div", {
+                  className: "border border-gray-200 rounded p-2",
+                  children: [jsx("div", {
+                    className: "text-xs font-medium text-gray-900",
+                    children: "SketcheZ - Brush sets.jpg"
+                  }), jsx("div", {
+                    className: "text-xs text-gray-500",
+                    children: "1.7 MB"
+                  })]
+                }), jsxs("div", {
+                  className: "border border-gray-200 rounded p-2",
+                  children: [jsx("div", {
+                    className: "text-xs font-medium text-gray-900",
+                    children: "SketcheZ - Desktop.jpg"
+                  }), jsx("div", {
+                    className: "text-xs text-gray-500",
+                    children: "2.0 MB"
+                  })]
+                })]
+              })]
+            })]
+          })]
+        })]
+      })
+    },
+    chats: {
+      title: 'Chats',
+      icon: Users,
+      content: jsxs("div", {
+        className: "bg-white border border-gray-200 rounded-lg p-6 max-w-5xl mx-auto",
+        children: [jsxs("div", {
+          className: "mb-4",
+          children: [jsx("h2", {
+            className: "text-2xl font-semibold text-gray-900 mb-2",
+            children: "Chats"
+          }), jsx("p", {
+            className: "text-sm text-gray-600",
+            children: "Start a 1:1 chat by simply typing @name and message. Eg: @Scott Hola"
+          })]
+        }), jsxs("div", {
+          className: "grid grid-cols-3 gap-6",
+          children: [jsxs("div", {
+            children: [jsx("h3", {
+              className: "text-sm font-semibold text-gray-900 mb-3",
+              children: "Chats"
+            }), jsxs("div", {
+              className: "space-y-2",
+              children: [jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Nikitha"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "You: Hello Sally"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "#Q2 Sales Pitch"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "You: Can someone give access to deck?"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "#Design Collabs"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "You: Please Sharing the blog banner image"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Arjun"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "You: Are you available for quick call?"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Charles"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "You: Meeting notes shared"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Megha"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "You: Design review completed"
+                })]
+              })]
+            })]
+          }), jsxs("div", {
+            children: [jsx("h3", {
+              className: "text-sm font-semibold text-gray-900 mb-3",
+              children: "Contacts"
+            }), jsxs("div", {
+              className: "space-y-2",
+              children: [jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Nikitha"
+                }), jsx("div", {
+                  className: "text-xs text-green-600",
+                  children: "Available"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Charles"
+                }), jsx("div", {
+                  className: "text-xs text-green-600",
+                  children: "Available for collaboration"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Esther Howard"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "Offline"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Cheyenne Press"
+                }), jsx("div", {
+                  className: "text-xs text-orange-600",
+                  children: "In a Meeting"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Carla"
+                }), jsx("div", {
+                  className: "text-xs text-yellow-600",
+                  children: "Idle"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Anifa"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "On Leave"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Mukunth"
+                }), jsx("div", {
+                  className: "text-xs text-green-600",
+                  children: "Available"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "Nadya"
+                }), jsx("div", {
+                  className: "text-xs text-green-600",
+                  children: "Available"
+                })]
+              })]
+            })]
+          }), jsxs("div", {
+            children: [jsx("h3", {
+              className: "text-sm font-semibold text-gray-900 mb-3",
+              children: "Channels"
+            }), jsxs("div", {
+              className: "space-y-2",
+              children: [jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "#Q2 Sales Pitch"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "Sales team discussions"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "#Design Collabs"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "Design team collaboration"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "#Subject Matter Experts"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "Expert discussions"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "#Marketing Analysts"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "Marketing insights"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "#Zylker Directors"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "Executive updates"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "#Quarterly Roadmap"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "Planning discussions"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "#Customer Engagement"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "Customer feedback"
+                })]
+              }), jsxs("div", {
+                className: "p-2 hover:bg-gray-50 rounded cursor-pointer",
+                children: [jsx("div", {
+                  className: "text-sm font-medium text-gray-900",
+                  children: "#Enterprise Support"
+                }), jsx("div", {
+                  className: "text-xs text-gray-500",
+                  children: "Support team"
+                })]
+              })]
+            })]
+          })]
+        })]
+      })
+    },
+    search: {
+      title: 'Search',
+      icon: Search,
+      content: jsx("div", {
+        className: "space-y-6",
+        children: jsxs("div", {
+          className: "bg-white border border-gray-200 rounded-lg p-8",
+          children: [jsxs("div", {
+            className: "relative mb-6",
+            children: [jsx(Search, {
+              className: "absolute left-4 top-1/2 transform -translate-y-1/2 w-6 h-6 text-gray-400"
+            }), jsx("input", {
+              type: "text",
+              placeholder: "Q Search across all apps...",
+              className: "w-full pl-12 pr-4 py-4 text-lg border-2 border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E33A2C]/20 focus:border-[#E33A2C]"
+            })]
+          }), jsxs("div", {
+            className: "space-y-4",
+            children: [jsxs("div", {
+              children: [jsx("h3", {
+                className: "text-sm font-semibold text-gray-700 mb-2",
+                children: "Quick Access"
+              }), jsxs("div", {
+                className: "flex flex-wrap gap-2",
+                children: [jsx("span", {
+                  className: "px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200",
+                  children: "Files"
+                }), jsx("span", {
+                  className: "px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200",
+                  children: "Contacts"
+                }), jsx("span", {
+                  className: "px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200",
+                  children: "Messages"
+                }), jsx("span", {
+                  className: "px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200",
+                  children: "Tasks"
+                }), jsx("span", {
+                  className: "px-3 py-1.5 bg-gray-100 text-gray-700 rounded-full text-sm cursor-pointer hover:bg-gray-200",
+                  children: "Notes"
+                })]
+              })]
+            }), jsxs("div", {
+              className: "border-t border-gray-200 pt-4",
+              children: [jsx("p", {
+                className: "text-sm text-gray-600",
+                children: "Search for files, contacts, messages, tasks, and more across Clockbook."
+              }), jsxs("p", {
+                className: "text-xs text-gray-500 mt-2",
+                children: ["Use keyboard shortcut:", ' ', jsx("kbd", {
+                  className: "px-2 py-1 bg-gray-100 rounded text-xs",
+                  children: "/"
+                }), " to open search"]
+              })]
+            })]
+          })]
+        })
+      })
+    },
+    notebook: {
+      title: 'Notebook',
+      icon: Notebook,
+      content: jsxs("div", {
+        className: "space-y-6",
+        children: [jsx("div", {
+          className: "flex items-center justify-between mb-4",
+          children: jsxs("div", {
+            className: "relative flex-1 max-w-md",
+            children: [jsx(Search, {
+              className: "absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"
+            }), jsx("input", {
+              type: "text",
+              placeholder: "Search notes...",
+              className: "w-full pl-10 pr-10 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#E33A2C]/20 focus:border-[#E33A2C]"
+            }), jsx(Plus, {
+              className: "absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 cursor-pointer hover:text-gray-600"
+            })]
+          })
+        }), jsxs("div", {
+          className: "grid grid-cols-2 gap-4",
+          children: [jsxs("div", {
+            className: "bg-orange-50 border border-orange-200 rounded-lg p-5 relative",
+            children: [jsx(MoreHorizontal, {
+              className: "absolute top-3 right-3 w-4 h-4 text-gray-400 cursor-pointer"
+            }), jsx("h4", {
+              className: "text-base font-semibold text-gray-900 mb-2",
+              children: "Weekly goals"
+            }), jsx("p", {
+              className: "text-xs text-gray-600",
+              children: "Plan your week ahead with clear objectives and milestones"
+            })]
+          }), jsxs("div", {
+            className: "bg-blue-50 border border-blue-200 rounded-lg p-5 relative",
+            children: [jsx(MoreHorizontal, {
+              className: "absolute top-3 right-3 w-4 h-4 text-gray-400 cursor-pointer"
+            }), jsx("h4", {
+              className: "text-base font-semibold text-gray-900 mb-2",
+              children: "New Project Ideas"
+            }), jsx("p", {
+              className: "text-xs text-gray-600",
+              children: "Brainstorming session notes and creative concepts"
+            })]
+          }), jsxs("div", {
+            className: "bg-purple-50 border border-purple-200 rounded-lg p-5 relative",
+            children: [jsx(MoreHorizontal, {
+              className: "absolute top-3 right-3 w-4 h-4 text-gray-400 cursor-pointer"
+            }), jsx("h4", {
+              className: "text-base font-semibold text-gray-900 mb-2",
+              children: "Follow-ups"
+            }), jsx("p", {
+              className: "text-xs text-gray-600",
+              children: "Items to follow up on and action items"
+            })]
+          }), jsxs("div", {
+            className: "bg-green-50 border border-green-200 rounded-lg p-5 relative",
+            children: [jsx(MoreHorizontal, {
+              className: "absolute top-3 right-3 w-4 h-4 text-gray-400 cursor-pointer"
+            }), jsx("h4", {
+              className: "text-base font-semibold text-gray-900 mb-2",
+              children: "Checklist"
+            }), jsx("p", {
+              className: "text-xs text-gray-600",
+              children: "Daily tasks and reminders for productivity"
+            })]
+          })]
+        })]
+      })
+    }
+  };
+  const config = pageConfig[page] || pageConfig.home;
+  const Icon = config.icon;
+  return jsxs("div", {
+    className: "space-y-4",
+    children: [jsxs("div", {
+      className: "flex items-center justify-between mb-6",
+      children: [jsxs("div", {
+        className: "flex items-center gap-3",
+        children: [jsx(Icon, {
+          className: "w-5 h-5 text-[#E33A2C]"
+        }), jsx("h2", {
+          className: "text-xl font-semibold text-gray-900",
+          children: config.title
+        })]
+      }), jsx("button", {
+        onClick: onClose,
+        className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors",
+        children: "Back to Dashboard"
+      })]
+    }), config.content]
+  });
+}export{BuildingSoftwareScene};//# sourceMappingURL=BuildingSoftwareScene.js.map