UtopiaSpace is structured as a role-based internal operations platform. The application connects daily workspaces, approval flows, operational records, Supabase data, access control, and developer automation into one system.
Users access spaces based on responsibility, such as Manager, HR, Accounts, Credit, OE, Indoor Sales, and Developer.
Claims, approvals, attendance, tasks, announcements, meetings, payments, and operational records move through structured workflows.
Wiki documentation is maintained in Git and synced into Wiki.js through the Git storage module.
Frontend
Displays UtopiaSpace screens, role spaces, dashboards, forms, trackers, tables, and navigation. It handles user interactions and sends requests for data or workflow actions.
Backend / Application Logic
Processes submissions, approvals, workflow rules, filtering, validations, status changes, and system operations before data is stored or returned.
Supabase / Database
Stores user profiles, announcements, meetings, tasks, approvals, settings, attendance records, finance records, and operational data.
Authentication and Access
Uses Google login, Supabase authentication, role checks, permissions, and policy metadata to control what users can access.
Documentation Layer
Uses Wiki.js and GitHub-backed Markdown pages to document user guides, role spaces, developer references, and release updates.
Personal Space
Personal tasks, claims, announcements, calendar, meeting notes, and individual workflow visibility.
Manager / Director / Supervisor
Review, approval, reporting, team monitoring, task follow-up, and escalated operational oversight.
HR Space
Employee records, leave, attendance, benefits, overtime, company structure, and HR-related approvals.
Account Space
Claims verification, supplier payment requests, backcharges, petty cash, AP processing, finance reporting, and payment history.
Credit Space
Rental accounts, repayment timelines, payment collection progress, overdue tracking, and credit follow-up.
Operations Efficiency Space
Operations attendance, workforce availability, RentalTracker, warehouse pages, item history, and backcharge support.
Indoor Space
Indoor sales documents, ceiling calculator, quotation history, customer records, and sales reference tools.
Developer Space
System health, Supabase usage, server monitoring, deployment notes, environment setup, and technical workflows.
Application Data
Architecture explains where application data lives and how modules depend on it. Detailed tables and entities are documented in Database.
Documentation Data
Architecture explains that Wiki.js uses Git-backed Markdown. Detailed sync behaviour, update records, and conflict handling are documented in Database and Wiki.js Git Sync.
API Communication
Architecture shows request movement between frontend, application logic, and Supabase. Detailed request and response patterns are documented in API.
Submission Flow
Used for claims, supplier payment requests, backcharges, leave requests, advance salary requests, incidents, and tasks.
Approval Flow
Used by Manager, Director, Supervisor, HR, Account, and AP workflows where requests require review before processing.
Tracking Flow
Used by taskboard, rental tracker, supplier payment tracker, backcharge history, attendance records, and quotation history.
Reference Data Flow
Used by supplier list, item code list, company directory, user profiles, roles, permissions, and system settings.
Reporting Flow
Used by dashboards, summaries, analytics, attendance records, payment history, and operational reports.
Development, Staging, Production
Changes move through environment promotion flows such as development to staging and staging to production.
Branch Sync and Back-Merge
Branch-sync conventions and auto back-merge workflows reduce drift between development, staging, and production branches.
Infisical Environment
Environment setup is documented for secure configuration and deployment consistency.
Service Worker Denylist
Static assets such as images are excluded from SPA fallback routing so files can be accessed directly.
Reusable Hooks and Components
Shared plumbing includes hooks like workspace and leave filter utilities, date range filters, and workflow status constants.
Wiki.js Git Storage
Pulls Markdown documentation from the GitHub wiki repository into Wiki.js pages.
GitHub Actions
Reads merged PR details, rebuilds update pages, and supports automated wiki update dispatch.
Gemini Classification
Classifies PR content into matching wiki update targets and generates update records.
Updates Page
Summarises generated update records into big updates, improvements, fixes, and detail links.
Each space owns a clear operational area while still sharing user, access, and workflow foundations.
Navigation, data access, and actions are shaped by the user's role and permissions.
Developer and user documentation follows the same Git-backed release and sync workflow.