update
This commit is contained in:
bwnyasse
@@ -0,0 +1,67 @@
|
||||
|
||||
graph TB
|
||||
Title["<b>KROW - Cloud Architecture</b><br/>Production Solution"]
|
||||
|
||||
subgraph Prototype[" "]
|
||||
Proto["🔧 Current KROW Prototype<br/>(Demo Only)"]
|
||||
end
|
||||
|
||||
Title --> Prototype
|
||||
Title --> Production
|
||||
|
||||
subgraph Production["🏢 KROW - PRODUCTION ARCHITECTURE"]
|
||||
subgraph GCP["☁️ Google Cloud Platform - US Regions"]
|
||||
|
||||
subgraph Auth["🔐 Authentication"]
|
||||
Firebase["Firebase Auth<br/>• MFA<br/>• OAuth 2.0"]
|
||||
end
|
||||
|
||||
subgraph Backend["⚙️ Backend"]
|
||||
Functions["Cloud Functions<br/>• Serverless<br/>• Auto-scaling"]
|
||||
API["API Gateway<br/>• Secure APIs<br/>• Rate limiting"]
|
||||
end
|
||||
|
||||
subgraph Data["💾 Data Storage"]
|
||||
Firestore["Firestore/Cloud SQL<br/>• Encrypted at rest<br/>• Auto backup"]
|
||||
Storage["Cloud Storage<br/>• Encrypted<br/>• Access control"]
|
||||
end
|
||||
|
||||
subgraph Security["🛡️ Security"]
|
||||
IAM["Cloud IAM<br/>• Access control<br/>• Least privilege"]
|
||||
Logs["Logging & Monitoring<br/>• Audit trails<br/>• Real-time alerts"]
|
||||
end
|
||||
end
|
||||
|
||||
subgraph Compliance["✅ COMPLIANCE"]
|
||||
GDPR["📋 GDPR Ready<br/>• US data hosting<br/>• User rights<br/>• Data portability"]
|
||||
SOC2["🏆 SOC 2 Ready<br/>• Google certified<br/>• Security controls<br/>• Full audit trails"]
|
||||
end
|
||||
end
|
||||
|
||||
Users["👥 End Users"]
|
||||
|
||||
Proto -.->|Migration vers| Production
|
||||
Users --> Auth
|
||||
Auth --> API
|
||||
API --> Functions
|
||||
Functions --> Firestore
|
||||
Functions --> Storage
|
||||
IAM --> Auth
|
||||
IAM --> Backend
|
||||
IAM --> Data
|
||||
Logs --> Security
|
||||
GCP --> GDPR
|
||||
GCP --> SOC2
|
||||
|
||||
style Prototype fill:#FFF3CD,stroke:#856404,stroke-width:2px,stroke-dasharray: 5 5
|
||||
style Proto fill:#FFF3CD,stroke:#856404
|
||||
style Title fill:#1976D2,stroke:#0D47A1,stroke-width:3px,color:#FFFFFF
|
||||
style Production fill:#D4EDDA,stroke:#155724,stroke-width:3px
|
||||
style GCP fill:#E3F2FD,stroke:#1976D2,stroke-width:2px
|
||||
style Auth fill:#E8F5E9,stroke:#2E7D32
|
||||
style Backend fill:#E8F5E9,stroke:#2E7D32
|
||||
style Data fill:#E8F5E9,stroke:#2E7D32
|
||||
style Security fill:#FFE0B2,stroke:#E65100
|
||||
style Compliance fill:#F3E5F5,stroke:#6A1B9A,stroke-width:2px
|
||||
style GDPR fill:#E1BEE7,stroke:#6A1B9A
|
||||
style SOC2 fill:#E1BEE7,stroke:#6A1B9A
|
||||
@@ -0,0 +1,70 @@
|
||||
sequenceDiagram
|
||||
participant Client as 🏢 Client App
|
||||
participant Backend as 🌐 Backend API
|
||||
participant Admin as ⚙️ KROW Admin
|
||||
participant Staff as 👥 Staff App
|
||||
|
||||
%% Event Creation
|
||||
Note over Client,Backend: 1. Event & Shift Creation
|
||||
Client->>Backend: Create Event with Shifts & Positions
|
||||
Backend-->>Client: Event Created (Draft)
|
||||
Client->>Backend: Publish Event
|
||||
Backend-->>Client: Event Published
|
||||
|
||||
%% Staff Assignment
|
||||
Note over Admin,Backend: 2. Staff Assignment
|
||||
Admin->>Backend: View Available Events
|
||||
Backend-->>Admin: Event List
|
||||
Admin->>Backend: Assign Staff to Shift
|
||||
Backend-->>Admin: Assignment Confirmed
|
||||
Backend->>Staff: Notification: New Shift Assigned
|
||||
|
||||
%% Shift Acceptance
|
||||
Note over Staff,Backend: 3. Shift Acceptance
|
||||
Staff->>Backend: View Shift Details
|
||||
Backend-->>Staff: Shift Information
|
||||
Staff->>Backend: Accept Shift
|
||||
Backend-->>Staff: Shift Confirmed
|
||||
Backend->>Client: Notification: Staff Confirmed
|
||||
|
||||
%% Clock In
|
||||
Note over Client,Staff: 4. Clock In - Day of Event
|
||||
Client->>Client: Generate QR Code for Event
|
||||
Staff->>Staff: Scan QR Code
|
||||
Staff->>Backend: Clock In Request (via QR)
|
||||
Backend-->>Staff: Clock In Confirmed
|
||||
Backend->>Client: Notification: Staff Clocked In
|
||||
Client->>Backend: (Alternative) Manual Clock In
|
||||
Backend-->>Client: Manual Clock In Confirmed
|
||||
|
||||
%% Shift Active
|
||||
Note over Staff: 5. Shift In Progress
|
||||
Staff->>Staff: View Real-time Timer
|
||||
|
||||
%% Clock Out
|
||||
Note over Client,Staff: 6. Clock Out - End of Shift
|
||||
Staff->>Staff: Scan QR Code
|
||||
Staff->>Backend: Clock Out Request (via QR)
|
||||
Backend-->>Staff: Clock Out Confirmed
|
||||
Backend-->>Staff: Shift Status: Completed
|
||||
Backend->>Client: Notification: Staff Clocked Out
|
||||
|
||||
%% Rating & Invoicing
|
||||
Note over Client,Backend: 7. Post-Shift Activities
|
||||
Client->>Backend: Rate Staff Performance
|
||||
Backend-->>Client: Rating Recorded
|
||||
Backend->>Backend: Generate Invoice
|
||||
Backend->>Client: Invoice Created
|
||||
Client->>Backend: Review & Approve Invoice
|
||||
Backend-->>Client: Invoice Approved
|
||||
|
||||
%% Payment
|
||||
Note over Staff,Backend: 8. Staff Payment
|
||||
Backend->>Staff: Payment Processed
|
||||
Staff->>Backend: View Earnings & Payment History
|
||||
Backend-->>Staff: Payment Details
|
||||
|
||||
alt Payment Dispute
|
||||
Staff->>Backend: Contest Payment Amount
|
||||
Backend-->>Staff: Dispute Opened
|
||||
end
|
||||
@@ -0,0 +1,61 @@
|
||||
graph TB
|
||||
subgraph "Actors"
|
||||
Staff[👥 Staff/Employee]
|
||||
Client[🏢 Client/Business]
|
||||
Admin[⚙️ KROW Admin]
|
||||
end
|
||||
|
||||
subgraph "KROW Staff App"
|
||||
SA_Auth[Authentication & Onboarding]
|
||||
SA_Shifts[Shift Management]
|
||||
SA_Earnings[Earnings & Payments]
|
||||
SA_Profile[Profile Management]
|
||||
end
|
||||
|
||||
subgraph "KROW Client App"
|
||||
CA_Events[Event Creation]
|
||||
CA_Staff[Staff Management]
|
||||
CA_Time[Time Tracking - QR Code]
|
||||
CA_Invoice[Invoicing]
|
||||
end
|
||||
|
||||
subgraph "Backend System"
|
||||
API[Backend API]
|
||||
DB[(Database)]
|
||||
end
|
||||
|
||||
%% Staff interactions
|
||||
Staff -->|Registers & Manages Profile| SA_Auth
|
||||
Staff -->|Views & Accepts Shifts| SA_Shifts
|
||||
Staff -->|Scans QR Code - Clock In/Out| SA_Shifts
|
||||
Staff -->|Tracks Earnings| SA_Earnings
|
||||
Staff -->|Updates Skills & Documents| SA_Profile
|
||||
|
||||
%% Client interactions
|
||||
Client -->|Creates Events & Shifts| CA_Events
|
||||
Client -->|Views Assigned Staff| CA_Staff
|
||||
Client -->|Generates QR Code| CA_Time
|
||||
Client -->|Manual Clock In/Out| CA_Time
|
||||
Client -->|Rates Staff| CA_Staff
|
||||
Client -->|Reviews & Approves Invoices| CA_Invoice
|
||||
|
||||
%% Admin interactions
|
||||
Admin -->|Assigns Staff to Shifts| API
|
||||
Admin -->|Validates Staff Profiles| API
|
||||
|
||||
%% App to Backend connections
|
||||
SA_Auth -.->|Profile Data| API
|
||||
SA_Shifts -.->|Shift Status Updates| API
|
||||
SA_Earnings -.->|Payment Data| API
|
||||
SA_Profile -.->|User Data| API
|
||||
|
||||
CA_Events -.->|Event & Shift Data| API
|
||||
CA_Staff -.->|Staff Ratings| API
|
||||
CA_Time -.->|Time Records| API
|
||||
CA_Invoice -.->|Invoice Data| API
|
||||
|
||||
API <-->|Data Storage & Retrieval| DB
|
||||
|
||||
style Staff fill:#e1f5ff
|
||||
style Client fill:#fff4e1
|
||||
style Admin fill:#f0e1ff
|
||||
@@ -0,0 +1,40 @@
|
||||
graph LR
|
||||
START[💼 Shift<br/>Completed<br/>& Rated]
|
||||
|
||||
START --> CALC[📊 INTERNAL<br/><br/>Calculate Invoice<br/>• Hours worked<br/>• Rates × Hours<br/>• Overtime calc<br/>• Platform fees<br/>• Tax amounts]
|
||||
|
||||
CALC --> GENERATE[📄 INTERNAL<br/><br/>Generate Invoice<br/>• Create PDF<br/>• Invoice number<br/>• Line items<br/>• Due date]
|
||||
|
||||
GENERATE --> SAVE[💾 INTERNAL<br/><br/>Save to Database<br/>• Store invoice<br/>• Status: pending<br/>• Track history]
|
||||
|
||||
SAVE --> SEND[📧 API INTEGRATION<br/><br/>SendGrid<br/>• Send email<br/>• Track delivery<br/>• Reliable inbox]
|
||||
|
||||
SEND --> CLIENT[📱 Client<br/>Reviews<br/>Invoice]
|
||||
|
||||
CLIENT --> DECISION{Approve or<br/>Dispute?}
|
||||
|
||||
DECISION -->|⚠️ Dispute| DISPUTE[🔧 INTERNAL<br/><br/>Handle Dispute<br/>• Admin reviews<br/>• Adjustments<br/>• Re-calculate]
|
||||
|
||||
DISPUTE --> SAVE
|
||||
|
||||
DECISION -->|✅ Approve| PAY[💳 API INTEGRATION<br/><br/>Stripe<br/>• Credit card<br/>• ACH transfer<br/>• Payment tracking]
|
||||
|
||||
PAY --> CONFIRM[💾 INTERNAL<br/><br/>Update Status<br/>• Mark as paid<br/>• Record payment<br/>• Update reports]
|
||||
|
||||
CONFIRM --> PAYOUT[💰 API INTEGRATION<br/><br/>Stripe Connect<br/>• Pay staff<br/>• Direct deposit<br/>• Automated]
|
||||
|
||||
PAYOUT --> RECORD[📊 INTERNAL<br/><br/>Track Payments<br/>• Staff earnings<br/>• Payment history<br/>• Reports]
|
||||
|
||||
RECORD --> DONE[✅ Complete]
|
||||
|
||||
style START fill:#E1F5FF
|
||||
style CALC fill:#FFF9E6,stroke:#F9A825,stroke-width:3px
|
||||
style GENERATE fill:#FFF9E6,stroke:#F9A825,stroke-width:3px
|
||||
style SAVE fill:#FFF9E6,stroke:#F9A825,stroke-width:3px
|
||||
style DISPUTE fill:#FFF9E6,stroke:#F9A825,stroke-width:3px
|
||||
style CONFIRM fill:#FFF9E6,stroke:#F9A825,stroke-width:3px
|
||||
style RECORD fill:#FFF9E6,stroke:#F9A825,stroke-width:3px
|
||||
style SEND fill:#E3F2FD,stroke:#1976D2,stroke-width:3px
|
||||
style PAY fill:#E3F2FD,stroke:#1976D2,stroke-width:3px
|
||||
style PAYOUT fill:#E3F2FD,stroke:#1976D2,stroke-width:3px
|
||||
style DONE fill:#90EE90
|
||||
@@ -0,0 +1,24 @@
|
||||
graph TD
|
||||
subgraph KROW Mobile Applications
|
||||
direction LR
|
||||
Mobile_Client[<b>Mobile Client App</b><br>Flutter]
|
||||
Mobile_Staff[<b>Mobile Staff App</b><br>Flutter]
|
||||
end
|
||||
|
||||
subgraph Firebase Backend Services - GCP
|
||||
direction TB
|
||||
Auth[Firebase Authentication]
|
||||
DataConnect[<b>Firebase Data Connect</b><br>GraphQL API &<br>Generated SDKs]
|
||||
SQL_DB[<b>Cloud SQL for PostgreSQL</b><br><i>Managed by Data Connect</i>]
|
||||
end
|
||||
|
||||
Mobile_Client -- "Authenticates with" --> Auth
|
||||
Mobile_Client -- "Calls API via generated SDK" --> DataConnect
|
||||
|
||||
Mobile_Staff -- "Authenticates with" --> Auth
|
||||
Mobile_Staff -- "Calls API via generated SDK" --> DataConnect
|
||||
|
||||
DataConnect -- "Manages & Queries" --> SQL_DB
|
||||
|
||||
style Mobile_Client fill:#eef,stroke:#333,stroke-width:2px
|
||||
style Mobile_Staff fill:#eef,stroke:#333,stroke-width:2px
|
||||
@@ -0,0 +1,29 @@
|
||||
graph LR
|
||||
subgraph Base44 Environment
|
||||
direction TB
|
||||
Client[Client] -- Modifies --> B44_UI[<b>Base44 Visual Builder</b><br><i>Features:</i><br>- Event Management<br>- Staff Directory<br>- Vendor Onboarding]
|
||||
B44_UI --> B44_Backend[<b>Base44 Backend</b><br>Provides Entity Schemas<br>& SDK Operations]
|
||||
B44_Backend --> B44_DB[Base44 Database]
|
||||
end
|
||||
|
||||
subgraph Firebase Ecosystem - GCP
|
||||
direction TB
|
||||
KROW_FE[<b>KROW Frontend</b><br>Vite/React + TanStack Query<br><i>From Export</i>]
|
||||
|
||||
subgraph Firebase Services
|
||||
direction TB
|
||||
Auth[Firebase Authentication]
|
||||
DataConnect[<b>Firebase Data Connect</b><br>GraphQL API &<br>Generated SDKs]
|
||||
SQL_DB[<b>Cloud SQL for PostgreSQL</b><br><i>Managed by Data Connect</i>]
|
||||
end
|
||||
|
||||
KROW_FE -- "Uses" --> Auth
|
||||
KROW_FE -- "Calls Queries/Mutations via SDK" --> DataConnect
|
||||
DataConnect -- "Manages & Queries" --> SQL_DB
|
||||
end
|
||||
|
||||
B44_UI -- "<b>UI Code Export</b><br>(React Components)" --> KROW_FE
|
||||
|
||||
style Client fill:#f9f,stroke:#333,stroke-width:2px
|
||||
style B44_UI fill:#ffe,stroke:#333,stroke-width:2px
|
||||
style KROW_FE fill:#eef,stroke:#333,stroke-width:2px
|
||||
@@ -0,0 +1,32 @@
|
||||
sequenceDiagram
|
||||
participant Staff as Staff Member
|
||||
participant App as KROW Staff App
|
||||
participant Client as Client
|
||||
participant Backend as Backend
|
||||
|
||||
Staff->>App: Opens shift and taps "Clock In"
|
||||
|
||||
activate App
|
||||
App->>App: **1. Geofencing Check (GPS) BEFORE scan**
|
||||
|
||||
alt Proximity Validated
|
||||
App->>Client: Requests QR Code
|
||||
Client-->>Staff: Presents QR Code
|
||||
Staff->>App: Scans the code
|
||||
App->>Backend: Validates Clock In with eventId
|
||||
Backend-->>App: Confirmation
|
||||
App->>Staff: Displays "Clock In Successful"
|
||||
else Proximity Failed (GPS bug, too far)
|
||||
App->>Staff: Displays "Error: You are too far"
|
||||
end
|
||||
deactivate App
|
||||
|
||||
loop Continuous Monitoring DURING the shift
|
||||
App->>App: **2. Checks GPS position (anti-fraud)**
|
||||
opt Staff member leaves the > 500m area
|
||||
App->>Backend: Notifies area exit
|
||||
Backend-->>App: Triggers a "Force Clock-Out"
|
||||
end
|
||||
end
|
||||
|
||||
%% Clock Out process follows a similar logic (Geofencing + QR Code) %%
|
||||
@@ -1,10 +1,62 @@
|
||||
[
|
||||
{
|
||||
[
|
||||
{
|
||||
"path": "assets/diagrams/architectures/0-infra-compliance.mermaid",
|
||||
"title": "Infrastructure & Compliance",
|
||||
"type": "mermaid",
|
||||
"icon": "bi-shield-check"
|
||||
},
|
||||
{
|
||||
"path": "assets/diagrams/architectures/1-core-workflow.mermaid",
|
||||
"title": "Core Workflow",
|
||||
"type": "mermaid",
|
||||
"icon": "bi-diagram-3"
|
||||
},
|
||||
{
|
||||
"path": "assets/diagrams/architectures/2-high-level-architecture.mermaid",
|
||||
"title": "High-Level Architecture",
|
||||
"type": "mermaid",
|
||||
"icon": "bi-diagram-3"
|
||||
},
|
||||
{
|
||||
"path": "assets/diagrams/architectures/3-invoice-workflow-simple.mermaid",
|
||||
"title": "Invoice Workflow (Simple)",
|
||||
"type": "mermaid",
|
||||
"icon": "bi-receipt"
|
||||
},
|
||||
{
|
||||
"path": "assets/diagrams/architectures/4-mobile-app-architecture.mermaid",
|
||||
"title": "Mobile App Architecture",
|
||||
"type": "mermaid",
|
||||
"icon": "bi-phone"
|
||||
},
|
||||
{
|
||||
"path": "assets/diagrams/architectures/5-web-app-architecture.mermaid",
|
||||
"title": "Web App Architecture",
|
||||
"type": "mermaid",
|
||||
"icon": "bi-window"
|
||||
},
|
||||
{
|
||||
"path": "assets/diagrams/architectures/6-geofencing-clockin-clockout.mermaid",
|
||||
"title": "Geofencing Clock-In/Out",
|
||||
"type": "mermaid",
|
||||
"icon": "bi-geo-alt"
|
||||
},
|
||||
{
|
||||
"path": "assets/diagrams/roadmap/roadmap.mermaid",
|
||||
"title": "Project Roadmap",
|
||||
"type": "mermaid",
|
||||
"icon": "bi-calendar-check"
|
||||
},
|
||||
{
|
||||
"path": "assets/diagrams/legacy/staff-mobile-application/overview.mermaid",
|
||||
"title": "Overview"
|
||||
"title": "Legacy App Overview",
|
||||
"type": "mermaid",
|
||||
"icon": "bi-phone"
|
||||
},
|
||||
{
|
||||
"path": "assets/diagrams/legacy/staff-mobile-application/use-case-flowchart.mermaid",
|
||||
"title": "Use Case Flowchart"
|
||||
"title": "Legacy App Use Cases",
|
||||
"type": "mermaid",
|
||||
"icon": "bi-diagram-2"
|
||||
}
|
||||
]
|
||||
]
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 300 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 164 KiB |
@@ -0,0 +1,17 @@
|
||||
timeline
|
||||
title KROW Platform - Accelerated Migration & Enhancement Roadmap (2 Months to Production)
|
||||
|
||||
section Phase 1: Foundation & New Workflow Adoption
|
||||
Week 1-2 : Initialize Firebase projects (Dev, Staging) and configure hosting<br>Set up CI/CD pipelines for automated deployments<br>Adopt new development and deployment workflows
|
||||
Week 3-4 : Configure internal launchpad for easy access to resources<br>Team training on new tools and workflows<br>Documentation setup
|
||||
Key Milestones : <b>Dev & Staging environments fully operational</b><br><b>Team ready to work with new infrastructure</b>
|
||||
|
||||
section Phase 2: Functional Parity & New Experience
|
||||
Week 5-6 : Migrate core backend logic (Cloud Functions, Firestore/Cloud SQL)<br>Reconnect Web and Mobile apps to new APIs<br>Database migration and validation
|
||||
Week 7-8 : Integrate new UI/UX design across all applications<br>Implement new core business workflows<br>Feature parity testing
|
||||
Key Milestones : <b>All existing features are ISO-functional on the new platform</b><br><b>New design and core workflows fully integrated and tested</b>
|
||||
|
||||
section Phase 3: Preparation & Production Launch
|
||||
Week 9-10 : Complete end-to-end testing and performance optimization<br>Security audits and penetration testing<br>Load testing and optimization
|
||||
Week 11-12 : Set up robust monitoring and alerting system for production<br>Final production deployment<br>Legacy infrastructure decommissioning plan
|
||||
Key Milestones : <b>KROW is live in production with new design and workflows</b><br><b>Legacy infrastructure ready for decommissioning</b>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 MiB |
@@ -11,7 +11,7 @@
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Mermaid -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.1/mermaid.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js"></script>
|
||||
|
||||
<!-- Custom Tailwind Config -->
|
||||
<script>
|
||||
@@ -121,43 +121,7 @@
|
||||
<span>Home</span>
|
||||
</a>
|
||||
|
||||
<div class="mt-6">
|
||||
<h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Static Diagrams</h3>
|
||||
|
||||
<a href="#" onclick="showView('diagram', this, './assets/diagrams/high-level-overview.svg', 'Apps High-Level Overview', 'svg')"
|
||||
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
||||
</svg>
|
||||
<span class="text-sm">High-Level Overview</span>
|
||||
</a>
|
||||
|
||||
<a href="#" onclick="showView('diagram', this, './assets/diagrams/shift-lifecycle-workflow.svg', 'Core Workflow - Shift Lifecycle', 'svg')"
|
||||
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Shift Lifecycle</span>
|
||||
</a>
|
||||
|
||||
<a href="#" onclick="showView('diagram', this, './assets/diagrams/invoice-workflow.svg', 'Invoice Workflow - Complete', 'svg')"
|
||||
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Invoice Workflow</span>
|
||||
</a>
|
||||
|
||||
<a href="#" onclick="showView('diagram', this, './assets/diagrams/complete-workflow.svg', 'Complete Workflow', 'svg')"
|
||||
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
|
||||
</svg>
|
||||
<span class="text-sm">Complete Workflow</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Dynamic diagrams section -->
|
||||
<!-- Dynamic diagrams section - ALL diagrams loaded here -->
|
||||
<div id="dynamic-diagrams-section"></div>
|
||||
</nav>
|
||||
|
||||
@@ -393,7 +357,7 @@
|
||||
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
|
||||
|
||||
<script>
|
||||
let mermaidDiagrams = [];
|
||||
let allDiagrams = [];
|
||||
const homeView = document.getElementById('home-view');
|
||||
const diagramViewer = document.getElementById('diagram-viewer');
|
||||
const diagramContainer = document.getElementById('diagram-container');
|
||||
@@ -422,8 +386,7 @@
|
||||
|
||||
diagrams.forEach(diagram => {
|
||||
const parts = diagram.path.split('/');
|
||||
const relevantParts = parts.slice(2, -1);
|
||||
const filename = parts[parts.length - 1].replace('.mermaid', '');
|
||||
const relevantParts = parts.slice(2, -1); // Remove 'assets/diagrams/' and filename
|
||||
|
||||
let current = hierarchy;
|
||||
relevantParts.forEach(part => {
|
||||
@@ -433,21 +396,15 @@
|
||||
current = current[part]._children;
|
||||
});
|
||||
|
||||
const lastLevel = relevantParts.length > 0 ?
|
||||
relevantParts.reduce((acc, part) => acc[part]._children, hierarchy) :
|
||||
hierarchy;
|
||||
|
||||
// Add the item to appropriate level
|
||||
if (relevantParts.length > 0) {
|
||||
const parentKey = relevantParts[relevantParts.length - 1];
|
||||
if (!hierarchy[relevantParts[0]]) {
|
||||
hierarchy[relevantParts[0]] = { _items: [], _children: {} };
|
||||
}
|
||||
let parent = hierarchy[relevantParts[0]];
|
||||
for (let i = 1; i < relevantParts.length; i++) {
|
||||
parent = parent._children[relevantParts[i]];
|
||||
}
|
||||
parent._items.push(diagram);
|
||||
} else {
|
||||
// Root level diagrams
|
||||
if (!hierarchy._root) {
|
||||
hierarchy._root = { _items: [], _children: {} };
|
||||
}
|
||||
@@ -460,6 +417,19 @@
|
||||
|
||||
// Create navigation from hierarchy
|
||||
function createNavigation(hierarchy, parentElement, level = 0) {
|
||||
// First, show root level items if any
|
||||
if (hierarchy._root && hierarchy._root._items.length > 0) {
|
||||
const mainHeading = document.createElement('div');
|
||||
mainHeading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3';
|
||||
mainHeading.textContent = 'Diagrams';
|
||||
parentElement.appendChild(mainHeading);
|
||||
|
||||
hierarchy._root._items.forEach(diagram => {
|
||||
createDiagramLink(diagram, parentElement, 0);
|
||||
});
|
||||
}
|
||||
|
||||
// Then process nested categories
|
||||
Object.keys(hierarchy).forEach(key => {
|
||||
if (key === '_items' || key === '_children' || key === '_root') return;
|
||||
|
||||
@@ -470,34 +440,49 @@
|
||||
heading.textContent = key.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
parentElement.appendChild(heading);
|
||||
|
||||
// Add items in this section
|
||||
if (section._items && section._items.length > 0) {
|
||||
section._items.forEach(diagram => {
|
||||
const link = document.createElement('a');
|
||||
link.href = '#';
|
||||
link.className = 'nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1' +
|
||||
(level > 0 ? ' pl-8' : '');
|
||||
link.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
showView('diagram', link, diagram.path, diagram.title, 'mermaid');
|
||||
};
|
||||
link.innerHTML = `
|
||||
<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>
|
||||
<span class="text-sm">${diagram.title}</span>
|
||||
`;
|
||||
parentElement.appendChild(link);
|
||||
createDiagramLink(diagram, parentElement, level);
|
||||
});
|
||||
}
|
||||
|
||||
// Recursively add children
|
||||
if (section._children && Object.keys(section._children).length > 0) {
|
||||
createNavigation(section._children, parentElement, level + 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Load and render dynamic diagrams navigation
|
||||
async function loadDynamicDiagrams() {
|
||||
// Helper function to create a diagram link
|
||||
function createDiagramLink(diagram, parentElement, level) {
|
||||
const link = document.createElement('a');
|
||||
link.href = '#';
|
||||
link.className = 'nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1' +
|
||||
(level > 0 ? ' pl-8' : '');
|
||||
link.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
showView('diagram', link, diagram.path, diagram.title, diagram.type);
|
||||
};
|
||||
|
||||
// Get icon based on type or custom icon
|
||||
let iconSvg = '';
|
||||
if (diagram.type === 'svg') {
|
||||
iconSvg = `<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
||||
</svg>`;
|
||||
} else {
|
||||
iconSvg = `<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
||||
</svg>`;
|
||||
}
|
||||
|
||||
link.innerHTML = `${iconSvg}<span class="text-sm">${diagram.title}</span>`;
|
||||
parentElement.appendChild(link);
|
||||
}
|
||||
|
||||
// Load all diagrams from config
|
||||
async function loadAllDiagrams() {
|
||||
const dynamicSection = document.getElementById('dynamic-diagrams-section');
|
||||
|
||||
try {
|
||||
@@ -506,19 +491,25 @@
|
||||
throw new Error(`Failed to load diagrams config: ${response.status}`);
|
||||
}
|
||||
|
||||
mermaidDiagrams = await response.json();
|
||||
const text = await response.text();
|
||||
console.log('Loaded config:', text);
|
||||
allDiagrams = JSON.parse(text);
|
||||
|
||||
if (mermaidDiagrams.length > 0) {
|
||||
const mainHeading = document.createElement('div');
|
||||
mainHeading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3';
|
||||
mainHeading.textContent = 'Mermaid Diagrams';
|
||||
dynamicSection.appendChild(mainHeading);
|
||||
|
||||
const hierarchy = buildDiagramHierarchy(mermaidDiagrams);
|
||||
if (allDiagrams && allDiagrams.length > 0) {
|
||||
const hierarchy = buildDiagramHierarchy(allDiagrams);
|
||||
createNavigation(hierarchy, dynamicSection);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading diagrams configuration:', error);
|
||||
// Show a helpful message in the UI
|
||||
const errorDiv = document.createElement('div');
|
||||
errorDiv.className = 'px-4 py-3 mx-2 mt-4 text-xs text-amber-600 bg-amber-50 rounded-lg border border-amber-200';
|
||||
errorDiv.innerHTML = `
|
||||
<div class="font-semibold mb-1">⚠️ Diagrams</div>
|
||||
<div>Unable to load diagrams-config.json</div>
|
||||
<div class="mt-1 text-amber-500">${error.message}</div>
|
||||
`;
|
||||
dynamicSection.appendChild(errorDiv);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -642,7 +633,7 @@
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadDynamicDiagrams();
|
||||
loadAllDiagrams();
|
||||
showView('home', document.getElementById('nav-home'));
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user