projectsprav/dv-portal

1. This is a Next.js App Router application with a clear split between UI routes, server-side actions, and small API endpoints. The app is built around operational workflows for a data-center/business management console rather than a generic content site.

2. The main user-facing areas are route-based feature screens under src/app: cross-connects, dc-access, energy, invoices, racks, settings, and tickets. These pages are backed by feature-specific React components in src/components, with a shared shell/layout in AppLayout, Layout, and Providers.

3. Business logic is concentrated in src/app/actions. Those server actions are organized by domain: auth, dc-access, energy, adminEnergy, freshdesk, and xero. This suggests the primary pattern is: UI triggers a server action, the action talks to persistence and/or external services, and the page refreshes from returned state.

4. PocketBase is the core backend data store and likely the system of record. Evidence includes src/lib/pocketbaseClient.ts, pb_migrations/, schema/rule inspection scripts, and many collection/user maintenance scripts. The app’s data layer is therefore anchored in PocketBase collections, record rules, and migrations rather than a separate SQL backend.

5. Authentication is a dedicated subsystem. There is a NextAuth route at src/app/api/auth/[...nextauth]/route.ts, shared auth helpers in src/auth.ts, and an AuthContext plus Auth component on the client side. The repo also includes admin/user creation and reset scripts, indicating user lifecycle management is partly operational and partly app-driven.

6. External integrations are isolated behind API routes and actions. Xero has its own auth/callback flow under src/app/api/xero/auth and src/app/api/xero/callback, plus an invoice PDF endpoint under src/app/api/xero/invoice/[id]/pdf. Freshdesk and Teams are also integrated, with a Teams webhook route at src/app/api/webhooks/teams/route.ts.

7. The invoice area has both server and client responsibilities. src/app/invoices/page.tsx and CustomerInvoicesClient.tsx imply server-rendered page entry points with a dedicated client component for interactive invoice browsing, while Xero endpoints handle the external accounting side of the same domain.

8. The data-center operational workflows appear centered on access and facility management. dc-access, racks, cross-connects, and energy likely model requests, inventory, and usage tracking, with shared forms such as AccessRequestForm and CrossConnectOrderForm feeding those flows into PocketBase-backed records.

9. The repository includes substantial schema and maintenance tooling. Files like list-schema*.mjs, list-rules.mjs, fix-schema.mjs, update-rules*.mjs, and clean-records.mjs indicate that record rules, collection definitions, and user data are actively managed outside the main app. This is an important architectural boundary: runtime app logic is separate from one-off admin/data repair scripts.

10. Deployment is containerized. The presence of Dockerfile, docker-compose.yml, and docker/nginx/nginx.conf shows the app can run behind Nginx in a containerized environment. Static assets live in public/, including images and a data-center video used by the UI.

11. From a diagram perspective, the key flow is: browser UI → Next.js page/component → server action or API route → PocketBase and/or external service (Xero, Freshdesk, Teams) → response back to the UI. The main integration boundaries are authentication, PocketBase persistence, and third-party service callbacks/webhooks.