feat: Email templates, bulk delete, communication credits, plan features
- Add email template presets for Browse Templates tab (12 templates) - Add bulk selection and deletion for My Templates tab - Add communication credits system with Twilio integration - Add payment views for credit purchases and auto-reload - Add SMS reminder and masked calling plan permissions - Fix appointment status mapping (frontend/backend mismatch) - Clear masquerade stack on login/logout for session hygiene - Update platform settings with credit configuration - Add new migrations for Twilio and Stripe payment fields 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
201
frontend/NAVIGATION_REDESIGN_PLAN.md
Normal file
201
frontend/NAVIGATION_REDESIGN_PLAN.md
Normal file
@@ -0,0 +1,201 @@
|
||||
# Navigation Redesign Plan
|
||||
|
||||
## Overview
|
||||
|
||||
Redesigning both the main sidebar and settings page navigation to be more organized and scalable.
|
||||
|
||||
## Current Issues
|
||||
|
||||
### Main Sidebar
|
||||
- 15+ items in a flat list with no grouping
|
||||
- Dropdowns (Plugins, Help) hide important items
|
||||
- No visual hierarchy or section headers
|
||||
- Settings isolated at bottom
|
||||
|
||||
### Settings Page
|
||||
- 7 horizontal tabs getting crowded
|
||||
- Not scalable for new settings
|
||||
- No logical grouping
|
||||
|
||||
---
|
||||
|
||||
## Phase 1: Refactor Main Sidebar (COMPLETED)
|
||||
|
||||
### New Structure with Grouped Sections
|
||||
|
||||
```
|
||||
[Logo] Business Name
|
||||
subdomain.smoothschedule
|
||||
|
||||
○ Dashboard
|
||||
○ Scheduler
|
||||
○ Tasks
|
||||
|
||||
MANAGE
|
||||
○ Customers
|
||||
○ Services
|
||||
○ Resources
|
||||
○ Staff
|
||||
|
||||
COMMUNICATE
|
||||
○ Messages
|
||||
○ Tickets
|
||||
|
||||
MONEY
|
||||
○ Payments
|
||||
|
||||
EXTEND
|
||||
○ Plugins
|
||||
○ Email Templates
|
||||
|
||||
──────────
|
||||
○ Settings
|
||||
○ Help & Docs
|
||||
──────────
|
||||
[User] Sign Out
|
||||
```
|
||||
|
||||
### Files Created/Modified
|
||||
- `src/components/navigation/SidebarComponents.tsx` - Shared components (DONE)
|
||||
- `src/components/Sidebar.tsx` - Refactor to use new components (TODO)
|
||||
|
||||
---
|
||||
|
||||
## Phase 2: Settings Sidebar Layout
|
||||
|
||||
### New Settings Structure
|
||||
|
||||
Settings becomes a sub-application with its own sidebar:
|
||||
|
||||
```
|
||||
/settings
|
||||
├── /general - Business name, timezone, etc.
|
||||
├── /branding - Logo, colors, display mode
|
||||
├── /resource-types - Resource type management
|
||||
├── /domains - Custom domains
|
||||
├── /api-tokens - API access tokens
|
||||
├── /authentication - OAuth, social login
|
||||
├── /email - Email addresses for tickets
|
||||
├── /communication - SMS & calling credits
|
||||
├── /billing - Subscription, credits, invoices (future)
|
||||
```
|
||||
|
||||
### Settings Sidebar Layout
|
||||
|
||||
```
|
||||
┌──────────────────┬──────────────────────────────────────────┐
|
||||
│ ← Back to App │ │
|
||||
│ │ [Page Title] │
|
||||
│ BUSINESS │ [Page Description] │
|
||||
│ ○ General │ │
|
||||
│ ○ Branding │ [Content Area] │
|
||||
│ ○ Resource Types │ │
|
||||
│ │ │
|
||||
│ INTEGRATIONS │ │
|
||||
│ ○ Domains │ │
|
||||
│ ○ API & Webhooks │ │
|
||||
│ │ │
|
||||
│ ACCESS │ │
|
||||
│ ○ Authentication │ │
|
||||
│ │ │
|
||||
│ COMMUNICATION │ │
|
||||
│ ○ Email Setup │ │
|
||||
│ ○ SMS & Calling │ │
|
||||
│ │ │
|
||||
│ BILLING │ │
|
||||
│ ○ Credits │ │
|
||||
│ │ │
|
||||
└──────────────────┴──────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### Files to Create
|
||||
1. `src/components/navigation/SettingsSidebar.tsx` - Settings-specific sidebar
|
||||
2. `src/layouts/SettingsLayout.tsx` - Layout wrapper with sidebar + content
|
||||
3. Split `src/pages/Settings.tsx` into:
|
||||
- `src/pages/settings/GeneralSettings.tsx`
|
||||
- `src/pages/settings/BrandingSettings.tsx`
|
||||
- `src/pages/settings/ResourceTypesSettings.tsx`
|
||||
- `src/pages/settings/DomainsSettings.tsx`
|
||||
- `src/pages/settings/ApiTokensSettings.tsx`
|
||||
- `src/pages/settings/AuthenticationSettings.tsx`
|
||||
- `src/pages/settings/EmailSettings.tsx`
|
||||
- `src/pages/settings/CommunicationSettings.tsx`
|
||||
|
||||
### Route Updates (in App.tsx or routes file)
|
||||
|
||||
```tsx
|
||||
<Route path="/settings" element={<SettingsLayout />}>
|
||||
<Route index element={<Navigate to="/settings/general" replace />} />
|
||||
<Route path="general" element={<GeneralSettings />} />
|
||||
<Route path="branding" element={<BrandingSettings />} />
|
||||
<Route path="resource-types" element={<ResourceTypesSettings />} />
|
||||
<Route path="domains" element={<DomainsSettings />} />
|
||||
<Route path="api-tokens" element={<ApiTokensSettings />} />
|
||||
<Route path="authentication" element={<AuthenticationSettings />} />
|
||||
<Route path="email" element={<EmailSettings />} />
|
||||
<Route path="communication" element={<CommunicationSettings />} />
|
||||
</Route>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Implementation Order
|
||||
|
||||
1. ✅ Create shared sidebar components (`SidebarComponents.tsx`)
|
||||
2. ✅ Refactor main `Sidebar.tsx` to use grouped sections
|
||||
3. ✅ Create `SettingsLayout.tsx` (includes sidebar)
|
||||
4. ⏳ Split Settings.tsx into sub-pages
|
||||
5. ⬜ Update routes in App.tsx
|
||||
6. ⬜ Test all navigation flows
|
||||
|
||||
## Files Created So Far
|
||||
|
||||
- `src/components/navigation/SidebarComponents.tsx` - Shared nav components
|
||||
- `src/components/Sidebar.tsx` - Refactored with grouped sections
|
||||
- `src/layouts/SettingsLayout.tsx` - Settings page wrapper with sidebar
|
||||
- `src/pages/settings/` - Directory for settings sub-pages (in progress)
|
||||
|
||||
---
|
||||
|
||||
## Component APIs
|
||||
|
||||
### SidebarSection
|
||||
```tsx
|
||||
<SidebarSection title="MANAGE" isCollapsed={isCollapsed}>
|
||||
<SidebarItem to="/customers" icon={Users} label="Customers" />
|
||||
</SidebarSection>
|
||||
```
|
||||
|
||||
### SidebarItem
|
||||
```tsx
|
||||
<SidebarItem
|
||||
to="/settings"
|
||||
icon={Settings}
|
||||
label="Settings"
|
||||
isCollapsed={isCollapsed}
|
||||
exact={true}
|
||||
badge="3" // optional badge
|
||||
/>
|
||||
```
|
||||
|
||||
### SettingsSidebarSection / SettingsSidebarItem
|
||||
```tsx
|
||||
<SettingsSidebarSection title="BUSINESS">
|
||||
<SettingsSidebarItem
|
||||
to="/settings/general"
|
||||
icon={Building2}
|
||||
label="General"
|
||||
description="Business name, timezone"
|
||||
/>
|
||||
</SettingsSidebarSection>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Notes
|
||||
|
||||
- Main sidebar uses white/transparent colors (gradient background)
|
||||
- Settings sidebar uses gray/brand colors (white background)
|
||||
- Both support collapsed state on main sidebar
|
||||
- Settings sidebar is always expanded (no collapse)
|
||||
- Mobile: Main sidebar becomes drawer, Settings sidebar becomes sheet/drawer
|
||||
Reference in New Issue
Block a user