How diwascha/starweb works
1. Overall shape
- STARWEB is an internal operations suite built on Next.js App Router with modules for HR, payroll, fleet, CRM, finance, procurement, reporting, products, and notes.
- The codebase is organized around domain areas rather than a single generic CRUD app.
2. Primary runtime boundary
- The main application lives under src/app, where each folder is a route or route group.
- Most pages are thin route shells that compose feature-specific client components from colocated _components folders.
3. Presentation layer
- UI is built with ShadCN UI, Tailwind CSS, and Lucide React icons.
- Shared primitives live in src/components/ui, while higher-level shells like the sidebar and auth-aware layout live in src/components.
4. Navigation and app shell
- src/components/app-sidebar.tsx and src/components/auth-aware-layout.tsx define the main navigation and authenticated layout behavior.
- This suggests a single authenticated workspace with module navigation, not a set of independent standalone apps.
5. Backend and data boundary
- The app uses Firebase as its main backend, specifically Firestore and Realtime Database.
- Firebase initialization and providers are centralized in src/firebase and mirrored under src/lib/firebase, indicating shared client-side access patterns.
- firestore.rules is part of the repo, so security rules are treated as a first-class boundary.
6. Service layer
- Business logic is concentrated in src/services, with per-domain services such as:
- employee-service, payroll-service, attendance-service
- purchase-order-service, transaction-service, vehicle-service, driver-service
- report-service, cost-report-service, cheque-service, estimate-invoice-service
- storage-service, backup-service, google-sheets-service
- These services form the main abstraction between UI components and Firebase/external integrations.
7. Feature workflows
- Many domains have both list/dashboard screens and form/detail screens, for example:
- purchase orders: new, edit, list, view
- fleet transactions: purchase and payment receipt flows
- HR: employees, attendance, payroll import, payslip views
- finance: cheque generator, estimate invoice, TDS calculator
- The app is built around operational workflows that create, edit, preview, and print business documents.
8. Document and report generation
- Several modules focus on document output rather than only data entry: purchase order views, payslips, quotations, invoices, cheques, trip sheets, and cost reports.
- These are rendered as dedicated view components, implying the UI is also used for printable/exportable artifacts.
9. AI subsystem
- src/ai contains Genkit flows, including:
- translate-to-nepali-flow
- summarize-po-changes-flow
- AI is therefore a separate service-style capability, not embedded everywhere in the UI.
10. External integrations
- Besides Firebase, the repo includes a Google Sheets integration and storage/backup services.
- This points to hybrid data movement: operational data stays in Firebase, while certain workflows likely export, sync, or archive to external systems.
11. Desktop packaging
- The presence of src-tauri indicates the app is also packaged as a Tauri desktop application.
- That makes the frontend code serve both browser and desktop delivery, with Tauri handling the native shell layer.
12. Cross-cutting concerns
- Shared hooks like use-auth, use-connection-status, use-mobile, and use-toast handle application-wide concerns.
- usage-tracker suggests instrumentation/telemetry is part of the UI layer.
- Fonts, constants, utilities, and type definitions in src/lib support reuse across modules.
Main entry points: services Document Services · firebase Firebase · auth-aware-layout.tsx App Shell · flows AI Flows
Components 20
App Shell
Next.js routes, navigation, and shared UI composition
- App Router · Main application entry and route hierarchy under src/app
src/app - App Shell · Authenticated layout and global navigation shell
src/components/auth-aware-layout.tsx - Sidebar · Primary module navigation for the workspace
src/components/app-sidebar.tsx - UI Primitives · Shared component library for forms, dialogs, tables, and controls
src/components/ui - Shared Hooks · Cross-cutting UI hooks for auth, connection, mobile, and toasts
src/hooks
Domain Workflows
Operational modules exposed through the app router
- HR · Employees, attendance, payroll, bonus, analytics, and payslips
src/app/hr - Fleet · Vehicles, drivers, trip sheets, and transaction workflows
src/app/fleet - Finance · Cheques, estimate invoices, and tax calculation tools
src/app/finance - Purchase Orders · Create, edit, list, and view purchase orders
src/app/purchase-orders - CRM / Cost Reports · Cost reports, quotations, and packing/spec workflows
src/app/crm - Reporting · Reports, dashboards, and report editing flows
src/app/reports - Notes · Simple notes workspace within the authenticated app
src/app/notes
Services
Business logic and data access boundary
- Core Services · Domain services for employees, payroll, attendance, products, and settings
src/services - Document Services · Services for purchase orders, reports, cheques, invoices, and trip documents
src/services - Ops Services · Fleet, finance, storage, backup, and usage services
src/services
Platform
Firebase, AI, and external integration layers
- Firebase · Client providers and configuration for Firestore and Realtime Database
src/firebase - Rules · Firestore security boundary for application data
firestore.rules - AI Flows · Genkit flows for translation and purchase-order summarization
src/ai/flows - Sheets Sync · External Google Sheets integration for export or sync workflows
src/services/google-sheets-service.ts
Desktop
Tauri packaging for native delivery
- Tauri Shell · Native desktop packaging and shell configuration
src-tauri
Connections 19
- App Router → App Shell: renders · Routes compose the authenticated shell and shared layout
- App Shell → Sidebar: includes · The shell uses the main workspace navigation
- App Shell → UI Primitives: builds with · Layout and screens are composed from shared UI primitives
- App Shell → Shared Hooks: uses · Authentication, connection, and viewport state drive the shell
- HR → Core Services: reads/writes · HR screens use employee, attendance, payroll, and user services
- Fleet → Ops Services: reads/writes · Fleet workflows use vehicle, driver, trip, and transaction services
- Finance → Document Services: renders via · Finance document workflows rely on cheque and invoice services
- Purchase Orders → Document Services: reads/writes · Purchase order CRUD and printable views use purchase-order services
- CRM / Cost Reports → Document Services: reads/writes · CRM cost-report and quotation screens use report and cost-report services
- Reporting → Document Services: reads/writes · Reporting pages use report-related services and dashboards
- Notes → Core Services: reads/writes · Notes features use notes service and shared data utilities
- Core Services → Firebase: persists to · Core business data is stored through Firebase clients
- Document Services → Firebase: persists to · Document-oriented workflows read and write Firebase data
- Ops Services → Firebase: persists to · Operational services use Firebase as the primary backend
- Firebase → Rules: governed by · Firestore access is constrained by repository-defined rules
- AI Flows → Core Services: augments · AI capabilities complement business workflows rather than replacing them
- AI Flows → Firebase: consumes data · AI flows can derive context from application records
- Sheets Sync → Ops Services: integrates with · Sheets sync is used by operational export or archive workflows
- Tauri Shell → App Router: packages · The same frontend runs in browser and desktop delivery modes