A centralized office management application with Staff and Admin interfaces. Covers three pillars: Room Reservations, Inventory Requests, and Maintenance Ticketing.
- Monorepo tool: pnpm workspaces
- Node.js version: 24
- Package manager: pnpm
- TypeScript version: 5.9
- Frontend: React + Vite (artifacts/office-engine)
- API framework: Express 5 (artifacts/api-server)
- Database: PostgreSQL + Drizzle ORM
- Validation: Zod (
zod/v4),drizzle-zod - API codegen: Orval (from OpenAPI spec)
- UI: shadcn/ui + Tailwind CSS v4
- Fonts: Inter (body) + DM Serif Display (headings — sub for Subvisual's proprietary Acta)
-
Primary:
#045CFC— electric blue (hsl(224 98% 50%)) -
Accent:
#82AEFE— light periwinkle blue (hsl(217 99% 75%)) -
Radius:
0pxeverywhere — fully sharp corners, no rounding -
Dark bg:
#0a0a0a· Cards:#121212· Borders:#222222 -
Dark mode detection: inline script in
index.htmladds.darkto<html>on OS preference; CSS variables also respond to@media (prefers-color-scheme: dark)as fallback -
Routing: Wouter
-
State/Data: TanStack React Query + generated hooks
- Weekly calendar grid (8am-6pm, Mon-Sun)
- 3 rooms: The Boardroom (12), The Huddle Pod (6), The Innovation Lab (20)
- Anti-double-booking validation on server side (returns 409 on conflict)
- No "Meeting Title" field — responsible person's name (
userName) is used as booking title - Permission-based cancellation: booking owner OR admin can cancel
- Real-time polling: bookings invalidated every 30 seconds
- Admin: full booking management, booking history view (past bookings via
?past=true), edit room names/descriptions/photos
- Wishlist request cards with category and urgency badges
- Upvoting with localStorage deduplication per session
- Form to submit new requests (itemName, category, urgency)
- Admin: status management (Pending/Ordered/Stocked/Denied), delete requests
- Public issue board with status badges
- Photo upload via file input (sent to /api/upload)
- Priority levels: Urgent (red) vs General (gray)
- Admin: status toggles (Reported → In Progress → Fixed)
- Admin vendor directory (Plumber, Electrician, IT, HVAC, Cleaning, General)
- Admin scheduled maintenance log with frequency and due dates
- Change admin password (server-validated)
- Site Identity: customize site name + logo URL — applied to header and check-in modal dynamically
- Office Info editor: Instructions (plain text), Video Guide URL, Useful Contacts
- No login required — users enter their name on first visit (stored in localStorage)
- Admin mode toggled via header button (stored in localStorage)
- Admin password verified server-side via
/api/auth/admin-login
artifacts/
├── api-server/ # Express 5 API (port 8080)
│ └── src/routes/
│ ├── rooms.ts
│ ├── bookings.ts
│ ├── inventory.ts
│ ├── maintenance.ts
│ ├── vendors.ts
│ ├── scheduled-maintenance.ts
│ └── upload.ts
└── office-engine/ # React + Vite frontend (port 24065, previewPath: /)
└── src/
├── pages/
│ ├── Rooms.tsx
│ ├── Inventory.tsx
│ ├── Maintenance.tsx
│ ├── AdminRooms.tsx
│ ├── AdminInventory.tsx
│ ├── AdminMaintenance.tsx
│ ├── AdminVendors.tsx
│ └── AdminScheduled.tsx
├── components/
│ ├── Layout.tsx
│ └── IdentityModal.tsx
└── hooks/
└── use-app-state.ts
lib/
├── api-spec/openapi.yaml # Full API contract
├── api-client-react/ # Generated React Query hooks
├── api-zod/ # Generated Zod schemas
└── db/src/schema/
├── rooms.ts
├── bookings.ts
├── inventory.ts
├── maintenance.ts
├── vendors.ts
└── scheduled-maintenance.ts
rooms— Room definitions with name, description, photoUrl, capacitybookings— Room reservations with date/time conflict preventioninventory_requests— Pantry/supply wishlist items with upvotes and statusmaintenance_tickets— Repair tickets with photo, priority, statusvendors— Admin-only vendor contact directoryscheduled_maintenance— Recurring task log with frequency and due dates
- 3 default rooms (The Boardroom, The Huddle Pod, The Innovation Lab)
- 4 vendor contacts (FastFix Plumbing, Spark Electric, CoolAir HVAC, TechSupport Pro)
- 4 scheduled maintenance tasks (AC filters, fire extinguisher, elevator, pest control)
- API server:
pnpm --filter @workspace/api-server run dev - Frontend:
pnpm --filter @workspace/office-engine run dev - DB push:
pnpm --filter @workspace/db run push - Codegen:
pnpm --filter @workspace/api-spec run codegen