From f71218cc77bf5cbd4f9e3d5736cc7ca31c90c44a Mon Sep 17 00:00:00 2001
From: poduck <poduck@smoothschedule.com>
Date: Tue, 23 Dec 2025 22:35:24 -0500
Subject: [PATCH] Reorganize sidebar navigation with Analytics category
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add new Analytics section at top with Dashboard and Payments
- Reorder Manage section: Scheduler, Resources, Staff, Customers,
  Media Gallery, Contracts, Time Blocks
- Remove Money section (Payments moved to Analytics)
- Keep staff-only items (My Schedule, My Availability) in separate section

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/components/Sidebar.tsx | 115 ++++++++++++++--------------
 frontend/src/i18n/locales/en.json   |   2 +-
 2 files changed, 60 insertions(+), 57 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index a42a8b5c..e946cdee 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -12,11 +12,11 @@ import {
   ClipboardList,
   Ticket,
   HelpCircle,
-  Clock,
   Plug,
   FileSignature,
   CalendarOff,
   Image,
+  BarChart3,
 } from 'lucide-react';
 import { Business, User } from '../types';
 import { useLogout } from '../hooks/useAuth';
@@ -119,8 +119,8 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
 
       {/* Navigation */}
       <nav className="flex-1 px-3 space-y-6 overflow-y-auto pb-4">
-        {/* Core Features - Always visible */}
-        <SidebarSection isCollapsed={isCollapsed}>
+        {/* Analytics Section - Dashboard and Payments */}
+        <SidebarSection title={t('nav.sections.analytics', 'Analytics')} isCollapsed={isCollapsed}>
           <SidebarItem
             to="/dashboard"
             icon={LayoutDashboard}
@@ -128,55 +128,55 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
             isCollapsed={isCollapsed}
             exact
           />
-          {hasPermission('can_access_scheduler') && (
+          {hasPermission('can_access_payments') && (
             <SidebarItem
-              to="/dashboard/scheduler"
-              icon={CalendarDays}
-              label={t('nav.scheduler')}
-              isCollapsed={isCollapsed}
-            />
-          )}
-          {(isStaff && hasPermission('can_access_my_schedule')) && (
-            <SidebarItem
-              to="/dashboard/my-schedule"
-              icon={CalendarDays}
-              label={t('nav.mySchedule', 'My Schedule')}
-              isCollapsed={isCollapsed}
-            />
-          )}
-          {(role === 'staff' || role === 'resource') && hasPermission('can_access_my_availability') && (
-            <SidebarItem
-              to="/dashboard/my-availability"
-              icon={CalendarOff}
-              label={t('nav.myAvailability', 'My Availability')}
+              to="/dashboard/payments"
+              icon={CreditCard}
+              label={t('nav.payments')}
               isCollapsed={isCollapsed}
+              disabled={!business.paymentsEnabled && role !== 'owner'}
             />
           )}
         </SidebarSection>
 
-        {/* Manage Section - Show if user has any manage-related permission */}
-        {(canViewManagementPages ||
-          hasPermission('can_access_gallery') ||
-          hasPermission('can_access_customers') ||
-          hasPermission('can_access_resources') ||
-          hasPermission('can_access_staff') ||
-          hasPermission('can_access_contracts') ||
-          hasPermission('can_access_time_blocks')
-        ) && (
-          <SidebarSection title={t('nav.sections.manage', 'Manage')} isCollapsed={isCollapsed}>
-            {hasPermission('can_access_gallery') && (
+        {/* Staff-only: My Schedule and My Availability */}
+        {((isStaff && hasPermission('can_access_my_schedule')) ||
+          ((role === 'staff' || role === 'resource') && hasPermission('can_access_my_availability'))) && (
+          <SidebarSection isCollapsed={isCollapsed}>
+            {(isStaff && hasPermission('can_access_my_schedule')) && (
               <SidebarItem
-                to="/dashboard/gallery"
-                icon={Image}
-                label={t('nav.gallery', 'Media Gallery')}
+                to="/dashboard/my-schedule"
+                icon={CalendarDays}
+                label={t('nav.mySchedule', 'My Schedule')}
                 isCollapsed={isCollapsed}
               />
             )}
-            {hasPermission('can_access_customers') && (
+            {(role === 'staff' || role === 'resource') && hasPermission('can_access_my_availability') && (
               <SidebarItem
-                to="/dashboard/customers"
-                icon={Users}
-                label={t('nav.customers')}
+                to="/dashboard/my-availability"
+                icon={CalendarOff}
+                label={t('nav.myAvailability', 'My Availability')}
+                isCollapsed={isCollapsed}
+              />
+            )}
+          </SidebarSection>
+        )}
+
+        {/* Manage Section - Scheduler, Resources, Staff, Customers, Contracts, Time Blocks */}
+        {(hasPermission('can_access_scheduler') ||
+          hasPermission('can_access_resources') ||
+          hasPermission('can_access_staff') ||
+          hasPermission('can_access_customers') ||
+          hasPermission('can_access_contracts') ||
+          hasPermission('can_access_time_blocks') ||
+          hasPermission('can_access_gallery')
+        ) && (
+          <SidebarSection title={t('nav.sections.manage', 'Manage')} isCollapsed={isCollapsed}>
+            {hasPermission('can_access_scheduler') && (
+              <SidebarItem
+                to="/dashboard/scheduler"
+                icon={CalendarDays}
+                label={t('nav.scheduler')}
                 isCollapsed={isCollapsed}
               />
             )}
@@ -196,6 +196,22 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
                 isCollapsed={isCollapsed}
               />
             )}
+            {hasPermission('can_access_customers') && (
+              <SidebarItem
+                to="/dashboard/customers"
+                icon={Users}
+                label={t('nav.customers')}
+                isCollapsed={isCollapsed}
+              />
+            )}
+            {hasPermission('can_access_gallery') && (
+              <SidebarItem
+                to="/dashboard/gallery"
+                icon={Image}
+                label={t('nav.gallery', 'Media Gallery')}
+                isCollapsed={isCollapsed}
+              />
+            )}
             {hasPermission('can_access_contracts') && canUse('contracts') && (
               <SidebarItem
                 to="/dashboard/contracts"
@@ -216,8 +232,8 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
           </SidebarSection>
         )}
 
-        {/* Communicate Section - Tickets + Messages */}
-        {(canViewTickets || canSendMessages) && (
+        {/* Communicate Section - Messages + Tickets */}
+        {(canSendMessages || canViewTickets) && (
           <SidebarSection title={t('nav.sections.communicate', 'Communicate')} isCollapsed={isCollapsed}>
             {canSendMessages && (
               <SidebarItem
@@ -238,19 +254,6 @@ const Sidebar: React.FC<SidebarProps> = ({ business, user, isCollapsed, toggleCo
           </SidebarSection>
         )}
 
-        {/* Money Section - Payments */}
-        {hasPermission('can_access_payments') && (
-          <SidebarSection title={t('nav.sections.money', 'Money')} isCollapsed={isCollapsed}>
-            <SidebarItem
-              to="/dashboard/payments"
-              icon={CreditCard}
-              label={t('nav.payments')}
-              isCollapsed={isCollapsed}
-              disabled={!business.paymentsEnabled && role !== 'owner'}
-            />
-          </SidebarSection>
-        )}
-
         {/* Extend Section - Automations */}
         {hasPermission('can_access_automations') && (
           <SidebarSection title={t('nav.sections.extend', 'Extend')} isCollapsed={isCollapsed}>
diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json
index 33840b8a..2b960a9f 100644
--- a/frontend/src/i18n/locales/en.json
+++ b/frontend/src/i18n/locales/en.json
@@ -157,9 +157,9 @@
     "timeBlocks": "Time Blocks",
     "helpDocs": "Help & Docs",
     "sections": {
+      "analytics": "Analytics",
       "manage": "Manage",
       "communicate": "Communicate",
-      "money": "Money",
       "extend": "Extend"
     }
   },