Skip to content

Latest commit

 

History

History
128 lines (108 loc) · 5.21 KB

File metadata and controls

128 lines (108 loc) · 5.21 KB

The Office Engine

Overview

A centralized office management application with Staff and Admin interfaces. Covers three pillars: Room Reservations, Inventory Requests, and Maintenance Ticketing.

Stack

  • 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)

Brand System (Subvisual)

  • Primary: #045CFC — electric blue (hsl(224 98% 50%))

  • Accent: #82AEFE — light periwinkle blue (hsl(217 99% 75%))

  • Radius: 0px everywhere — fully sharp corners, no rounding

  • Dark bg: #0a0a0a · Cards: #121212 · Borders: #222222

  • Dark mode detection: inline script in index.html adds .dark to <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

Features

Room Booking ("The Peacekeeper")

  • 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

Pantry & Supplies ("The Inventory Manager")

  • 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

Maintenance ("The Fix-It Hub")

  • 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

Admin Settings

  • 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

Auth

  • 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

Structure

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

Database Tables

  • rooms — Room definitions with name, description, photoUrl, capacity
  • bookings — Room reservations with date/time conflict prevention
  • inventory_requests — Pantry/supply wishlist items with upvotes and status
  • maintenance_tickets — Repair tickets with photo, priority, status
  • vendors — Admin-only vendor contact directory
  • scheduled_maintenance — Recurring task log with frequency and due dates

Seeded Data

  • 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)

Development

  • 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