healthcareprovider-admin

Internal admin panel for reviewing patient submissions, genogram data, and algorithm-matched cancer diagnoses. Built with Next.js 15 (App Router) and deployed to Cloudflare Workers via OpenNext.

Tech stack

• Framework — Next.js 15.5 with Turbopack (next dev --turbo)
• Runtime — Cloudflare Workers (via @opennextjs/cloudflare 1.17)
• Database — Cloudflare D1 (SQLite, managed via Wrangler)
• Auth — OTP-based admin login with session management
• UI — Tailwind CSS 4, Radix UI, shadcn/ui, Lucide React, Framer Motion
• Forms — React Hook Form 7 with Zod 4 validation (@hookform/resolvers)
• Styling utilities — clsx, tailwind-merge (via cn helper), class-variance-authority
• Notifications — Sonner (toast library)
• Theme — next-themes (dark mode support)
• Language — TypeScript 5

Prerequisites

• Node.js ≥ 20
• npm
• A Cloudflare account (for production deployment)
• Wrangler CLI (npx wrangler or install globally)

Getting started

# Install dependencies
npm install

# Copy env template and fill in required values
cp .env.example .env.local

# Run the dev server with Turbopack
npm run dev

The app starts at http://localhost:3000.

Environment variables

All required variables are documented in .env.example. In production, values are read from Cloudflare Worker bindings (secrets/vars defined in wrangler.toml). Locally they fall back to process.env from .env.local.

Project structure

src/
├── app/
│   ├── (admin)/                    # Authenticated admin pages
│   │   ├── layout.tsx              # Admin layout with sidebar navigation
│   │   ├── admin-layout-transition.tsx
│   │   ├── submissions/            # Submission list + detail views
│   │   │   ├── page.tsx
│   │   │   ├── [id]/               # Individual submission details
│   │   │   │   ├── page.tsx
│   │   │   │   ├── report/         # Submission report generation
│   │   │   │   ├── _components/
│   │   │   │   │   ├── algorithms/ # Algorithm results & diagnosis matching
│   │   │   │   │   ├── genogram/   # Family tree visualization (layout, mappers, utils)
│   │   │   │   │   ├── questionnaire/ # Questionnaire data rendering
│   │   │   │   │   └── page/       # Header & invalid payload handling
│   │   │   │   └── _lib/
│   │   │   └── _components/
│   │   ├── providers/              # Healthcare provider management
│   │   │   ├── page.tsx
│   │   │   ├── providers-actions.tsx
│   │   │   └── _components/
│   │   └── doctors/                # Doctor management
│   │       ├── page.tsx
│   │       └── _components/        # CRUD forms, table, actions
│   └── api/                        # API routes
│       ├── auth/                   # Login, logout, OTP verification
│       │   ├── login/
│       │   ├── logout/
│       │   └── verify-otp/
│       ├── debug/kv/               # KV store debugging endpoint
│       └── doctors/[doctorId]/     # Doctor API endpoints
├── components/                     # Shared UI components (unverified — confirm structure)
└── lib/                            # Shared logic (unverified — confirm structure)
    ├── contracts/                  # Zod schemas for API payloads (unverified)
    ├── crypto/                     # Submission encryption/decryption (unverified)
    ├── i18n/                       # Internationalization (unverified)
    ├── security/                   # Session auth, OTP (unverified)
    └── taxonomy/                   # Cancer & comorbidity taxonomy (unverified)

Note: src/lib/ and src/components/ subdirectories are documented based on the original README but not confirmed in the current repository snapshot. Verify structure before relying on these paths.

Scripts

Command	Description
npm run dev	Start dev server with Turbopack
npm run build	Production build
npm run start	Start production server
npm run lint	Run ESLint
npm run cf:build	Build for Cloudflare Workers
npm run cf:preview	Build + local Cloudflare preview
npm run cf:deploy	Build + deploy to Cloudflare
npm run cf:upload	Build + upload to Cloudflare
npm run create:provider-user	Create a provider user (via script)

Database migrations

SQL migrations are stored in migrations/ and applied to Cloudflare D1 via Wrangler:

# Local development
npx wrangler d1 migrations apply hcp-admin-db --local

# Production
npx wrangler d1 migrations apply hcp-admin-db --remote

Available migrations:

1. 0001_init.sql — Initial schema
2. 0002_add_provider_fields.sql — Provider table extensions
3. 0003_create_doctors.sql — Doctor management
4. 0004_create_submissions.sql — Patient submissions
5. 0005_create_provider_users.sql — Admin user accounts
6. 0006_create_provider_sessions.sql — Session storage for auth

Deployment

The app is deployed to Cloudflare Workers. Secrets are managed via wrangler secret put <NAME>. Non-secret variables are defined in wrangler.toml under [vars].

# Deploy to production
npm run cf:deploy

# Set a secret
npx wrangler secret put RESEND_API_KEY

Cloudflare bindings (D1 database, KV namespace for sessions) must be configured in wrangler.toml before deployment.

Features

• Submission review — View patient questionnaire responses, genogram (family tree), and algorithm-matched cancer diagnoses
• Provider management — CRUD operations for healthcare provider organizations
• Doctor management — CRUD operations for individual doctors
• OTP authentication — Secure admin login with one-time passwords
• Session management — Server-side sessions stored in Cloudflare KV
• Responsive UI — Tailwind CSS 4 with dark mode support
• Form validation — Type-safe forms with Zod 4 schemas and React Hook Form

---

Built with ❤️ for Wellysa