You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Indian MSMEs run on spreadsheets, WhatsApp groups, and manual follow-ups. Tasks get lost, attendance is tracked on paper, leave requests vanish in chat threads, and managers spend more time chasing updates than managing work. There is no single source of truth.
OptiFlow OS replaces that chaos with a structured execution platform.
Pain Point
How OptiFlow Solves It
Tasks are assigned verbally or over WhatsApp
Structured task creation with priority, status, due dates, and assignment tracking
No one knows who is doing what
Role-based dashboards with real-time visibility for Doers, Captains, and Admins
Attendance is on paper or sporadic GPS
Digital check-in/check-out with WFO/WFH modes, correction requests, and team-wide monitoring
Team member list with workload, performance, and drill-down
Worklists
Leave Approvals
Attendance
Create and assign SOP checklists to team members
Approve/reject leave with buddy transfer management
Team-wide attendance with late arrivals and corrections
Training
Tickets
Profile
Assign training modules and track team completion
Respond to and assign team help tickets
Captain profile and preferences
Admin Panel
Dashboard
Employees
Departments
Organization-wide KPIs, alerts, and system health
Full employee lifecycle: create, edit, disable, offboard
Create and manage departments, assign heads
Attendance
Leave
Training
Full organization attendance overview and corrections
Org-wide leave calendar and management
Create training modules and track org-wide completion
Tickets
Insights
Control Center
Full ticket lifecycle: assign, escalate, resolve
Organization-wide analytics, trends, and reports
System settings, role permissions, audit logs
System Architecture
Role Hierarchy
graph TD
A[Admin Level 2] -->|Manages| B[Captain Level 1]
B -->|Supervises| C[Doer Level 0]
style A fill:#475569,color:#fff
style B fill:#D97706,color:#fff
style C fill:#2563EB,color:#fff
Loading
Frontend Architecture
graph TD
subgraph Auth["Authentication (5 pages)"]
A1[Login] --> A2[OTP Verify]
A1 --> A3[Forgot Password]
A3 --> A4[Reset Password]
A2 --> A5[Profile Wizard]
end
subgraph Shell["DefaultLayout.vue (Shell)"]
S1[AppSidebar] --- S2[AppHeader]
S2 --- S3["<router-view/>"]
S3 --- S4[BottomNav]
S3 --- S5[NotificationCenter]
end
subgraph Panels["Role Panels"]
D[DoerLayout] --> D1["12 pages<br/>Tasks, Attendance, Leave, Training, Tickets"]
C2[CaptainLayout] --> C3["12 pages<br/>Rescue, Team, Approvals, Monitor"]
A6[AdminLayout] --> A7["17 pages<br/>Employees, Insights, Control Center"]
end
Shell --> D
Shell --> C2
Shell --> A6
subgraph Data["Data Layer"]
P[Pinia Stores<br/>9 stores] --> S[Services<br/>13 services]
S --> API[API Client<br/>Axios + Interceptors]
API --> BE[Backend<br/>Frappe/Django REST API]
end
D1 --> P
C3 --> P
A7 --> P
Loading
Service Layer
graph LR
subgraph Stores["Pinia Stores (9)"]
US[useStore]
TS[taskStore]
RS[rescueStore]
AS[attendanceStore]
WS[workflowStore]
OS[offlineStore]
NS[notificationStore]
TKS[ticketStore]
ADS[adminStore]
end
subgraph Services["Service Layer (13)"]
BS[BaseService<br/>Cache 30s TTL<br/>Dedup + Retry 3x]
AUTH[authService]
TASK[taskService]
RESC[rescueService]
ATT[attendanceService]
LV[leaveService]
EMP[employeeService]
TRN[trainingService]
TKT[ticketService]
WL[worklistService]
DEP[departmentService]
NOT[notificationService]
RT[realtimeService]
end
subgraph Mock["Mock Data Fallback<br/>(when VITE_ENABLE_MOCK=true<br/>or network error)"]
M1[tasks.ts]
M2[attendance.ts]
M3[leave.ts]
M4[tickets.ts]
M5[training.ts]
M6[rescue.ts]
M7[employees.ts]
end
BS -->|fetchList/fetchOne| M1 & M2 & M3 & M4 & M5 & M6 & M7
BS -->|mutate| API[Real API Endpoints]
API --> BACKEND[Frappe/Django Backend]
BACKEND --> DB[(PostgreSQL)]
AUTH --> BS
TASK --> BS
RESC --> BS
ATT --> BS
LV --> BS
EMP --> BS
TRN --> BS
TKT --> BS
WL --> BS
DEP --> BS
NOT --> BS
US & TS & RS & AS & WS & OS & NS & TKS & ADS --> AUTH & TASK & RESC & ATT & LV & EMP & TRN & TKT & WL & DEP & NOT & RT
Loading
Client-Side Data Flow
sequenceDiagram
participant P as Page (Vue Component)
participant S as Pinia Store
participant SV as Service
participant BS as BaseService
participant API as API Client (Axios)
participant BE as Backend
P->>S: dispatch action
S->>SV: call service method
SV->>BS: fetchList() / fetchOne() / mutate()
BS->>API: apiGet / apiPost / ...
API->>BE: HTTP Request
BE-->>API: Response
API-->>BS: ApiResponse<T>
BS-->>SV: unwrapped data
SV-->>S: update reactive state
S-->>P: Vue reactivity re-renders UI
Note over BS,API: On network error or VITE_ENABLE_MOCK=true
BS-->>SV: return mock data
SV-->>S: update state with mock
S-->>P: UI renders with fallback data
Loading
Product Workflows
Task Lifecycle
graph LR
A[Create Task] --> B{Assigned To}
B -->|Doer| C[In Progress]
B -->|Captain Review| D[Under Review]
C --> E[Completed]
D --> E
E --> F[Resolved]
F --> G{Overdue?}
G -->|No| H[Done]
G -->|Yes| I[Rescue Triggered]
I --> J[Captain Reminder]
J --> K[Reassign / Escalate]
Loading
Rescue Management
graph TD
A[Task Overdue or Blocked] --> B{Severity Check}
B -->|soft| C[Toast Alert]
B -->|warning| D[Captain Dashboard Alert]
B -->|high_risk| E[Notification + Email]
B -->|admin_escalation| F[Admin Alert]
C & D & E & F --> G[Captain Reviews Rescue Detail]
G --> H{Action}
H --> I[Send Reminder]
H --> J[Reassign Task]
H --> K[Escalate to Admin]
H --> L[Resolve Rescue]
Loading
Leave + Buddy Workflow
graph TD
A[Employee Applies Leave] --> B[Select Dates + Type]
B --> C[Assign Buddy]
C --> D{Within 48h?}
D -->|Yes| E[Captain Approves/Rejects]
D -->|No| F[Auto-Escalate to Admin]
E --> G{Buddy Reverted?}
G -->|Yes| H[Auto-Restore Tasks]
G -->|No| I[Leave Active]
F --> J[Admin Approves/Rejects]
H --> K[Leave Complete]
I --> K
J --> K
Loading
Training Lifecycle
graph LR
A[Admin Creates Module] --> B[Captain Assigns to Team]
B --> C[Doer Views Content]
C --> D{Content Type}
D -->|SOP| E[Read & Acknowledge]
D -->|Video| F[Watch & Mark Complete]
D -->|Guide| G[Read & Complete]
E & F & G --> H[Progress Updated]
H --> I[Marked Complete]
Loading
Ticket Flow
graph TD
A[Doer Raises Ticket] --> B{Category}
B -->|Technical| C[Auto-Assigned to IT]
B -->|HR| D[Auto-Assigned to HR]
B -->|Operations| E[Auto-Assigned to Captain]
C & D & E --> F[Captain/Admin Responds]
F --> G{Resolution}
G -->|Resolved| H[Doer Rates Experience]
G -->|Needs Escalation| I[Escalate to Admin]
I --> J[Admin Resolves]
H --> K[Ticket Closed]
J --> K
Loading
Attendance Flow
graph LR
A[Doer Checks In] --> B{Work Mode}
B -->|WFO| C[Office Attendance Logged]
B -->|WFH| D[Home Attendance Logged]
A --> E[Doer Checks Out]
C & D --> E
E --> F{Correction Needed?}
F -->|Yes| G[Submit Correction]
G --> H[Captain Reviews]
H --> I[Approved/Rejected]
F -->|No| J[Attendance Complete]
Loading
Technology Stack
Frontend
Technology
Version
Why It's Used
Vue 3
^3.5.34
Composition API for clean, reactive component logic
TypeScript
^6.0.3
End-to-end type safety across the entire codebase
Vite
^8.0.12
Sub-second HMR during development; fast production builds with code splitting
Pinia
^3.0.4
Modular state management with TypeScript support and localStorage persistence
Vue Router
^4.6.4
Lazy-loaded routes per role; auth guards; deep-link preservation
Axios
^1.7.9
HTTP client with interceptors for auth tokens, CSRF, retry, and error handling
Tailwind CSS
^3.4.19
Utility-first CSS for rapid UI development; consistent design tokens
Headless UI
^1.7.23
Accessible, unstyled UI primitives for modals, dropdowns, and menus
vue-i18n
^11.4.4
Full internationalization with 3 locales (EN, HI, Hinglish)
Sentry
^10.56.0
Production error tracking with source maps
Backend (Planned)
Technology
Purpose
Frappe / Django
Application framework with built-in admin, permission system, and REST API
PostgreSQL
Primary relational database
Redis
Caching and real-time pub/sub for notifications
Development & Quality
Technology
Purpose
ESLint + Prettier
Code quality and formatting enforcement
vue-tsc
TypeScript type checking for Vue SFCs
Vitest + jsdom
Unit and integration tests
Playwright
End-to-end browser tests
Design Token System
276-line CSS custom property system covering brand colors, typography, spacing, dark mode, high-contrast, reduced-motion
Quick Start
Prerequisites
Node.js 20+
npm 9+ (or pnpm 8+)
Git
Setup
# Clone the repository
git clone https://github.com/your-org/optiflow-os.git
cd optiflow-os/frontend
# Install dependencies
npm install
# Configure environment
cp .env.example .env.development
Full API integration across all modules (all services use BaseService with mock fallback)
Error handling completeness: loading, empty, error, retry states everywhere
Security hardening and audit
Bundle optimization and code splitting
v1.0 — Feature Complete
Module
Status
Rescue Management
✅ Complete
Worklist + Checklist Management
✅ Complete
Training System
✅ Complete
Attendance Tracking
✅ Complete
Leave Management
✅ Complete
Help Desk / Tickets
✅ Complete
Employee Management
✅ Complete
Department Management
✅ Complete
Notifications (SSE/WebSocket)
🔄 Real-time subscription implemented
Multi-Language (EN/HI/Hinglish)
✅ Complete
Dark Mode + High-Contrast
✅ Complete
Offline Mutation Queue
✅ Complete
Design System (22 components)
✅ Complete
Next — Enhanced Intelligence
Feature
Priority
AI Task Prioritization
High
AI Rescue Prediction (proactive alerts)
High
AI Performance Analysis
High
AI Workflow Recommendations
Medium
Advanced Analytics Dashboard
High
Future — Platform Expansion
Feature
Priority
Mobile Apps (Android/iOS)
Medium
Push Notifications
Medium
Automated Escalation Rules
Medium
Biometric Attendance
Low
Payroll Integration
Medium
WhatsApp Integration
High
PWA (Service Worker + Manifest)
Planned (deps installed)
Industry-Specific Workflow Templates
Long-term
Marketplace for Extensions
Long-term
Multi-Factory / Multi-Location
Long-term
FAQ
What is OptiFlow OS?
OptiFlow OS is a workflow, operations, and HRMS platform for Indian MSMEs. It replaces spreadsheets, WhatsApp-based coordination, and disconnected tools with a single execution platform featuring three role-based panels.
Who is it for?
Manufacturing units, logistics companies, retail chains, warehouses, and service businesses with 10–500 employees. Any organization that needs structured task management, attendance tracking, leave management, training, and operational visibility.
Can I self-host?
Yes. The frontend is a Vue 3 SPA that connects to a Frappe/Django backend. You can run both on your own infrastructure. See the Quick Start section to get started with the frontend.
Is it open source?
This is a proprietary product. Source code access is governed by the license terms. We may open-source specific components in the future.
How does Rescue work?
The Rescue system automatically detects tasks that are overdue, blocked, or at risk. It assigns a severity level (soft → warning → high_risk → admin_escalation) and surfaces them in the Captain's Rescue Queue with full context (task details, delay duration, assigned employee). Captains can send reminders, reassign tasks, or escalate to admin. Admin has final oversight.
How do Worklists work?
Admins and Captains create structured checklists (daily, weekly, monthly) linked to SOP documents. These are assigned to Doers who execute them shift by shift. Each checklist item can include an SOP document link for reference. Completion is tracked in real-time.
Can employees work offline?
Yes. The app queues mutations (task updates, attendance actions, etc.) in localStorage when offline. When connectivity returns, the queue auto-syncs. Mock data ensures the UI remains functional during network outages.
What languages are supported?
English (EN), Hindi (हिन्दी), and Hinglish. Language can be switched per user from the profile or auth page.
Contributing
We welcome contributions. Please see our guidelines:
This software and its source code are confidential and proprietary. Unauthorized copying, distribution, or use is prohibited without prior written permission.
OptiFlowOS is an all-in-one business operating system for MSMEs that centralizes tasks, SOPs, workflows, attendance, reporting, and team management. Built on the Doer–Captain–Admin framework, it helps businesses improve accountability, streamline operations, and scale efficiently through a single, easy-to-use platform.
