Merge pull request #34 from Oloodi/achintha-dev
feat: Add Mermaid diagram support and configuration
This commit is contained in:
Boris-Wilfried
21
docs/prompts/create-mermaid-overview-flutter.md
Normal file
21
docs/prompts/create-mermaid-overview-flutter.md
Normal file
@@ -0,0 +1,21 @@
|
||||
## What the prompt does
|
||||
This prompt generates a Mermaid diagram that provides an overview of the given Flutter application's architecture. It includes the main components of the app, such as the widget tree, state management, and navigation.
|
||||
|
||||
## Assumptions
|
||||
- Flutter project is given.
|
||||
|
||||
## Prompt
|
||||
In the given Flutter project. Carefully analyze all files to understand the app’s navigation, logic flow, state management, and how each screen connects to the next.
|
||||
|
||||
Using that analysis, generate a **Mermaid flowchart** that shows:
|
||||
|
||||
* The app’s entry point (main.dart → root widget).
|
||||
* The initial flow (e.g., splash → login/signup → authenticated home).
|
||||
* All pages/screens and how navigation occurs between them.
|
||||
* Conditional routing logic (authentication checks, API responses, state changes, etc.).
|
||||
* Any loops, flows, or background logic that impact navigation.
|
||||
* The diagram must accurately reflect the project structure and not make assumptions beyond what is found in the code.
|
||||
|
||||
Use **Mermaid `flowchart TD` or `flowchart LR`** format, with clear labels for each screen and logic decision.
|
||||
|
||||
If needed, ask me for missing files so you can produce a complete diagram.
|
||||
29
docs/prompts/create-mermaid-usecase-flutter.md
Normal file
29
docs/prompts/create-mermaid-usecase-flutter.md
Normal file
@@ -0,0 +1,29 @@
|
||||
## What the prompt does
|
||||
This prompt generates a Mermaid diagram that visualizes the use case of a Flutter application. The diagram includes the actors, use cases, and relationships between them.
|
||||
|
||||
## Assumption
|
||||
- Flutter project is given
|
||||
- Overview mermaid diagram is given
|
||||
|
||||
## How to use the prompt
|
||||
Using the given Flutter project code — along with the previously generated Mermaid diagram that outlines the app’s navigation and logic flow — analyze the entire system to identify **all main use cases and their sub-use cases**.
|
||||
|
||||
From this analysis, create a **Mermaid flowchart** that shows:
|
||||
|
||||
* All high-level use cases the app supports (e.g., Authentication, Profile Management, Dashboard Interaction, Data Fetching, Settings, etc.).
|
||||
* How each use case breaks down into sub-use cases (e.g., Authentication → Login, Signup, Logout, Token Refresh).
|
||||
* How these use cases depend on each other or trigger one another.
|
||||
* Connections between use cases as they appear in the actual code (UI actions, state changes, service calls, repository interactions, etc.).
|
||||
* Any decision points or conditions that influence which sub-use case occurs next.
|
||||
|
||||
Format the output as a **clear Mermaid diagram** using `flowchart TD` or `flowchart LR`.
|
||||
Ensure the flow represents the **real behavior of the code**, not assumptions.
|
||||
|
||||
Ask for any missing files if needed to build a complete and accurate use-case hierarchy.
|
||||
|
||||
---
|
||||
|
||||
If you want, I can also generate a version tailored for:
|
||||
✔ UML use-case diagrams
|
||||
✔ Sequence diagrams
|
||||
✔ System interaction diagrams
|
||||
@@ -0,0 +1,10 @@
|
||||
[
|
||||
{
|
||||
"path": "assets/diagrams/legacy/staff-mobile-application/overview.mermaid",
|
||||
"title": "Overview"
|
||||
},
|
||||
{
|
||||
"path": "assets/diagrams/legacy/staff-mobile-application/use-case-flowchart.mermaid",
|
||||
"title": "Use Case Flowchart"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,117 @@
|
||||
flowchart TD
|
||||
A[main.dart] --> B{KrowApp};
|
||||
B --> C{MaterialApp.router};
|
||||
C --> D[SplashRoute];
|
||||
D --> E{SplashRedirectGuard};
|
||||
|
||||
E -- Authenticated --> F[HomeRoute];
|
||||
E -- Admin Validation --> G[WaitingValidationRoute];
|
||||
E -- Prepare Profile --> H[CheckListFlowRoute];
|
||||
E -- Unauthenticated/Error --> I[AuthFlowRoute];
|
||||
|
||||
F --> F1[ShiftsFlowRoute];
|
||||
F --> F2[EarningsFlowRoute];
|
||||
F --> F3[ProfileMainFlowRoute];
|
||||
|
||||
F1 --> F1a[ShiftsListMainRoute];
|
||||
F1a --> F1b[ShiftDetailsRoute];
|
||||
F1a --> F1c[QrScannerRoute];
|
||||
|
||||
F2 --> F2a[EarningsRoute];
|
||||
F2a --> F2b[EarningsHistoryRoute];
|
||||
|
||||
F3 --> F3a[ProfileMainRoute];
|
||||
F3a --> F3b[RoleKitFlowRoute];
|
||||
F3a --> F3c[CertificatesRoute];
|
||||
F3a --> F3d[ScheduleRoute];
|
||||
F3a --> F3e[WorkingAreaRoute];
|
||||
F3a --> F3f[LivePhotoRoute];
|
||||
F3a --> F3g[ProfileSettingsFlowRoute];
|
||||
F3a --> F3h[WagesFormsFlowRoute];
|
||||
F3a --> F3i[BankAccountFlowRoute];
|
||||
F3a --> F3j[BenefitsRoute];
|
||||
F3a --> F3k[SupportRoute];
|
||||
F3a --> F3l[FaqRoute];
|
||||
|
||||
F3g --> F3g1[ProfileSettingsMenuRoute];
|
||||
F3g1 --> F3g2[RoleRoute];
|
||||
F3g1 --> F3g3[PersonalInfoRoute];
|
||||
F3g1 --> F3g4[EmailVerificationRoute];
|
||||
F3g4 --> L1;
|
||||
F3g1 --> F3g5[AddressRoute];
|
||||
F3g1 --> F3g6[EmergencyContactsRoute];
|
||||
F3g1 --> F3g7[MobilityRoute];
|
||||
F3g1 --> F3g8[InclusiveRoute];
|
||||
|
||||
F3h --> F3h1[FormsListRoute];
|
||||
F3h1 --> F3h2[OfferLetterFormRoute];
|
||||
F3h1 --> F3h3[EddFormRoute];
|
||||
F3h1 --> F3h4[INineFormRoute];
|
||||
F3h1 --> F3h5[WFourFormRoute];
|
||||
F3h2 --> F3h6[FormSignRoute];
|
||||
F3h3 --> F3h6;
|
||||
F3h4 --> F3h6;
|
||||
F3h5 --> F3h6;
|
||||
F3h6 --> F3h7[SignedFormRoute];
|
||||
F3h6 --> F3h8[FormPreviewRoute];
|
||||
|
||||
F3i --> F3i1[BankAccountRoute];
|
||||
F3i1 --> F3i2[BankAccountEditRoute];
|
||||
|
||||
F3b --> F3b1[RolesKitListRoute];
|
||||
F3b1 --> F3b2[RoleKitRoute];
|
||||
|
||||
H --> H1[CheckListRoute];
|
||||
H1 --> H2[PersonalInfoRoute];
|
||||
H1 --> H3[EmailVerificationRoute];
|
||||
H3 --> L1;
|
||||
H1 --> H4[EmergencyContactsRoute];
|
||||
H1 --> H5[AddressRoute];
|
||||
H1 --> H6[WorkingAreaRoute];
|
||||
H1 --> H7[RoleRoute];
|
||||
H1 --> H8[CertificatesRoute];
|
||||
H1 --> H9[ScheduleRoute];
|
||||
H1 --> F3i;
|
||||
H1 --> F3h;
|
||||
H1 --> F3b;
|
||||
|
||||
I --> I1[WelcomeRoute];
|
||||
I1 --> I2[PhoneVerificationRoute];
|
||||
I2 --> I3[CodeVerificationRoute];
|
||||
I3 --> J{SingUpRedirectGuard};
|
||||
|
||||
J -- Prepare Profile --> K[SignupFlowRoute];
|
||||
J -- Authenticated --> F;
|
||||
J -- Admin Validation --> G;
|
||||
J -- Unauthenticated/Error --> I;
|
||||
|
||||
K --> K1[PersonalInfoRoute];
|
||||
K1 --> K2[EmailVerificationRoute];
|
||||
K2 --> K3[EmergencyContactsRoute];
|
||||
K2 --> L1;
|
||||
K3 --> K4[MobilityRoute];
|
||||
K4 --> K5[InclusiveRoute];
|
||||
K5 --> K6[AddressRoute];
|
||||
K6 --> K7[WorkingAreaRoute];
|
||||
K7 --> K8[RoleRoute];
|
||||
|
||||
subgraph PhoneReLoginFlow
|
||||
L1[PhoneReLoginFlowRoute]
|
||||
L1 --> L2[CodeVerificationRoute]
|
||||
end
|
||||
|
||||
subgraph CheckListFlow
|
||||
H
|
||||
end
|
||||
|
||||
subgraph AuthFlow
|
||||
I
|
||||
end
|
||||
|
||||
subgraph SignUpFlow
|
||||
K
|
||||
end
|
||||
|
||||
subgraph HomeFlow
|
||||
F
|
||||
end
|
||||
@@ -0,0 +1,85 @@
|
||||
flowchart TD
|
||||
subgraph AppInitialization
|
||||
A[Start App] --> B{Check Auth Status};
|
||||
B -- Authenticated --> C[Go to Home];
|
||||
B -- Unauthenticated --> D[Go to Auth];
|
||||
B -- Admin Validation --> E[Go to Waiting Validation];
|
||||
B -- Prepare Profile --> F[Go to Checklist];
|
||||
end
|
||||
|
||||
subgraph UserAuthentication
|
||||
D --> G[Welcome Screen];
|
||||
G --> H{Select Sign In/Up};
|
||||
H -- Sign In --> I[Sign In With Phone];
|
||||
I --> J[Verify Phone Code];
|
||||
J -- Success --> C;
|
||||
H -- Sign Up --> K[Go to User Onboarding];
|
||||
end
|
||||
|
||||
subgraph UserOnboarding
|
||||
K --> L[Collect Personal Info];
|
||||
L --> M[Verify Email];
|
||||
M --> N[Add Emergency Contacts];
|
||||
N --> O[Specify Mobility];
|
||||
O --> P[Provide Inclusivity Info];
|
||||
P --> Q[Enter Address];
|
||||
Q --> R[Define Working Area];
|
||||
R --> S[Select Role];
|
||||
S -- Success --> F;
|
||||
end
|
||||
|
||||
subgraph ProfileCompletion
|
||||
F --> T[View Checklist];
|
||||
T --> U[Complete Personal Info];
|
||||
T --> V[Complete Email Verification];
|
||||
T --> W[Complete Emergency Contacts];
|
||||
T --> X[Manage Certificates];
|
||||
T --> Y[Set Schedule];
|
||||
T --> Z[Manage Bank Account];
|
||||
T --> AA[Fill Out Wage Forms];
|
||||
T --> AB[Manage Role Kit];
|
||||
AB -- All Complete --> C;
|
||||
end
|
||||
|
||||
subgraph MainApp
|
||||
C --> AC[Home Screen];
|
||||
AC --> AD{Navigate};
|
||||
AD -- Shifts --> AE[Shift Management];
|
||||
AD -- Earnings --> AF[Earnings Management];
|
||||
AD -- Profile --> AG[Profile Management];
|
||||
end
|
||||
|
||||
subgraph ShiftManagement
|
||||
AE --> AH[View Shifts];
|
||||
AH --> AI[View Shift Details];
|
||||
AH --> AJ[Clock In/Out via QR];
|
||||
end
|
||||
|
||||
subgraph EarningsManagement
|
||||
AF --> AK[View Current Earnings];
|
||||
AK --> AL[View Earnings History];
|
||||
end
|
||||
|
||||
subgraph ProfileManagement
|
||||
AG --> AM[View Profile];
|
||||
AM --> AN[Manage Role Kit];
|
||||
AM --> AO[Manage Certificates];
|
||||
AM --> AP[Manage Schedule];
|
||||
AM --> AQ[Manage Working Area];
|
||||
AM --> AR[Update Live Photo];
|
||||
AM --> AS[Manage Profile Settings];
|
||||
AS --> AT[Update Personal Info];
|
||||
AS --> AU[Update Email];
|
||||
AU --> AV[Re-login with Phone];
|
||||
AS --> AW[Update Address];
|
||||
AM --> AX[Manage Wage Forms];
|
||||
AM --> AY[Manage Bank Account];
|
||||
AM --> AZ[View Benefits];
|
||||
AM --> BA[Access Support];
|
||||
BA --> BB[View FAQs];
|
||||
BA --> BC[Contact Support];
|
||||
end
|
||||
|
||||
subgraph QRScanning
|
||||
AJ --> BD[Scan QR Code];
|
||||
end
|
||||
18
firebase/internal-launchpad/favicon.svg
Normal file
18
firebase/internal-launchpad/favicon.svg
Normal file
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="200 180 280 140" style="enable-background:new 0 0 500 500;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#24303B;}
|
||||
.st1{fill:#002FE3;}
|
||||
</style>
|
||||
<g>
|
||||
<path class="st1" d="M459.81,202.55c-5.03,0.59-9.08,4.49-10.36,9.38l-15.99,59.71l-16.24-56.3
|
||||
c-1.68-5.92-6.22-10.86-12.19-12.34c-1.58-0.39-3.11-0.54-4.64-0.49h-0.15c-1.53-0.05-3.11,0.1-4.64,0.49
|
||||
c-5.97,1.48-10.51,6.42-12.24,12.34l-3.6,12.53l-11.35,39.38l-7.9-27.54c-10.76-37.5-48.56-62.23-88.38-55.32
|
||||
c-33.26,5.82-57.05,35.68-56.99,69.48v0.79c0,4.34,0.39,8.73,1.13,13.18c0.18,1.02,0.37,2.03,0.6,3.03
|
||||
c1.84,8.31,10.93,12.73,18.49,8.8v0c5.36-2.79,7.84-8.89,6.42-14.77c-0.85-3.54-1.28-7.23-1.23-11.03
|
||||
c0-25.02,20.48-45.5,45.55-45.2c7.6,0.1,15.59,2.07,23.59,6.37c13.52,7.3,23.15,20.18,27.34,34.94l13.32,46.34
|
||||
c1.73,5.97,6.22,11,12.24,12.58c9.62,2.62,19-3.06,21.51-12.04l16.09-56.7l0.2-0.1l16.09,56.85c1.63,5.68,5.87,10.41,11.55,11.99
|
||||
c9.13,2.57,18.11-2.66,20.67-11.2l24.13-79.6C475.35,209.85,468.64,201.56,459.81,202.55z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
479
firebase/internal-launchpad/index.html
Normal file
479
firebase/internal-launchpad/index.html
Normal file
@@ -0,0 +1,479 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KROW Launchpad</title>
|
||||
<link rel="icon" type="image/x-icon" href="favicon.svg">
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
|
||||
<!-- Mermaid -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.1/mermaid.min.js"></script>
|
||||
<!-- Custom CSS -->
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #ffffff;
|
||||
border-right: 1px solid #dee2e6;
|
||||
padding: 1.5rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: color 0.2s, background-color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active,
|
||||
.sidebar .nav-link:hover {
|
||||
color: #0d6efd;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #6c757d;
|
||||
text-transform: uppercase;
|
||||
padding: 0 1rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.sidebar-subheading {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: #868e96;
|
||||
padding: 0 1rem 0 2rem;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.nav-link.sub-item {
|
||||
padding-left: 2.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.nav-link.sub-sub-item {
|
||||
padding-left: 3.5rem;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#diagram-viewer {
|
||||
display: none;
|
||||
height: calc(100vh - 4rem);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#diagram-container {
|
||||
cursor: grab;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #dee2e6;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#diagram-container:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
#diagram-container:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#diagram-container svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-layout">
|
||||
<!-- Sidebar -->
|
||||
<nav class="sidebar">
|
||||
<div class="d-flex justify-content-center align-items-center mb-4">
|
||||
<img src="logo.svg" alt="Krow Logo" style="height: 60px;" onerror="this.style.display='none'">
|
||||
</div>
|
||||
<div class="nav flex-column nav-pills" id="sidebar-nav">
|
||||
<a class="nav-link active" href="#" id="nav-home" onclick="showView('home', this)">
|
||||
<i class="bi bi-house-door"></i>Home
|
||||
</a>
|
||||
|
||||
<div class="sidebar-heading">Static Diagrams</div>
|
||||
|
||||
<a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/high-level-overview.svg', 'Apps High-Level Overview', 'svg')">
|
||||
<i class="bi bi-diagram-3"></i>High-Level Overview
|
||||
</a>
|
||||
<a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/shift-lifecycle-workflow.svg', 'Core Workflow - Shift Lifecycle', 'svg')">
|
||||
<i class="bi bi-arrow-repeat"></i>Shift Lifecycle
|
||||
</a>
|
||||
<a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/invoice-workflow.svg', 'Invoice Workflow - Complete', 'svg')">
|
||||
<i class="bi bi-receipt"></i>Invoice Workflow
|
||||
</a>
|
||||
<a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/complete-workflow.svg', 'Complete Workflow', 'svg')">
|
||||
<i class="bi bi-infinity"></i>Complete Workflow
|
||||
</a>
|
||||
|
||||
<!-- Dynamic Mermaid diagrams will be inserted here -->
|
||||
<div id="dynamic-diagrams-section"></div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="content-area">
|
||||
<!-- View 1: Home Content -->
|
||||
<div id="home-view">
|
||||
<h2 class="mb-4">Welcome to the Project Launchpad</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header"><h3>Applications</h3></div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a target="_blank" href="#">Control Tower (Dev)</a>
|
||||
<span class="badge bg-primary rounded-pill">Dev</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a target="_blank" href="#">Control Tower (Staging)</a>
|
||||
<span class="badge bg-warning text-dark rounded-pill">Staging</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header"><h3>Legacy Mobile Apps</h3></div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a target="_blank" href="https://play.google.com/store/apps/dev?id=9163719228191263405&hl=en">Google Play Store</a>
|
||||
<span class="badge bg-success rounded-pill">Live</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a target="_blank" href="https://apps.apple.com/us/developer/thinkloops-llc/id1719034287">Apple App Store</a>
|
||||
<span class="badge bg-success rounded-pill">Live</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header"><h3>Access & Resources</h3></div>
|
||||
<div class="card-body">
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="https://github.com/Oloodi/krow-workforce" target="_blank" class="list-group-item list-group-item-action">
|
||||
<div class="fw-bold">GitHub Repository</div>
|
||||
</a>
|
||||
<a href="https://chat.google.com/" target="_blank" class="list-group-item list-group-item-action">
|
||||
<div class="fw-bold">Team Communication</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View 2: Diagram Viewer -->
|
||||
<div id="diagram-viewer">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h3 id="diagram-title" class="mb-0"></h3>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-outline-secondary" id="zoomInBtn" title="Zoom In"><i class="bi bi-zoom-in"></i></button>
|
||||
<button type="button" class="btn btn-outline-secondary" id="zoomOutBtn" title="Zoom Out"><i class="bi bi-zoom-out"></i></button>
|
||||
<button type="button" class="btn btn-outline-secondary" id="resetBtn" title="Reset View"><i class="bi bi-aspect-ratio"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="diagram-container" tabindex="-1">
|
||||
<!-- SVG will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
|
||||
|
||||
<script>
|
||||
let mermaidDiagrams = [];
|
||||
|
||||
const homeView = document.getElementById('home-view');
|
||||
const diagramViewer = document.getElementById('diagram-viewer');
|
||||
const diagramContainer = document.getElementById('diagram-container');
|
||||
const diagramTitle = document.getElementById('diagram-title');
|
||||
|
||||
const zoomInBtn = document.getElementById('zoomInBtn');
|
||||
const zoomOutBtn = document.getElementById('zoomOutBtn');
|
||||
const resetBtn = document.getElementById('resetBtn');
|
||||
|
||||
let panzoomInstance = null;
|
||||
let currentScale = 1;
|
||||
|
||||
// Initialize Mermaid
|
||||
mermaid.initialize({
|
||||
startOnLoad: false,
|
||||
theme: 'default',
|
||||
flowchart: {
|
||||
useMaxWidth: false,
|
||||
htmlLabels: true,
|
||||
curve: 'basis'
|
||||
}
|
||||
});
|
||||
|
||||
// Build hierarchical structure from paths
|
||||
function buildDiagramHierarchy(diagrams) {
|
||||
const hierarchy = {};
|
||||
|
||||
diagrams.forEach(diagram => {
|
||||
const parts = diagram.path.split('/');
|
||||
// Remove 'assets/diagrams/' prefix
|
||||
const relevantParts = parts.slice(2, -1); // Everything except filename
|
||||
const filename = parts[parts.length - 1].replace('.mermaid', '');
|
||||
|
||||
let current = hierarchy;
|
||||
relevantParts.forEach(part => {
|
||||
if (!current[part]) {
|
||||
current[part] = { _items: [], _children: {} };
|
||||
}
|
||||
current = current[part]._children;
|
||||
});
|
||||
|
||||
// Add the item to the last level
|
||||
const lastLevel = relevantParts.length > 0 ?
|
||||
relevantParts.reduce((acc, part) => acc[part]._children, hierarchy) :
|
||||
hierarchy;
|
||||
|
||||
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 {
|
||||
if (!hierarchy._root) {
|
||||
hierarchy._root = { _items: [], _children: {} };
|
||||
}
|
||||
hierarchy._root._items.push(diagram);
|
||||
}
|
||||
});
|
||||
|
||||
return hierarchy;
|
||||
}
|
||||
|
||||
// Create navigation from hierarchy
|
||||
function createNavigation(hierarchy, parentElement, level = 0) {
|
||||
Object.keys(hierarchy).forEach(key => {
|
||||
if (key === '_items' || key === '_children' || key === '_root') return;
|
||||
|
||||
const section = hierarchy[key];
|
||||
const heading = document.createElement('div');
|
||||
heading.className = level === 0 ? 'sidebar-heading' : 'sidebar-subheading';
|
||||
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.className = `nav-link ${level > 0 ? 'sub-item' : ''}`;
|
||||
link.href = '#';
|
||||
link.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
showView('diagram', link, diagram.path, diagram.title, 'mermaid');
|
||||
};
|
||||
link.innerHTML = `<i class="bi bi-file-earmark-code"></i>${diagram.title}`;
|
||||
parentElement.appendChild(link);
|
||||
});
|
||||
}
|
||||
|
||||
// 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() {
|
||||
const dynamicSection = document.getElementById('dynamic-diagrams-section');
|
||||
|
||||
try {
|
||||
// Fetch the diagrams configuration from JSON file
|
||||
const response = await fetch('./assets/diagrams/diagrams-config.json');
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to load diagrams config: ${response.status}`);
|
||||
}
|
||||
|
||||
mermaidDiagrams = await response.json();
|
||||
|
||||
if (mermaidDiagrams.length > 0) {
|
||||
const mainHeading = document.createElement('div');
|
||||
mainHeading.className = 'sidebar-heading';
|
||||
mainHeading.textContent = 'Mermaid Diagrams';
|
||||
dynamicSection.appendChild(mainHeading);
|
||||
|
||||
const hierarchy = buildDiagramHierarchy(mermaidDiagrams);
|
||||
createNavigation(hierarchy, dynamicSection);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading diagrams configuration:', error);
|
||||
dynamicSection.innerHTML = `<div class="alert alert-warning m-2 small">No Mermaid diagrams configuration found</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function setActiveNav(activeLink) {
|
||||
document.querySelectorAll('.sidebar .nav-link').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
activeLink.classList.add('active');
|
||||
}
|
||||
|
||||
async function showView(viewName, navLink, filePath, title, type = 'svg') {
|
||||
setActiveNav(navLink);
|
||||
if (panzoomInstance) {
|
||||
panzoomInstance.destroy();
|
||||
panzoomInstance = null;
|
||||
}
|
||||
diagramContainer.innerHTML = '';
|
||||
currentScale = 1;
|
||||
|
||||
if (viewName === 'home') {
|
||||
homeView.style.display = 'block';
|
||||
diagramViewer.style.display = 'none';
|
||||
} else if (viewName === 'diagram') {
|
||||
homeView.style.display = 'none';
|
||||
diagramViewer.style.display = 'flex';
|
||||
diagramTitle.textContent = title;
|
||||
diagramContainer.innerHTML = '<div class="loading-spinner"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>';
|
||||
|
||||
try {
|
||||
if (type === 'svg') {
|
||||
// Load static SVG files
|
||||
const response = await fetch(filePath);
|
||||
if (!response.ok) throw new Error(`Network error: ${response.status}`);
|
||||
const svgContent = await response.text();
|
||||
|
||||
const parser = new DOMParser();
|
||||
const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
|
||||
const svgElement = svgDoc.querySelector('svg');
|
||||
|
||||
if (svgElement) {
|
||||
diagramContainer.innerHTML = '';
|
||||
diagramContainer.appendChild(svgElement);
|
||||
panzoomInstance = Panzoom(svgElement, {
|
||||
canvas: true,
|
||||
maxScale: 10,
|
||||
minScale: 0.3,
|
||||
startScale: 1
|
||||
});
|
||||
diagramContainer.addEventListener('wheel', panzoomInstance.zoomWithWheel);
|
||||
diagramContainer.focus();
|
||||
} else {
|
||||
throw new Error('No SVG element found.');
|
||||
}
|
||||
} else if (type === 'mermaid') {
|
||||
// Load and render Mermaid files
|
||||
const response = await fetch(filePath);
|
||||
if (!response.ok) throw new Error(`Network error: ${response.status}`);
|
||||
const mermaidCode = await response.text();
|
||||
|
||||
const { svg } = await mermaid.render('mermaidDiagram_' + Date.now(), mermaidCode);
|
||||
|
||||
diagramContainer.innerHTML = svg;
|
||||
const svgElement = diagramContainer.querySelector('svg');
|
||||
|
||||
if (svgElement) {
|
||||
svgElement.style.maxWidth = 'none';
|
||||
svgElement.style.height = 'auto';
|
||||
|
||||
panzoomInstance = Panzoom(svgElement, {
|
||||
canvas: true,
|
||||
maxScale: 10,
|
||||
minScale: 0.3,
|
||||
startScale: 1
|
||||
});
|
||||
diagramContainer.addEventListener('wheel', panzoomInstance.zoomWithWheel);
|
||||
diagramContainer.focus();
|
||||
} else {
|
||||
throw new Error('Failed to render Mermaid diagram.');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
diagramContainer.innerHTML = `<div class="alert alert-danger m-3">Failed to load diagram: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
zoomInBtn.addEventListener('click', () => {
|
||||
if (panzoomInstance) {
|
||||
panzoomInstance.zoomIn();
|
||||
diagramContainer.focus();
|
||||
}
|
||||
});
|
||||
|
||||
zoomOutBtn.addEventListener('click', () => {
|
||||
if (panzoomInstance) {
|
||||
panzoomInstance.zoomOut();
|
||||
diagramContainer.focus();
|
||||
}
|
||||
});
|
||||
|
||||
resetBtn.addEventListener('click', () => {
|
||||
if (panzoomInstance) {
|
||||
panzoomInstance.reset();
|
||||
diagramContainer.focus();
|
||||
}
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadDynamicDiagrams();
|
||||
showView('home', document.getElementById('nav-home'));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -1,261 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>KROW Launchpad</title>
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
|
||||
<!-- Custom CSS -->
|
||||
<style>
|
||||
body {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.main-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 280px 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background-color: #ffffff;
|
||||
border-right: 1px solid #dee2e6;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
color: #495057;
|
||||
font-weight: 500;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition: color 0.2s, background-color 0.2s;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active,
|
||||
.sidebar .nav-link:hover {
|
||||
color: #0d6efd;
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #6c757d;
|
||||
text-transform: uppercase;
|
||||
padding: 0 1rem;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#diagram-viewer {
|
||||
display: none; /* Hidden by default */
|
||||
height: calc(100vh - 4rem); /* Full height minus padding */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#diagram-container {
|
||||
cursor: grab;
|
||||
overflow: hidden;
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
background-color: #ffffff;
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid #dee2e6;
|
||||
}
|
||||
#diagram-container:focus { outline: none; }
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="main-layout">
|
||||
<!-- Sidebar -->
|
||||
<nav class="sidebar">
|
||||
<div class="d-flex justify-content-center align-items-center mb-4">
|
||||
<img src="logo.svg" alt="Krow Logo" style="height: 60px;">
|
||||
</div>
|
||||
<div class="nav flex-column nav-pills">
|
||||
<a class="nav-link active" href="#" id="nav-home" onclick="showView('home', this)">
|
||||
<i class="bi bi-house-door"></i>Home
|
||||
</a>
|
||||
|
||||
<div class="sidebar-heading">Diagrams</div>
|
||||
|
||||
<a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/high-level-overview.svg', 'Apps High-Level Overview')">
|
||||
<i class="bi bi-diagram-3"></i>High-Level Overview
|
||||
</a>
|
||||
<a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/shift-lifecycle-workflow.svg', 'Core Workflow - Shift Lifecycle')">
|
||||
<i class="bi bi-arrow-repeat"></i>Shift Lifecycle
|
||||
</a>
|
||||
<a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/invoice-workflow.svg', 'Invoice Workflow - Complete')">
|
||||
<i class="bi bi-receipt"></i>Invoice Workflow
|
||||
</a>
|
||||
<a class="nav-link" href="#" onclick="showView('diagram', this, './assets/diagrams/complete-workflow.svg', 'Complete Workflow')">
|
||||
<i class="bi bi-infinity"></i>Complete Workflow
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Main Content Area -->
|
||||
<main class="content-area">
|
||||
<!-- View 1: Home Content -->
|
||||
<div id="home-view">
|
||||
<h2 class="mb-4">Welcome to the Project Launchpad</h2>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header"><h3>Applications</h3></div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a target="_blank" href="#">Control Tower (Dev)</a>
|
||||
<span class="badge bg-primary rounded-pill">Dev</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a target="_blank" href="#">Control Tower (Staging)</a>
|
||||
<span class="badge bg-warning text-dark rounded-pill">Staging</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header"><h3>Legacy Mobile Apps</h3></div>
|
||||
<div class="card-body">
|
||||
<ul class="list-group list-group-flush">
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a target="_blank" href="https://play.google.com/store/apps/dev?id=9163719228191263405&hl=en">Google Play Store</a>
|
||||
<span class="badge bg-success rounded-pill">Live</span>
|
||||
</li>
|
||||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||||
<a target="_blank" href="https://apps.apple.com/us/developer/thinkloops-llc/id1719034287">Apple App Store</a>
|
||||
<span class="badge bg-success rounded-pill">Live</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card shadow-sm mb-4">
|
||||
<div class="card-header"><h3>Access & Resources</h3></div>
|
||||
<div class="card-body">
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="https://github.com/Oloodi/krow-workforce" target="_blank" class="list-group-item list-group-item-action">
|
||||
<div class="fw-bold">GitHub Repository</div>
|
||||
</a>
|
||||
<a href="https://chat.google.com/" target="_blank" class="list-group-item list-group-item-action">
|
||||
<div class="fw-bold">Team Communication</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- View 2: Diagram Viewer -->
|
||||
<div id="diagram-viewer">
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h3 id="diagram-title" class="mb-0"></h3>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-outline-secondary" id="zoomInBtn" title="Zoom In"><i class="bi bi-zoom-in"></i></button>
|
||||
<button type="button" class="btn btn-outline-secondary" id="zoomOutBtn" title="Zoom Out"><i class="bi bi-zoom-out"></i></button>
|
||||
<button type="button" class="btn btn-outline-secondary" id="resetBtn" title="Reset View"><i class="bi bi-aspect-ratio"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="diagram-container" tabindex="-1">
|
||||
<!-- SVG will be loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
|
||||
|
||||
<script>
|
||||
const homeView = document.getElementById('home-view');
|
||||
const diagramViewer = document.getElementById('diagram-viewer');
|
||||
const diagramContainer = document.getElementById('diagram-container');
|
||||
const diagramTitle = document.getElementById('diagram-title');
|
||||
|
||||
const zoomInBtn = document.getElementById('zoomInBtn');
|
||||
const zoomOutBtn = document.getElementById('zoomOutBtn');
|
||||
const resetBtn = document.getElementById('resetBtn');
|
||||
|
||||
let panzoomInstance = null;
|
||||
|
||||
function setActiveNav(activeLink) {
|
||||
document.querySelectorAll('.sidebar .nav-link').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
});
|
||||
activeLink.classList.add('active');
|
||||
}
|
||||
|
||||
async function showView(viewName, navLink, svgPath, title) {
|
||||
setActiveNav(navLink);
|
||||
if (panzoomInstance) panzoomInstance.destroy();
|
||||
diagramContainer.innerHTML = '';
|
||||
|
||||
if (viewName === 'home') {
|
||||
homeView.style.display = 'block';
|
||||
diagramViewer.style.display = 'none';
|
||||
} else if (viewName === 'diagram') {
|
||||
homeView.style.display = 'none';
|
||||
diagramViewer.style.display = 'flex';
|
||||
diagramTitle.textContent = title;
|
||||
diagramContainer.innerHTML = '<div class="d-flex justify-content-center align-items-center h-100"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>';
|
||||
|
||||
try {
|
||||
const response = await fetch(svgPath);
|
||||
if (!response.ok) throw new Error(`Network error: ${response.status}`);
|
||||
const svgContent = await response.text();
|
||||
|
||||
const parser = new DOMParser();
|
||||
const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
|
||||
const svgElement = svgDoc.querySelector('svg');
|
||||
|
||||
if (svgElement) {
|
||||
diagramContainer.innerHTML = '';
|
||||
diagramContainer.appendChild(svgElement);
|
||||
panzoomInstance = Panzoom(svgElement, {
|
||||
canvas: true,
|
||||
maxScale: 10,
|
||||
minScale: 0.3,
|
||||
zoomOnDblClick: false
|
||||
});
|
||||
diagramContainer.addEventListener('wheel', panzoomInstance.zoomWithWheel);
|
||||
diagramContainer.focus();
|
||||
} else {
|
||||
throw new Error('No SVG element found.');
|
||||
}
|
||||
} catch (error) {
|
||||
diagramContainer.innerHTML = `<div class="alert alert-danger m-3">Failed to load diagram: ${error.message}</div>`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
zoomInBtn.addEventListener('click', () => { panzoomInstance?.zoomIn(); diagramContainer.focus(); });
|
||||
zoomOutBtn.addEventListener('click', () => { panzoomInstance?.zoomOut(); diagramContainer.focus(); });
|
||||
resetBtn.addEventListener('click', () => { panzoomInstance?.reset(); diagramContainer.focus(); });
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
showView('home', document.getElementById('nav-home'));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user