Merge pull request #35 from Oloodi/3-setup-create-internal-developer-launchpad
3 setup create internal developer launchpad
This commit is contained in:
Oloodi Admin
30
.firebaserc
Normal file
30
.firebaserc
Normal file
@@ -0,0 +1,30 @@
|
||||
{
|
||||
"projects": {
|
||||
"default": "krow-workforce-dev",
|
||||
"dev": "krow-workforce-dev",
|
||||
"staging": "krow-workforce-staging"
|
||||
},
|
||||
"targets": {
|
||||
"krow-workforce-dev": {
|
||||
"hosting": {
|
||||
"launchpad": [
|
||||
"krow-workforce-dev-launchpad"
|
||||
],
|
||||
"app-dev": [
|
||||
"krow-workforce-dev"
|
||||
],
|
||||
"app-staging": [
|
||||
"krow-workforce-staging"
|
||||
]
|
||||
}
|
||||
},
|
||||
"krow-workforce-staging": {
|
||||
"hosting": {
|
||||
"app-staging": [
|
||||
"krow-workforce-staging"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"etags": {}
|
||||
}
|
||||
40
Makefile
40
Makefile
@@ -4,11 +4,29 @@
|
||||
# It is designed to be the main entry point for developers.
|
||||
|
||||
# Use .PHONY to declare targets that are not files, to avoid conflicts.
|
||||
.PHONY: install dev build prepare-export help
|
||||
.PHONY: install dev build prepare-export help deploy-launchpad deploy-app
|
||||
|
||||
# The default command to run if no target is specified (e.g., just 'make').
|
||||
.DEFAULT_GOAL := help
|
||||
|
||||
# --- Firebase & GCP Configuration ---
|
||||
GCP_DEV_PROJECT_ID := krow-workforce-dev
|
||||
GCP_STAGING_PROJECT_ID := krow-workforce-staging
|
||||
|
||||
# --- Environment Detection ---
|
||||
ENV ?= dev
|
||||
|
||||
# --- Conditional Variables by Environment ---
|
||||
ifeq ($(ENV),staging)
|
||||
GCP_PROJECT_ID := $(GCP_STAGING_PROJECT_ID)
|
||||
FIREBASE_ALIAS := staging
|
||||
HOSTING_TARGET := app-staging
|
||||
else
|
||||
GCP_PROJECT_ID := $(GCP_DEV_PROJECT_ID)
|
||||
FIREBASE_ALIAS := dev
|
||||
HOSTING_TARGET := app-dev
|
||||
endif
|
||||
|
||||
# Installs all project dependencies using npm.
|
||||
install:
|
||||
@echo "--> Installing web frontend dependencies..."
|
||||
@@ -24,7 +42,7 @@ dev:
|
||||
# Builds the application for production.
|
||||
build:
|
||||
@echo "--> Building web frontend for production..."
|
||||
@cd frontend-web && npm run build
|
||||
@cd frontend-web && VITE_APP_ENV=$(ENV) npm run build
|
||||
|
||||
# Integrates a new Base44 export into the current project.
|
||||
# It replaces the src directory and the index.html file in the frontend-web directory.
|
||||
@@ -45,6 +63,10 @@ integrate-export:
|
||||
@node scripts/patch-base44-client.js
|
||||
@echo " - Patching queryKey in Layout.jsx for local development..."
|
||||
@node scripts/patch-layout-query-key.js
|
||||
@echo " - Patching Dashboard.jsx for environment label..."
|
||||
@node scripts/patch-dashboard-for-env-label.js
|
||||
@echo " - Patching index.html for title..."
|
||||
@node scripts/patch-index-html.js
|
||||
@echo "--> Integration complete. Next step: 'make prepare-export'."
|
||||
|
||||
# Applies all necessary patches to a fresh Base44 export to run it locally.
|
||||
@@ -54,6 +76,15 @@ prepare-export:
|
||||
@node scripts/prepare-export.js
|
||||
@echo "--> Preparation complete. You can now run 'make dev'."
|
||||
|
||||
# --- Firebase Deployment ---
|
||||
deploy-launchpad:
|
||||
@echo "--> Deploying Internal Launchpad to DEV project..."
|
||||
@firebase deploy --only hosting:launchpad --project=dev
|
||||
|
||||
deploy-app: build
|
||||
@echo "--> Deploying Frontend Web App to [$(ENV)] environment..."
|
||||
@firebase deploy --only hosting:$(HOSTING_TARGET) --project=$(FIREBASE_ALIAS)
|
||||
|
||||
# Shows this help message.
|
||||
help:
|
||||
@echo "--------------------------------------------------"
|
||||
@@ -64,6 +95,11 @@ help:
|
||||
@echo " make build - Builds the web frontend for production."
|
||||
@echo " make integrate-export - Integrates a new Base44 export from '../krow-workforce-export-latest'."
|
||||
@echo " make prepare-export - Prepares a fresh Base44 export for local use."
|
||||
@echo ""
|
||||
@echo " --- DEPLOYMENT ---"
|
||||
@echo " make deploy-launchpad - Deploys the internal launchpad (always to dev)."
|
||||
@echo " make deploy-app [ENV=staging] - Builds and deploys the main web app (default: dev)."
|
||||
@echo ""
|
||||
@echo " make help - Shows this help message."
|
||||
@echo "--------------------------------------------------"
|
||||
|
||||
|
||||
@@ -1,58 +1,49 @@
|
||||
{
|
||||
"firestore": {
|
||||
"rules": "firebase/firestore.rules"
|
||||
},
|
||||
"storage": {
|
||||
"rules": "firebase/storage.rules"
|
||||
},
|
||||
"hosting": [
|
||||
{
|
||||
"target": "dev",
|
||||
"public": "frontend-web/dist",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"target": "staging",
|
||||
"public": "frontend-web/dist",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"target": "prod",
|
||||
"public": "frontend-web/dist",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"target": "internal-launchpad",
|
||||
"target": "launchpad",
|
||||
"public": "firebase/internal-launchpad",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
]
|
||||
},
|
||||
{
|
||||
"target": "app-dev",
|
||||
"public": "frontend-web/dist",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"target": "app-staging",
|
||||
"public": "frontend-web/dist",
|
||||
"ignore": [
|
||||
"firebase.json",
|
||||
"**/.*",
|
||||
"**/node_modules/**"
|
||||
],
|
||||
"rewrites": [
|
||||
{
|
||||
"source": "**",
|
||||
"destination": "/index.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -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 |
@@ -5,243 +5,363 @@
|
||||
<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">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.svg">
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Mermaid -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.6.1/mermaid.min.js"></script>
|
||||
<!-- Custom CSS -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js"></script>
|
||||
|
||||
<!-- Custom Tailwind Config -->
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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;
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
||||
|
||||
* {
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.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;
|
||||
.gradient-bg {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.sidebar-subheading {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
color: #868e96;
|
||||
padding: 0 1rem 0 2rem;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0.25rem;
|
||||
|
||||
.card-hover {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.nav-link.sub-item {
|
||||
padding-left: 2.5rem;
|
||||
font-size: 0.9rem;
|
||||
|
||||
.card-hover:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||||
}
|
||||
|
||||
.nav-link.sub-sub-item {
|
||||
padding-left: 3.5rem;
|
||||
font-size: 0.85rem;
|
||||
|
||||
.nav-item {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 2rem;
|
||||
overflow-y: auto;
|
||||
|
||||
.nav-item:hover {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
#diagram-viewer {
|
||||
|
||||
.badge-pulse {
|
||||
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: .7;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
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;
|
||||
.scrollbar-hide {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
|
||||
#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">
|
||||
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
|
||||
<div class="flex h-screen overflow-hidden">
|
||||
|
||||
<!-- 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'">
|
||||
<aside class="w-72 bg-white shadow-xl flex flex-col border-r border-gray-200">
|
||||
<!-- Logo Section -->
|
||||
<div class="p-6 border-b border-gray-200">
|
||||
<div class="flex items-center justify-center space-x-3">
|
||||
<div class="w-12 h-12 rounded-xl flex items-center justify-center">
|
||||
<img src="logo.svg" alt="Krow Logo" style="height: 60px;" onerror="this.style.display='none'">
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-gray-900">KROW</h1>
|
||||
<p class="text-xs text-gray-500">Workforce Platform</p>
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav class="flex-1 overflow-y-auto scrollbar-hide p-4" id="sidebar-nav">
|
||||
<a href="#" id="nav-home" onclick="showView('home', this)"
|
||||
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 bg-primary-50 border border-primary-200 font-medium mb-2">
|
||||
<svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
||||
</svg>
|
||||
<span>Home</span>
|
||||
</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 -->
|
||||
<!-- Dynamic diagrams section - ALL diagrams loaded here -->
|
||||
<div id="dynamic-diagrams-section"></div>
|
||||
</nav>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="p-4 border-t border-gray-200 bg-gray-50">
|
||||
<div class="flex items-center space-x-2 text-xs text-gray-500">
|
||||
<div class="w-2 h-2 bg-green-500 rounded-full badge-pulse"></div>
|
||||
<span>System Online</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</aside>
|
||||
|
||||
<!-- 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>
|
||||
<main class="flex-1 overflow-y-auto">
|
||||
|
||||
<!-- Home View -->
|
||||
<div id="home-view" class="p-8">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-3xl font-bold text-gray-900 mb-2">Welcome to KROW Launchpad</h2>
|
||||
<p class="text-gray-600">Your central hub for workforce management infrastructure</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Applications Card -->
|
||||
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">Applications</h3>
|
||||
</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 class="space-y-3">
|
||||
<a href="https://krow-workforce-dev.web.app" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl hover:from-blue-100 hover:to-blue-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
|
||||
<span class="font-medium text-gray-900 group-hover:text-blue-700">Control Tower</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
||||
</a>
|
||||
|
||||
<a href="https://krow-workforce-staging.web.app" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-amber-100 rounded-xl hover:from-amber-100 hover:to-amber-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="w-2 h-2 bg-amber-500 rounded-full"></div>
|
||||
<span class="font-medium text-gray-900 group-hover:text-amber-700">Control Tower</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Legacy Mobile Apps Card -->
|
||||
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">Legacy Mobile Apps</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<a href="https://play.google.com/store/apps/dev?id=9163719228191263405&hl=en" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-emerald-100 rounded-xl hover:from-green-100 hover:to-emerald-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-green-700">Google Play Store</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-green-500 text-white text-xs font-semibold rounded-full">Live</span>
|
||||
</a>
|
||||
|
||||
<a href="https://apps.apple.com/us/developer/thinkloops-llc/id1719034287" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:from-gray-100 hover:to-gray-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-gray-700">Apple App Store</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-gray-700 text-white text-xs font-semibold rounded-full">Live</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cloud Consoles Card -->
|
||||
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">Cloud Infrastructure</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<a href="https://console.firebase.google.com/project/krow-workforce-dev/overview" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-indigo-100 rounded-xl hover:from-blue-100 hover:to-indigo-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-indigo-700">Firebase Console</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
||||
</a>
|
||||
|
||||
<a href="https://console.firebase.google.com/project/krow-workforce-staging/overview" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-orange-100 rounded-xl hover:from-amber-100 hover:to-orange-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-orange-700">Firebase Console</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
||||
</a>
|
||||
|
||||
<a href="https://console.cloud.google.com/welcome/new?project=krow-workforce-dev" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-cyan-100 rounded-xl hover:from-blue-100 hover:to-cyan-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-cyan-700">Google Cloud</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
||||
</a>
|
||||
|
||||
<a href="https://console.cloud.google.com/welcome/new?project=krow-workforce-staging" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-yellow-100 rounded-xl hover:from-amber-100 hover:to-yellow-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z"></path>
|
||||
</svg>
|
||||
<span class="font-medium text-gray-900 group-hover:text-yellow-700">Google Cloud</span>
|
||||
</div>
|
||||
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Access & Resources Card -->
|
||||
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
||||
<div class="flex items-center space-x-3 mb-6">
|
||||
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-gray-900">Resources</h3>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<a href="https://github.com/Oloodi/krow-workforce" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-slate-100 rounded-xl hover:from-gray-100 hover:to-slate-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-gray-900" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 group-hover:text-gray-700">GitHub Repository</div>
|
||||
<div class="text-xs text-gray-500">View source code</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="https://chat.google.com/" target="_blank"
|
||||
class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-teal-100 rounded-xl hover:from-green-100 hover:to-teal-200 transition-all group">
|
||||
<div class="flex items-center space-x-3">
|
||||
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
||||
</svg>
|
||||
<div>
|
||||
<div class="font-medium text-gray-900 group-hover:text-teal-700">Team Communication</div>
|
||||
<div class="text-xs text-gray-500">Google Chat</div>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</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>
|
||||
|
||||
<!-- Diagram Viewer -->
|
||||
<div id="diagram-viewer" class="hidden h-full flex flex-col p-8">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 id="diagram-title" class="text-2xl font-bold text-gray-900"></h3>
|
||||
<div class="flex items-center space-x-2 bg-white rounded-xl shadow-lg p-2 border border-gray-200">
|
||||
<button id="zoomInBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Zoom In">
|
||||
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="zoomOutBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Zoom Out">
|
||||
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
<button id="resetBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Reset View">
|
||||
<svg class="w-5 h-5 text-gray-700" 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>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="diagram-container" tabindex="-1">
|
||||
<div id="diagram-container" tabindex="-1"
|
||||
class="flex-1 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden cursor-grab flex items-center justify-center p-8">
|
||||
<!-- 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>
|
||||
<!-- Panzoom -->
|
||||
<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');
|
||||
const diagramTitle = document.getElementById('diagram-title');
|
||||
|
||||
const zoomInBtn = document.getElementById('zoomInBtn');
|
||||
const zoomOutBtn = document.getElementById('zoomOutBtn');
|
||||
const resetBtn = document.getElementById('resetBtn');
|
||||
@@ -266,9 +386,7 @@
|
||||
|
||||
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', '');
|
||||
const relevantParts = parts.slice(2, -1); // Remove 'assets/diagrams/' and filename
|
||||
|
||||
let current = hierarchy;
|
||||
relevantParts.forEach(part => {
|
||||
@@ -278,22 +396,15 @@
|
||||
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;
|
||||
|
||||
// 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: {} };
|
||||
}
|
||||
@@ -306,27 +417,33 @@
|
||||
|
||||
// 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;
|
||||
|
||||
const section = hierarchy[key];
|
||||
const heading = document.createElement('div');
|
||||
heading.className = level === 0 ? 'sidebar-heading' : 'sidebar-subheading';
|
||||
heading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider ' +
|
||||
(level === 0 ? 'mt-6 mb-3' : 'mt-4 mb-2 pl-8');
|
||||
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);
|
||||
createDiagramLink(diagram, parentElement, level);
|
||||
});
|
||||
}
|
||||
|
||||
@@ -337,39 +454,72 @@
|
||||
});
|
||||
}
|
||||
|
||||
// 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 {
|
||||
// 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();
|
||||
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 = 'sidebar-heading';
|
||||
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);
|
||||
dynamicSection.innerHTML = `<div class="alert alert-warning m-2 small">No Mermaid diagrams configuration found</div>`;
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
function setActiveNav(activeLink) {
|
||||
document.querySelectorAll('.sidebar .nav-link').forEach(link => {
|
||||
link.classList.remove('active');
|
||||
document.querySelectorAll('.sidebar a').forEach(link => {
|
||||
link.classList.remove('bg-primary-50', 'border', 'border-primary-200', 'text-primary-700');
|
||||
link.classList.add('text-gray-700');
|
||||
});
|
||||
activeLink.classList.add('active');
|
||||
activeLink.classList.remove('text-gray-700');
|
||||
activeLink.classList.add('bg-primary-50', 'border', 'border-primary-200', 'text-primary-700');
|
||||
}
|
||||
|
||||
async function showView(viewName, navLink, filePath, title, type = 'svg') {
|
||||
@@ -382,17 +532,21 @@
|
||||
currentScale = 1;
|
||||
|
||||
if (viewName === 'home') {
|
||||
homeView.style.display = 'block';
|
||||
diagramViewer.style.display = 'none';
|
||||
homeView.classList.remove('hidden');
|
||||
diagramViewer.classList.add('hidden');
|
||||
} else if (viewName === 'diagram') {
|
||||
homeView.style.display = 'none';
|
||||
diagramViewer.style.display = 'flex';
|
||||
homeView.classList.add('hidden');
|
||||
diagramViewer.classList.remove('hidden');
|
||||
diagramTitle.textContent = title;
|
||||
diagramContainer.innerHTML = '<div class="loading-spinner"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div></div>';
|
||||
diagramContainer.innerHTML = `
|
||||
<div class="flex flex-col items-center space-y-3">
|
||||
<div class="w-12 h-12 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin"></div>
|
||||
<p class="text-gray-600 font-medium">Loading diagram...</p>
|
||||
</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();
|
||||
@@ -416,7 +570,6 @@
|
||||
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();
|
||||
@@ -443,7 +596,17 @@
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
diagramContainer.innerHTML = `<div class="alert alert-danger m-3">Failed to load diagram: ${error.message}</div>`;
|
||||
diagramContainer.innerHTML = `
|
||||
<div class="bg-red-50 border border-red-200 rounded-xl p-6 max-w-md">
|
||||
<div class="flex items-center space-x-3 mb-2">
|
||||
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
||||
</svg>
|
||||
<h4 class="font-bold text-red-900">Failed to load diagram</h4>
|
||||
</div>
|
||||
<p class="text-red-700 text-sm">${error.message}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -470,10 +633,10 @@
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadDynamicDiagrams();
|
||||
loadAllDiagrams();
|
||||
showView('home', document.getElementById('nav-home'));
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
@@ -1,45 +1,18 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Adobe Illustrator 29.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<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="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
|
||||
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>
|
||||
<g>
|
||||
<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>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st1" d="M83.32,255.47c-1.7-2.2-1.67-5.29,0.07-7.46l20.19-25.12c5.63-7.01,3.73-16.22-4.64-19.53
|
||||
c-5.29-2.09-10.99-0.39-14.28,3.75l-32.67,41v-32.24c0-6.63-4.77-12.68-11.38-13.34c-7.59-0.76-13.99,5.18-13.99,12.62v80.99
|
||||
c0,6.63,4.77,12.68,11.37,13.34C45.6,310.24,52,304.3,52,296.86v-12.73l11.65-13.22l25.12,33.69c2.33,3.12,5.99,4.95,9.87,4.95
|
||||
h1.4c10.23,0,16-11.75,9.74-19.85L83.32,255.47z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st1" d="M306.76,234.3c-5.42,2.52-8.26,8.45-7.01,14.3c0.64,3.01,0.98,6.14,0.98,9.35v0.3c0,0,0,0,0,0.05
|
||||
c0,24.5-19.71,44.44-44.09,45c-22.25-0.13-43.56-9.01-59.31-24.75l-14.06-14.06c0.43-0.17,0.9-0.3,1.33-0.49
|
||||
c5.92-2.62,10.51-6.32,13.77-11.2c1.94-2.91,3.23-6.22,4.02-9.84c0.08-0.37,0.15-0.75,0.22-1.12c0.14-0.79,0.29-1.57,0.38-2.39
|
||||
c0.16-1.38,0.27-2.79,0.27-4.27c0-6.86-1.63-12.73-4.89-17.62c-3.26-4.89-7.85-8.59-13.77-11.2c-5.92-2.62-12.88-3.9-20.82-3.9
|
||||
h-20.73c-12.58,0-22.75,10.21-22.75,22.75v71.65c0,7.01,5.68,12.68,12.73,12.68c3.5,0,6.66-1.43,8.98-3.7
|
||||
c2.27-2.32,3.7-5.48,3.7-8.98V267.9h5.04l28.63,28.63c20.27,20.27,47.65,31.75,76.28,32.13v0.1c0.33,0,0.65-0.05,0.97-0.05
|
||||
c0.16,0,0.32,0.02,0.48,0.02v-0.05c38.16-0.83,69.01-32.05,69.01-70.74c0-5.12-0.54-10.1-1.59-14.91
|
||||
C322.83,235.11,314.11,230.88,306.76,234.3z M173.15,246.68c-3.01,2.07-7.15,3.11-12.43,3.11h-8.98c-3.31,0-6.02-2.71-6.02-6.02
|
||||
v-14.41c0-3.31,2.71-6.02,6.02-6.02h9.53c5.23,0,9.28,1.09,12.09,3.26c2.86,2.17,4.25,5.58,4.25,10.21
|
||||
C177.59,241.3,176.11,244.56,173.15,246.68z"/>
|
||||
</g>
|
||||
</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>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -2,9 +2,9 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="https://base44.com/logo_v2.svg" />
|
||||
<link rel="icon" type="image/svg+xml" href="https://krow-workforce-dev-launchpad.web.app/favicon.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Base44 APP</title>
|
||||
<title>KROW</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -88,7 +88,13 @@ export default function Dashboard() {
|
||||
<div className="p-4 md:p-8 bg-gradient-to-br from-slate-50 to-slate-100 min-h-screen">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<PageHeader
|
||||
title="Welcome to KROW"
|
||||
title={
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Welcome to KROW</span>
|
||||
{import.meta.env.VITE_APP_ENV === 'staging' && <span className="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Staging</span>}
|
||||
{import.meta.env.VITE_APP_ENV === 'dev' && <span className="bg-slate-200 text-slate-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Dev</span>}
|
||||
</div>
|
||||
}
|
||||
subtitle="Your Complete Workforce Management Ecosystem"
|
||||
actions={
|
||||
<>
|
||||
|
||||
35
scripts/patch-dashboard-for-env-label.js
Normal file
35
scripts/patch-dashboard-for-env-label.js
Normal file
@@ -0,0 +1,35 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const projectRoot = path.resolve(__dirname, '..');
|
||||
const dashboardFilePath = path.join(projectRoot, 'frontend-web', 'src', 'pages', 'Dashboard.jsx');
|
||||
|
||||
const oldString = ` <PageHeader
|
||||
title="Welcome to KROW"`;
|
||||
|
||||
const newString = ` <PageHeader
|
||||
title={
|
||||
<div className="flex items-center gap-2">
|
||||
<span>Welcome to KROW</span>
|
||||
{import.meta.env.VITE_APP_ENV === 'staging' && <span className="bg-yellow-100 text-yellow-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Staging</span>}
|
||||
{import.meta.env.VITE_APP_ENV === 'dev' && <span className="bg-slate-200 text-slate-800 text-xs font-semibold px-2.5 py-0.5 rounded-full">Dev</span>}
|
||||
</div>
|
||||
}`;
|
||||
|
||||
try {
|
||||
const content = fs.readFileSync(dashboardFilePath, 'utf8');
|
||||
|
||||
if (content.includes(oldString)) {
|
||||
const newContent = content.replace(oldString, newString);
|
||||
fs.writeFileSync(dashboardFilePath, newContent, 'utf8');
|
||||
console.log('✅ Successfully patched Dashboard.jsx to include environment label.');
|
||||
} else if (content.includes('VITE_APP_ENV')) {
|
||||
console.log('ℹ️ Dashboard.jsx is already patched for environment labels. Skipping.');
|
||||
} else {
|
||||
console.error('❌ Patching Dashboard.jsx failed: Could not find the PageHeader title.');
|
||||
process.exit(1);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ An error occurred during patching Dashboard.jsx:', error);
|
||||
process.exit(1);
|
||||
}
|
||||
41
scripts/patch-index-html.js
Normal file
41
scripts/patch-index-html.js
Normal file
@@ -0,0 +1,41 @@
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const projectRoot = path.resolve(__dirname, '..');
|
||||
const indexPath = path.join(projectRoot, 'frontend-web', 'index.html');
|
||||
|
||||
const oldTitle = '<title>Base44 APP</title>';
|
||||
const newTitle = '<title>KROW</title>';
|
||||
|
||||
const oldFavicon = '<link rel="icon" type="image/svg+xml" href="https://base44.com/logo_v2.svg" />';
|
||||
const newFavicon = '<link rel="icon" type="image/svg+xml" href="https://krow-workforce-dev-launchpad.web.app/favicon.svg" />';
|
||||
|
||||
try {
|
||||
let content = fs.readFileSync(indexPath, 'utf8');
|
||||
|
||||
if (content.includes(oldTitle)) {
|
||||
content = content.replace(oldTitle, newTitle);
|
||||
console.log('✅ Successfully patched title in frontend-web/index.html.');
|
||||
} else if (content.includes(newTitle)) {
|
||||
console.log('ℹ️ index.html title is already patched. Skipping.');
|
||||
} else {
|
||||
console.error('❌ Patching index.html failed: Could not find the expected title tag.');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
if (content.includes(oldFavicon)) {
|
||||
content = content.replace(oldFavicon, newFavicon);
|
||||
console.log('✅ Successfully patched favicon in frontend-web/index.html.');
|
||||
} else if (content.includes(newFavicon)) {
|
||||
console.log('ℹ️ index.html favicon is already patched. Skipping.');
|
||||
} else {
|
||||
console.error('❌ Patching index.html failed: Could not find the expected favicon link.');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
fs.writeFileSync(indexPath, content, 'utf8');
|
||||
|
||||
} catch (error) {
|
||||
console.error('❌ An error occurred during patching index.html:', error);
|
||||
process.exit(1);
|
||||
}
|
||||
Reference in New Issue
Block a user