How justtvikram/inventory-attendance works
1. High-level shape
- This is a cross-platform mobile app built with Expo + React Native + TypeScript.
- The app is split into a client-side UI and a Supabase-backed data layer. There is no custom server in the repo; Supabase provides Auth, Postgres, and Row Level Security.
2. App shell and navigation
- The src/app folder uses expo-router file-based routing.
- src/app/_layout.tsx is the root composition point: it wires up app-wide providers and the auth gate.
- The main experience is organized into a tab navigator under src/app/(tabs) for:
- Dashboard (index.tsx)
- Inventory (inventory.tsx)
- Attendance (attendance.tsx)
- Additional routed screens exist for:
- Login (login.tsx)
- Employee list (employees.tsx)
- Employee detail (employee/[id].tsx)
- Product detail (product/[id].tsx)
3. Authentication boundary
- Authentication is handled entirely by Supabase Auth.
- src/lib/auth.tsx exposes an AuthProvider / useAuth() style context so the rest of the app can treat auth state as a shared dependency.
- The root layout likely redirects unauthenticated users to login.tsx, while signed-in users enter the main tab flow.
- The app is single-user by design, but the actual security boundary is still enforced server-side by row ownership.
4. Data access pattern
- Server state is managed with @tanstack/react-query.
- Feature-specific query modules live in src/lib/queries/:
- products.ts
- employees.ts
- attendance.ts
- profiles.ts
- These modules are the main boundary between UI screens and Supabase calls, centralizing fetch/mutation logic and cache behavior.
5. Core domain subsystems
- Dashboard: surfaces summary counts and low-stock alerts.
- Inventory: product CRUD plus stock adjustments.
- Employees: manage the roster and view individual employee records.
- Attendance: mark daily attendance and review attendance history.
- These are user-facing feature areas, but they all share the same backend model and auth scope.
6. Inventory-specific flow
- Inventory is the most transactional subsystem.
- src/components/stock-adjust-dialog.tsx is a shared interaction component for changing stock.
- The README notes that stock changes are done through an atomic RPC: quantity update and movement logging happen together.
- This means the UI does not directly “just edit a number”; it calls into a backend operation that preserves consistency and auditability.
7. Shared domain model
- src/lib/types.ts mirrors the database row types used across the app.
- Domain constants/utilities such as:
- attendance-status.ts
- stock-reason.ts
- units.ts
- These files indicate the app uses a small, explicit set of domain enums and display mappings rather than ad hoc strings scattered through screens.
8. Backend schema and security
- The supabase/ directory is the backend source of truth:
- schema.sql
- migrations/
- The database is secured with Row Level Security, scoped by owner_id = auth.uid().
- This is the key boundary in the architecture: the client can only read/write rows owned by the signed-in account.
- The schema also includes the RPC used for inventory movement, which is important for drawing the backend as more than just CRUD tables.
9. Session persistence and client setup
- src/lib/supabase.ts configures the Supabase client.
- The README indicates the auth session is persisted with AsyncStorage, so sessions survive app restarts on mobile.
- That makes the data flow: app start → restore session locally → confirm auth state with Supabase → render gated routes or login.
10. UI system and presentation
- The app uses react-native-paper for the Material Design component layer.
- src/theme/ holds the shared theme configuration, which likely feeds the Paper provider in the root layout.
- src/components/ contains reusable UI pieces shared across feature screens, while the route files stay focused on screen composition.
11. Build and deployment boundaries
- Tooling is standard Expo mobile tooling: Metro, Babel, and EAS Build.
- eas.json defines installable build profiles for Android/iOS.
- app.json, metro.config.js, babel.config.js, and scripts/reset-project.js support the app runtime and development workflow, but they do not change the core architecture.
12. How the system behaves end-to-end
- A signed-in user opens the app.
- The root layout restores auth state and routes into the tab shell.
- Screens call React Query hooks, which call Supabase.
- Supabase enforces ownership via RLS and returns data.
- Inventory mutations may go through the stock RPC to keep the product quantity and movement log in sync.
- UI updates are reflected through React Query cache updates and invalidations.
Main entry points: products.ts Products queries · supabase.ts Supabase client · types.ts Domain types · _layout.tsx Root layout
Components 21
App Shell
Expo Router composition, navigation, and route entry points.
- Root layout · Composes providers and the auth gate for the app.
src/app/_layout.tsx - Tab layout · Defines the authenticated tab shell.
src/app/(tabs)/_layout.tsx - Login · Unauthenticated entry screen.
src/app/login.tsx
Features
User-facing domain areas built on shared data access.
- Dashboard · Shows counts and low-stock highlights.
src/app/(tabs)/index.tsx - Inventory · Product list and stock operations.
src/app/(tabs)/inventory.tsx - Attendance · Daily attendance entry and history.
src/app/(tabs)/attendance.tsx - Employees · Lists employees and opens records.
src/app/employees.tsx - Employee detail · Shows one employee record.
src/app/employee/[id].tsx - Product detail · Shows one product record and stock actions.
src/app/product/[id].tsx
Data Layer
Auth, queries, and shared domain types used by screens.
- Auth context · Shared auth state and helpers for the app.
src/lib/auth.tsx - Supabase client · Configures the Supabase connection and session storage.
src/lib/supabase.ts - Products queries · Fetches and mutates product data.
src/lib/queries/products.ts - Employees queries · Fetches and mutates employee data.
src/lib/queries/employees.ts - Attendance queries · Fetches and mutates attendance data.
src/lib/queries/attendance.ts - Profiles queries · Loads user profile data used by the app shell.
src/lib/queries/profiles.ts - Domain types · Row-shaped types mirrored from the database.
src/lib/types.ts
Supabase Backend
Database schema, migrations, and security boundary.
- Schema · Source-of-truth tables, RPCs, and RLS rules.
supabase/schema.sql - Migrations · Schema evolution history for Supabase.
supabase/migrations/20260624103606_baseline_schema.sql
Shared UI
Reusable components and theme primitives.
- Stock dialog · Shared stock adjustment interaction.
src/components/stock-adjust-dialog.tsx - Unit dropdown · Reusable unit selection control.
src/components/unit-dropdown.tsx - Theme · Shared visual theme for the app.
src/theme/index.ts
Connections 29
- Root layout → Auth context: provides auth · Root composition exposes auth state to the app.
- Root layout → Theme: provides theme · App-wide UI theme is mounted at the root.
- Root layout → Tab layout: routes signed-in · Authenticated users enter the main tab shell.
- Root layout → Login: redirects to · Unauthenticated users go to login.
- Tab layout → Dashboard: tab · Dashboard is one of the primary tabs.
- Tab layout → Inventory: tab · Inventory is one of the primary tabs.
- Tab layout → Attendance: tab · Attendance is one of the primary tabs.
- Dashboard → Products queries: reads · Dashboard summary uses product and stock data.
- Inventory → Products queries: reads/writes · Inventory drives product CRUD and stock updates.
- Inventory → Stock dialog: uses · Stock adjustments are performed through the shared dialog.
- Stock dialog → Products queries: mutates · Dialog triggers stock movement operations.
- Attendance → Attendance queries: reads/writes · Attendance screen uses the attendance query layer.
- Employees → Employees queries: reads/writes · Roster management is handled through employee queries.
- Employees → Employee detail: navigates to · List screen opens the detail route.
- Inventory → Product detail: navigates to · Inventory opens product detail views.
- Product detail → Products queries: reads/writes · Detail screen loads and updates the product record.
- Product detail → Stock dialog: uses · Detail screen reuses the stock adjustment flow.
- Products queries → Supabase client: calls · Product data is fetched through the Supabase client.
- Employees queries → Supabase client: calls · Employee data is fetched through the Supabase client.
- Attendance queries → Supabase client: calls · Attendance data is fetched through the Supabase client.
- Profiles queries → Supabase client: calls · Profile data is fetched through the Supabase client.
- Supabase client → Schema: targets · Client talks to the Supabase-backed database and auth.
- Schema → Migrations: evolves via · Migrations define and update the schema.
- Schema → Domain types: mirrors · App types reflect database row shapes.
- Products queries → Domain types: uses · Query modules share domain row types.
- Employees queries → Domain types: uses · Query modules share domain row types.
- Attendance queries → Domain types: uses · Query modules share domain row types.
- Profiles queries → Domain types: uses · Query modules share domain row types.
- Products queries → Schema: RPC/RLS constrained · Inventory mutations rely on backend atomic operations and ownership rules.