feature: step 2 wizard UX for working hours improved. appointment grid height increased.

Reviewed-on: http://178.131.50.201:3000/admin/dyolink/pulls/20

backend/.gitignore

@@ -45,6 +45,7 @@ lerna-debug.log*
 # temp directory
 .temp
 .tmp
+/uploads
 
 # Runtime data
 pids

backend/package-lock.json

@@ -35,6 +35,7 @@
         "express-formidable": "^1.2.0",
         "express-session": "^1.19.0",
         "helmet": "^8.1.0",
+        "multer": "^2.1.1",
         "passport": "^0.7.0",
         "passport-jwt": "^4.0.1",
         "passport-local": "^1.0.0",
@@ -55,6 +56,7 @@
         "@types/express": "^5.0.0",
         "@types/express-session": "^1.18.2",
         "@types/jest": "^30.0.0",
+        "@types/multer": "^2.1.0",
         "@types/node": "^22.10.7",
         "@types/pg": "^8.16.0",
         "@types/react": "^19.2.14",
@@ -6251,6 +6253,16 @@
       "integrity": "sha512-GsCCIZDE/p3i96vtEqx+7dBUGXrc7zeSK3wwPHIaRThS+9OhWIXRqzs4d6k1SVU8g91DrNRWxWUGhp5KXQb2VA==",
       "license": "MIT"
     },
+    "node_modules/@types/multer": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/@types/multer/-/multer-2.1.0.tgz",
+      "integrity": "sha512-zYZb0+nJhOHtPpGDb3vqPjwpdeGlGC157VpkqNQL+UU2qwoacoQ7MpsAmUptI/0Oa127X32JzWDqQVEXp2RcIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
     "node_modules/@types/node": {
       "version": "22.19.17",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.17.tgz",
@@ -12374,7 +12386,7 @@
     },
     "node_modules/multer": {
       "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/multer/-/multer-2.1.1.tgz",
+      "resolved": "https://registry.npmmirror.com/multer/-/multer-2.1.1.tgz",
       "integrity": "sha512-mo+QTzKlx8R7E5ylSXxWzGoXoZbOsRMpyitcht8By2KHvMbf3tjwosZ/Mu/XYU6UuJ3VZnODIrak5ZrPiPyB6A==",
       "license": "MIT",
       "dependencies": {

backend/package.json

@@ -41,7 +41,6 @@
     "@nestjs/swagger": "^11.2.6",
     "@nestjs/throttler": "^6.5.0",
     "@prisma/client": "^6.19.2",
-    "prisma": "^6.19.2",
     "adminjs": "^7.8.17",
     "axios": "^1.13.5",
     "bcrypt": "^6.0.0",
@@ -54,10 +53,12 @@
     "express-formidable": "^1.2.0",
     "express-session": "^1.19.0",
     "helmet": "^8.1.0",
+    "multer": "^2.1.1",
     "passport": "^0.7.0",
     "passport-jwt": "^4.0.1",
     "passport-local": "^1.0.0",
     "pg": "^8.18.0",
+    "prisma": "^6.19.2",
     "reflect-metadata": "^0.2.2",
     "rxjs": "^7.8.1",
     "styled-components": "^6.3.11",
@@ -73,6 +74,7 @@
     "@types/express": "^5.0.0",
     "@types/express-session": "^1.18.2",
     "@types/jest": "^30.0.0",
+    "@types/multer": "^2.1.0",
     "@types/node": "^22.10.7",
     "@types/pg": "^8.16.0",
     "@types/react": "^19.2.14",

backend/prisma/migrations/20260519120000_add_treatments_feature/migration.sql

@@ -0,0 +1,154 @@
+-- CreateEnum
+CREATE TYPE "TreatmentStatus" AS ENUM ('DRAFT', 'COMPLETED');
+
+-- CreateTable
+CREATE TABLE "treatments" (
+    "id" TEXT NOT NULL,
+    "organizationId" TEXT NOT NULL,
+    "patientId" TEXT NOT NULL,
+    "appointmentId" TEXT,
+    "providerUserId" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "status" "TreatmentStatus" NOT NULL DEFAULT 'DRAFT',
+    "treatmentAt" TIMESTAMP(3) NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "treatments_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "treatment_cases" (
+    "id" TEXT NOT NULL,
+    "treatmentId" TEXT NOT NULL,
+    "clientKey" TEXT,
+    "sortOrder" INTEGER NOT NULL,
+    "treatmentType" TEXT NOT NULL,
+    "teeth" JSONB NOT NULL,
+    "comment" TEXT,
+    "sentAt" TIMESTAMP(3),
+
+    CONSTRAINT "treatment_cases_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "treatment_case_attachments" (
+    "id" TEXT NOT NULL,
+    "caseId" TEXT,
+    "appointmentId" TEXT,
+    "caseClientKey" TEXT,
+    "fileName" TEXT NOT NULL,
+    "mimeType" TEXT NOT NULL,
+    "sizeBytes" INTEGER NOT NULL,
+    "storagePath" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "treatment_case_attachments_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "treatment_case_sends" (
+    "id" TEXT NOT NULL,
+    "caseId" TEXT NOT NULL,
+    "organizationId" TEXT NOT NULL,
+    "sentAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "treatment_case_sends_pkey" PRIMARY KEY ("id")
+);
+
+-- Migrate legacy patient_treatment_histories into treatments + single case per row
+INSERT INTO "treatments" (
+    "id",
+    "organizationId",
+    "patientId",
+    "appointmentId",
+    "providerUserId",
+    "title",
+    "status",
+    "treatmentAt",
+    "createdAt",
+    "updatedAt"
+)
+SELECT
+    h."id",
+    p."organizationId",
+    h."patientId",
+    NULL,
+    o."ownerId",
+    h."title",
+    'COMPLETED'::"TreatmentStatus",
+    h."treatmentAt",
+    h."createdAt",
+    h."updatedAt"
+FROM "patient_treatment_histories" h
+JOIN "patients" p ON p."id" = h."patientId"
+JOIN "organizations" o ON o."id" = p."organizationId";
+
+INSERT INTO "treatment_cases" (
+    "id",
+    "treatmentId",
+    "clientKey",
+    "sortOrder",
+    "treatmentType",
+    "teeth",
+    "comment",
+    "sentAt"
+)
+SELECT
+    h."id" || '-case',
+    h."id",
+    NULL,
+    0,
+    'visit',
+    CASE
+        WHEN h."tooth" IS NOT NULL AND btrim(h."tooth") <> '' THEN jsonb_build_array(h."tooth")
+        ELSE '[]'::jsonb
+    END,
+    h."notes",
+    NULL
+FROM "patient_treatment_histories" h;
+
+-- Drop legacy table
+DROP TABLE "patient_treatment_histories";
+
+-- CreateIndex
+CREATE UNIQUE INDEX "treatments_appointmentId_key" ON "treatments"("appointmentId");
+
+-- CreateIndex
+CREATE INDEX "treatments_patientId_treatmentAt_idx" ON "treatments"("patientId", "treatmentAt");
+
+-- CreateIndex
+CREATE INDEX "treatments_organizationId_status_idx" ON "treatments"("organizationId", "status");
+
+-- CreateIndex
+CREATE INDEX "treatment_cases_treatmentId_sortOrder_idx" ON "treatment_cases"("treatmentId", "sortOrder");
+
+-- CreateIndex
+CREATE INDEX "treatment_case_attachments_appointmentId_caseClientKey_idx" ON "treatment_case_attachments"("appointmentId", "caseClientKey");
+
+-- CreateIndex
+CREATE INDEX "treatment_case_attachments_caseId_idx" ON "treatment_case_attachments"("caseId");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "treatment_case_sends_caseId_organizationId_key" ON "treatment_case_sends"("caseId", "organizationId");
+
+-- AddForeignKey
+ALTER TABLE "treatments" ADD CONSTRAINT "treatments_organizationId_fkey" FOREIGN KEY ("organizationId") REFERENCES "organizations"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "treatments" ADD CONSTRAINT "treatments_patientId_fkey" FOREIGN KEY ("patientId") REFERENCES "patients"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "treatments" ADD CONSTRAINT "treatments_appointmentId_fkey" FOREIGN KEY ("appointmentId") REFERENCES "appointments"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "treatment_cases" ADD CONSTRAINT "treatment_cases_treatmentId_fkey" FOREIGN KEY ("treatmentId") REFERENCES "treatments"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "treatment_case_attachments" ADD CONSTRAINT "treatment_case_attachments_caseId_fkey" FOREIGN KEY ("caseId") REFERENCES "treatment_cases"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "treatment_case_sends" ADD CONSTRAINT "treatment_case_sends_caseId_fkey" FOREIGN KEY ("caseId") REFERENCES "treatment_cases"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "treatment_case_sends" ADD CONSTRAINT "treatment_case_sends_organizationId_fkey" FOREIGN KEY ("organizationId") REFERENCES "organizations"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/migrations/20260608120000_add_staff_working_hours/migration.sql

@@ -0,0 +1,34 @@
+-- CreateTable
+CREATE TABLE "staff_working_hours_schedules" (
+    "id" TEXT NOT NULL,
+    "membershipId" TEXT NOT NULL,
+    "autoRepeatWeekly" BOOLEAN NOT NULL DEFAULT true,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "staff_working_hours_schedules_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "staff_working_hours_blocks" (
+    "id" TEXT NOT NULL,
+    "scheduleId" TEXT NOT NULL,
+    "dayOfWeek" INTEGER NOT NULL,
+    "startMinute" INTEGER NOT NULL,
+    "endMinute" INTEGER NOT NULL,
+    "sortOrder" INTEGER NOT NULL DEFAULT 0,
+
+    CONSTRAINT "staff_working_hours_blocks_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "staff_working_hours_schedules_membershipId_key" ON "staff_working_hours_schedules"("membershipId");
+
+-- CreateIndex
+CREATE INDEX "staff_working_hours_blocks_scheduleId_dayOfWeek_sortOrder_idx" ON "staff_working_hours_blocks"("scheduleId", "dayOfWeek", "sortOrder");
+
+-- AddForeignKey
+ALTER TABLE "staff_working_hours_schedules" ADD CONSTRAINT "staff_working_hours_schedules_membershipId_fkey" FOREIGN KEY ("membershipId") REFERENCES "memberships"("id") ON DELETE CASCADE ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "staff_working_hours_blocks" ADD CONSTRAINT "staff_working_hours_blocks_scheduleId_fkey" FOREIGN KEY ("scheduleId") REFERENCES "staff_working_hours_schedules"("id") ON DELETE CASCADE ON UPDATE CASCADE;

backend/prisma/schema.prisma

@@ -61,6 +61,8 @@ model Organization {
   sentOrganizationInvitations OrganizationInvitation[] @relation("OrganizationInvitationInviter")
   patients         Patient[]
   appointments     Appointment[]
+  treatments       Treatment[]
+  caseSends        TreatmentCaseSend[]
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
@@ -82,7 +84,7 @@ model Patient {
   updatedAt      DateTime @updatedAt
 
   organization Organization @relation(fields: [organizationId], references: [id])
-  treatments   PatientTreatmentHistory[]
+  treatments   Treatment[]
   appointments Appointment[]
 
   @@index([organizationId, createdAt])
@@ -90,24 +92,6 @@ model Patient {
   @@map("patients")
 }
 
-model PatientTreatmentHistory {
-  id          String   @id @default(uuid())
-  patientId   String
-  title       String
-  status      String
-  treatmentAt DateTime
-  tooth       String?
-  notes       String?
-  totalCost   Float?
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime @updatedAt
-
-  patient Patient @relation(fields: [patientId], references: [id], onDelete: Cascade)
-
-  @@index([patientId, treatmentAt])
-  @@map("patient_treatment_histories")
-}
-
 model Appointment {
   id             String   @id @default(uuid())
   organizationId String
@@ -119,6 +103,7 @@ model Appointment {
 
   organization Organization @relation(fields: [organizationId], references: [id], onDelete: Cascade)
   patient      Patient      @relation(fields: [patientId], references: [id], onDelete: Cascade)
+  treatment    Treatment?
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
@@ -128,6 +113,84 @@ model Appointment {
   @@map("appointments")
 }
 
+enum TreatmentStatus {
+  DRAFT
+  COMPLETED
+}
+
+model Treatment {
+  id             String          @id @default(uuid())
+  organizationId String
+  patientId      String
+  appointmentId  String?         @unique
+  providerUserId String
+  title          String
+  status         TreatmentStatus @default(DRAFT)
+  treatmentAt    DateTime
+
+  organization Organization    @relation(fields: [organizationId], references: [id], onDelete: Cascade)
+  patient      Patient         @relation(fields: [patientId], references: [id], onDelete: Cascade)
+  appointment  Appointment?    @relation(fields: [appointmentId], references: [id], onDelete: SetNull)
+  cases        TreatmentCase[]
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@index([patientId, treatmentAt])
+  @@index([organizationId, status])
+  @@map("treatments")
+}
+
+model TreatmentCase {
+  id            String    @id @default(uuid())
+  treatmentId   String
+  clientKey     String?
+  sortOrder     Int
+  treatmentType String
+  teeth         Json
+  comment       String?
+  sentAt        DateTime?
+
+  treatment   Treatment                 @relation(fields: [treatmentId], references: [id], onDelete: Cascade)
+  attachments TreatmentCaseAttachment[]
+  sends       TreatmentCaseSend[]
+
+  @@index([treatmentId, sortOrder])
+  @@map("treatment_cases")
+}
+
+model TreatmentCaseAttachment {
+  id          String  @id @default(uuid())
+  caseId      String?
+  appointmentId String?
+  caseClientKey String?
+  fileName    String
+  mimeType    String
+  sizeBytes   Int
+  storagePath String
+
+  case TreatmentCase? @relation(fields: [caseId], references: [id], onDelete: Cascade)
+
+  createdAt DateTime @default(now())
+
+  @@index([appointmentId, caseClientKey])
+  @@index([caseId])
+  @@map("treatment_case_attachments")
+}
+
+model TreatmentCaseSend {
+  id             String   @id @default(uuid())
+  caseId         String
+  organizationId String
+  sentAt         DateTime @default(now())
+
+  case         TreatmentCase @relation(fields: [caseId], references: [id], onDelete: Cascade)
+  organization Organization  @relation(fields: [organizationId], references: [id], onDelete: Cascade)
+
+  @@unique([caseId, organizationId])
+  @@map("treatment_case_sends")
+}
+
 model Plan {
   id       String @id @default(uuid())
   name     String @unique // "Solo", "Small", "Medium", "Large", "Enterprise"
@@ -154,6 +217,7 @@ model Membership {
 
   permissions MembershipPermission[]
   invitations StaffInvitation[]
+  workingHoursSchedule StaffWorkingHoursSchedule?
 
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
@@ -162,6 +226,34 @@ model Membership {
   @@map("memberships")
 }
 
+model StaffWorkingHoursSchedule {
+  id               String @id @default(uuid())
+  membershipId     String @unique
+  autoRepeatWeekly Boolean @default(true)
+
+  membership Membership @relation(fields: [membershipId], references: [id], onDelete: Cascade)
+  blocks     StaffWorkingHoursBlock[]
+
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  @@map("staff_working_hours_schedules")
+}
+
+model StaffWorkingHoursBlock {
+  id          String @id @default(uuid())
+  scheduleId  String
+  dayOfWeek   Int
+  startMinute Int
+  endMinute   Int
+  sortOrder   Int    @default(0)
+
+  schedule StaffWorkingHoursSchedule @relation(fields: [scheduleId], references: [id], onDelete: Cascade)
+
+  @@index([scheduleId, dayOfWeek, sortOrder])
+  @@map("staff_working_hours_blocks")
+}
+
 model StaffInvitation {
   id String @id @default(uuid())
 

backend/src/app.module.ts

@@ -10,6 +10,7 @@ import { PatientsModule } from './modules/patients/patients.module';
 import { StaffModule } from './modules/staff/staff.module';
 import { OrganizationModule } from './modules/organization/organization.module';
 import { AppointmentsModule } from './modules/appointments/appointments.module';
+import { TreatmentsModule } from './modules/treatments/treatments.module';
 
 @Module({
   imports: [
@@ -21,6 +22,7 @@ import { AppointmentsModule } from './modules/appointments/appointments.module';
     AuthModule,
     PatientsModule,
     AppointmentsModule,
+    TreatmentsModule,
     StaffModule,
     OrganizationModule,
     AdminModule.forRoot(),

backend/src/common/working-hours.ts

@@ -0,0 +1,118 @@
+export const MINUTES_PER_DAY = 24 * 60;
+
+export type WorkingHoursBlockInput = {
+  dayOfWeek: number;
+  startMinute: number;
+  endMinute: number;
+  sortOrder?: number;
+};
+
+export type WorkingHoursDayBlock = {
+  startMinute: number;
+  endMinute: number;
+};
+
+export function localDayOfWeekMondayZero(dayOfWeekJs: number): number {
+  return dayOfWeekJs === 0 ? 6 : dayOfWeekJs - 1;
+}
+
+export function validateWorkingHoursBlocks(blocks: WorkingHoursBlockInput[]): string | null {
+  if (!Array.isArray(blocks)) {
+    return 'Working hours blocks must be an array';
+  }
+
+  const byDay = new Map<number, WorkingHoursBlockInput[]>();
+  for (const block of blocks) {
+    if (!Number.isInteger(block.dayOfWeek) || block.dayOfWeek < 0 || block.dayOfWeek > 6) {
+      return 'dayOfWeek must be an integer from 0 (Monday) to 6 (Sunday)';
+    }
+    if (!Number.isInteger(block.startMinute) || block.startMinute < 0 || block.startMinute >= MINUTES_PER_DAY) {
+      return 'startMinute must be between 0 and 1439';
+    }
+    if (!Number.isInteger(block.endMinute) || block.endMinute <= 0 || block.endMinute > MINUTES_PER_DAY) {
+      return 'endMinute must be between 1 and 1440';
+    }
+    if (block.endMinute <= block.startMinute) {
+      return 'Each shift end time must be after its start time';
+    }
+    const list = byDay.get(block.dayOfWeek) ?? [];
+    list.push(block);
+    byDay.set(block.dayOfWeek, list);
+  }
+
+  for (const [, dayBlocks] of byDay) {
+    const sorted = [...dayBlocks].sort((a, b) => a.startMinute - b.startMinute);
+    for (let i = 1; i < sorted.length; i += 1) {
+      if (sorted[i].startMinute < sorted[i - 1].endMinute) {
+        return 'Shifts on the same day cannot overlap';
+      }
+    }
+  }
+
+  return null;
+}
+
+export function blocksForDay(
+  blocks: WorkingHoursBlockInput[],
+  dayOfWeek: number,
+): WorkingHoursDayBlock[] {
+  return blocks
+    .filter((b) => b.dayOfWeek === dayOfWeek)
+    .sort((a, b) => a.startMinute - b.startMinute || a.endMinute - b.endMinute)
+    .map((b) => ({ startMinute: b.startMinute, endMinute: b.endMinute }));
+}
+
+export function isMinuteWithinWorkingBlocks(minute: number, dayBlocks: WorkingHoursDayBlock[]): boolean {
+  return dayBlocks.some((b) => minute >= b.startMinute && minute < b.endMinute);
+}
+
+export function isRangeWithinWorkingBlocks(
+  startMinute: number,
+  endMinute: number,
+  dayBlocks: WorkingHoursDayBlock[],
+): boolean {
+  if (endMinute <= startMinute) {
+    return false;
+  }
+  for (let m = startMinute; m < endMinute; m += 1) {
+    if (!isMinuteWithinWorkingBlocks(m, dayBlocks)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function dateToLocalMinutes(date: Date): number {
+  return date.getHours() * 60 + date.getMinutes();
+}
+
+export function appointmentWithinWorkingHours(
+  startAt: Date,
+  endAt: Date,
+  dayBlocks: WorkingHoursDayBlock[],
+): boolean {
+  const startMinute = dateToLocalMinutes(startAt);
+  const endMinute = dateToLocalMinutes(endAt);
+  return isRangeWithinWorkingBlocks(startMinute, endMinute, dayBlocks);
+}
+
+export function unionDayBlockRange(dayBlocksList: WorkingHoursDayBlock[][]): {
+  startMinute: number;
+  endMinute: number;
+} | null {
+  let startMinute: number | null = null;
+  let endMinute: number | null = null;
+
+  for (const dayBlocks of dayBlocksList) {
+    for (const block of dayBlocks) {
+      startMinute = startMinute == null ? block.startMinute : Math.min(startMinute, block.startMinute);
+      endMinute = endMinute == null ? block.endMinute : Math.max(endMinute, block.endMinute);
+    }
+  }
+
+  if (startMinute == null || endMinute == null) {
+    return null;
+  }
+
+  return { startMinute, endMinute };
+}

backend/src/modules/appointments/appointments.controller.ts

@@ -13,6 +13,7 @@ import {
 import { ApiBearerAuth, ApiOperation, ApiTags } from '@nestjs/swagger';
 import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
 import { AppointmentsService } from './appointments.service';
+import { ColumnProvidersQueryDto } from './dto/column-providers-query.dto';
 import { CreateAppointmentDto } from './dto/create-appointment.dto';
 import { ListAppointmentsDto } from './dto/list-appointments.dto';
 import { UpdateAppointmentDto } from './dto/update-appointment.dto';
@@ -29,9 +30,16 @@ export class AppointmentsController {
     summary:
       'Staff columns: active non-owner members with TAB_TREATMENT_EDIT. Owners are excluded. Requires TAB_APPOINTMENTS_READ or owner.',
   })
-  columnProviders(@Req() req: { user: { id: string; organizationId?: string } }) {
+  columnProviders(
+    @Query() query: ColumnProvidersQueryDto,
+    @Req() req: { user: { id: string; organizationId?: string } },
+  ) {
     const organizationId = this.appointmentsService.getOrganizationIdFromUser(req.user);
-    return this.appointmentsService.listColumnProviders(organizationId, req.user.id);
+    return this.appointmentsService.listColumnProviders(
+      organizationId,
+      req.user.id,
+      query.date,
+    );
   }
 
   @Get()

backend/src/modules/appointments/appointments.module.ts

@@ -1,9 +1,11 @@
 import { Module } from '@nestjs/common';
 import { PrismaService } from '../../../prisma/prisma.service';
+import { StaffModule } from '../staff/staff.module';
 import { AppointmentsController } from './appointments.controller';
 import { AppointmentsService } from './appointments.service';
 
 @Module({
+  imports: [StaffModule],
   controllers: [AppointmentsController],
   providers: [AppointmentsService, PrismaService],
 })

backend/src/modules/appointments/appointments.service.ts

@@ -5,6 +5,12 @@ import {
   NotFoundException,
 } from '@nestjs/common';
 import { PrismaService } from '../../../prisma/prisma.service';
+import {
+  appointmentWithinWorkingHours,
+  blocksForDay,
+  localDayOfWeekMondayZero,
+} from '../../common/working-hours';
+import { StaffWorkingHoursService } from '../staff/staff-working-hours.service';
 import { CreateAppointmentDto } from './dto/create-appointment.dto';
 import { ListAppointmentsDto } from './dto/list-appointments.dto';
 import { UpdateAppointmentDto } from './dto/update-appointment.dto';
@@ -13,7 +19,10 @@ const MS_PER_DAY = 86_400_000;
 
 @Injectable()
 export class AppointmentsService {
-  constructor(private readonly prisma: PrismaService) {}
+  constructor(
+    private readonly prisma: PrismaService,
+    private readonly staffWorkingHoursService: StaffWorkingHoursService,
+  ) {}
 
   getOrganizationIdFromUser(user: { organizationId?: string }) {
     if (!user?.organizationId) {
@@ -22,7 +31,7 @@ export class AppointmentsService {
     return user.organizationId;
   }
 
-  async listColumnProviders(organizationId: string, actorUserId: string) {
+  async listColumnProviders(organizationId: string, actorUserId: string, date?: string) {
     await this.assertCanViewAppointments(actorUserId, organizationId);
 
     const members = await this.prisma.membership.findMany({
@@ -44,7 +53,23 @@ export class AppointmentsService {
       orderBy: [{ createdAt: 'asc' }],
     });
 
-    const data = members.map((m) => ({ userId: m.user.id, name: m.user.name }));
+    const scheduleBlocksByMembership =
+      await this.staffWorkingHoursService.loadScheduleBlocksByMembershipIds(
+        members.map((m) => m.id),
+      );
+
+    const dayOfWeek = this.resolveDayOfWeekMondayZero(date);
+
+    const data = members.map((m) => {
+      const allBlocks = scheduleBlocksByMembership.get(m.id) ?? [];
+      const dayBlocks = blocksForDay(allBlocks, dayOfWeek);
+      return {
+        userId: m.user.id,
+        name: m.user.name,
+        hasWorkingHours: allBlocks.length > 0,
+        dayBlocks,
+      };
+    });
 
     return { success: true, data };
   }
@@ -109,6 +134,12 @@ export class AppointmentsService {
 
     await this.ensurePatientInOrg(dto.patientId, organizationId);
     await this.ensureProviderIsTreatmentEditor(dto.providerUserId, organizationId);
+    await this.ensureAppointmentWithinProviderWorkingHours(
+      dto.providerUserId,
+      organizationId,
+      startAt,
+      endAt,
+    );
 
     const appointment = await this.prisma.appointment.create({
       data: {
@@ -166,6 +197,12 @@ export class AppointmentsService {
 
     await this.ensurePatientInOrg(patientId, organizationId);
     await this.ensureProviderIsTreatmentEditor(providerUserId, organizationId);
+    await this.ensureAppointmentWithinProviderWorkingHours(
+      providerUserId,
+      organizationId,
+      startAt,
+      endAt,
+    );
 
     const appointment = await this.prisma.appointment.update({
       where: { id },
@@ -220,6 +257,9 @@ export class AppointmentsService {
     if (names.includes('TAB_TREATMENT_EDIT')) {
       return;
     }
+    if (names.includes('TAB_TREATMENT_READ')) {
+      return;
+    }
     throw new ForbiddenException('You do not have access to appointments');
   }
 
@@ -270,6 +310,47 @@ export class AppointmentsService {
     }
   }
 
+  private resolveDayOfWeekMondayZero(date?: string): number {
+    if (!date) {
+      return localDayOfWeekMondayZero(new Date().getDay());
+    }
+    const [y, m, d] = date.split('-').map(Number);
+    const parsed = new Date(y, m - 1, d, 12, 0, 0, 0);
+    if (Number.isNaN(parsed.getTime())) {
+      throw new BadRequestException('Invalid date query parameter');
+    }
+    return localDayOfWeekMondayZero(parsed.getDay());
+  }
+
+  private async ensureAppointmentWithinProviderWorkingHours(
+    providerUserId: string,
+    organizationId: string,
+    startAt: Date,
+    endAt: Date,
+  ) {
+    const membership = await this.getMembership(providerUserId, organizationId);
+    if (!membership) {
+      throw new BadRequestException('Provider is not a member of this organization');
+    }
+
+    const scheduleBlocksByMembership =
+      await this.staffWorkingHoursService.loadScheduleBlocksByMembershipIds([membership.id]);
+    const allBlocks = scheduleBlocksByMembership.get(membership.id) ?? [];
+    if (allBlocks.length === 0) {
+      throw new BadRequestException('Provider has no working hours configured');
+    }
+
+    const dayOfWeek = localDayOfWeekMondayZero(startAt.getDay());
+    const dayBlocks = blocksForDay(allBlocks, dayOfWeek);
+    if (dayBlocks.length === 0) {
+      throw new BadRequestException('Provider is not working on this day');
+    }
+
+    if (!appointmentWithinWorkingHours(startAt, endAt, dayBlocks)) {
+      throw new BadRequestException('Appointment must fall within the provider working hours');
+    }
+  }
+
   private async getMembership(userId: string, organizationId: string) {
     return this.prisma.membership.findFirst({
       where: { userId, organizationId },

backend/src/modules/appointments/dto/column-providers-query.dto.ts

@@ -0,0 +1,9 @@
+import { IsOptional, IsString, Matches } from 'class-validator';
+
+export class ColumnProvidersQueryDto {
+  /** Local calendar date (YYYY-MM-DD) used to resolve weekday working hours. */
+  @IsOptional()
+  @IsString()
+  @Matches(/^\d{4}-\d{2}-\d{2}$/)
+  date?: string;
+}

backend/src/modules/auth/auth.service.ts

@@ -756,18 +756,7 @@ export class AuthService {
       throw new UnauthorizedException('Access denied to this organization');
     }
     if (!membership.isOwner && !membership.isActive) {
-      const acceptedInvite = await this.prisma.staffInvitation.findFirst({
-        where: {
-          membershipId: membership.id,
-          acceptedAt: { not: null },
-        },
-        select: { id: true },
-      });
-      throw new UnauthorizedException(
-        acceptedInvite
-          ? 'Your access to this organization has been disabled.'
-          : 'Your invitation is still pending activation.',
-      );
+      throw new UnauthorizedException('Your invitation is still pending activation');
     }
 
     // 2. Build payload WITH org context

backend/src/modules/patients/dto/create-treatment-history.dto.ts

@@ -1,28 +0,0 @@
-import { IsDateString, IsNumber, IsOptional, IsString, MaxLength } from 'class-validator';
-
-export class CreateTreatmentHistoryDto {
-  @IsString()
-  @MaxLength(120)
-  title: string;
-
-  @IsString()
-  @MaxLength(40)
-  status: string;
-
-  @IsDateString()
-  treatmentAt: string;
-
-  @IsOptional()
-  @IsString()
-  @MaxLength(20)
-  tooth?: string;
-
-  @IsOptional()
-  @IsString()
-  @MaxLength(1000)
-  notes?: string;
-
-  @IsOptional()
-  @IsNumber()
-  totalCost?: number;
-}

backend/src/modules/patients/patients.controller.ts

@@ -16,7 +16,6 @@ import { CreatePatientDto } from './dto/create-patient.dto';
 import { ListPatientsDto } from './dto/list-patients.dto';
 import { UpdatePatientDto } from './dto/update-patient.dto';
 import { PatientsService } from './patients.service';
-import { CreateTreatmentHistoryDto } from './dto/create-treatment-history.dto';
 
 @ApiTags('patients')
 @ApiBearerAuth('JWT-auth')
@@ -52,26 +51,4 @@ export class PatientsController {
     const organizationId = this.patientsService.getOrganizationIdFromUser(req.user);
     return this.patientsService.update(id, updatePatientDto, organizationId);
   }
-
-  @Get(':id/treatments')
-  @ApiOperation({ summary: 'Get patient treatment history' })
-  findTreatments(
-    @Param('id') id: string,
-    @Query('limit', new ParseIntPipe({ optional: true })) limit = 20,
-    @Req() req,
-  ) {
-    const organizationId = this.patientsService.getOrganizationIdFromUser(req.user);
-    return this.patientsService.findTreatments(id, organizationId, limit);
-  }
-
-  @Post(':id/treatments')
-  @ApiOperation({ summary: 'Add treatment history item for a patient' })
-  addTreatment(
-    @Param('id') id: string,
-    @Body() dto: CreateTreatmentHistoryDto,
-    @Req() req,
-  ) {
-    const organizationId = this.patientsService.getOrganizationIdFromUser(req.user);
-    return this.patientsService.addTreatment(id, dto, organizationId);
-  }
 }

backend/src/modules/patients/patients.service.ts

@@ -3,7 +3,6 @@ import { PrismaService } from '../../../prisma/prisma.service';
 import { CreatePatientDto } from './dto/create-patient.dto';
 import { ListPatientsDto } from './dto/list-patients.dto';
 import { UpdatePatientDto } from './dto/update-patient.dto';
-import { CreateTreatmentHistoryDto } from './dto/create-treatment-history.dto';
 
 @Injectable()
 export class PatientsService {
@@ -89,36 +88,6 @@ export class PatientsService {
     return { success: true, data: patient };
   }
 
-  async findTreatments(patientId: string, organizationId: string, limit = 20) {
-    await this.ensurePatient(patientId, organizationId);
-
-    const items = await this.prisma.patientTreatmentHistory.findMany({
-      where: { patientId },
-      orderBy: [{ treatmentAt: 'desc' }],
-      take: limit,
-    });
-
-    return { success: true, data: items };
-  }
-
-  async addTreatment(
-    patientId: string,
-    dto: CreateTreatmentHistoryDto,
-    organizationId: string,
-  ) {
-    await this.ensurePatient(patientId, organizationId);
-
-    const treatment = await this.prisma.patientTreatmentHistory.create({
-      data: {
-        ...dto,
-        treatmentAt: new Date(dto.treatmentAt),
-        patientId,
-      },
-    });
-
-    return { success: true, data: treatment };
-  }
-
   private async ensurePatient(id: string, organizationId: string) {
     const patient = await this.prisma.patient.findFirst({
       where: { id, organizationId },

backend/src/modules/staff/dto/upsert-working-hours.dto.ts

@@ -0,0 +1,44 @@
+import { Type } from 'class-transformer';
+import {
+  ArrayMaxSize,
+  IsArray,
+  IsBoolean,
+  IsInt,
+  IsOptional,
+  Max,
+  Min,
+  ValidateNested,
+} from 'class-validator';
+
+export class WorkingHoursBlockDto {
+  @IsInt()
+  @Min(0)
+  @Max(6)
+  dayOfWeek: number;
+
+  @IsInt()
+  @Min(0)
+  @Max(1439)
+  startMinute: number;
+
+  @IsInt()
+  @Min(1)
+  @Max(1440)
+  endMinute: number;
+
+  @IsOptional()
+  @IsInt()
+  @Min(0)
+  sortOrder?: number;
+}
+
+export class UpsertWorkingHoursDto {
+  @IsBoolean()
+  autoRepeatWeekly: boolean;
+
+  @IsArray()
+  @ArrayMaxSize(42)
+  @ValidateNested({ each: true })
+  @Type(() => WorkingHoursBlockDto)
+  blocks: WorkingHoursBlockDto[];
+}

backend/src/modules/staff/staff-working-hours.service.ts

@@ -0,0 +1,264 @@
+import {
+  BadRequestException,
+  ForbiddenException,
+  Injectable,
+  NotFoundException,
+} from '@nestjs/common';
+import { PrismaService } from '../../../prisma/prisma.service';
+import {
+  appointmentWithinWorkingHours,
+  blocksForDay,
+  localDayOfWeekMondayZero,
+  validateWorkingHoursBlocks,
+  type WorkingHoursBlockInput,
+} from '../../common/working-hours';
+import { UpsertWorkingHoursDto } from './dto/upsert-working-hours.dto';
+
+@Injectable()
+export class StaffWorkingHoursService {
+  constructor(private readonly prisma: PrismaService) {}
+
+  async getWorkingHours(actorUserId: string, organizationId: string, membershipId: string) {
+    await this.assertCanViewStaff(actorUserId, organizationId);
+
+    const membership = await this.findMembership(membershipId, organizationId);
+    const schedule = await this.prisma.staffWorkingHoursSchedule.findUnique({
+      where: { membershipId: membership.id },
+      include: {
+        blocks: { orderBy: [{ dayOfWeek: 'asc' }, { sortOrder: 'asc' }, { startMinute: 'asc' }] },
+      },
+    });
+
+    if (!schedule) {
+      return {
+        success: true,
+        data: {
+          autoRepeatWeekly: true,
+          blocks: [],
+          hasWorkingHours: false,
+        },
+      };
+    }
+
+    return {
+      success: true,
+      data: {
+        autoRepeatWeekly: schedule.autoRepeatWeekly,
+        blocks: schedule.blocks.map((b) => ({
+          dayOfWeek: b.dayOfWeek,
+          startMinute: b.startMinute,
+          endMinute: b.endMinute,
+          sortOrder: b.sortOrder,
+        })),
+        hasWorkingHours: schedule.blocks.length > 0,
+      },
+    };
+  }
+
+  async upsertWorkingHours(
+    actorUserId: string,
+    organizationId: string,
+    membershipId: string,
+    dto: UpsertWorkingHoursDto,
+  ) {
+    await this.assertCanEditStaff(actorUserId, organizationId);
+
+    const membership = await this.findMembership(membershipId, organizationId);
+    const validationError = validateWorkingHoursBlocks(dto.blocks);
+    if (validationError) {
+      throw new BadRequestException(validationError);
+    }
+
+    const normalizedBlocks = this.normalizeBlocks(dto.blocks);
+    await this.assertNoConflictingAppointments(
+      organizationId,
+      membership.userId,
+      normalizedBlocks,
+    );
+
+    await this.prisma.$transaction(async (tx) => {
+      const schedule = await tx.staffWorkingHoursSchedule.upsert({
+        where: { membershipId: membership.id },
+        create: {
+          membershipId: membership.id,
+          autoRepeatWeekly: dto.autoRepeatWeekly,
+        },
+        update: {
+          autoRepeatWeekly: dto.autoRepeatWeekly,
+        },
+      });
+
+      await tx.staffWorkingHoursBlock.deleteMany({ where: { scheduleId: schedule.id } });
+
+      if (normalizedBlocks.length > 0) {
+        await tx.staffWorkingHoursBlock.createMany({
+          data: normalizedBlocks.map((block, index) => ({
+            scheduleId: schedule.id,
+            dayOfWeek: block.dayOfWeek,
+            startMinute: block.startMinute,
+            endMinute: block.endMinute,
+            sortOrder: block.sortOrder ?? index,
+          })),
+        });
+      }
+    });
+
+    return {
+      success: true,
+      message: 'Working hours saved',
+    };
+  }
+
+  async loadScheduleBlocksByMembershipIds(membershipIds: string[]) {
+    if (membershipIds.length === 0) {
+      return new Map<string, WorkingHoursBlockInput[]>();
+    }
+
+    const schedules = await this.prisma.staffWorkingHoursSchedule.findMany({
+      where: { membershipId: { in: membershipIds } },
+      include: {
+        blocks: { orderBy: [{ dayOfWeek: 'asc' }, { sortOrder: 'asc' }, { startMinute: 'asc' }] },
+      },
+    });
+
+    const map = new Map<string, WorkingHoursBlockInput[]>();
+    for (const schedule of schedules) {
+      map.set(
+        schedule.membershipId,
+        schedule.blocks.map((b) => ({
+          dayOfWeek: b.dayOfWeek,
+          startMinute: b.startMinute,
+          endMinute: b.endMinute,
+          sortOrder: b.sortOrder,
+        })),
+      );
+    }
+    return map;
+  }
+
+  dayBlocksFromMembershipBlocks(blocks: WorkingHoursBlockInput[], dayOfWeekMondayZero: number) {
+    return blocksForDay(blocks, dayOfWeekMondayZero);
+  }
+
+  private normalizeBlocks(blocks: UpsertWorkingHoursDto['blocks']): WorkingHoursBlockInput[] {
+    return blocks.map((block, index) => ({
+      dayOfWeek: block.dayOfWeek,
+      startMinute: block.startMinute,
+      endMinute: block.endMinute,
+      sortOrder: block.sortOrder ?? index,
+    }));
+  }
+
+  private async assertNoConflictingAppointments(
+    organizationId: string,
+    providerUserId: string,
+    blocks: WorkingHoursBlockInput[],
+  ) {
+    const now = new Date();
+    const appointments = await this.prisma.appointment.findMany({
+      where: {
+        organizationId,
+        providerUserId,
+        endAt: { gt: now },
+      },
+      include: {
+        patient: { select: { firstName: true, lastName: true } },
+      },
+      orderBy: { startAt: 'asc' },
+    });
+
+    const conflicts = appointments.filter((appointment) => {
+      const startAt = new Date(appointment.startAt);
+      const endAt = new Date(appointment.endAt);
+      const dayOfWeek = localDayOfWeekMondayZero(startAt.getDay());
+      const dayBlocks = blocksForDay(blocks, dayOfWeek);
+      if (dayBlocks.length === 0) {
+        return true;
+      }
+      return !appointmentWithinWorkingHours(startAt, endAt, dayBlocks);
+    });
+
+    if (conflicts.length === 0) {
+      return;
+    }
+
+    const examples = conflicts.slice(0, 3).map((appointment) => {
+      const startAt = new Date(appointment.startAt);
+      const patientName = `${appointment.patient.firstName} ${appointment.patient.lastName}`;
+      const when = startAt.toLocaleString(undefined, {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit',
+      });
+      return `${patientName} (${when})`;
+    });
+
+    const extra =
+      conflicts.length > examples.length
+        ? ` and ${conflicts.length - examples.length} more`
+        : '';
+
+    throw new BadRequestException(
+      `Cannot save working hours: ${conflicts.length} upcoming appointment${conflicts.length === 1 ? '' : 's'} fall outside the new schedule (${examples.join(', ')}${extra}). Reschedule or remove those appointments first.`,
+    );
+  }
+
+  private async findMembership(membershipId: string, organizationId: string) {
+    const membership = await this.prisma.membership.findFirst({
+      where: { id: membershipId, organizationId },
+      select: { id: true, isOwner: true, userId: true },
+    });
+    if (!membership) {
+      throw new NotFoundException('Member not found');
+    }
+    if (membership.isOwner) {
+      throw new BadRequestException('Working hours cannot be set for the organization owner');
+    }
+    return membership;
+  }
+
+  private async assertCanViewStaff(userId: string, organizationId: string) {
+    const actor = await this.getActorMembership(userId, organizationId);
+    if (!actor || !this.canViewStaff(actor)) {
+      throw new ForbiddenException('You do not have access to staff management');
+    }
+  }
+
+  private async assertCanEditStaff(userId: string, organizationId: string) {
+    const actor = await this.getActorMembership(userId, organizationId);
+    if (!actor || !this.canEditStaff(actor)) {
+      throw new ForbiddenException('You cannot manage staff working hours');
+    }
+  }
+
+  private async getActorMembership(userId: string, organizationId: string) {
+    return this.prisma.membership.findFirst({
+      where: { userId, organizationId },
+      include: {
+        permissions: { include: { permission: true } },
+        organization: { select: { planId: true } },
+      },
+    });
+  }
+
+  private canViewStaff(m: {
+    isOwner: boolean;
+    permissions: { permission: { name: string } }[];
+  }): boolean {
+    if (m.isOwner) return true;
+    return m.permissions.some(
+      (p) => p.permission.name === 'TAB_STAFF_READ' || p.permission.name === 'TAB_STAFF_EDIT',
+    );
+  }
+
+  private canEditStaff(m: {
+    isOwner: boolean;
+    organization?: { planId: string | null };
+    permissions: { permission: { name: string } }[];
+  }): boolean {
+    if (m.isOwner) return Boolean(m.organization?.planId);
+    return m.permissions.some((p) => p.permission.name === 'TAB_STAFF_EDIT');
+  }
+}

backend/src/modules/staff/staff.controller.ts

@@ -6,6 +6,7 @@ import {
   Param,
   Patch,
   Post,
+  Put,
   Query,
   Req,
   UseGuards,
@@ -16,13 +17,18 @@ import { AcceptStaffInviteDto } from './dto/accept-staff-invite.dto';
 import { InviteStaffDto } from './dto/invite-staff.dto';
 import { PreviewStaffInviteDto } from './dto/preview-staff-invite.dto';
 import { UpdateStaffMemberDto } from './dto/update-staff-member.dto';
+import { UpsertWorkingHoursDto } from './dto/upsert-working-hours.dto';
 import { StaffService } from './staff.service';
+import { StaffWorkingHoursService } from './staff-working-hours.service';
 
 @ApiTags('staff')
 @ApiBearerAuth('JWT-auth')
 @Controller('staff')
 export class StaffController {
-  constructor(private readonly staffService: StaffService) {}
+  constructor(
+    private readonly staffService: StaffService,
+    private readonly staffWorkingHoursService: StaffWorkingHoursService,
+  ) {}
 
   @Get('invitations/preview')
   @ApiOperation({ summary: 'Preview invite info by token (public)' })
@@ -80,6 +86,51 @@ export class StaffController {
     return this.staffService.updateMember(req.user.id, organizationId, membershipId, dto);
   }
 
+  @Get('members/:membershipId/working-hours')
+  @UseGuards(JwtAuthGuard)
+  @ApiOperation({ summary: 'Get weekly working hours for a staff member' })
+  getWorkingHours(
+    @Req() req: { user: { id: string; organizationId?: string } },
+    @Param('membershipId') membershipId: string,
+  ) {
+    const organizationId = this.staffService.getOrganizationIdFromUser(req.user);
+    return this.staffWorkingHoursService.getWorkingHours(
+      req.user.id,
+      organizationId,
+      membershipId,
+    );
+  }
+
+  @Put('members/:membershipId/working-hours')
+  @UseGuards(JwtAuthGuard)
+  @ApiOperation({ summary: 'Save weekly working hours for a staff member' })
+  upsertWorkingHours(
+    @Req() req: { user: { id: string; organizationId?: string } },
+    @Param('membershipId') membershipId: string,
+    @Body() dto: UpsertWorkingHoursDto,
+  ) {
+    const organizationId = this.staffService.getOrganizationIdFromUser(req.user);
+    return this.staffWorkingHoursService.upsertWorkingHours(
+      req.user.id,
+      organizationId,
+      membershipId,
+      dto,
+    );
+  }
+
+  @Patch('members/:membershipId/enable')
+  @UseGuards(JwtAuthGuard)
+  @ApiOperation({
+    summary: 'Re-enable a disabled staff member (uses one plan seat; no new invitation)',
+  })
+  enableMember(
+    @Req() req: { user: { id: string; organizationId?: string } },
+    @Param('membershipId') membershipId: string,
+  ) {
+    const organizationId = this.staffService.getOrganizationIdFromUser(req.user);
+    return this.staffService.enableMember(req.user.id, organizationId, membershipId);
+  }
+
   @Patch('members/:membershipId/disable')
   @UseGuards(JwtAuthGuard)
   @ApiOperation({

backend/src/modules/staff/staff.module.ts

@@ -2,9 +2,11 @@ import { Module } from '@nestjs/common';
 import { PrismaService } from '../../../prisma/prisma.service';
 import { StaffController } from './staff.controller';
 import { StaffService } from './staff.service';
+import { StaffWorkingHoursService } from './staff-working-hours.service';
 
 @Module({
   controllers: [StaffController],
-  providers: [StaffService, PrismaService],
+  providers: [StaffService, StaffWorkingHoursService, PrismaService],
+  exports: [StaffWorkingHoursService],
 })
 export class StaffModule {}

backend/src/modules/staff/staff.service.ts

@@ -7,6 +7,7 @@ import {
 } from '@nestjs/common';
 import * as bcrypt from 'bcrypt';
 import { createHash, randomBytes } from 'crypto';
+import { Prisma } from '@prisma/client';
 import { PrismaService } from '../../../prisma/prisma.service';
 import { AcceptStaffInviteDto } from './dto/accept-staff-invite.dto';
 import { isUnlimitedSeats, normalizeTabPermissions } from '../../common/permissions';
@@ -399,6 +400,50 @@ export class StaffService {
     return { success: true, message: 'Member updated' };
   }
 
+  async enableMember(actorUserId: string, organizationId: string, membershipId: string) {
+    const actor = await this.getActorMembership(actorUserId, organizationId);
+    if (!actor || !this.canEditStaff(actor)) {
+      throw new ForbiddenException('You cannot manage staff');
+    }
+
+    const target = await this.prisma.membership.findFirst({
+      where: { id: membershipId, organizationId },
+      include: {
+        invitations: { orderBy: { createdAt: 'desc' }, take: 1 },
+      },
+    });
+
+    if (!target) {
+      throw new NotFoundException('Member not found');
+    }
+    if (target.isOwner) {
+      throw new ForbiddenException('Cannot enable the organization owner');
+    }
+    if (target.isActive) {
+      throw new BadRequestException('This member is already active');
+    }
+
+    const invitation = target.invitations[0];
+    if (invitation && !invitation.acceptedAt) {
+      throw new BadRequestException(
+        'This member has not completed their invitation yet. Share the invite link instead.',
+      );
+    }
+
+    await this.prisma.$transaction(async (tx) => {
+      await this.assertOrganizationHasAvailableSeat(organizationId, tx);
+      await tx.membership.update({
+        where: { id: membershipId },
+        data: { isActive: true },
+      });
+    });
+
+    return {
+      success: true,
+      message: 'Member enabled. They can sign in to this organization again.',
+    };
+  }
+
   async disableMember(actorUserId: string, organizationId: string, membershipId: string) {
     const actor = await this.getActorMembership(actorUserId, organizationId);
     if (!actor || !this.canEditStaff(actor)) {
@@ -459,6 +504,37 @@ export class StaffService {
     return { success: true, message: 'Member removed' };
   }
 
+  private async assertOrganizationHasAvailableSeat(
+    organizationId: string,
+    db: Prisma.TransactionClient | PrismaService = this.prisma,
+  ) {
+    const org = await db.organization.findUnique({
+      where: { id: organizationId },
+      include: { plan: true },
+    });
+    if (!org) {
+      throw new NotFoundException('Organization not found');
+    }
+    if (!org.plan) {
+      throw new BadRequestException(
+        'This organization has no active subscription. Please choose a plan before adding staff.',
+      );
+    }
+
+    const maxUsers = org.plan.maxUsers;
+    const seatsUsed = await db.membership.count({
+      where: {
+        organizationId,
+        OR: [{ isOwner: true }, { isActive: true }],
+      },
+    });
+    if (!isUnlimitedSeats(maxUsers) && seatsUsed >= maxUsers) {
+      throw new BadRequestException(
+        `Your plan allows ${maxUsers} team members. Free a seat by disabling another member or upgrade your plan.`,
+      );
+    }
+  }
+
   private async getActorMembership(userId: string, organizationId: string) {
     return this.prisma.membership.findFirst({
       where: { userId, organizationId },

backend/src/modules/treatments/dto/treatment.dto.ts

@@ -0,0 +1,60 @@
+import {
+  ArrayMinSize,
+  IsArray,
+  IsIn,
+  IsOptional,
+  IsString,
+  IsUUID,
+  MaxLength,
+  ValidateNested,
+} from 'class-validator';
+import { Type } from 'class-transformer';
+
+const TREATMENT_TYPES = ['consultation', 'filling', 'endo', 'visit', 'hygiene'] as const;
+
+export class SaveTreatmentCaseDto {
+  @IsString()
+  @MaxLength(64)
+  clientId: string;
+
+  @IsOptional()
+  @IsUUID()
+  id?: string;
+
+  @IsIn(TREATMENT_TYPES)
+  treatmentType: string;
+
+  @IsArray()
+  @IsString({ each: true })
+  teeth: string[];
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(5000)
+  comment?: string;
+
+  @IsOptional()
+  @IsArray()
+  @IsUUID(undefined, { each: true })
+  attachmentIds?: string[];
+}
+
+export class SaveTreatmentDraftDto {
+  @IsArray()
+  @ArrayMinSize(1)
+  @ValidateNested({ each: true })
+  @Type(() => SaveTreatmentCaseDto)
+  cases: SaveTreatmentCaseDto[];
+}
+
+export class SendTreatmentCaseDto {
+  @IsArray()
+  @ArrayMinSize(1)
+  @IsUUID(undefined, { each: true })
+  organizationIds: string[];
+}
+
+export class ListPatientTreatmentHistoryDto {
+  @IsOptional()
+  limit?: number;
+}

backend/src/modules/treatments/treatment.utils.spec.ts

@@ -0,0 +1,16 @@
+import { generateTreatmentTitle, normalizeTeeth } from './treatment.utils';
+
+describe('treatment.utils', () => {
+  it('normalizes valid FDI teeth', () => {
+    expect(normalizeTeeth(['45', '14', '14', '99'])).toEqual(['14', '45']);
+  });
+
+  it('generates a title from cases', () => {
+    expect(
+      generateTreatmentTitle([
+        { treatmentType: 'filling', teeth: ['14', '15'] },
+        { treatmentType: 'endo', teeth: ['45'] },
+      ]),
+    ).toBe('Filling 14, 15 · Endo 45');
+  });
+});

backend/src/modules/treatments/treatment.utils.ts

@@ -0,0 +1,53 @@
+import { TreatmentStatus } from '@prisma/client';
+
+const TREATMENT_TYPES = ['consultation', 'filling', 'endo', 'visit', 'hygiene'] as const;
+
+export type TreatmentTypeValue = (typeof TREATMENT_TYPES)[number];
+
+export function isTreatmentType(value: string): value is TreatmentTypeValue {
+  return (TREATMENT_TYPES as readonly string[]).includes(value);
+}
+
+const FDI_TOOTH_IDS = new Set([
+  '11', '12', '13', '14', '15', '16', '17', '18',
+  '21', '22', '23', '24', '25', '26', '27', '28',
+  '31', '32', '33', '34', '35', '36', '37', '38',
+  '41', '42', '43', '44', '45', '46', '47', '48',
+]);
+
+export function normalizeTeeth(teeth: unknown): string[] {
+  if (!Array.isArray(teeth)) {
+    return [];
+  }
+  const unique = new Set<string>();
+  for (const tooth of teeth) {
+    if (typeof tooth !== 'string') continue;
+    const trimmed = tooth.trim();
+    if (FDI_TOOTH_IDS.has(trimmed)) {
+      unique.add(trimmed);
+    }
+  }
+  return [...unique].sort();
+}
+
+export function generateTreatmentTitle(
+  cases: { treatmentType: string; teeth: string[] }[],
+): string {
+  if (cases.length === 0) {
+    return 'Treatment';
+  }
+
+  const parts = cases.map((c) => {
+    const label = c.treatmentType.charAt(0).toUpperCase() + c.treatmentType.slice(1);
+    if (c.teeth.length > 0) {
+      return `${label} ${c.teeth.join(', ')}`;
+    }
+    return label;
+  });
+
+  return parts.join(' · ');
+}
+
+export function mapTreatmentStatusForApi(status: TreatmentStatus): string {
+  return status === TreatmentStatus.DRAFT ? 'draft' : 'completed';
+}

backend/src/modules/treatments/treatments.controller.ts

@@ -0,0 +1,148 @@
+import {
+  Body,
+  Controller,
+  Get,
+  Param,
+  ParseIntPipe,
+  Post,
+  Put,
+  Query,
+  Req,
+  Res,
+  UploadedFiles,
+  UseGuards,
+  UseInterceptors,
+} from '@nestjs/common';
+import { FilesInterceptor } from '@nestjs/platform-express';
+import { ApiBearerAuth, ApiBody, ApiConsumes, ApiOperation, ApiTags } from '@nestjs/swagger';
+import { memoryStorage } from 'multer';
+import type { Response } from 'express';
+import { JwtAuthGuard } from '../auth/guards/jwt-auth.guard';
+import { SaveTreatmentDraftDto, SendTreatmentCaseDto } from './dto/treatment.dto';
+import { TreatmentsService } from './treatments.service';
+
+@ApiTags('treatments')
+@ApiBearerAuth('JWT-auth')
+@UseGuards(JwtAuthGuard)
+@Controller('treatments')
+export class TreatmentsController {
+  constructor(private readonly treatmentsService: TreatmentsService) {}
+
+  @Get('linked-organizations')
+  @ApiOperation({ summary: 'List active linked counterpart organizations (TAB_TREATMENT_READ)' })
+  listLinkedOrganizations(@Req() req: { user: { id: string; organizationId?: string } }) {
+    const organizationId = this.treatmentsService.getOrganizationIdFromUser(req.user);
+    return this.treatmentsService.listLinkedOrganizations(req.user.id, organizationId);
+  }
+
+  @Get('patients/:patientId/history')
+  @ApiOperation({ summary: 'List completed treatments for a patient (TAB_TREATMENT_READ)' })
+  listPatientHistory(
+    @Param('patientId') patientId: string,
+    @Query('limit', new ParseIntPipe({ optional: true })) limit = 20,
+    @Req() req: { user: { id: string; organizationId?: string } },
+  ) {
+    const organizationId = this.treatmentsService.getOrganizationIdFromUser(req.user);
+    return this.treatmentsService.listPatientHistory(
+      patientId,
+      organizationId,
+      req.user.id,
+      limit,
+    );
+  }
+
+  @Get('appointments/:appointmentId/draft')
+  @ApiOperation({ summary: 'Get draft treatment for an appointment (TAB_TREATMENT_READ)' })
+  getDraft(
+    @Param('appointmentId') appointmentId: string,
+    @Req() req: { user: { id: string; organizationId?: string } },
+  ) {
+    const organizationId = this.treatmentsService.getOrganizationIdFromUser(req.user);
+    return this.treatmentsService.getDraftForAppointment(
+      appointmentId,
+      organizationId,
+      req.user.id,
+    );
+  }
+
+  @Put('appointments/:appointmentId/draft')
+  @ApiOperation({ summary: 'Save draft treatment for an appointment (TAB_TREATMENT_EDIT)' })
+  saveDraft(
+    @Param('appointmentId') appointmentId: string,
+    @Body() dto: SaveTreatmentDraftDto,
+    @Req() req: { user: { id: string; organizationId?: string } },
+  ) {
+    const organizationId = this.treatmentsService.getOrganizationIdFromUser(req.user);
+    return this.treatmentsService.saveDraftForAppointment(
+      appointmentId,
+      dto,
+      organizationId,
+      req.user.id,
+    );
+  }
+
+  @Post('appointments/:appointmentId/cases/:caseClientKey/attachments')
+  @ApiOperation({ summary: 'Upload attachments for a draft case (TAB_TREATMENT_EDIT)' })
+  @ApiConsumes('multipart/form-data')
+  @ApiBody({
+    schema: {
+      type: 'object',
+      properties: {
+        files: {
+          type: 'array',
+          items: { type: 'string', format: 'binary' },
+        },
+      },
+    },
+  })
+  @UseInterceptors(
+    FilesInterceptor('files', 20, {
+      storage: memoryStorage(),
+    }),
+  )
+  uploadAttachments(
+    @Param('appointmentId') appointmentId: string,
+    @Param('caseClientKey') caseClientKey: string,
+    @UploadedFiles() files: Express.Multer.File[],
+    @Req() req: { user: { id: string; organizationId?: string } },
+  ) {
+    const organizationId = this.treatmentsService.getOrganizationIdFromUser(req.user);
+    return this.treatmentsService.uploadCaseAttachments(
+      appointmentId,
+      caseClientKey,
+      files,
+      organizationId,
+      req.user.id,
+    );
+  }
+
+  @Get('attachments/:attachmentId/file')
+  @ApiOperation({ summary: 'Download a treatment attachment (TAB_TREATMENT_READ)' })
+  async downloadAttachment(
+    @Param('attachmentId') attachmentId: string,
+    @Req() req: { user: { id: string; organizationId?: string } },
+    @Res() res: Response,
+  ) {
+    const organizationId = this.treatmentsService.getOrganizationIdFromUser(req.user);
+    const file = await this.treatmentsService.streamAttachmentFile(
+      attachmentId,
+      organizationId,
+      req.user.id,
+    );
+
+    res.setHeader('Content-Type', file.mimeType);
+    res.setHeader('Content-Disposition', `inline; filename="${file.fileName}"`);
+    file.stream.pipe(res);
+  }
+
+  @Post('cases/:caseId/send')
+  @ApiOperation({ summary: 'Send a treatment case to linked organizations (TAB_TREATMENT_EDIT)' })
+  sendCase(
+    @Param('caseId') caseId: string,
+    @Body() dto: SendTreatmentCaseDto,
+    @Req() req: { user: { id: string; organizationId?: string } },
+  ) {
+    const organizationId = this.treatmentsService.getOrganizationIdFromUser(req.user);
+    return this.treatmentsService.sendCase(caseId, dto, organizationId, req.user.id);
+  }
+}

backend/src/modules/treatments/treatments.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { PrismaService } from '../../../prisma/prisma.service';
+import { TreatmentsController } from './treatments.controller';
+import { TreatmentsService } from './treatments.service';
+
+@Module({
+  controllers: [TreatmentsController],
+  providers: [TreatmentsService, PrismaService],
+})
+export class TreatmentsModule {}

backend/src/modules/treatments/treatments.service.ts

@@ -0,0 +1,625 @@
+import {
+  BadRequestException,
+  ForbiddenException,
+  Injectable,
+  NotFoundException,
+} from '@nestjs/common';
+import { LinkStatus, TreatmentStatus } from '@prisma/client';
+import { createReadStream, existsSync, mkdirSync } from 'fs';
+import { join } from 'path';
+import { randomUUID } from 'crypto';
+import { PrismaService } from '../../../prisma/prisma.service';
+import { SaveTreatmentDraftDto, SendTreatmentCaseDto } from './dto/treatment.dto';
+import {
+  generateTreatmentTitle,
+  isTreatmentType,
+  mapTreatmentStatusForApi,
+  normalizeTeeth,
+} from './treatment.utils';
+
+const treatmentInclude = {
+  cases: {
+    orderBy: [{ sortOrder: 'asc' as const }],
+    include: {
+      attachments: { orderBy: [{ createdAt: 'asc' as const }] },
+      sends: {
+        orderBy: [{ sentAt: 'asc' as const }],
+        include: { organization: { select: { id: true, name: true } } },
+      },
+    },
+  },
+};
+
+@Injectable()
+export class TreatmentsService {
+  private readonly uploadRoot = join(process.cwd(), 'uploads', 'treatments');
+
+  constructor(private readonly prisma: PrismaService) {}
+
+  getOrganizationIdFromUser(user: { organizationId?: string }) {
+    if (!user?.organizationId) {
+      throw new BadRequestException('Organization is not selected');
+    }
+    return user.organizationId;
+  }
+
+  async listLinkedOrganizations(userId: string, organizationId: string) {
+    await this.assertCanReadTreatment(userId, organizationId);
+
+    const [linksA, linksB] = await Promise.all([
+      this.prisma.organizationLink.findMany({
+        where: { organizationAId: organizationId, status: LinkStatus.ACTIVE },
+        include: { organizationB: { select: { id: true, name: true } } },
+      }),
+      this.prisma.organizationLink.findMany({
+        where: { organizationBId: organizationId, status: LinkStatus.ACTIVE },
+        include: { organizationA: { select: { id: true, name: true } } },
+      }),
+    ]);
+
+    const data = [
+      ...linksA.map((l) => ({
+        id: l.organizationB.id,
+        name: l.organizationB.name,
+        active: true,
+      })),
+      ...linksB.map((l) => ({
+        id: l.organizationA.id,
+        name: l.organizationA.name,
+        active: true,
+      })),
+    ].sort((a, b) => a.name.localeCompare(b.name));
+
+    return { success: true, data };
+  }
+
+  async listPatientHistory(
+    patientId: string,
+    organizationId: string,
+    actorUserId: string,
+    limit = 20,
+  ) {
+    await this.assertCanReadTreatment(actorUserId, organizationId);
+    await this.ensurePatientInOrg(patientId, organizationId);
+
+    const items = await this.prisma.treatment.findMany({
+      where: {
+        patientId,
+        organizationId,
+        status: TreatmentStatus.COMPLETED,
+      },
+      include: treatmentInclude,
+      orderBy: [{ treatmentAt: 'desc' }],
+      take: Math.min(Math.max(limit, 1), 100),
+    });
+
+    return { success: true, data: items.map((t) => this.mapTreatment(t)) };
+  }
+
+  async getDraftForAppointment(
+    appointmentId: string,
+    organizationId: string,
+    actorUserId: string,
+  ) {
+    await this.assertCanReadTreatment(actorUserId, organizationId);
+    const appointment = await this.ensureAppointmentProvider(
+      appointmentId,
+      organizationId,
+      actorUserId,
+      false,
+    );
+
+    const treatment = await this.prisma.treatment.findFirst({
+      where: {
+        appointmentId: appointment.id,
+        organizationId,
+        status: TreatmentStatus.DRAFT,
+      },
+      include: treatmentInclude,
+    });
+
+    return { success: true, data: treatment ? this.mapTreatment(treatment) : null };
+  }
+
+  async saveDraftForAppointment(
+    appointmentId: string,
+    dto: SaveTreatmentDraftDto,
+    organizationId: string,
+    actorUserId: string,
+  ) {
+    await this.assertCanEditTreatment(actorUserId, organizationId);
+    const appointment = await this.ensureAppointmentProvider(
+      appointmentId,
+      organizationId,
+      actorUserId,
+      true,
+    );
+
+    for (const c of dto.cases) {
+      if (!isTreatmentType(c.treatmentType)) {
+        throw new BadRequestException(`Invalid treatment type: ${c.treatmentType}`);
+      }
+    }
+
+    const normalizedCases = dto.cases.map((c, index) => ({
+      ...c,
+      sortOrder: index,
+      teeth: normalizeTeeth(c.teeth),
+      comment: c.comment?.trim() || null,
+      attachmentIds: c.attachmentIds ?? [],
+    }));
+
+    const title = generateTreatmentTitle(
+      normalizedCases.map((c) => ({ treatmentType: c.treatmentType, teeth: c.teeth })),
+    );
+
+    const treatment = await this.prisma.$transaction(async (tx) => {
+      const existing = await tx.treatment.findFirst({
+        where: { appointmentId: appointment.id, organizationId },
+        select: { id: true },
+      });
+
+      const saved = existing
+        ? await tx.treatment.update({
+            where: { id: existing.id },
+            data: {
+              title,
+              treatmentAt: appointment.startAt,
+              patientId: appointment.patientId,
+              providerUserId: appointment.providerUserId,
+              status: TreatmentStatus.DRAFT,
+            },
+          })
+        : await tx.treatment.create({
+            data: {
+              organizationId,
+              patientId: appointment.patientId,
+              appointmentId: appointment.id,
+              providerUserId: appointment.providerUserId,
+              title,
+              status: TreatmentStatus.DRAFT,
+              treatmentAt: appointment.startAt,
+            },
+          });
+
+      const keepCaseIds = normalizedCases.map((c) => c.id).filter(Boolean) as string[];
+      const existingCases = existing
+        ? await tx.treatmentCase.findMany({
+            where: { treatmentId: saved.id },
+            select: { id: true, sentAt: true },
+          })
+        : [];
+
+      const sentCaseIds = new Set(
+        existingCases.filter((c) => c.sentAt).map((c) => c.id),
+      );
+
+      const removableCaseIds = existingCases
+        .filter((c) => !keepCaseIds.includes(c.id) && !c.sentAt)
+        .map((c) => c.id);
+
+      if (removableCaseIds.length > 0) {
+        await tx.treatmentCase.deleteMany({
+          where: { id: { in: removableCaseIds }, treatmentId: saved.id },
+        });
+      }
+
+      for (const c of normalizedCases) {
+        if (c.id && sentCaseIds.has(c.id)) {
+          continue;
+        }
+
+        const row = c.id
+          ? await tx.treatmentCase.update({
+              where: { id: c.id },
+              data: {
+                clientKey: c.clientId,
+                sortOrder: c.sortOrder,
+                treatmentType: c.treatmentType,
+                teeth: c.teeth,
+                comment: c.comment,
+              },
+            })
+          : await tx.treatmentCase.create({
+              data: {
+                treatmentId: saved.id,
+                clientKey: c.clientId,
+                sortOrder: c.sortOrder,
+                treatmentType: c.treatmentType,
+                teeth: c.teeth,
+                comment: c.comment,
+              },
+            });
+
+        const allowedAttachmentIds = new Set(c.attachmentIds);
+        const pendingAttachments = await tx.treatmentCaseAttachment.findMany({
+          where: {
+            appointmentId: appointment.id,
+            caseClientKey: c.clientId,
+          },
+        });
+
+        for (const attachment of pendingAttachments) {
+          if (!allowedAttachmentIds.has(attachment.id)) {
+            await tx.treatmentCaseAttachment.delete({ where: { id: attachment.id } });
+          } else {
+            await tx.treatmentCaseAttachment.update({
+              where: { id: attachment.id },
+              data: { caseId: row.id, appointmentId: null, caseClientKey: null },
+            });
+          }
+        }
+
+        await tx.treatmentCaseAttachment.deleteMany({
+          where: {
+            caseId: row.id,
+            id: { notIn: [...allowedAttachmentIds] },
+          },
+        });
+      }
+
+      return tx.treatment.findUniqueOrThrow({
+        where: { id: saved.id },
+        include: treatmentInclude,
+      });
+    });
+
+    return { success: true, data: this.mapTreatment(treatment) };
+  }
+
+  async sendCase(
+    caseId: string,
+    dto: SendTreatmentCaseDto,
+    organizationId: string,
+    actorUserId: string,
+  ) {
+    await this.assertCanEditTreatment(actorUserId, organizationId);
+
+    const treatmentCase = await this.prisma.treatmentCase.findFirst({
+      where: {
+        id: caseId,
+        treatment: { organizationId },
+      },
+      include: {
+        treatment: { select: { providerUserId: true, appointmentId: true } },
+        sends: { select: { organizationId: true } },
+      },
+    });
+
+    if (!treatmentCase) {
+      throw new NotFoundException('Treatment case not found');
+    }
+
+    if (treatmentCase.treatment.providerUserId !== actorUserId) {
+      const membership = await this.getMembership(actorUserId, organizationId);
+      if (!membership?.isOwner) {
+        throw new ForbiddenException('Only the appointment provider can send this case');
+      }
+    }
+
+    const linkedOrgIds = await this.getActiveLinkedOrganizationIds(organizationId);
+    const uniqueTargets = [...new Set(dto.organizationIds)];
+
+    for (const orgId of uniqueTargets) {
+      if (!linkedOrgIds.has(orgId)) {
+        throw new BadRequestException('One or more organizations are not active linked counterparts');
+      }
+    }
+
+    const alreadySent = new Set(treatmentCase.sends.map((s) => s.organizationId));
+    const newTargets = uniqueTargets.filter((id) => !alreadySent.has(id));
+
+    if (newTargets.length === 0) {
+      throw new BadRequestException('Case was already sent to all selected organizations');
+    }
+
+    const now = new Date();
+
+    await this.prisma.$transaction(async (tx) => {
+      await tx.treatmentCaseSend.createMany({
+        data: newTargets.map((organizationId) => ({
+          caseId,
+          organizationId,
+        })),
+      });
+
+      if (!treatmentCase.sentAt) {
+        await tx.treatmentCase.update({
+          where: { id: caseId },
+          data: { sentAt: now },
+        });
+      }
+    });
+
+    const refreshed = await this.prisma.treatmentCase.findUniqueOrThrow({
+      where: { id: caseId },
+      include: {
+        attachments: { orderBy: [{ createdAt: 'asc' }] },
+        sends: {
+          orderBy: [{ sentAt: 'asc' }],
+          include: { organization: { select: { id: true, name: true } } },
+        },
+      },
+    });
+
+    return { success: true, data: this.mapCase(refreshed) };
+  }
+
+  async uploadCaseAttachments(
+    appointmentId: string,
+    caseClientKey: string,
+    files: Express.Multer.File[],
+    organizationId: string,
+    actorUserId: string,
+  ) {
+    await this.assertCanEditTreatment(actorUserId, organizationId);
+    await this.ensureAppointmentProvider(appointmentId, organizationId, actorUserId, true);
+
+    if (!caseClientKey?.trim()) {
+      throw new BadRequestException('caseClientKey is required');
+    }
+
+    if (!files?.length) {
+      throw new BadRequestException('At least one file is required');
+    }
+
+    const orgDir = join(this.uploadRoot, organizationId);
+    mkdirSync(orgDir, { recursive: true });
+
+    const created: {
+      id: string;
+      fileName: string;
+      mimeType: string;
+      sizeBytes: number;
+    }[] = [];
+
+    for (const file of files) {
+      const storageName = `${randomUUID()}-${file.originalname.replace(/[^\w.\-()+]/g, '_')}`;
+      const storagePath = join(orgDir, storageName);
+      const { writeFileSync } = await import('fs');
+      writeFileSync(storagePath, file.buffer);
+
+      const attachment = await this.prisma.treatmentCaseAttachment.create({
+        data: {
+          appointmentId,
+          caseClientKey,
+          fileName: file.originalname,
+          mimeType: file.mimetype || 'application/octet-stream',
+          sizeBytes: file.size,
+          storagePath,
+        },
+      });
+
+      created.push(this.mapAttachment(attachment));
+    }
+
+    return { success: true, data: created };
+  }
+
+  async streamAttachmentFile(
+    attachmentId: string,
+    organizationId: string,
+    actorUserId: string,
+  ) {
+    await this.assertCanReadTreatment(actorUserId, organizationId);
+
+    const attachment = await this.prisma.treatmentCaseAttachment.findFirst({
+      where: {
+        id: attachmentId,
+        OR: [
+          { case: { treatment: { organizationId } } },
+          { appointmentId: { not: null } },
+        ],
+      },
+      include: {
+        case: { select: { treatment: { select: { organizationId: true } } } },
+      },
+    });
+
+    if (!attachment) {
+      throw new NotFoundException('Attachment not found');
+    }
+
+    if (attachment.case && attachment.case.treatment.organizationId !== organizationId) {
+      throw new NotFoundException('Attachment not found');
+    }
+
+    if (!attachment.case && attachment.appointmentId) {
+      const appointment = await this.prisma.appointment.findFirst({
+        where: { id: attachment.appointmentId, organizationId },
+        select: { id: true },
+      });
+      if (!appointment) {
+        throw new NotFoundException('Attachment not found');
+      }
+    }
+
+    if (!existsSync(attachment.storagePath)) {
+      throw new NotFoundException('File is no longer available');
+    }
+
+    return {
+      stream: createReadStream(attachment.storagePath),
+      fileName: attachment.fileName,
+      mimeType: attachment.mimeType,
+    };
+  }
+
+  private mapTreatment(treatment: {
+    id: string;
+    patientId: string;
+    appointmentId: string | null;
+    title: string;
+    status: TreatmentStatus;
+    treatmentAt: Date;
+    cases: Array<{
+      id: string;
+      clientKey: string | null;
+      treatmentType: string;
+      teeth: unknown;
+      comment: string | null;
+      sentAt: Date | null;
+      attachments: Array<{
+        id: string;
+        fileName: string;
+        mimeType: string;
+        sizeBytes: number;
+      }>;
+      sends: Array<{ organizationId: string; sentAt: Date; organization: { id: string; name: string } }>;
+    }>;
+  }) {
+    const documents = treatment.cases.flatMap((c) =>
+      c.attachments.map((a) => this.mapAttachment(a)),
+    );
+
+    return {
+      id: treatment.id,
+      patientId: treatment.patientId,
+      appointmentId: treatment.appointmentId,
+      title: treatment.title,
+      treatmentAt: treatment.treatmentAt.toISOString(),
+      status: mapTreatmentStatusForApi(treatment.status),
+      cases: treatment.cases.map((c) => this.mapCase(c)),
+      documents,
+    };
+  }
+
+  private mapCase(c: {
+    id: string;
+    clientKey?: string | null;
+    treatmentType: string;
+    teeth: unknown;
+    comment?: string | null;
+    sentAt?: Date | null;
+    attachments?: Array<{
+      id: string;
+      fileName: string;
+      mimeType: string;
+      sizeBytes: number;
+    }>;
+    sends?: Array<{ organizationId: string; sentAt: Date; organization?: { id: string; name: string } }>;
+  }) {
+    return {
+      id: c.id,
+      clientId: c.clientKey ?? c.id,
+      treatmentType: c.treatmentType,
+      teeth: normalizeTeeth(c.teeth),
+      notes: c.comment ?? null,
+      sentAt: c.sentAt?.toISOString() ?? null,
+      sendToOrganizationIds: c.sends?.map((s) => s.organizationId) ?? [],
+      sends:
+        c.sends?.map((s) => ({
+          organizationId: s.organizationId,
+          organizationName: s.organization?.name ?? 'Unknown organization',
+          sentAt: s.sentAt.toISOString(),
+        })) ?? [],
+      attachmentMetas: (c.attachments ?? []).map((a) => this.mapAttachment(a)),
+    };
+  }
+
+  private mapAttachment(a: {
+    id: string;
+    fileName: string;
+    mimeType: string;
+    sizeBytes: number;
+  }) {
+    return {
+      id: a.id,
+      fileName: a.fileName,
+      mimeType: a.mimeType,
+      sizeBytes: a.sizeBytes,
+    };
+  }
+
+  private async getActiveLinkedOrganizationIds(organizationId: string) {
+    const [linksA, linksB] = await Promise.all([
+      this.prisma.organizationLink.findMany({
+        where: { organizationAId: organizationId, status: LinkStatus.ACTIVE },
+        select: { organizationBId: true },
+      }),
+      this.prisma.organizationLink.findMany({
+        where: { organizationBId: organizationId, status: LinkStatus.ACTIVE },
+        select: { organizationAId: true },
+      }),
+    ]);
+
+    return new Set([
+      ...linksA.map((l) => l.organizationBId),
+      ...linksB.map((l) => l.organizationAId),
+    ]);
+  }
+
+  private async ensurePatientInOrg(patientId: string, organizationId: string) {
+    const patient = await this.prisma.patient.findFirst({
+      where: { id: patientId, organizationId },
+      select: { id: true },
+    });
+    if (!patient) {
+      throw new NotFoundException('Patient not found');
+    }
+  }
+
+  private async ensureAppointmentProvider(
+    appointmentId: string,
+    organizationId: string,
+    actorUserId: string,
+    requireProviderMatch: boolean,
+  ) {
+    const appointment = await this.prisma.appointment.findFirst({
+      where: { id: appointmentId, organizationId },
+      select: {
+        id: true,
+        patientId: true,
+        providerUserId: true,
+        startAt: true,
+      },
+    });
+
+    if (!appointment) {
+      throw new NotFoundException('Appointment not found');
+    }
+
+    if (requireProviderMatch) {
+      const membership = await this.getMembership(actorUserId, organizationId);
+      const isOwner = membership?.isOwner ?? false;
+      if (!isOwner && appointment.providerUserId !== actorUserId) {
+        throw new ForbiddenException('You are not the provider for this appointment');
+      }
+    }
+
+    return appointment;
+  }
+
+  private async assertCanReadTreatment(userId: string, organizationId: string) {
+    const m = await this.getMembership(userId, organizationId);
+    if (!m) {
+      throw new ForbiddenException('You are not a member of this organization');
+    }
+    if (m.isOwner) return;
+    const names = m.permissions.map((p) => p.permission.name);
+    if (names.includes('TAB_TREATMENT_READ') || names.includes('TAB_TREATMENT_EDIT')) {
+      return;
+    }
+    throw new ForbiddenException('You do not have access to treatments');
+  }
+
+  private async assertCanEditTreatment(userId: string, organizationId: string) {
+    const m = await this.getMembership(userId, organizationId);
+    if (!m) {
+      throw new ForbiddenException('You are not a member of this organization');
+    }
+    if (m.isOwner) return;
+    const names = m.permissions.map((p) => p.permission.name);
+    if (names.includes('TAB_TREATMENT_EDIT')) {
+      return;
+    }
+    throw new ForbiddenException('You cannot edit treatments');
+  }
+
+  private async getMembership(userId: string, organizationId: string) {
+    return this.prisma.membership.findFirst({
+      where: { userId, organizationId, isActive: true },
+      include: { permissions: { include: { permission: true } } },
+    });
+  }
+}

frontend/src/app/(dashboard)/appointments/page.tsx

@@ -46,7 +46,7 @@ export default function AppointmentsPage() {
   const [patientForm, setPatientForm] = useState<CreatePatientInput>(EMPTY_PATIENT_FORM);
 
   const [bookingOpen, setBookingOpen] = useState(false);
-  const [bookingHour, setBookingHour] = useState(9);
+  const [bookingStartMinute, setBookingStartMinute] = useState(9 * 60);
   const [bookingProviderId, setBookingProviderId] = useState<string | null>(null);
   const [bookingProviderName, setBookingProviderName] = useState('');
   const [editingAppointmentId, setEditingAppointmentId] = useState<string | null>(null);
@@ -87,7 +87,7 @@ export default function AppointmentsPage() {
     try {
       const range = getLocalDayIsoRange(scheduleDate);
       const [pRes, aRes] = await Promise.all([
-        appointmentsApi.columnProviders(),
+        appointmentsApi.columnProviders(scheduleDate),
         appointmentsApi.list(range),
       ]);
       if (gen !== scheduleLoadGen.current) {
@@ -161,7 +161,7 @@ export default function AppointmentsPage() {
     }
   }
 
-  function handleSlotClick(hour: number, providerUserId: string, providerName: string) {
+  function handleSlotClick(startMinute: number, providerUserId: string, providerName: string) {
     if (isViewingPastDay) {
       toast.showInfo('Past appointments are view-only.');
       return;
@@ -170,7 +170,7 @@ export default function AppointmentsPage() {
       toast.showInfo('Select a patient before booking.');
       return;
     }
-    setBookingHour(hour);
+    setBookingStartMinute(startMinute);
     setBookingProviderId(providerUserId);
     setBookingProviderName(providerName);
     setEditingAppointmentId(null);
@@ -183,13 +183,20 @@ export default function AppointmentsPage() {
       return;
     }
     const provider = providers.find((p) => p.userId === appointment.providerUserId);
-    setBookingHour(new Date(appointment.startAt).getHours());
+    const start = new Date(appointment.startAt);
+    setBookingStartMinute(start.getHours() * 60 + start.getMinutes());
     setBookingProviderId(appointment.providerUserId);
     setBookingProviderName(provider?.name ?? bookingProviderName);
     setEditingAppointmentId(appointment.id);
     setBookingOpen(true);
   }
 
+  function handleAppointmentOutsideHours(appointment: AppointmentRecord) {
+    toast.showError(
+      'This appointment falls outside the provider’s current working hours and cannot be edited.',
+    );
+  }
+
   async function handleSaveAppointment(payload: {
     patientId: string;
     providerUserId: string;
@@ -298,8 +305,9 @@ export default function AppointmentsPage() {
             providers={providers}
             appointments={appointments}
             canBook={canManageAppointments && !isViewingPastDay}
-            onSlotClick={(hour, uid, name) => handleSlotClick(hour, uid, name)}
+            onSlotClick={(startMinute, uid, name) => handleSlotClick(startMinute, uid, name)}
             onAppointmentClick={(apt) => handleAppointmentClick(apt)}
+            onAppointmentOutsideHours={(apt) => handleAppointmentOutsideHours(apt)}
           />
         </div>
       </div>
@@ -310,7 +318,7 @@ export default function AppointmentsPage() {
         patient={selectedPatient}
         providerUserId={bookingProviderId}
         providerName={bookingProviderName}
-        initialHour={bookingHour}
+        initialStartMinute={bookingStartMinute}
         editingAppointment={activeEditingAppointment}
         onClose={() => {
           setBookingOpen(false);

frontend/src/app/(dashboard)/patients/page.tsx

@@ -8,16 +8,10 @@ import { formatApiErrorMessage } from '@/components/shared/formatApiError';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { useToast } from '@/lib/hooks/useToast';
 import { hasPermission } from '@/components/shared/permissions';
-import {
-  CreatePatientInput,
-  CreateTreatmentHistoryInput,
-  Patient,
-  TreatmentHistoryItem,
-} from '@/types/patient';
+import { CreatePatientInput, Patient } from '@/types/patient';
 import { PatientSearchSelect } from '../../../components/ui/patient/PatientSearchSelect';
 import { CreatePatientModal } from '../../../components/ui/patient/CreatePatientModal';
 import { PatientSummaryCard } from '../../../components/ui/patient/PatientSummaryCard';
-import { TreatmentHistoryPreview } from '../../../components/ui/patient/TreatmentHistoryPreview';
 
 const EMPTY_PATIENT_FORM: CreatePatientInput = {
   firstName: '',
@@ -32,12 +26,9 @@ export default function PatientsPage() {
   const [search, setSearch] = useState('');
   const [patients, setPatients] = useState<Patient[]>([]);
   const [selectedPatient, setSelectedPatient] = useState<Patient | undefined>();
-  const [treatments, setTreatments] = useState<TreatmentHistoryItem[]>([]);
   const [loadingPatients, setLoadingPatients] = useState(false);
-  const [loadingTreatments, setLoadingTreatments] = useState(false);
   const [isCreateOpen, setIsCreateOpen] = useState(false);
   const [savingPatient, setSavingPatient] = useState(false);
-  const [savingTreatment, setSavingTreatment] = useState(false);
   const [patientForm, setPatientForm] = useState<CreatePatientInput>(EMPTY_PATIENT_FORM);
   const canEditPatients = hasPermission(currentOrganization, 'TAB_PATIENTS_EDIT');
 
@@ -79,19 +70,6 @@ export default function PatientsPage() {
     }
   }
 
-  async function loadTreatments(patientId: string) {
-    setLoadingTreatments(true);
-    toast.setError('');
-    try {
-      const response = await patientsApi.listTreatments(patientId);
-      setTreatments(response.data);
-    } catch (error: unknown) {
-      toast.showError(formatApiErrorMessage(error, 'Failed to load treatment history.'));
-    } finally {
-      setLoadingTreatments(false);
-    }
-  }
-
   async function handleCreatePatient() {
     setSavingPatient(true);
     toast.setError('');
@@ -101,7 +79,6 @@ export default function PatientsPage() {
       setPatientForm(EMPTY_PATIENT_FORM);
       await loadPatients(search);
       setSelectedPatient(response.data);
-      await loadTreatments(response.data.id);
       toast.showSuccess(
         `Patient ${response.data.firstName} ${response.data.lastName} was saved successfully.`,
       );
@@ -112,31 +89,6 @@ export default function PatientsPage() {
     }
   }
 
-  async function handleQuickAddTreatment() {
-    if (!selectedPatient) {
-      return;
-    }
-
-    const payload: CreateTreatmentHistoryInput = {
-      title: 'Initial consultation',
-      status: 'scheduled',
-      treatmentAt: new Date().toISOString(),
-      notes: 'Created from quick action on patients page.',
-    };
-
-    setSavingTreatment(true);
-    toast.setError('');
-    try {
-      await patientsApi.addTreatment(selectedPatient.id, payload);
-      await loadTreatments(selectedPatient.id);
-      toast.showSuccess('Treatment entry added successfully.');
-    } catch (error: unknown) {
-      toast.showError(formatApiErrorMessage(error, 'Failed to add treatment entry.'));
-    } finally {
-      setSavingTreatment(false);
-    }
-  }
-
   return (
     <div className="space-y-6">
       <div className="flex items-center justify-between gap-3">
@@ -179,31 +131,13 @@ export default function PatientsPage() {
             onSearchChange={setSearch}
             patients={sortedPatients}
             selectedPatientId={selectedPatient?.id}
-            onSelectPatient={(patient) => {
-              setSelectedPatient(patient);
-              void loadTreatments(patient.id);
-            }}
+            onSelectPatient={setSelectedPatient}
             loading={loadingPatients}
           />
         </div>
 
         <div className="xl:col-span-2 space-y-4">
           <PatientSummaryCard patient={selectedPatient} />
-          <div className="flex">
-            <Button
-              variant="secondary"
-              disabled={!selectedPatient || !canEditPatients}
-              isLoading={savingTreatment}
-              onClick={() => {
-                if (!canEditPatients) return;
-                void handleQuickAddTreatment();
-              }}
-              title={!canEditPatients ? 'Read-only access for this organization.' : undefined}
-            >
-              Add Quick Treatment Entry
-            </Button>
-          </div>
-          <TreatmentHistoryPreview items={treatments} loading={loadingTreatments} />
         </div>
       </div>
     </div>

frontend/src/app/(dashboard)/staff/page.tsx

@@ -12,11 +12,19 @@ import {
   permissionNamesFromFeatureState,
   emptyFeaturePermissionState,
   featureStateFromPermissionNames,
+  featureStateHasTreatmentEdit,
   resolveStaffFeatureLabel,
   formatAccessSummary,
   type FeaturePermState,
 } from '../../../components/staff/staff-permission-form';
-import { Pencil, Trash2, Copy, Check, X, UserX } from 'lucide-react';
+import {
+  StaffWorkingHoursStep,
+  createDefaultWorkingHoursState,
+  workingHoursPayloadFromState,
+  workingHoursStateFromApi,
+} from '@/components/staff/StaffWorkingHoursStep';
+import { validateEditorDays, type WorkingHoursEditorDay } from '@/components/staff/workingHours';
+import { Pencil, Trash2, Copy, Check, X, UserX, UserCheck } from 'lucide-react';
 import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { staffApi, type StaffMemberDto } from '@/lib/api/staff';
@@ -67,6 +75,10 @@ function canDisableStaff(member: StaffMemberDto): boolean {
   return !member.isOwner && member.isActive;
 }
 
+function canEnableStaff(member: StaffMemberDto): boolean {
+  return !member.isOwner && member.invitationStatus === 'DISABLED';
+}
+
 function PermissionGrid({
   state,
   onChange,
@@ -140,9 +152,15 @@ export default function StaffPage() {
   const toast = useToast();
 
   const [inviteOpen, setInviteOpen] = useState(false);
+  const [inviteStep, setInviteStep] = useState<1 | 2>(1);
   const [inviteEmail, setInviteEmail] = useState('');
   const [inviteName, setInviteName] = useState('');
   const [invitePerms, setInvitePerms] = useState(() => emptyFeaturePermissionState());
+  const [inviteWorkingHoursDays, setInviteWorkingHoursDays] = useState<WorkingHoursEditorDay[]>(
+    () => createDefaultWorkingHoursState().days,
+  );
+  const [inviteAutoRepeatWeekly, setInviteAutoRepeatWeekly] = useState(true);
+  const [inviteHoursValidationError, setInviteHoursValidationError] = useState<string | null>(null);
   const [inviteLoading, setInviteLoading] = useState(false);
   const [copiedInviteMembershipId, setCopiedInviteMembershipId] = useState<string | null>(null);
   const [copyingInviteMembershipId, setCopyingInviteMembershipId] = useState<string | null>(null);
@@ -156,13 +174,27 @@ export default function StaffPage() {
   const [pendingInviteLinks, setPendingInviteLinks] = useState<Record<string, StoredInviteLink>>({});
 
   const [editing, setEditing] = useState<StaffMemberDto | null>(null);
+  const [editStep, setEditStep] = useState<1 | 2>(1);
   const [editName, setEditName] = useState('');
   const [editPerms, setEditPerms] = useState(() => emptyFeaturePermissionState());
+  const [editWorkingHoursDays, setEditWorkingHoursDays] = useState<WorkingHoursEditorDay[]>(
+    () => createDefaultWorkingHoursState().days,
+  );
+  const [editAutoRepeatWeekly, setEditAutoRepeatWeekly] = useState(true);
+  const [editHoursValidationError, setEditHoursValidationError] = useState<string | null>(null);
+  const [editLoadingWorkingHours, setEditLoadingWorkingHours] = useState(false);
   const [editLoading, setEditLoading] = useState(false);
   const [disableTarget, setDisableTarget] = useState<StaffMemberDto | null>(null);
   const [disablingMembershipId, setDisablingMembershipId] = useState<string | null>(null);
+  const [enableTarget, setEnableTarget] = useState<StaffMemberDto | null>(null);
+  const [enablingMembershipId, setEnablingMembershipId] = useState<string | null>(null);
 
   const canEdit = useMemo(() => canEditStaff(currentOrganization), [currentOrganization]);
+  const inviteHasTreatmentEdit = useMemo(
+    () => featureStateHasTreatmentEdit(invitePerms),
+    [invitePerms],
+  );
+  const editHasTreatmentEdit = useMemo(() => featureStateHasTreatmentEdit(editPerms), [editPerms]);
   const hasActivePlan = Boolean(currentOrganization?.plan);
   const atSeatLimit = useMemo(() => {
     if (!seats || seats.unlimited) return false;
@@ -170,6 +202,12 @@ export default function StaffPage() {
     return seats.used >= seats.limit;
   }, [seats]);
 
+  const hasAvailableSeat = useMemo(() => {
+    if (!seats || seats.unlimited) return true;
+    if (seats.limit == null) return true;
+    return seats.used < seats.limit;
+  }, [seats]);
+
   const load = useCallback(async () => {
     toast.setError('');
     setLoading(true);
@@ -259,19 +297,60 @@ export default function StaffPage() {
     }
   }
 
-  async function submitInvite() {
+  function resetInviteForm() {
+    setInviteStep(1);
+    setInviteEmail('');
+    setInviteName('');
+    setInvitePerms(emptyFeaturePermissionState());
+    const defaults = createDefaultWorkingHoursState();
+    setInviteWorkingHoursDays(defaults.days);
+    setInviteAutoRepeatWeekly(defaults.autoRepeatWeekly);
+    setInviteHoursValidationError(null);
+  }
+
+  async function saveInviteWorkingHours(membershipId: string, includeHours: boolean) {
+    if (!includeHours || !inviteHasTreatmentEdit) {
+      return;
+    }
+    const validationError = validateEditorDays(inviteWorkingHoursDays);
+    if (validationError) {
+      throw new Error(validationError);
+    }
+    await staffApi.upsertWorkingHours(
+      membershipId,
+      workingHoursPayloadFromState({
+        days: inviteWorkingHoursDays,
+        autoRepeatWeekly: inviteAutoRepeatWeekly,
+      }),
+    );
+  }
+
+  async function submitInvite(includeWorkingHours: boolean) {
     setInviteLoading(true);
     toast.setError('');
     setLastInviteInfo(null);
     const displayName = inviteName.trim();
     const displayEmail = inviteEmail.trim();
     try {
+      if (includeWorkingHours && inviteHasTreatmentEdit) {
+        const validationError = validateEditorDays(inviteWorkingHoursDays);
+        if (validationError) {
+          toast.showError(validationError);
+          return;
+        }
+      }
+
       const permissionNames = permissionNamesFromFeatureState(invitePerms);
       const res = await staffApi.invite({
         email: displayEmail,
         name: displayName,
         permissionNames,
       });
+
+      if (includeWorkingHours) {
+        await saveInviteWorkingHours(res.data.membershipId, true);
+      }
+
       setLastInviteInfo({
         membershipId: res.data.membershipId,
         name: displayName,
@@ -292,9 +371,7 @@ export default function StaffPage() {
         writeStoredInviteLinks(currentOrganization.id, nextLinks);
       }
       setInviteOpen(false);
-      setInviteEmail('');
-      setInviteName('');
-      setInvitePerms(emptyFeaturePermissionState());
+      resetInviteForm();
       await load();
     } catch (e) {
       toast.showError(formatApiErrorMessage(e, 'Failed to send invitation.'));
@@ -303,26 +380,60 @@ export default function StaffPage() {
     }
   }
 
-  function openEdit(m: StaffMemberDto) {
+  async function openEdit(m: StaffMemberDto) {
     if (m.isOwner) return;
     setEditing(m);
+    setEditStep(1);
     setEditName(m.name);
-    setEditPerms(
-      featureStateFromPermissionNames(m.permissions ?? []),
-    );
+    setEditPerms(featureStateFromPermissionNames(m.permissions ?? []));
+    setEditHoursValidationError(null);
+    const defaults = createDefaultWorkingHoursState();
+    setEditWorkingHoursDays(defaults.days);
+    setEditAutoRepeatWeekly(defaults.autoRepeatWeekly);
+    setEditLoadingWorkingHours(true);
+    try {
+      const res = await staffApi.getWorkingHours(m.id);
+      const state = workingHoursStateFromApi(res.data);
+      setEditWorkingHoursDays(state.days);
+      setEditAutoRepeatWeekly(state.autoRepeatWeekly);
+    } catch (e) {
+      toast.showError(formatApiErrorMessage(e, 'Failed to load working hours.'));
+    } finally {
+      setEditLoadingWorkingHours(false);
+    }
   }
 
   async function submitEdit() {
     if (!editing) return;
+    if (editHasTreatmentEdit) {
+      const validationError = validateEditorDays(editWorkingHoursDays);
+      if (validationError) {
+        toast.showError(validationError);
+        return;
+      }
+    }
+
     setEditLoading(true);
     toast.setError('');
     try {
+      if (editHasTreatmentEdit) {
+        await staffApi.upsertWorkingHours(
+          editing.id,
+          workingHoursPayloadFromState({
+            days: editWorkingHoursDays,
+            autoRepeatWeekly: editAutoRepeatWeekly,
+          }),
+        );
+      }
+
       await staffApi.updateMember(editing.id, {
         name: editName.trim(),
         permissionNames: permissionNamesFromFeatureState(editPerms),
       });
+
       toast.showSuccess('Member updated.');
       setEditing(null);
+      setEditStep(1);
       await load();
     } catch (e) {
       toast.showError(formatApiErrorMessage(e, 'Failed to update member.'));
@@ -352,6 +463,23 @@ export default function StaffPage() {
     }
   }
 
+  async function confirmEnableMember() {
+    if (!enableTarget || !canEnableStaff(enableTarget) || !hasAvailableSeat) return;
+
+    setEnablingMembershipId(enableTarget.id);
+    toast.setError('');
+    try {
+      await staffApi.enableMember(enableTarget.id);
+      toast.showSuccess(`${enableTarget.name} was enabled and can sign in again.`);
+      setEnableTarget(null);
+      await load();
+    } catch (e) {
+      toast.showError(formatApiErrorMessage(e, 'Failed to enable member.'));
+    } finally {
+      setEnablingMembershipId(null);
+    }
+  }
+
   if (!currentOrganization || !canViewStaff(currentOrganization)) {
     return (
       <p className="text-sm text-text-secondary">Redirecting…</p>
@@ -371,6 +499,7 @@ export default function StaffPage() {
           size="sm"
           onClick={() => {
             if (!canEdit || atSeatLimit) return;
+            resetInviteForm();
             setInviteOpen(true);
             setLastInviteInfo(null);
           }}
@@ -547,6 +676,25 @@ export default function StaffPage() {
                             )}
                           </button>
                         )}
+                        {canEnableStaff(m) && (
+                          <button
+                            type="button"
+                            className={`p-2 rounded-md ${
+                              canEdit
+                                ? 'text-text-secondary hover:bg-background-card/80 hover:text-primary'
+                                : 'text-text-muted opacity-50 cursor-not-allowed'
+                            }`}
+                            aria-label="Enable member"
+                            disabled={!canEdit || enablingMembershipId === m.id}
+                            title="Enable member (uses a seat)"
+                            onClick={() => {
+                              if (!canEdit) return;
+                              setEnableTarget(m);
+                            }}
+                          >
+                            <UserCheck className="w-4 h-4" />
+                          </button>
+                        )}
                         {canDisableStaff(m) && (
                           <button
                             type="button"
@@ -618,11 +766,24 @@ export default function StaffPage() {
             aria-labelledby="invite-staff-title"
           >
             <div className="flex items-start justify-between gap-3">
+              <div>
                 <h2 id="invite-staff-title" className="text-lg font-semibold text-text-primary pr-2">
                   Invite team member
                 </h2>
-              <DialogCloseButton onClick={() => setInviteOpen(false)} />
+                {inviteHasTreatmentEdit && (
+                  <p className="text-xs text-text-muted mt-1">Step {inviteStep} of 2</p>
+                )}
               </div>
+              <DialogCloseButton
+                onClick={() => {
+                  setInviteOpen(false);
+                  resetInviteForm();
+                }}
+              />
+            </div>
+
+            {inviteStep === 1 ? (
+              <>
                 <Input
                   label="Email"
                   type="email"
@@ -643,18 +804,132 @@ export default function StaffPage() {
                     organizationType={currentOrganization?.type}
                   />
                 </div>
+              </>
+            ) : (
+              <StaffWorkingHoursStep
+                days={inviteWorkingHoursDays}
+                autoRepeatWeekly={inviteAutoRepeatWeekly}
+                onDaysChange={setInviteWorkingHoursDays}
+                onAutoRepeatWeeklyChange={setInviteAutoRepeatWeekly}
+                onValidationChange={setInviteHoursValidationError}
+                disabled={inviteLoading}
+              />
+            )}
+
             <div className="flex justify-end gap-2 pt-2">
-              <Button variant="outline" type="button" onClick={() => setInviteOpen(false)}>
-                Cancel
+              <Button
+                variant="outline"
+                type="button"
+                onClick={() => {
+                  if (inviteStep === 2) {
+                    setInviteStep(1);
+                    return;
+                  }
+                  setInviteOpen(false);
+                  resetInviteForm();
+                }}
+              >
+                {inviteStep === 2 ? 'Back' : 'Cancel'}
               </Button>
+              {inviteStep === 1 ? (
+                inviteHasTreatmentEdit ? (
+                  <Button
+                    type="button"
+                    disabled={!inviteEmail.trim() || !inviteName.trim()}
+                    onClick={() => setInviteStep(2)}
+                  >
+                    Next
+                  </Button>
+                ) : (
                   <Button
                     type="button"
                     isLoading={inviteLoading}
                     disabled={!inviteEmail.trim() || !inviteName.trim()}
-                onClick={() => void submitInvite()}
+                    onClick={() => void submitInvite(false)}
                   >
                     Send invite
                   </Button>
+                )
+              ) : (
+                <>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    isLoading={inviteLoading}
+                    onClick={() => void submitInvite(false)}
+                  >
+                    Skip for now
+                  </Button>
+                  <Button
+                    type="button"
+                    isLoading={inviteLoading}
+                    disabled={Boolean(inviteHoursValidationError)}
+                    onClick={() => void submitInvite(true)}
+                  >
+                    Send invite
+                  </Button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {enableTarget && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/55">
+          <div
+            className="surface-card w-full max-w-md p-5 space-y-4 shadow-xl"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby="enable-staff-title"
+          >
+            <div className="flex items-start justify-between gap-2">
+              <h2 id="enable-staff-title" className="text-lg font-semibold text-text-primary pr-2">
+                Enable team member
+              </h2>
+              <DialogCloseButton
+                onClick={() => {
+                  if (enablingMembershipId) return;
+                  setEnableTarget(null);
+                }}
+              />
+            </div>
+            <p className="text-sm text-text-secondary">
+              Enable <span className="font-medium text-text-primary">{enableTarget.name}</span> (
+              {enableTarget.email})?
+            </p>
+            <ul className="text-sm text-text-secondary space-y-2 list-disc pl-5">
+              <li>They can sign in to this organization again with their existing account.</li>
+              <li>No new invitation is sent and no data was removed while they were disabled.</li>
+              <li>
+                Enabling uses <span className="text-text-primary font-medium">one seat</span> on your
+                plan.
+              </li>
+            </ul>
+            {!hasAvailableSeat && (
+              <p className="text-sm text-amber-600 dark:text-amber-400">
+                No seats are available. Disable another member or upgrade your plan before enabling
+                this person.
+              </p>
+            )}
+            <div className="flex justify-end gap-2 pt-1">
+              <Button
+                type="button"
+                variant="outline"
+                disabled={Boolean(enablingMembershipId)}
+                onClick={() => setEnableTarget(null)}
+              >
+                Cancel
+              </Button>
+              <Button
+                type="button"
+                variant="primary"
+                isLoading={enablingMembershipId === enableTarget.id}
+                disabled={Boolean(enablingMembershipId) || !hasAvailableSeat}
+                onClick={() => void confirmEnableMember()}
+              >
+                Enable member
+              </Button>
             </div>
           </div>
         </div>
@@ -722,11 +997,28 @@ export default function StaffPage() {
             aria-modal="true"
           >
             <div className="flex items-start justify-between gap-3">
+              <div>
                 <h2 className="text-lg font-semibold text-text-primary pr-2">Edit member</h2>
-              <DialogCloseButton onClick={() => setEditing(null)} />
+                {editHasTreatmentEdit && (
+                  <p className="text-xs text-text-muted mt-1">Step {editStep} of 2</p>
+                )}
+              </div>
+              <DialogCloseButton
+                onClick={() => {
+                  setEditing(null);
+                  setEditStep(1);
+                }}
+              />
             </div>
             <p className="text-xs text-text-muted">{editing.email}</p>
-            <Input label="Display name" value={editName} onChange={(e) => setEditName(e.target.value)} />
+
+            {editStep === 1 ? (
+              <>
+                <Input
+                  label="Display name"
+                  value={editName}
+                  onChange={(e) => setEditName(e.target.value)}
+                />
                 <div>
                   <p className="text-sm font-medium text-text-secondary mb-2">Tab access</p>
                   <PermissionGrid
@@ -735,13 +1027,55 @@ export default function StaffPage() {
                     organizationType={currentOrganization?.type}
                   />
                 </div>
+              </>
+            ) : editLoadingWorkingHours ? (
+              <p className="text-sm text-text-secondary">Loading working hours…</p>
+            ) : (
+              <StaffWorkingHoursStep
+                days={editWorkingHoursDays}
+                autoRepeatWeekly={editAutoRepeatWeekly}
+                onDaysChange={setEditWorkingHoursDays}
+                onAutoRepeatWeeklyChange={setEditAutoRepeatWeekly}
+                onValidationChange={setEditHoursValidationError}
+                disabled={editLoading}
+              />
+            )}
+
             <div className="flex justify-end gap-2 pt-2">
-              <Button variant="outline" type="button" onClick={() => setEditing(null)}>
-                Cancel
+              <Button
+                variant="outline"
+                type="button"
+                onClick={() => {
+                  if (editStep === 2) {
+                    setEditStep(1);
+                    return;
+                  }
+                  setEditing(null);
+                  setEditStep(1);
+                }}
+              >
+                {editStep === 2 ? 'Back' : 'Cancel'}
               </Button>
+              {editStep === 1 ? (
+                editHasTreatmentEdit ? (
+                  <Button type="button" onClick={() => setEditStep(2)}>
+                    Next
+                  </Button>
+                ) : (
                   <Button type="button" isLoading={editLoading} onClick={() => void submitEdit()}>
                     Save
                   </Button>
+                )
+              ) : (
+                <Button
+                  type="button"
+                  isLoading={editLoading}
+                  disabled={Boolean(editHoursValidationError)}
+                  onClick={() => void submitEdit()}
+                >
+                  Save
+                </Button>
+              )}
             </div>
           </div>
         </div>

frontend/src/components/shared/permissions.ts

@@ -82,7 +82,8 @@ export function canAccessAppointmentsSection(org: Organization | null): boolean
   return (
     hasPermission(org, 'TAB_APPOINTMENTS_READ') ||
     hasPermission(org, 'TAB_APPOINTMENTS_EDIT') ||
-    hasPermission(org, 'TAB_TREATMENT_EDIT')
+    hasPermission(org, 'TAB_TREATMENT_EDIT') ||
+    hasPermission(org, 'TAB_TREATMENT_READ')
   );
 }
 
@@ -92,3 +93,13 @@ export function canEditTreatment(org: Organization | null): boolean {
   if (org.isOwner) return true;
   return hasPermission(org, 'TAB_TREATMENT_EDIT');
 }
+
+/** View treatment workspace (read-only or edit) */
+export function canViewTreatment(org: Organization | null): boolean {
+  if (!org) return false;
+  if (org.isOwner) return true;
+  return (
+    hasPermission(org, 'TAB_TREATMENT_READ') ||
+    hasPermission(org, 'TAB_TREATMENT_EDIT')
+  );
+}

frontend/src/components/staff/StaffWorkingHoursStep.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { WorkingHoursEditor } from '@/components/staff/WorkingHoursEditor';
+import {
+  blocksFromEditorDays,
+  editorDaysFromBlocks,
+  emptyWorkingHoursEditorDays,
+  validateEditorDays,
+  type WorkingHoursEditorDay,
+} from '@/components/staff/workingHours';
+
+interface StaffWorkingHoursStepProps {
+  days: WorkingHoursEditorDay[];
+  autoRepeatWeekly: boolean;
+  onDaysChange: (days: WorkingHoursEditorDay[]) => void;
+  onAutoRepeatWeeklyChange: (value: boolean) => void;
+  onValidationChange?: (error: string | null) => void;
+  disabled?: boolean;
+}
+
+export function StaffWorkingHoursStep({
+  days,
+  autoRepeatWeekly,
+  onDaysChange,
+  onAutoRepeatWeeklyChange,
+  onValidationChange,
+  disabled,
+}: StaffWorkingHoursStepProps) {
+  useEffect(() => {
+    onValidationChange?.(validateEditorDays(days));
+  }, [days, onValidationChange]);
+
+  return (
+    <div className="space-y-3">
+      <div className="rounded-[var(--radius-md)] border border-primary/25 bg-primary/5 px-3 py-3">
+        <p className="text-sm text-text-primary font-medium">Working hours recommended</p>
+        <p className="text-sm text-text-secondary mt-1">
+          Staff with treatment edit access appear as provider columns in Appointments. Set their
+          weekly hours so the schedule grid shows the right bookable times.
+        </p>
+      </div>
+      <WorkingHoursEditor
+        days={days}
+        autoRepeatWeekly={autoRepeatWeekly}
+        onDaysChange={onDaysChange}
+        onAutoRepeatWeeklyChange={onAutoRepeatWeeklyChange}
+        disabled={disabled}
+      />
+    </div>
+  );
+}
+
+export function createDefaultWorkingHoursState() {
+  return {
+    days: emptyWorkingHoursEditorDays(),
+    autoRepeatWeekly: true,
+  };
+}
+
+export function workingHoursPayloadFromState(state: {
+  days: WorkingHoursEditorDay[];
+  autoRepeatWeekly: boolean;
+}) {
+  return {
+    autoRepeatWeekly: state.autoRepeatWeekly,
+    blocks: blocksFromEditorDays(state.days),
+  };
+}
+
+export function workingHoursStateFromApi(data: {
+  autoRepeatWeekly: boolean;
+  blocks: { dayOfWeek: number; startMinute: number; endMinute: number; sortOrder?: number }[];
+}) {
+  const hasBlocks = data.blocks.length > 0;
+  return {
+    days: hasBlocks ? editorDaysFromBlocks(data.blocks) : emptyWorkingHoursEditorDays(),
+    autoRepeatWeekly: data.autoRepeatWeekly,
+  };
+}
+
+export function useWorkingHoursForm(initial?: {
+  days: WorkingHoursEditorDay[];
+  autoRepeatWeekly: boolean;
+}) {
+  const [days, setDays] = useState(initial?.days ?? emptyWorkingHoursEditorDays());
+  const [autoRepeatWeekly, setAutoRepeatWeekly] = useState(initial?.autoRepeatWeekly ?? true);
+  const [validationError, setValidationError] = useState<string | null>(null);
+
+  return {
+    days,
+    setDays,
+    autoRepeatWeekly,
+    setAutoRepeatWeekly,
+    validationError,
+    setValidationError,
+    reset(next?: { days: WorkingHoursEditorDay[]; autoRepeatWeekly: boolean }) {
+      setDays(next?.days ?? emptyWorkingHoursEditorDays());
+      setAutoRepeatWeekly(next?.autoRepeatWeekly ?? true);
+      setValidationError(null);
+    },
+  };
+}

frontend/src/components/staff/WorkingHoursEditor.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import { Plus, Trash2 } from 'lucide-react';
+import { Button } from '@/components/ui/shared/Button';
+import { Checkbox } from '@/components/ui/shared/Checkbox';
+import {
+  MINUTES_PER_DAY,
+  WEEKDAY_LABELS,
+  minutesToTimeInput,
+  timeInputToMinutes,
+  type WorkingHoursEditorDay,
+} from '@/components/staff/workingHours';
+
+interface WorkingHoursEditorProps {
+  days: WorkingHoursEditorDay[];
+  autoRepeatWeekly: boolean;
+  onDaysChange: (days: WorkingHoursEditorDay[]) => void;
+  onAutoRepeatWeeklyChange: (value: boolean) => void;
+  disabled?: boolean;
+}
+
+const timeInputClass =
+  'w-full rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary px-2 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-primary/35';
+
+export function WorkingHoursEditor({
+  days,
+  autoRepeatWeekly,
+  onDaysChange,
+  onAutoRepeatWeeklyChange,
+  disabled = false,
+}: WorkingHoursEditorProps) {
+  function updateDay(dayOfWeek: number, patch: Partial<WorkingHoursEditorDay>) {
+    onDaysChange(
+      days.map((day) => (day.dayOfWeek === dayOfWeek ? { ...day, ...patch } : day)),
+    );
+  }
+
+  function updateShift(
+    dayOfWeek: number,
+    shiftIndex: number,
+    field: 'startMinute' | 'endMinute',
+    value: string,
+  ) {
+    const minutes = timeInputToMinutes(value);
+    if (minutes == null) return;
+    const day = days.find((d) => d.dayOfWeek === dayOfWeek);
+    if (!day) return;
+    const shifts = day.shifts.map((shift, index) =>
+      index === shiftIndex ? { ...shift, [field]: minutes } : shift,
+    );
+    updateDay(dayOfWeek, { shifts });
+  }
+
+  function addShift(dayOfWeek: number) {
+    const day = days.find((d) => d.dayOfWeek === dayOfWeek);
+    if (!day) return;
+    const last = day.shifts[day.shifts.length - 1];
+    const startMinute = last ? Math.min(last.endMinute + 60, MINUTES_PER_DAY - 60) : 9 * 60;
+    updateDay(dayOfWeek, {
+      shifts: [...day.shifts, { startMinute, endMinute: Math.min(startMinute + 120, MINUTES_PER_DAY) }],
+    });
+  }
+
+  function removeShift(dayOfWeek: number, shiftIndex: number) {
+    const day = days.find((d) => d.dayOfWeek === dayOfWeek);
+    if (!day || day.shifts.length <= 1) return;
+    updateDay(dayOfWeek, {
+      shifts: day.shifts.filter((_, index) => index !== shiftIndex),
+    });
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="text-sm text-text-secondary">
+        Set weekly working hours for this provider. The appointments grid uses these hours to show
+        bookable time slots.
+      </p>
+
+      <div className="space-y-3">
+        {days.map((day) => (
+          <div
+            key={day.dayOfWeek}
+            className="rounded-[var(--radius-md)] border border-border/60 bg-background-card/40 px-3 py-3 space-y-3"
+          >
+            <div className="flex items-center justify-between gap-3">
+              <span className="text-sm font-medium text-text-primary w-10">
+                {WEEKDAY_LABELS[day.dayOfWeek]}
+              </span>
+              <Checkbox
+                checked={day.isWorking}
+                disabled={disabled}
+                label="Working day"
+                onChange={(checked) => {
+                  updateDay(day.dayOfWeek, {
+                    isWorking: checked,
+                    shifts: checked
+                      ? day.shifts.length > 0
+                        ? day.shifts
+                        : [{ startMinute: 9 * 60, endMinute: 17 * 60 }]
+                      : day.shifts,
+                  });
+                }}
+              />
+            </div>
+
+            {day.isWorking && (
+              <div className="space-y-2 pl-0 sm:pl-10">
+                {day.shifts.map((shift, shiftIndex) => (
+                  <div key={shiftIndex} className="flex items-end gap-2">
+                    <div className="flex-1">
+                      <label className="block text-xs text-text-muted mb-1">Start</label>
+                      <input
+                        type="time"
+                        step={300}
+                        disabled={disabled}
+                        className={timeInputClass}
+                        value={minutesToTimeInput(shift.startMinute)}
+                        onChange={(e) =>
+                          updateShift(day.dayOfWeek, shiftIndex, 'startMinute', e.target.value)
+                        }
+                      />
+                    </div>
+                    <div className="flex-1">
+                      <label className="block text-xs text-text-muted mb-1">End</label>
+                      <input
+                        type="time"
+                        step={300}
+                        disabled={disabled}
+                        className={timeInputClass}
+                        value={minutesToTimeInput(shift.endMinute)}
+                        onChange={(e) =>
+                          updateShift(day.dayOfWeek, shiftIndex, 'endMinute', e.target.value)
+                        }
+                      />
+                    </div>
+                    <button
+                      type="button"
+                      disabled={disabled || day.shifts.length <= 1}
+                      className="p-2 rounded-md text-text-muted hover:text-red-500 hover:bg-red-500/10 disabled:opacity-40 disabled:cursor-not-allowed"
+                      aria-label="Remove shift"
+                      onClick={() => removeShift(day.dayOfWeek, shiftIndex)}
+                    >
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                ))}
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  disabled={disabled}
+                  onClick={() => addShift(day.dayOfWeek)}
+                >
+                  <Plus className="w-3.5 h-3.5 mr-1" />
+                  Add shift
+                </Button>
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      <Checkbox
+        checked={autoRepeatWeekly}
+        disabled={disabled}
+        label="Repeat these hours at the start of each week (copy forward on Monday)"
+        onChange={onAutoRepeatWeeklyChange}
+      />
+    </div>
+  );
+}

frontend/src/components/staff/staff-permission-form.ts

@@ -57,6 +57,10 @@ export function permissionNamesFromFeatureState(state: FeaturePermState): string
   return out;
 }
 
+export function featureStateHasTreatmentEdit(state: FeaturePermState): boolean {
+  return Boolean(state.TAB_TREATMENT_EDIT?.edit);
+}
+
 /** Human-readable access for the team table — feature name, or "Feature (Read only)" */
 export function formatAccessSummary(
   permissionNames: string[] | null | undefined,

frontend/src/components/staff/workingHours.ts

@@ -0,0 +1,213 @@
+export const MINUTES_PER_DAY = 24 * 60;
+export const SCHEDULE_SLOT_MINUTES = 15;
+
+export const WEEKDAY_LABELS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] as const;
+
+export type WorkingHoursBlock = {
+  dayOfWeek: number;
+  startMinute: number;
+  endMinute: number;
+  sortOrder?: number;
+};
+
+export type WorkingHoursDayBlock = {
+  startMinute: number;
+  endMinute: number;
+};
+
+export type WorkingHoursEditorDay = {
+  dayOfWeek: number;
+  isWorking: boolean;
+  shifts: { startMinute: number; endMinute: number }[];
+};
+
+export function localDayOfWeekMondayZero(dayOfWeekJs: number): number {
+  return dayOfWeekJs === 0 ? 6 : dayOfWeekJs - 1;
+}
+
+export function minutesToTimeInput(minutes: number): string {
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+
+export function timeInputToMinutes(value: string): number | null {
+  const match = /^(\d{1,2}):(\d{2})$/.exec(value.trim());
+  if (!match) return null;
+  const h = Number(match[1]);
+  const m = Number(match[2]);
+  if (h < 0 || h > 23 || m < 0 || m > 59) return null;
+  return h * 60 + m;
+}
+
+export function formatMinuteLabel(minute: number): string {
+  const d = new Date(2000, 0, 1, Math.floor(minute / 60), minute % 60, 0, 0);
+  return d.toLocaleTimeString(undefined, { hour: 'numeric', minute: '2-digit', hour12: true });
+}
+
+export function emptyWorkingHoursEditorDays(): WorkingHoursEditorDay[] {
+  return WEEKDAY_LABELS.map((_, dayOfWeek) => ({
+    dayOfWeek,
+    isWorking: false,
+    shifts: [{ startMinute: 9 * 60, endMinute: 17 * 60 }],
+  }));
+}
+
+export function editorDaysFromBlocks(blocks: WorkingHoursBlock[]): WorkingHoursEditorDay[] {
+  const byDay = new Map<number, WorkingHoursDayBlock[]>();
+  for (const block of blocks) {
+    const list = byDay.get(block.dayOfWeek) ?? [];
+    list.push({ startMinute: block.startMinute, endMinute: block.endMinute });
+    byDay.set(block.dayOfWeek, list);
+  }
+
+  return WEEKDAY_LABELS.map((_, dayOfWeek) => {
+    const shifts = (byDay.get(dayOfWeek) ?? []).sort(
+      (a, b) => a.startMinute - b.startMinute || a.endMinute - b.endMinute,
+    );
+    return {
+      dayOfWeek,
+      isWorking: shifts.length > 0,
+      shifts: shifts.length > 0 ? shifts : [{ startMinute: 9 * 60, endMinute: 17 * 60 }],
+    };
+  });
+}
+
+export function blocksFromEditorDays(days: WorkingHoursEditorDay[]): WorkingHoursBlock[] {
+  const blocks: WorkingHoursBlock[] = [];
+  for (const day of days) {
+    if (!day.isWorking) continue;
+    day.shifts.forEach((shift, index) => {
+      blocks.push({
+        dayOfWeek: day.dayOfWeek,
+        startMinute: shift.startMinute,
+        endMinute: shift.endMinute,
+        sortOrder: index,
+      });
+    });
+  }
+  return blocks;
+}
+
+export function validateEditorDays(days: WorkingHoursEditorDay[]): string | null {
+  for (const day of days) {
+    if (!day.isWorking) continue;
+    if (day.shifts.length === 0) {
+      return `${WEEKDAY_LABELS[day.dayOfWeek]} needs at least one shift or should be marked off.`;
+    }
+    const sorted = [...day.shifts].sort((a, b) => a.startMinute - b.startMinute);
+    for (const shift of sorted) {
+      if (shift.endMinute <= shift.startMinute) {
+        return `${WEEKDAY_LABELS[day.dayOfWeek]} shift end time must be after start time.`;
+      }
+    }
+    for (let i = 1; i < sorted.length; i += 1) {
+      if (sorted[i].startMinute < sorted[i - 1].endMinute) {
+        return `${WEEKDAY_LABELS[day.dayOfWeek]} shifts cannot overlap.`;
+      }
+    }
+  }
+  return null;
+}
+
+export function blocksForDay(blocks: WorkingHoursBlock[], dayOfWeek: number): WorkingHoursDayBlock[] {
+  return blocks
+    .filter((b) => b.dayOfWeek === dayOfWeek)
+    .sort((a, b) => a.startMinute - b.startMinute || a.endMinute - b.endMinute)
+    .map((b) => ({ startMinute: b.startMinute, endMinute: b.endMinute }));
+}
+
+export function isMinuteWithinWorkingBlocks(
+  minute: number,
+  dayBlocks: WorkingHoursDayBlock[],
+): boolean {
+  return dayBlocks.some((b) => minute >= b.startMinute && minute < b.endMinute);
+}
+
+export function isSlotWithinWorkingBlocks(
+  slotStartMinute: number,
+  slotMinutes: number,
+  dayBlocks: WorkingHoursDayBlock[],
+): boolean {
+  const slotEnd = slotStartMinute + slotMinutes;
+  for (let m = slotStartMinute; m < slotEnd; m += 1) {
+    if (!isMinuteWithinWorkingBlocks(m, dayBlocks)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function appointmentWithinWorkingHours(
+  startAt: Date,
+  endAt: Date,
+  dayBlocks: WorkingHoursDayBlock[],
+): boolean {
+  const startMinute = startAt.getHours() * 60 + startAt.getMinutes();
+  const endMinute = endAt.getHours() * 60 + endAt.getMinutes();
+  if (endMinute <= startMinute) return false;
+  for (let m = startMinute; m < endMinute; m += 1) {
+    if (!isMinuteWithinWorkingBlocks(m, dayBlocks)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+export function unionDayBlockRange(dayBlocksList: WorkingHoursDayBlock[][]): {
+  startMinute: number;
+  endMinute: number;
+} | null {
+  let startMinute: number | null = null;
+  let endMinute: number | null = null;
+
+  for (const dayBlocks of dayBlocksList) {
+    for (const block of dayBlocks) {
+      startMinute =
+        startMinute == null ? block.startMinute : Math.min(startMinute, block.startMinute);
+      endMinute = endMinute == null ? block.endMinute : Math.max(endMinute, block.endMinute);
+    }
+  }
+
+  if (startMinute == null || endMinute == null) {
+    return null;
+  }
+
+  return { startMinute, endMinute };
+}
+
+export function snapRangeToSlots(
+  startMinute: number,
+  endMinute: number,
+  slotMinutes: number,
+): { startMinute: number; endMinute: number; slotCount: number } {
+  const start = Math.floor(startMinute / slotMinutes) * slotMinutes;
+  const end = Math.ceil(endMinute / slotMinutes) * slotMinutes;
+  return {
+    startMinute: start,
+    endMinute: end,
+    slotCount: Math.max(1, (end - start) / slotMinutes),
+  };
+}
+
+export function generateSlotStarts(
+  startMinute: number,
+  endMinute: number,
+  slotMinutes: number,
+): number[] {
+  const slots: number[] = [];
+  for (let m = startMinute; m < endMinute; m += slotMinutes) {
+    slots.push(m);
+  }
+  return slots;
+}
+
+export function generateHourLabelsInRange(startMinute: number, endMinute: number): number[] {
+  const firstHour = Math.floor(startMinute / 60);
+  const lastHour = Math.ceil(endMinute / 60);
+  const hours: number[] = [];
+  for (let h = firstHour; h < lastHour; h += 1) {
+    hours.push(h);
+  }
+  return hours;
+}

frontend/src/components/treatment/caseSendLabel.ts

@@ -0,0 +1,40 @@
+import type { LinkedOrganizationOption, TreatmentCaseSendInfo } from '@/types/treatment';
+
+export function formatCaseSentLines(
+  sends: TreatmentCaseSendInfo[] | undefined,
+  fallback?: {
+    organizationIds: string[];
+    sentAt: string | null;
+    orgs?: LinkedOrganizationOption[];
+  },
+): string[] {
+  if (sends?.length) {
+    return sends.map((s) => {
+      const at = new Date(s.sentAt).toLocaleString();
+      return `Sent to ${s.organizationName} at ${at}`;
+    });
+  }
+
+  if (fallback?.sentAt && fallback.organizationIds.length > 0) {
+    const at = new Date(fallback.sentAt).toLocaleString();
+    const nameById = new Map(fallback.orgs?.map((o) => [o.id, o.name]) ?? []);
+    return fallback.organizationIds.map((id) => {
+      const name = nameById.get(id) ?? 'organization';
+      return `Sent to ${name} at ${at}`;
+    });
+  }
+
+  return [];
+}
+
+export function formatCaseSentSummary(
+  sends: TreatmentCaseSendInfo[] | undefined,
+  fallback?: {
+    organizationIds: string[];
+    sentAt: string | null;
+    orgs?: LinkedOrganizationOption[];
+  },
+): string | null {
+  const lines = formatCaseSentLines(sends, fallback);
+  return lines.length > 0 ? lines.join(' · ') : null;
+}

frontend/src/components/ui/appointments/AppointmentBookingModal.tsx

@@ -20,7 +20,7 @@ interface AppointmentBookingModalProps {
   patient: Patient | undefined;
   providerUserId: string | null;
   providerName: string;
-  initialHour: number;
+  initialStartMinute: number;
   onClose: () => void;
   onSubmit: (payload: {
     patientId: string;
@@ -42,7 +42,7 @@ export function AppointmentBookingModal({
   patient,
   providerUserId,
   providerName,
-  initialHour,
+  initialStartMinute,
   onClose,
   onSubmit,
   editingAppointment = null,
@@ -81,17 +81,18 @@ export function AppointmentBookingModal({
         scheduleDate.getFullYear(),
         scheduleDate.getMonth(),
         scheduleDate.getDate(),
-        initialHour,
-        0,
+        Math.floor(initialStartMinute / 60),
+        initialStartMinute % 60,
         0,
         0,
       );
+      const endMinute = Math.min(initialStartMinute + 60, 24 * 60 - 1);
       const end = new Date(
         scheduleDate.getFullYear(),
         scheduleDate.getMonth(),
         scheduleDate.getDate(),
-        initialHour < 23 ? initialHour + 1 : 23,
-        initialHour < 23 ? 0 : 59,
+        Math.floor(endMinute / 60),
+        endMinute % 60,
         0,
         0,
       );
@@ -100,7 +101,7 @@ export function AppointmentBookingModal({
       setPurpose('consultation');
     }
     setError('');
-  }, [open, scheduleDate, initialHour, editingAppointment]);
+  }, [open, scheduleDate, initialStartMinute, editingAppointment]);
 
   if (!open || !providerUserId) {
     return null;

frontend/src/components/ui/appointments/AppointmentScheduleGrid.tsx

@@ -2,7 +2,16 @@
 
 import { useMemo, useState } from 'react';
 import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';
-import { formatHourLabel } from '@/components/appointments/appointmentTime';
+import {
+  SCHEDULE_SLOT_MINUTES,
+  appointmentWithinWorkingHours,
+  formatMinuteLabel,
+  generateHourLabelsInRange,
+  generateSlotStarts,
+  isSlotWithinWorkingBlocks,
+  snapRangeToSlots,
+  unionDayBlockRange,
+} from '@/components/staff/workingHours';
 import {
   computeAppointmentLaneLayouts,
   findOverlapCluster,
@@ -10,23 +19,30 @@ import {
 } from '@/components/appointments/appointmentOverlapLayout';
 import { purposeStyle } from '@/components/ui/appointments/appointmentPurposeStyles';
 import { AppointmentOverlapPopover } from '@/components/ui/appointments/AppointmentOverlapPopover';
+import { startOfLocalDay } from '@/components/appointments/appointmentTime';
 
-const HOUR_PX = 40;
-const HOURS = Array.from({ length: 24 }, (_, i) => i);
+const HOUR_PX = 80;
+const SLOT_PX = (HOUR_PX * SCHEDULE_SLOT_MINUTES) / 60;
 
-function layoutBlock(apt: AppointmentRecord, day: Date): { top: string; height: string } | null {
-  const dayStart = new Date(day.getFullYear(), day.getMonth(), day.getDate(), 0, 0, 0, 0);
-  const dayEnd = new Date(day.getFullYear(), day.getMonth(), day.getDate() + 1, 0, 0, 0, 0);
+function layoutBlockInRange(
+  apt: AppointmentRecord,
+  day: Date,
+  rangeStartMinute: number,
+  rangeEndMinute: number,
+): { top: string; height: string } | null {
+  const dayStart = startOfLocalDay(day);
+  const rangeStartMs = dayStart.getTime() + rangeStartMinute * 60_000;
+  const rangeEndMs = dayStart.getTime() + rangeEndMinute * 60_000;
   const start = new Date(apt.startAt);
   const end = new Date(apt.endAt);
-  const ms = dayEnd.getTime() - dayStart.getTime();
-  const clipStart = Math.max(start.getTime(), dayStart.getTime());
-  const clipEnd = Math.min(end.getTime(), dayEnd.getTime());
+  const clipStart = Math.max(start.getTime(), rangeStartMs);
+  const clipEnd = Math.min(end.getTime(), rangeEndMs);
   if (clipEnd <= clipStart) {
     return null;
   }
-  const top = ((clipStart - dayStart.getTime()) / ms) * 100;
-  const height = ((clipEnd - clipStart) / ms) * 100;
+  const rangeMs = rangeEndMs - rangeStartMs;
+  const top = ((clipStart - rangeStartMs) / rangeMs) * 100;
+  const height = ((clipEnd - clipStart) / rangeMs) * 100;
   return { top: `${top}%`, height: `${height}%` };
 }
 
@@ -36,12 +52,12 @@ function appointmentDurationMinutes(apt: AppointmentRecord): number {
   return Math.max(0, Math.round((end - start) / 60_000));
 }
 
-function appointmentBannerHeightPx(durationMin: number): number {
-  return (durationMin / (24 * 60)) * HOURS.length * HOUR_PX;
+function appointmentBannerHeightPx(durationMin: number, rangeMinutes: number, gridHeight: number): number {
+  return (durationMin / rangeMinutes) * gridHeight;
 }
 
-function shortBannerNameClass(durationMin: number): string {
-  const heightPx = appointmentBannerHeightPx(durationMin);
+function shortBannerNameClass(durationMin: number, rangeMinutes: number, gridHeight: number): string {
+  const heightPx = appointmentBannerHeightPx(durationMin, rangeMinutes, gridHeight);
   if (heightPx < 18) {
     return 'text-[8px] leading-none';
   }
@@ -61,8 +77,9 @@ interface AppointmentScheduleGridProps {
   providers: AppointmentColumnProvider[];
   appointments: AppointmentRecord[];
   canBook: boolean;
-  onSlotClick: (hour: number, providerUserId: string, providerName: string) => void;
+  onSlotClick: (startMinute: number, providerUserId: string, providerName: string) => void;
   onAppointmentClick?: (appointment: AppointmentRecord) => void;
+  onAppointmentOutsideHours?: (appointment: AppointmentRecord) => void;
 }
 
 export function AppointmentScheduleGrid({
@@ -72,10 +89,39 @@ export function AppointmentScheduleGrid({
   canBook,
   onSlotClick,
   onAppointmentClick,
+  onAppointmentOutsideHours,
 }: AppointmentScheduleGridProps) {
-  const gridHeight = HOURS.length * HOUR_PX;
   const [overlapPopover, setOverlapPopover] = useState<OverlapPopoverState | null>(null);
 
+  const visibleRange = useMemo(() => {
+    const activeDayBlocks = providers
+      .filter((p) => p.hasWorkingHours && p.dayBlocks.length > 0)
+      .map((p) => p.dayBlocks);
+    return unionDayBlockRange(activeDayBlocks);
+  }, [providers]);
+
+  const snappedRange = useMemo(() => {
+    if (!visibleRange) return null;
+    return snapRangeToSlots(visibleRange.startMinute, visibleRange.endMinute, SCHEDULE_SLOT_MINUTES);
+  }, [visibleRange]);
+
+  const slotStarts = useMemo(() => {
+    if (!snappedRange) return [];
+    return generateSlotStarts(
+      snappedRange.startMinute,
+      snappedRange.endMinute,
+      SCHEDULE_SLOT_MINUTES,
+    );
+  }, [snappedRange]);
+
+  const hourLabels = useMemo(() => {
+    if (!snappedRange) return [];
+    return generateHourLabelsInRange(snappedRange.startMinute, snappedRange.endMinute);
+  }, [snappedRange]);
+
+  const gridHeight = slotStarts.length * SLOT_PX;
+  const rangeMinutes = snappedRange ? snappedRange.endMinute - snappedRange.startMinute : 0;
+
   const laneLayoutsByProvider = useMemo(() => {
     const map = new Map<string, ReturnType<typeof computeAppointmentLaneLayouts>>();
     for (const provider of providers) {
@@ -87,9 +133,19 @@ export function AppointmentScheduleGrid({
 
   function handleAppointmentBannerClick(
     apt: AppointmentRecord,
+    provider: AppointmentColumnProvider,
     providerAppointments: AppointmentRecord[],
     anchor: HTMLElement,
   ) {
+    if (
+      provider.hasWorkingHours &&
+      provider.dayBlocks.length > 0 &&
+      !appointmentWithinWorkingHours(new Date(apt.startAt), new Date(apt.endAt), provider.dayBlocks)
+    ) {
+      onAppointmentOutsideHours?.(apt);
+      return;
+    }
+
     const cluster = findOverlapCluster(apt.id, providerAppointments);
     if (cluster.length > 1) {
       setOverlapPopover({
@@ -109,6 +165,15 @@ export function AppointmentScheduleGrid({
     );
   }
 
+  if (!snappedRange || slotStarts.length === 0) {
+    return (
+      <div className="surface-card p-6 text-sm text-text-muted">
+        No working hours are configured for this day. Set provider working hours in Staff
+        management.
+      </div>
+    );
+  }
+
   return (
     <>
       <div className="surface-card overflow-x-auto">
@@ -121,21 +186,38 @@ export function AppointmentScheduleGrid({
                 className="flex-1 min-w-[130px] text-center text-sm font-medium text-text-primary py-2.5 px-1 border-l border-border"
               >
                 {p.name}
+                {!p.hasWorkingHours && (
+                  <span className="block text-[10px] font-normal text-text-muted mt-0.5">
+                    No hours set
+                  </span>
+                )}
+                {p.hasWorkingHours && p.dayBlocks.length === 0 && (
+                  <span className="block text-[10px] font-normal text-text-muted mt-0.5">
+                    Off today
+                  </span>
+                )}
               </div>
             ))}
           </div>
 
           <div className="flex">
-            <div className="w-14 flex-shrink-0 border-r border-border bg-background-secondary/40">
-              {HOURS.map((h) => (
             <div
-                  key={h}
-                  className="text-[11px] text-text-muted flex items-start justify-end pr-1.5 pt-0.5 border-b border-border/50"
-                  style={{ height: HOUR_PX }}
+              className="w-14 flex-shrink-0 border-r border-border bg-background-secondary/40 relative"
+              style={{ height: gridHeight }}
             >
-                  {formatHourLabel(h)}
+              {hourLabels.map((hour) => {
+                const top = ((hour * 60 - snappedRange.startMinute) / rangeMinutes) * gridHeight;
+                const height = (60 / rangeMinutes) * gridHeight;
+                return (
+                  <div
+                    key={hour}
+                    className="absolute left-0 right-0 text-[11px] text-text-muted flex items-start justify-end pr-1.5 pt-0.5 border-b border-border/50"
+                    style={{ top, height }}
+                  >
+                    {formatMinuteLabel(hour * 60)}
                   </div>
-              ))}
+                );
+              })}
             </div>
 
             <div className="flex-1 flex min-w-0">
@@ -144,6 +226,7 @@ export function AppointmentScheduleGrid({
                   (a) => a.providerUserId === p.userId,
                 );
                 const laneLayouts = laneLayoutsByProvider.get(p.userId) ?? new Map();
+                const columnFullyDisabled = !p.hasWorkingHours || p.dayBlocks.length === 0;
 
                 return (
                   <div
@@ -151,31 +234,50 @@ export function AppointmentScheduleGrid({
                     className="flex-1 min-w-[130px] border-l border-border relative"
                     style={{ height: gridHeight }}
                   >
-                    {HOURS.map((h) => {
-                      const slotDisabled = !canBook;
+                    {slotStarts.map((slotStartMinute, index) => {
+                      const slotActive =
+                        !columnFullyDisabled &&
+                        isSlotWithinWorkingBlocks(
+                          slotStartMinute,
+                          SCHEDULE_SLOT_MINUTES,
+                          p.dayBlocks,
+                        );
+                      const slotDisabled = !canBook || columnFullyDisabled || !slotActive;
+
                       return (
                         <button
-                          key={h}
+                          key={`${p.userId}-${slotStartMinute}`}
                           type="button"
                           disabled={slotDisabled}
                           title={
-                            slotDisabled
+                            columnFullyDisabled
+                              ? p.hasWorkingHours
+                                ? 'Provider is off today'
+                                : 'Working hours not configured'
+                              : !slotActive
+                                ? 'Outside working hours'
+                                : slotDisabled
                                   ? 'You cannot create appointments'
-                              : `Book ${formatHourLabel(h)}`
+                                  : `Book ${formatMinuteLabel(slotStartMinute)}`
                           }
                           className={`absolute left-0 right-0 border-b border-border/50 transition-colors ${
                             slotDisabled
-                              ? 'cursor-not-allowed opacity-50'
+                              ? 'cursor-not-allowed bg-background-secondary/35 opacity-60'
                               : 'hover:bg-primary/8 cursor-pointer'
                           }`}
-                          style={{ top: h * HOUR_PX, height: HOUR_PX }}
-                          onClick={() => onSlotClick(h, p.userId, p.name)}
+                          style={{ top: index * SLOT_PX, height: SLOT_PX }}
+                          onClick={() => onSlotClick(slotStartMinute, p.userId, p.name)}
                         />
                       );
                     })}
 
                     {providerAppointments.map((apt) => {
-                      const pos = layoutBlock(apt, day);
+                      const pos = layoutBlockInRange(
+                        apt,
+                        day,
+                        snappedRange.startMinute,
+                        snappedRange.endMinute,
+                      );
                       if (!pos) {
                         return null;
                       }
@@ -184,9 +286,18 @@ export function AppointmentScheduleGrid({
                       const durationMin = appointmentDurationMinutes(apt);
                       const clusterSize = findOverlapCluster(apt.id, providerAppointments).length;
                       const isUnderOneHour = durationMin < 60;
+                      const outsideHours =
+                        p.hasWorkingHours &&
+                        p.dayBlocks.length > 0 &&
+                        !appointmentWithinWorkingHours(
+                          new Date(apt.startAt),
+                          new Date(apt.endAt),
+                          p.dayBlocks,
+                        );
                       const patientName = `${apt.patient.firstName} ${apt.patient.lastName}`;
                       const bannerTitle = [
                         patientName,
+                        outsideHours ? 'Outside working hours — editing blocked' : null,
                         clusterSize > 1 ? `${clusterSize} overlapping — click to choose` : null,
                         !isUnderOneHour && apt.patient.phone ? apt.patient.phone : null,
                       ]
@@ -198,9 +309,16 @@ export function AppointmentScheduleGrid({
                           type="button"
                           key={apt.id}
                           onClick={(e) =>
-                            handleAppointmentBannerClick(apt, providerAppointments, e.currentTarget)
+                            handleAppointmentBannerClick(
+                              apt,
+                              p,
+                              providerAppointments,
+                              e.currentTarget,
+                            )
                           }
                           className={`absolute min-h-0 overflow-hidden rounded-[var(--radius-sm)] border pointer-events-auto z-10 flex text-left ${purposeStyle(apt.purpose)} focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 ${
+                            outsideHours ? 'opacity-70 ring-1 ring-amber-500/60' : ''
+                          } ${
                             isUnderOneHour
                               ? 'items-center justify-center px-0.5 py-0'
                               : 'flex-col justify-start gap-0.5 px-1 py-0.5'
@@ -214,7 +332,7 @@ export function AppointmentScheduleGrid({
                           title={bannerTitle}
                         >
                           <span
-                            className={`block w-full truncate pointer-events-none font-medium ${shortBannerNameClass(durationMin)}`}
+                            className={`block w-full truncate pointer-events-none font-medium ${shortBannerNameClass(durationMin, rangeMinutes, gridHeight)}`}
                           >
                             {patientName}
                           </span>
@@ -245,7 +363,24 @@ export function AppointmentScheduleGrid({
         <AppointmentOverlapPopover
           appointments={overlapPopover.appointments}
           anchorRect={overlapPopover.anchorRect}
-          onSelect={(apt) => onAppointmentClick?.(apt)}
+          onSelect={(apt) => {
+            const provider = providers.find((p) => p.userId === apt.providerUserId);
+            if (
+              provider &&
+              provider.hasWorkingHours &&
+              provider.dayBlocks.length > 0 &&
+              !appointmentWithinWorkingHours(
+                new Date(apt.startAt),
+                new Date(apt.endAt),
+                provider.dayBlocks,
+              )
+            ) {
+              onAppointmentOutsideHours?.(apt);
+              setOverlapPopover(null);
+              return;
+            }
+            onAppointmentClick?.(apt);
+          }}
           onClose={() => setOverlapPopover(null)}
         />
       )}

frontend/src/components/ui/organizations/OrganizationSelectorContent.tsx

@@ -3,9 +3,7 @@
 import { useMemo, useState } from 'react';
 import { useAuth } from '@/lib/hooks/useAuth';
 import { canCreateOrganizationFromCurrentOrg } from '@/components/shared/permissions';
-import { Building2, Mail } from 'lucide-react';
-import type { Organization } from '@/types/organization';
-import { organizationTypeIcon } from '@/components/shared/organizationTypeIcon';
+import { Building2, Beaker, Mail } from 'lucide-react';
 import { Input } from '@/components/ui/shared/Input';
 import { Button } from '@/components/ui/shared/Button';
 
@@ -28,10 +26,8 @@ export function OrganizationSelectorContent() {
   const [organizationEmail, setOrganizationEmail] = useState('');
   const [organizationType, setOrganizationType] = useState<'CLINIC' | 'LAB'>('CLINIC');
 
-  const renderOrgTypeIcon = (type: Organization['type']) => {
-    const Icon = organizationTypeIcon(type);
-    return <Icon className="h-8 w-8 icon-flat" />;
-  };
+  const getIcon = (type: string) =>
+    type === 'CLINIC' ? <Building2 className="h-8 w-8 icon-flat" /> : <Beaker className="h-8 w-8 icon-flat" />;
 
   const handleCreateOrganization = async () => {
     try {
@@ -162,7 +158,7 @@ export function OrganizationSelectorContent() {
               className="surface-card p-6 transition-all text-left flex items-center gap-4 hover:border-primary/60"
             >
               <div className="p-3 bg-primary-soft rounded-[var(--radius-sm)] text-primary">
-                {renderOrgTypeIcon(org.type)}
+                {getIcon(org.type)}
               </div>
 
               <div className="flex-1">

frontend/src/components/ui/patient/TreatmentHistoryPreview.tsx

@@ -1,37 +0,0 @@
-import { TreatmentHistoryItem } from '@/types/patient';
-
-interface TreatmentHistoryPreviewProps {
-  items: TreatmentHistoryItem[];
-  loading?: boolean;
-}
-
-export function TreatmentHistoryPreview({ items, loading = false }: TreatmentHistoryPreviewProps) {
-  return (
-    <div className="surface-card p-4 space-y-3">
-      <h3 className="text-base font-semibold text-text-primary">Treatment History</h3>
-
-      {loading && <p className="text-sm text-text-muted">Loading treatment history...</p>}
-
-      {!loading && items.length === 0 && (
-        <p className="text-sm text-text-muted">No treatment history yet.</p>
-      )}
-
-      <div className="space-y-2">
-        {items.map((item) => (
-          <div key={item.id} className="border border-border/60 rounded-[var(--radius-sm)] p-3">
-            <div className="flex items-center justify-between">
-              <p className="text-sm font-medium text-text-primary">{item.title}</p>
-              <p className="text-xs text-text-muted">
-                {new Date(item.treatmentAt).toLocaleDateString()}
-              </p>
-            </div>
-            <p className="text-xs text-text-secondary mt-1">
-              Status: {item.status}
-              {item.tooth ? ` | Tooth: ${item.tooth}` : ''}
-            </p>
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

frontend/src/components/ui/treatment/CaseLatestAttachmentPreview.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { FileText } from 'lucide-react';
+import { treatmentsApi } from '@/lib/api/treatments';
+import type { TreatmentAttachmentMeta } from '@/types/treatment';
+
+interface CaseLatestAttachmentPreviewProps {
+  attachment: TreatmentAttachmentMeta;
+  className?: string;
+}
+
+export function CaseLatestAttachmentPreview({
+  attachment,
+  className = 'aspect-square w-full max-w-[11rem]',
+}: CaseLatestAttachmentPreviewProps) {
+  const [url, setUrl] = useState<string | null>(null);
+  const [failed, setFailed] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    let objectUrl: string | null = null;
+
+    void (async () => {
+      try {
+        const blob = await treatmentsApi.getAttachmentFileBlob(attachment.id);
+        if (cancelled) return;
+        objectUrl = URL.createObjectURL(blob);
+        setUrl(objectUrl);
+        setFailed(false);
+      } catch {
+        if (!cancelled) setFailed(true);
+      }
+    })();
+
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [attachment.id]);
+
+  const isImage = attachment.mimeType.startsWith('image/');
+  const isPdf = attachment.mimeType === 'application/pdf';
+
+  return (
+    <div
+      className={`${className} rounded-[var(--radius-md)] border border-border/60 bg-background-secondary overflow-hidden`}
+      title={attachment.fileName}
+    >
+      {url && isImage ? (
+        <img
+          src={url}
+          alt={attachment.fileName}
+          className="h-full w-full object-fill"
+        />
+      ) : url && isPdf ? (
+        <iframe
+          src={url}
+          title={attachment.fileName}
+          className="h-full w-full border-0"
+        />
+      ) : (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-1.5 p-2 text-text-muted">
+          <FileText className="h-8 w-8 shrink-0 icon-flat" aria-hidden />
+          <span className="line-clamp-2 text-center text-[10px] leading-tight">
+            {failed ? 'Preview unavailable' : attachment.fileName}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/treatment/CaseSentLabel.tsx

@@ -0,0 +1,31 @@
+import { formatCaseSentLines } from '@/components/treatment/caseSendLabel';
+import type { LinkedOrganizationOption, PastTreatmentCase, TreatmentCaseDraft } from '@/types/treatment';
+
+interface CaseSentLabelProps {
+  treatmentCase: Pick<
+    PastTreatmentCase | TreatmentCaseDraft,
+    'sends' | 'sendToOrganizationIds' | 'sentAt'
+  >;
+  orgs?: LinkedOrganizationOption[];
+  className?: string;
+}
+
+export function CaseSentLabel({ treatmentCase, orgs, className = 'text-xs text-text-muted' }: CaseSentLabelProps) {
+  const lines = formatCaseSentLines(treatmentCase.sends, {
+    organizationIds: treatmentCase.sendToOrganizationIds ?? [],
+    sentAt: treatmentCase.sentAt ?? null,
+    orgs,
+  });
+
+  if (lines.length === 0) return null;
+
+  return (
+    <div className={className}>
+      {lines.map((line, i) => (
+        <span key={`${line}-${i}`} className="block">
+          {line}
+        </span>
+      ))}
+    </div>
+  );
+}

frontend/src/components/ui/treatment/FdiToothChart.tsx

@@ -103,7 +103,7 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
   };
 
   const Row = ({ teeth, upper }: { teeth: FdiToothId[]; upper?: boolean }) => (
-    <div className="flex flex-wrap justify-center gap-x-1 gap-y-1">
+    <div className="flex flex-nowrap justify-center gap-x-1 min-w-max mx-auto w-fit">
       {teeth.map((fdi, i) => {
         const kind = getToothShapeKind(fdi);
         const gid = `${uid}-g-${fdi}-${i}`;
@@ -148,31 +148,30 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
   );
 
   return (
-    <div className="surface-card p-4 space-y-6">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+    <div className="surface-card p-3 space-y-3">
+      <div className="flex flex-col gap-1.5 sm:flex-row sm:items-center sm:justify-between">
         <div>
           <h3 className="text-sm font-semibold text-text-primary">FDI tooth chart</h3>
-          <p className="text-xs text-text-muted mt-0.5">
-            Tap teeth to multi-select (FDI). Selection applies to the active treatment record until you save.
+          <p className="text-[11px] text-text-muted mt-0.5">
+            Tap teeth to multi-select. Applies to the active case.
           </p>
         </div>
-        <div className="flex flex-col gap-2 sm:items-end w-full sm:max-w-xs">
-          <p className="text-xs text-text-secondary tabular-nums text-right">
+        <p className="text-[11px] text-text-secondary tabular-nums sm:text-right">
           Selected: {selected.size === 0 ? '—' : [...selected].sort().join(', ')}
         </p>
       </div>
-      </div>
 
       <p className="text-[11px] uppercase tracking-wide text-text-muted mb-1 text-center">Upper arch</p>
 
-      <div className="relative isolate py-1">
+      <div className="overflow-x-auto py-1 -mx-1 px-1">
+        <div className="relative isolate min-w-max mx-auto w-fit">
           <div
             className="pointer-events-none absolute left-1/2 top-3 bottom-3 w-px -translate-x-1/2 bg-border/70"
             aria-hidden
           />
           <div className="relative z-10 space-y-0">
             <Row teeth={FDI_UPPER_LEFT_TO_RIGHT} upper />
-          <div className={`flex justify-center gap-x-1 ${TOOTH_NUMBER_GAP}`}>
+            <div className={`flex flex-nowrap justify-center gap-x-1 ${TOOTH_NUMBER_GAP}`}>
               {FDI_UPPER_LEFT_TO_RIGHT.map((fdi) => {
                 const size = toothSizeClass(fdi);
                 const isSel = selected.has(fdi);
@@ -189,14 +188,10 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
               })}
             </div>
 
-          <div
-            className="my-4 h-px w-full max-w-[min(100%,42rem)] mx-auto bg-border/70"
-            role="separator"
-            aria-hidden
-          />
+            <div className="my-2 h-px w-full bg-border/70" role="separator" aria-hidden />
 
-          <div className="my-4 pt-1">
-            <div className="flex justify-center gap-x-1">
+            <div className="pt-0.5">
+              <div className="flex flex-nowrap justify-center gap-x-1">
                 {FDI_LOWER_LEFT_TO_RIGHT.map((fdi) => {
                   const size = toothSizeClass(fdi);
                   const isSel = selected.has(fdi);
@@ -218,6 +213,7 @@ export function FdiToothChart({ selected, onToggle, disabled }: FdiToothChartPro
             </div>
           </div>
         </div>
+      </div>
 
       <p className="text-[11px] uppercase tracking-wide text-text-muted mt-1 text-center">Lower arch</p>
     </div>

frontend/src/components/ui/treatment/PastTreatmentsPanel.tsx

@@ -2,89 +2,92 @@
 
 import { FileText } from 'lucide-react';
 import type { PastTreatment } from '@/types/treatment';
+import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
 
 interface PastTreatmentsPanelProps {
   items: PastTreatment[];
   loading?: boolean;
-  selectedTreatmentId?: string | null;
-  onSelectTreatment?: (treatment: PastTreatment) => void;
+  onReviewTreatment?: (treatment: PastTreatment) => void;
 }
 
 export function PastTreatmentsPanel({
   items,
   loading,
-  selectedTreatmentId,
-  onSelectTreatment,
+  onReviewTreatment,
 }: PastTreatmentsPanelProps) {
   return (
     <div className="surface-card p-4 space-y-3">
       <div>
         <h3 className="text-sm font-semibold text-text-primary">Previous treatments</h3>
-        <p className="text-xs text-text-muted mt-0.5">
-          Document preview is not implemented yet; file names are listed for context.
+        <p className="text-[11px] text-text-muted mt-0.5">
+          Completed treatments for this patient. Each case is listed separately.
         </p>
       </div>
 
-      {loading && <p className="text-sm text-text-muted">Loading history...</p>}
+      {loading && <p className="text-sm text-text-muted">Loading history…</p>}
 
       {!loading && items.length === 0 && (
         <p className="text-sm text-text-muted">No prior treatments for this patient.</p>
       )}
 
-      <div className="space-y-3 max-h-[min(420px,55vh)] overflow-y-auto pr-1">
+      <div className="space-y-3 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
         {items.map((t) => (
           <article
             key={t.id}
-            className={`border rounded-[var(--radius-md)] p-3 ${
-              selectedTreatmentId === t.id
-                ? 'border-primary/70 bg-primary-soft/35'
-                : 'border-border/70 bg-background-secondary/40'
-            }`}
+            className="border border-border/70 rounded-[var(--radius-md)] p-2.5 bg-background-secondary/40 space-y-2"
           >
             <div className="flex items-start justify-between gap-2">
-              <p className="text-sm font-medium text-text-primary">{t.title}</p>
-              <time className="text-xs text-text-muted tabular-nums shrink-0" dateTime={t.treatmentAt}>
+              <div className="min-w-0">
+                <p className="text-sm font-medium text-text-primary truncate">{t.title}</p>
+                <p className="text-[11px] text-text-secondary capitalize mt-0.5">Status: {t.status}</p>
+              </div>
+              <time
+                className="text-[11px] text-text-muted tabular-nums shrink-0"
+                dateTime={t.treatmentAt}
+              >
                 {new Date(t.treatmentAt).toLocaleDateString()}
               </time>
             </div>
-            <p className="text-xs text-text-secondary mt-1">Status: {t.status}</p>
 
-            {t.records.length > 0 && (
-              <ul className="mt-2 space-y-1.5 text-xs text-text-secondary">
-                {t.records.map((r) => (
-                  <li key={r.id}>
-                    <span className="text-text-primary font-medium">Record: </span>
-                    <span className="capitalize">{r.treatmentType}</span>
-                    {' | '}
-                    {r.teeth.length > 0 ? `Teeth ${[...r.teeth].sort().join(', ')}` : 'No teeth tagged'}
-                    {r.notes ? ` — ${r.notes}` : ''}
-                  </li>
-                ))}
-              </ul>
-            )}
-
-            {onSelectTreatment && (
-              <div className="mt-3 pt-2 border-t border-border/50 flex justify-end">
-                <button
-                  type="button"
-                  onClick={() => onSelectTreatment(t)}
-                  className="text-xs text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 rounded-[var(--radius-sm)] px-1"
+            <div className="space-y-1.5">
+              {t.cases.map((c, idx) => {
+                const attachments = c.attachmentMetas ?? [];
+                return (
+                  <div
+                    key={c.id}
+                    className="border border-border/60 rounded-[var(--radius-sm)] px-2.5 py-2 bg-background-secondary/30 space-y-1"
                   >
-                  Review details
-                </button>
-              </div>
+                    <div className="flex items-center justify-between gap-2">
+                      <p className="text-xs font-medium text-text-primary capitalize">
+                        Case {idx + 1} · {c.treatmentType}
+                      </p>
+                      {c.sentAt && (
+                        <CaseSentLabel
+                          treatmentCase={c}
+                          className="text-[10px] text-text-muted shrink-0 text-right"
+                        />
                       )}
-
-            {t.documents.length > 0 && (
-              <div className="mt-3 pt-2 border-t border-border/50">
-                <p className="text-[11px] uppercase tracking-wide text-text-muted mb-1.5">Attachments</p>
-                <ul className="space-y-1">
-                  {t.documents.map((doc) => (
+                    </div>
+                    <p className="text-[11px] text-text-secondary">
+                      Teeth: {c.teeth.length ? [...c.teeth].sort().join(', ') : 'None selected'}
+                    </p>
+                    {c.notes?.trim() && (
+                      <p className="text-[11px] text-text-muted line-clamp-2">{c.notes}</p>
+                    )}
+                    <div>
+                      <p className="text-[10px] uppercase tracking-wide text-text-muted mb-1">
+                        Attachments
+                      </p>
+                      {attachments.length === 0 ? (
+                        <p className="text-[11px] text-text-muted">None</p>
+                      ) : (
+                        <ul className="space-y-0.5">
+                          {attachments.map((doc) => (
                             <li
                               key={doc.id}
-                      className="flex items-center gap-2 text-xs text-text-secondary"
+                              className="flex items-center gap-1.5 text-[11px] text-text-secondary"
                             >
-                      <FileText className="w-3.5 h-3.5 shrink-0 icon-flat" aria-hidden />
+                              <FileText className="w-3 h-3 shrink-0 icon-flat" aria-hidden />
                               <span className="truncate">{doc.fileName}</span>
                               <span className="text-text-muted tabular-nums shrink-0">
                                 {(doc.sizeBytes / 1024).toFixed(1)} KB
@@ -92,6 +95,22 @@ export function PastTreatmentsPanel({
                             </li>
                           ))}
                         </ul>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+
+            {onReviewTreatment && (
+              <div className="pt-1 flex justify-end">
+                <button
+                  type="button"
+                  onClick={() => onReviewTreatment(t)}
+                  className="text-xs text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 rounded-[var(--radius-sm)] px-1"
+                >
+                  Review details
+                </button>
               </div>
             )}
           </article>

frontend/src/components/ui/treatment/TreatmentCasesEditor.tsx

@@ -0,0 +1,296 @@
+'use client';
+
+import { useRef } from 'react';
+import { Button } from '@/components/ui/shared/Button';
+import { Checkbox } from '@/components/ui/shared/Checkbox';
+import { Dropdown } from '@/components/ui/shared/Dropdown';
+import { SearchBar } from '@/components/ui/shared/SearchBar';
+import type { LinkedOrganizationOption, TreatmentCaseDraft } from '@/types/treatment';
+import { formatCaseSentSummary } from '@/components/treatment/caseSendLabel';
+import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
+
+interface TreatmentCasesEditorProps {
+  cases: TreatmentCaseDraft[];
+  activeCaseId: string;
+  onActiveCaseChange: (id: string) => void;
+  onCasesChange: (cases: TreatmentCaseDraft[]) => void;
+  disabled: boolean;
+  canEdit: boolean;
+  isDirty: boolean;
+  saveBusy: boolean;
+  sendBusyId: string | null;
+  uploadBusy: boolean;
+  orgs: LinkedOrganizationOption[];
+  organizationSearch: string;
+  onOrganizationSearchChange: (value: string) => void;
+  recentOrganizationIds: string[];
+  onRecentOrganizationPick: (orgId: string) => void;
+  onAddCase: () => void;
+  onPreview: () => void;
+  onSave: () => void;
+  onSendCase: (c: TreatmentCaseDraft) => void;
+  onUploadFiles: (files: FileList | null) => void;
+}
+
+export function TreatmentCasesEditor({
+  cases,
+  activeCaseId,
+  onActiveCaseChange,
+  onCasesChange,
+  disabled,
+  canEdit,
+  isDirty,
+  saveBusy,
+  sendBusyId,
+  uploadBusy,
+  orgs,
+  organizationSearch,
+  onOrganizationSearchChange,
+  recentOrganizationIds,
+  onRecentOrganizationPick,
+  onAddCase,
+  onPreview,
+  onSave,
+  onSendCase,
+  onUploadFiles,
+}: TreatmentCasesEditorProps) {
+  const attachmentInputRef = useRef<HTMLInputElement>(null);
+  const activeCase = cases.find((c) => c.clientId === activeCaseId) ?? cases[0];
+  const activeLinkedOrganizations = orgs.filter((o) => o.active);
+  const filteredOrganizations = (() => {
+    const q = organizationSearch.trim().toLowerCase();
+    if (!q) return activeLinkedOrganizations;
+    return activeLinkedOrganizations.filter((o) => o.name.toLowerCase().includes(q));
+  })();
+  const recentOrganizations = recentOrganizationIds
+    .map((id) => activeLinkedOrganizations.find((o) => o.id === id))
+    .filter(Boolean) as LinkedOrganizationOption[];
+
+  const treatmentTypeTextColor = activeCase
+    ? (
+        {
+          consultation: '#ddd6fe',
+          filling: '#fed7aa',
+          endo: '#fecaca',
+          visit: '#bae6fd',
+          hygiene: '#d9f99d',
+        } as Record<TreatmentCaseDraft['treatmentType'], string>
+      )[activeCase.treatmentType]
+    : undefined;
+
+  if (!activeCase) return null;
+
+  return (
+    <div className="surface-card p-4 space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h3 className="text-sm font-semibold text-text-primary">Treatment cases</h3>
+          <p className="text-xs text-text-muted mt-0.5">
+            Each case has its own teeth, notes, attachments, and destinations for send.
+          </p>
+        </div>
+        <div className="flex flex-wrap items-center gap-2">
+          <Button type="button" variant="secondary" disabled={!canEdit || disabled} onClick={onPreview}>
+            Preview
+          </Button>
+          <Button type="button" variant="primary" disabled={!canEdit || disabled} onClick={onAddCase}>
+            Add case
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-2">
+        {cases.map((c, idx) => {
+          const sentSummary = formatCaseSentSummary(c.sends, {
+            organizationIds: c.sendToOrganizationIds ?? [],
+            sentAt: c.sentAt ?? null,
+            orgs,
+          });
+          return (
+          <button
+            key={c.clientId}
+            type="button"
+            onClick={() => onActiveCaseChange(c.clientId)}
+            className={`
+              rounded-[var(--radius-md)] border px-3 py-1.5 text-sm transition-colors
+              focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
+              ${
+                c.clientId === activeCaseId
+                  ? 'border-primary bg-primary-soft font-medium text-text-primary'
+                  : 'border-border/70 text-text-secondary hover:border-border hover:bg-background-card/50'
+              }
+            `}
+          >
+            Case {idx + 1}
+            {sentSummary ? ` · ${sentSummary}` : ''}
+          </button>
+          );
+        })}
+      </div>
+
+      <div className="space-y-4 border border-border/60 rounded-[var(--radius-md)] p-4 bg-background-secondary/30">
+        <label className="block text-xs font-medium text-text-secondary">
+          Comments
+          <textarea
+            value={activeCase.comment}
+            onChange={(e) => {
+              const v = e.target.value;
+              onCasesChange(
+                cases.map((c) => (c.clientId === activeCaseId ? { ...c, comment: v } : c)),
+              );
+            }}
+            placeholder="Write clinical notes for this case…"
+            rows={5}
+            disabled={disabled || Boolean(activeCase.sentAt)}
+            className="mt-1.5 w-full rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary text-sm px-3 py-2 placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/35 resize-y min-h-[120px]"
+          />
+        </label>
+
+        <div>
+          <Dropdown
+            label="Treatment type"
+            value={activeCase.treatmentType}
+            onChange={(e) => {
+              const nextType = e.target.value as TreatmentCaseDraft['treatmentType'];
+              onCasesChange(
+                cases.map((c) =>
+                  c.clientId === activeCaseId ? { ...c, treatmentType: nextType } : c,
+                ),
+              );
+            }}
+            disabled={disabled || Boolean(activeCase.sentAt)}
+            className="capitalize"
+            style={{ color: treatmentTypeTextColor }}
+          >
+            <option value="consultation" style={{ color: '#ddd6fe', backgroundColor: '#14253d' }} className="capitalize">consultation</option>
+            <option value="filling" style={{ color: '#fed7aa', backgroundColor: '#14253d' }} className="capitalize">filling</option>
+            <option value="endo" style={{ color: '#fecaca', backgroundColor: '#14253d' }} className="capitalize">endo</option>
+            <option value="visit" style={{ color: '#bae6fd', backgroundColor: '#14253d' }} className="capitalize">visit</option>
+            <option value="hygiene" style={{ color: '#d9f99d', backgroundColor: '#14253d' }} className="capitalize">hygiene</option>
+          </Dropdown>
+        </div>
+
+        <div>
+          <p className="text-xs font-medium text-text-secondary mb-2">Attachments</p>
+          <input
+            ref={attachmentInputRef}
+            id="treatment-case-attachments"
+            type="file"
+            multiple
+            disabled={disabled || uploadBusy || Boolean(activeCase.sentAt)}
+            onChange={(e) => {
+              onUploadFiles(e.target.files);
+              e.target.value = '';
+            }}
+            className="sr-only"
+            aria-label="Attach files for this treatment case"
+          />
+          <Button
+            type="button"
+            variant="primary"
+            disabled={disabled || uploadBusy || Boolean(activeCase.sentAt)}
+            isLoading={uploadBusy}
+            onClick={() => attachmentInputRef.current?.click()}
+            aria-controls="treatment-case-attachments"
+          >
+            Choose files
+          </Button>
+          {activeCase.attachmentMetas.length > 0 && (
+            <ul className="mt-2 space-y-1 text-xs text-text-muted">
+              {activeCase.attachmentMetas.map((f) => (
+                <li key={f.id} className="truncate">
+                  {f.fileName} ({(f.sizeBytes / 1024).toFixed(1)} KB)
+                </li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div>
+          <p className="text-xs font-medium text-text-secondary mb-2">
+            Send this case to linked organizations
+          </p>
+          <div className="space-y-2 mb-2">
+            <SearchBar
+              value={organizationSearch}
+              onChange={onOrganizationSearchChange}
+              placeholder="Search active organizations..."
+            />
+            {recentOrganizations.length > 0 && (
+              <div className="flex flex-wrap items-center gap-2">
+                <span className="text-xs text-text-muted">Recent:</span>
+                {recentOrganizations.map((o) => (
+                  <button
+                    key={o.id}
+                    type="button"
+                    disabled={disabled || Boolean(activeCase.sentAt)}
+                    onClick={() => onRecentOrganizationPick(o.id)}
+                    className="text-xs rounded-[var(--radius-sm)] border border-border/70 px-2 py-1 text-text-secondary hover:text-text-primary hover:border-border focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 disabled:opacity-50"
+                  >
+                    {o.name}
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className="flex flex-col gap-2">
+            {filteredOrganizations.map((o) => (
+              <Checkbox
+                key={o.id}
+                checked={activeCase.sendToOrganizationIds.includes(o.id)}
+                disabled={disabled || Boolean(activeCase.sentAt)}
+                onChange={(checked) => {
+                  onCasesChange(
+                    cases.map((c) => {
+                      if (c.clientId !== activeCaseId) return c;
+                      const next = new Set(c.sendToOrganizationIds);
+                      if (checked) next.add(o.id);
+                      else next.delete(o.id);
+                      return { ...c, sendToOrganizationIds: [...next] };
+                    }),
+                  );
+                }}
+                label={o.name}
+              />
+            ))}
+            {filteredOrganizations.length === 0 && (
+              <p className="text-xs text-text-muted">No active organization matches your search.</p>
+            )}
+          </div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-3 pt-1">
+          <Button
+            type="button"
+            variant="primary"
+            disabled={disabled || Boolean(activeCase.sentAt) || sendBusyId === activeCase.clientId}
+            isLoading={sendBusyId === activeCase.clientId}
+            onClick={() => onSendCase(activeCase)}
+          >
+            Send this case
+          </Button>
+          {activeCase.sentAt && (
+            <CaseSentLabel treatmentCase={activeCase} orgs={orgs} />
+          )}
+        </div>
+      </div>
+
+      {canEdit && (
+        <div className="flex flex-wrap gap-3 pt-2 border-t border-border/60">
+          <Button
+            type="button"
+            variant="primary"
+            disabled={disabled || saveBusy}
+            isLoading={saveBusy}
+            onClick={onSave}
+          >
+            Save treatment draft
+          </Button>
+          <p className="text-xs text-text-muted self-center">
+            {isDirty ? 'Unsaved changes' : 'Draft saved'}. Sending is per case and saves first automatically.
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/treatment/TreatmentLatestAttachmentPreview.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { FileText } from 'lucide-react';
+import { treatmentsApi } from '@/lib/api/treatments';
+import type { TreatmentAttachmentMeta } from '@/types/treatment';
+
+interface TreatmentLatestAttachmentPreviewProps {
+  attachment?: TreatmentAttachmentMeta | null;
+  className?: string;
+}
+
+function isImageMime(mimeType: string): boolean {
+  return mimeType.startsWith('image/');
+}
+
+function isPdfMime(mimeType: string): boolean {
+  return mimeType === 'application/pdf';
+}
+
+export function TreatmentLatestAttachmentPreview({
+  attachment,
+  className = '',
+}: TreatmentLatestAttachmentPreviewProps) {
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [loadFailed, setLoadFailed] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const canRenderPreview = attachment
+    ? isImageMime(attachment.mimeType) || isPdfMime(attachment.mimeType)
+    : false;
+
+  useEffect(() => {
+    if (!attachment || !canRenderPreview) {
+      setPreviewUrl(null);
+      setLoadFailed(false);
+      setLoading(false);
+      return;
+    }
+
+    let cancelled = false;
+    let objectUrl: string | null = null;
+
+    setLoading(true);
+    setLoadFailed(false);
+    setPreviewUrl(null);
+
+    void treatmentsApi
+      .getAttachmentFileBlob(attachment.id)
+      .then((blob) => {
+        if (cancelled) return;
+        objectUrl = URL.createObjectURL(blob);
+        setPreviewUrl(objectUrl);
+      })
+      .catch(() => {
+        if (!cancelled) setLoadFailed(true);
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [attachment, canRenderPreview]);
+
+  return (
+    <div
+      className={`aspect-square w-[6rem] shrink-0 overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-background-secondary/50 ${className}`}
+      title={attachment?.fileName}
+    >
+      {!attachment ? (
+        <div className="flex h-full w-full items-center justify-center text-[10px] text-text-muted">
+          None
+        </div>
+      ) : loading ? (
+        <div className="flex h-full w-full items-center justify-center text-[10px] text-text-muted">
+          …
+        </div>
+      ) : loadFailed || !canRenderPreview || !previewUrl ? (
+        <div className="flex h-full w-full flex-col items-center justify-center gap-1 p-1.5 text-center">
+          <FileText className="h-4 w-4 shrink-0 icon-flat text-text-muted" aria-hidden />
+          <span className="line-clamp-2 text-[9px] leading-tight text-text-secondary">
+            {attachment.fileName}
+          </span>
+        </div>
+      ) : isImageMime(attachment.mimeType) ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={previewUrl}
+          alt={attachment.fileName}
+          className="h-full w-full object-fill"
+        />
+      ) : (
+        <iframe
+          src={previewUrl}
+          title={attachment.fileName}
+          className="h-full w-full border-0"
+        />
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/treatment/TreatmentPreviewCard.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { Button } from '@/components/ui/shared/Button';
+import type { PastTreatment } from '@/types/treatment';
+
+interface TreatmentPreviewCardProps {
+  draft: PastTreatment | null;
+  disabled?: boolean;
+  onPreview: () => void;
+}
+
+export function TreatmentPreviewCard({ draft, disabled, onPreview }: TreatmentPreviewCardProps) {
+  return (
+    <div className="surface-card p-4 space-y-3">
+      <div className="flex items-center justify-between gap-2">
+        <h3 className="text-sm font-semibold text-text-primary">Treatment preview</h3>
+        <Button type="button" variant="primary" disabled={disabled || !draft} onClick={onPreview}>
+          Preview current draft
+        </Button>
+      </div>
+      {!draft ? (
+        <p className="text-sm text-text-muted">Select an appointment to preview its draft.</p>
+      ) : (
+        <div className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40 space-y-2">
+          <div className="flex items-start justify-between gap-2">
+            <p className="text-sm font-medium text-text-primary">{draft.title}</p>
+            <span className="text-xs text-text-muted tabular-nums shrink-0 capitalize">{draft.status}</span>
+          </div>
+          <p className="text-xs text-text-secondary">
+            {draft.cases.length} case{draft.cases.length === 1 ? '' : 's'} ·{' '}
+            {draft.cases.reduce((n, c) => n + (c.attachmentMetas?.length ?? 0), 0)} attachment
+            {draft.cases.reduce((n, c) => n + (c.attachmentMetas?.length ?? 0), 0) === 1 ? '' : 's'}
+          </p>
+          <div className="space-y-2">
+            {draft.cases.slice(0, 2).map((c, idx) => (
+              <div
+                key={c.id}
+                className="rounded-[var(--radius-sm)] border border-border/60 px-2.5 py-2 text-xs text-text-secondary"
+              >
+                <span className="text-text-primary font-medium capitalize">
+                  Case {idx + 1}: {c.treatmentType}
+                </span>
+                {c.teeth.length > 0 && (
+                  <span className="ml-1 tabular-nums">· Teeth {[...c.teeth].sort().join(', ')}</span>
+                )}
+              </div>
+            ))}
+            {draft.cases.length > 2 && (
+              <p className="text-xs text-text-muted">+ {draft.cases.length - 2} more case(s)</p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/components/ui/treatment/TreatmentPreviewDialog.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { useRef, useState } from 'react';
+import { Loader2, Paperclip, Send } from 'lucide-react';
+import { DialogCloseButton } from '@/components/ui/shared/DialogCloseButton';
+import { Button } from '@/components/ui/shared/Button';
+import { Checkbox } from '@/components/ui/shared/Checkbox';
+import type { LinkedOrganizationOption, PastTreatment, PastTreatmentCase } from '@/types/treatment';
+import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
+import { TreatmentLatestAttachmentPreview } from '@/components/ui/treatment/TreatmentLatestAttachmentPreview';
+
+export type TreatmentPreviewMode = 'readonly' | 'editable';
+
+interface TreatmentPreviewDialogProps {
+  open: boolean;
+  onClose: () => void;
+  treatment: PastTreatment | null;
+  mode: TreatmentPreviewMode;
+  orgs?: LinkedOrganizationOption[];
+  sendBusyCaseId?: string | null;
+  uploadBusyCaseId?: string | null;
+  onAttach?: (caseKey: string, files: FileList) => void | Promise<void>;
+  onSend?: (caseKey: string, organizationIds: string[]) => void | Promise<void>;
+  getCaseOrgIds?: (caseKey: string) => string[];
+  onToggleCaseOrg?: (caseKey: string, organizationId: string, checked: boolean) => void;
+}
+
+function caseKey(c: PastTreatmentCase): string {
+  return c.clientId ?? c.id;
+}
+
+const caseActionIconClass =
+  'inline-flex items-center justify-center rounded-[var(--radius-sm)] p-1.5 text-text-secondary transition-colors hover:bg-background-card/80 hover:text-text-primary disabled:cursor-not-allowed disabled:opacity-40';
+
+export function TreatmentPreviewDialog({
+  open,
+  onClose,
+  treatment,
+  mode,
+  orgs = [],
+  sendBusyCaseId,
+  uploadBusyCaseId,
+  onAttach,
+  onSend,
+  getCaseOrgIds,
+  onToggleCaseOrg,
+}: TreatmentPreviewDialogProps) {
+  const [expandedSendCaseId, setExpandedSendCaseId] = useState<string | null>(null);
+  const fileInputsRef = useRef<Record<string, HTMLInputElement | null>>({});
+
+  if (!open || !treatment) return null;
+
+  const editable = mode === 'editable';
+  const activeOrgs = orgs.filter((o) => o.active);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50">
+      <div
+        className="w-full max-w-[min(56rem,calc(100vw-17rem))] max-h-[90vh] overflow-y-auto rounded-[var(--radius-md)] border border-border bg-background-secondary p-6 shadow-xl space-y-4"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="treatment-preview-title"
+      >
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <h2 id="treatment-preview-title" className="text-lg font-semibold text-text-primary pr-2">
+              Treatment preview
+            </h2>
+            <p className="text-xs text-text-muted mt-0.5">
+              Review cases, attachments, and send destinations.
+            </p>
+          </div>
+          <DialogCloseButton onClick={onClose} />
+        </div>
+
+        <div className="border border-border/70 rounded-[var(--radius-md)] p-4 bg-background-secondary/40 space-y-3">
+          <div className="flex items-start justify-between gap-2">
+            <p className="text-sm font-medium text-text-primary">{treatment.title}</p>
+            <span className="text-xs text-text-muted tabular-nums shrink-0">
+              {new Date(treatment.treatmentAt).toLocaleDateString()}
+            </span>
+          </div>
+          <p className="text-xs text-text-secondary capitalize">Status: {treatment.status}</p>
+
+          {treatment.cases.length === 0 ? (
+            <p className="text-sm text-text-muted">No cases in this treatment.</p>
+          ) : (
+            <div className="space-y-2">
+              {treatment.cases.map((c, idx) => {
+                const key = caseKey(c);
+                const attachments = c.attachmentMetas ?? [];
+                const latestAttachment =
+                  attachments.length > 0 ? attachments[attachments.length - 1] : null;
+                const sent = Boolean(c.sentAt);
+                const actionsEnabled = editable && !sent;
+                const selectedOrgIds = getCaseOrgIds?.(key) ?? c.sendToOrganizationIds ?? [];
+                const sendExpanded = expandedSendCaseId === key;
+                const comment = c.notes?.trim() ?? '';
+                const attachBusy = uploadBusyCaseId === key;
+                const sendBusy = sendBusyCaseId === key;
+
+                return (
+                  <div
+                    key={key}
+                    className="rounded-[var(--radius-md)] border border-border/60 px-3 py-2 bg-background-secondary/30"
+                  >
+                    <div className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-4 gap-y-1">
+                      <div className="min-w-0 space-y-0.5">
+                        <div className="flex items-center gap-2">
+                          <p className="text-xs font-medium text-text-primary">Case {idx + 1}</p>
+                          {actionsEnabled && (
+                            <div className="flex items-center gap-0.5">
+                              <input
+                                ref={(el) => {
+                                  fileInputsRef.current[key] = el;
+                                }}
+                                type="file"
+                                multiple
+                                className="sr-only"
+                                aria-hidden
+                                onChange={(e) => {
+                                  if (e.target.files?.length) {
+                                    void onAttach?.(key, e.target.files);
+                                  }
+                                  e.target.value = '';
+                                }}
+                              />
+                              <button
+                                type="button"
+                                className={caseActionIconClass}
+                                disabled={attachBusy}
+                                aria-label="Attach files"
+                                title="Attach files"
+                                onClick={() => fileInputsRef.current[key]?.click()}
+                              >
+                                {attachBusy ? (
+                                  <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
+                                ) : (
+                                  <Paperclip className="h-3.5 w-3.5" aria-hidden />
+                                )}
+                              </button>
+                              <button
+                                type="button"
+                                className={`${caseActionIconClass} ${
+                                  sendExpanded ? 'bg-primary-soft text-primary' : ''
+                                }`}
+                                disabled={sendBusy}
+                                aria-label="Send this case"
+                                title="Send this case"
+                                aria-expanded={sendExpanded}
+                                onClick={() =>
+                                  setExpandedSendCaseId((prev) => (prev === key ? null : key))
+                                }
+                              >
+                                {sendBusy ? (
+                                  <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden />
+                                ) : (
+                                  <Send className="h-3.5 w-3.5" aria-hidden />
+                                )}
+                              </button>
+                            </div>
+                          )}
+                        </div>
+                        <p className="text-[11px] text-text-secondary capitalize">
+                          Type: {c.treatmentType}
+                        </p>
+                        <p className="text-[11px] text-text-secondary">
+                          Teeth:{' '}
+                          {c.teeth.length ? [...c.teeth].sort().join(', ') : 'None selected'}
+                        </p>
+                        {comment ? (
+                          <p className="text-[11px] text-text-muted line-clamp-2" title={comment}>
+                            Comments: {comment}
+                          </p>
+                        ) : (
+                          <p className="text-[11px] text-text-muted">Comments: —</p>
+                        )}
+                      </div>
+
+                      <div className="flex min-w-[6rem] flex-col items-end gap-1">
+                        {sent && (
+                          <CaseSentLabel
+                            treatmentCase={c}
+                            orgs={orgs}
+                            className="text-[10px] text-text-muted text-right"
+                          />
+                        )}
+                        <p className="text-[10px] uppercase tracking-wide text-text-muted">
+                          Attachments
+                        </p>
+                        <TreatmentLatestAttachmentPreview attachment={latestAttachment} />
+                      </div>
+                    </div>
+
+                    {sendExpanded && editable && !sent && (
+                      <div className="mt-2 space-y-2 border-t border-border/40 pt-2">
+                        <p className="text-xs font-medium text-text-secondary">
+                          Send to linked organizations
+                        </p>
+                        {activeOrgs.length === 0 ? (
+                          <p className="text-xs text-text-muted">No active linked organizations.</p>
+                        ) : (
+                          <div className="flex flex-col gap-1.5">
+                            {activeOrgs.map((o) => (
+                              <Checkbox
+                                key={o.id}
+                                checked={selectedOrgIds.includes(o.id)}
+                                onChange={(checked) => onToggleCaseOrg?.(key, o.id, checked)}
+                                label={o.name}
+                              />
+                            ))}
+                          </div>
+                        )}
+                        <Button
+                          type="button"
+                          variant="primary"
+                          size="sm"
+                          disabled={!selectedOrgIds.length || sendBusy}
+                          isLoading={sendBusy}
+                          onClick={() => void onSend?.(key, selectedOrgIds)}
+                        >
+                          Confirm send
+                        </Button>
+                      </div>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/lib/api/appointments.ts

@@ -1,5 +1,6 @@
 import { apiClient } from './client';
 import type { AppointmentColumnProvider, AppointmentRecord } from '@/types/appointment';
+import { toDateInputValue } from '@/components/appointments/appointmentTime';
 
 export interface CreateAppointmentBody {
   patientId: string;
@@ -12,8 +13,11 @@ export interface CreateAppointmentBody {
 export type UpdateAppointmentBody = Partial<CreateAppointmentBody>;
 
 export const appointmentsApi = {
-  columnProviders: async (): Promise<{ success: boolean; data: AppointmentColumnProvider[] }> => {
-    const response = await apiClient.get('/appointments/column-providers');
+  columnProviders: async (
+    scheduleDate?: Date,
+  ): Promise<{ success: boolean; data: AppointmentColumnProvider[] }> => {
+    const params = scheduleDate ? { date: toDateInputValue(scheduleDate) } : undefined;
+    const response = await apiClient.get('/appointments/column-providers', { params });
     return response.data;
   },
 

frontend/src/lib/api/patients.ts

@@ -1,10 +1,8 @@
 import { apiClient } from './client';
 import {
   CreatePatientInput,
-  CreateTreatmentHistoryInput,
   Patient,
   PatientsListResponse,
-  TreatmentHistoryItem,
 } from '@/types/patient';
 
 export const patientsApi = {
@@ -22,22 +20,4 @@ export const patientsApi = {
     const response = await apiClient.get(`/patients/${id}`);
     return response.data;
   },
-
-  listTreatments: async (
-    patientId: string,
-    limit = 20,
-  ): Promise<{ success: boolean; data: TreatmentHistoryItem[] }> => {
-    const response = await apiClient.get(`/patients/${patientId}/treatments`, {
-      params: { limit },
-    });
-    return response.data;
-  },
-
-  addTreatment: async (
-    patientId: string,
-    data: CreateTreatmentHistoryInput,
-  ): Promise<{ success: boolean; data: TreatmentHistoryItem }> => {
-    const response = await apiClient.post(`/patients/${patientId}/treatments`, data);
-    return response.data;
-  },
 };

frontend/src/lib/api/staff.ts

@@ -107,10 +107,42 @@ export const staffApi = {
     return response.data;
   },
 
+  enableMember: async (
+    membershipId: string,
+  ): Promise<{ success: boolean; message: string }> => {
+    const response = await apiClient.patch(`/staff/members/${membershipId}/enable`);
+    return response.data;
+  },
+
   removeMember: async (
     membershipId: string,
   ): Promise<{ success: boolean; message: string }> => {
     const response = await apiClient.delete(`/staff/members/${membershipId}`);
     return response.data;
   },
+
+  getWorkingHours: async (
+    membershipId: string,
+  ): Promise<{
+    success: boolean;
+    data: {
+      autoRepeatWeekly: boolean;
+      blocks: { dayOfWeek: number; startMinute: number; endMinute: number; sortOrder?: number }[];
+      hasWorkingHours: boolean;
+    };
+  }> => {
+    const response = await apiClient.get(`/staff/members/${membershipId}/working-hours`);
+    return response.data;
+  },
+
+  upsertWorkingHours: async (
+    membershipId: string,
+    body: {
+      autoRepeatWeekly: boolean;
+      blocks: { dayOfWeek: number; startMinute: number; endMinute: number; sortOrder?: number }[];
+    },
+  ): Promise<{ success: boolean; message: string }> => {
+    const response = await apiClient.put(`/staff/members/${membershipId}/working-hours`, body);
+    return response.data;
+  },
 };

frontend/src/lib/api/treatments.ts

@@ -0,0 +1,86 @@
+import { apiClient } from './client';
+import type {
+  LinkedOrganizationOption,
+  PastTreatment,
+  SaveTreatmentPayload,
+  SendTreatmentCasePayload,
+  TreatmentAttachmentMeta,
+  TreatmentCaseSendInfo,
+} from '@/types/treatment';
+
+export const treatmentsApi = {
+  listLinkedOrganizations: async (): Promise<{ success: boolean; data: LinkedOrganizationOption[] }> => {
+    const response = await apiClient.get('/treatments/linked-organizations');
+    return response.data;
+  },
+
+  listPatientHistory: async (
+    patientId: string,
+    limit = 20,
+  ): Promise<{ success: boolean; data: PastTreatment[] }> => {
+    const response = await apiClient.get(`/treatments/patients/${patientId}/history`, {
+      params: { limit },
+    });
+    return response.data;
+  },
+
+  getDraft: async (
+    appointmentId: string,
+  ): Promise<{ success: boolean; data: PastTreatment | null }> => {
+    const response = await apiClient.get(`/treatments/appointments/${appointmentId}/draft`);
+    return response.data;
+  },
+
+  saveDraft: async (
+    appointmentId: string,
+    payload: Pick<SaveTreatmentPayload, 'cases'>,
+  ): Promise<{ success: boolean; data: PastTreatment }> => {
+    const response = await apiClient.put(`/treatments/appointments/${appointmentId}/draft`, payload);
+    return response.data;
+  },
+
+  uploadCaseAttachments: async (
+    appointmentId: string,
+    caseClientId: string,
+    files: File[],
+  ): Promise<{ success: boolean; data: TreatmentAttachmentMeta[] }> => {
+    const form = new FormData();
+    for (const file of files) {
+      form.append('files', file);
+    }
+    const response = await apiClient.post(
+      `/treatments/appointments/${appointmentId}/cases/${encodeURIComponent(caseClientId)}/attachments`,
+      form,
+      { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 120_000 },
+    );
+    return response.data;
+  },
+
+  sendCase: async (
+    caseId: string,
+    payload: SendTreatmentCasePayload,
+  ): Promise<{ success: boolean; data: PastTreatmentCaseResponse }> => {
+    const response = await apiClient.post(`/treatments/cases/${caseId}/send`, payload);
+    return response.data;
+  },
+
+  getAttachmentFileBlob: async (attachmentId: string): Promise<Blob> => {
+    const response = await apiClient.get(`/treatments/attachments/${attachmentId}/file`, {
+      responseType: 'blob',
+      timeout: 120_000,
+    });
+    return response.data;
+  },
+};
+
+export interface PastTreatmentCaseResponse {
+  id: string;
+  clientId: string;
+  treatmentType: string;
+  teeth: string[];
+  notes: string | null;
+  sentAt: string | null;
+  sendToOrganizationIds: string[];
+  sends: TreatmentCaseSendInfo[];
+  attachmentMetas: TreatmentAttachmentMeta[];
+}

frontend/src/lib/mocks/treatmentMockApi.ts

@@ -1,200 +0,0 @@
-import {
-  addCalendarDays,
-  isSameLocalCalendarDay,
-  startOfLocalDay,
-} from '@/components/appointments/appointmentTime';
-import type {
-  FdiToothId,
-  LinkedOrganizationOption,
-  PastTreatment,
-  SaveTreatmentPayload,
-  SendTreatmentRecordPayload,
-  TreatmentAppointment,
-} from '@/types/treatment';
-
-const MOCK_DELAY_MS = 280;
-
-function sleep(ms = MOCK_DELAY_MS) {
-  return new Promise<void>((resolve) => setTimeout(resolve, ms));
-}
-
-function pad2(n: number) {
-  return String(n).padStart(2, '0');
-}
-
-/** Builds deterministic ids so React keys stay stable across hot reloads */
-function mockApptId(dayKey: string, slotIndex: number | string) {
-  return `mock-appt-${dayKey}-${slotIndex}`;
-}
-
-function buildSlotsForDay(day: Date, userId: string): TreatmentAppointment[] {
-  const dayStart = startOfLocalDay(day);
-  const y = dayStart.getFullYear();
-  const m = dayStart.getMonth();
-  const d = dayStart.getDate();
-  const dayKey = `${y}-${pad2(m + 1)}-${pad2(d)}`;
-
-  const base: Omit<TreatmentAppointment, 'id' | 'startAt' | 'endAt'>[] = [
-    {
-      patientId: 'pat-alice',
-      patientFirstName: 'Alice',
-      patientLastName: 'Moradi',
-      providerUserId: userId,
-      purpose: 'consultation',
-    },
-    {
-      patientId: 'pat-babak',
-      patientFirstName: 'Babak',
-      patientLastName: 'Karimi',
-      providerUserId: userId,
-      purpose: 'filling',
-    },
-    {
-      patientId: 'pat-sara',
-      patientFirstName: 'Sara',
-      patientLastName: 'Hosseini',
-      providerUserId: userId,
-      purpose: 'endo',
-    },
-  ];
-
-  const slots: TreatmentAppointment[] = [];
-  const times = [
-    [9, 0, 9, 45],
-    [11, 15, 12, 0],
-    [14, 30, 15, 30],
-  ];
-
-  times.forEach(([h1, m1, h2, m2], i) => {
-    const baseSlot = base[i % base.length];
-    const startAt = new Date(y, m, d, h1, m1, 0, 0).toISOString();
-    const endAt = new Date(y, m, d, h2, m2, 0, 0).toISOString();
-    slots.push({
-      id: mockApptId(dayKey, i),
-      ...baseSlot,
-      startAt,
-      endAt,
-    });
-  });
-
-  const today = new Date();
-  if (isSameLocalCalendarDay(day, today)) {
-    const now = today.getTime();
-    const start = new Date(now - 12 * 60 * 1000);
-    const end = new Date(now + 48 * 60 * 1000);
-    slots.unshift({
-      id: mockApptId(dayKey, 'now'),
-      patientId: 'pat-hesam',
-      patientFirstName: 'Hesam',
-      patientLastName: 'Aghaie',
-      providerUserId: userId,
-      startAt: start.toISOString(),
-      endAt: end.toISOString(),
-      purpose: 'visit',
-    });
-  }
-
-  return slots.sort((a, b) => new Date(a.startAt).getTime() - new Date(b.startAt).getTime());
-}
-
-const MOCK_HISTORY: Record<string, PastTreatment[]> = {
-  'pat-hesam': [
-    {
-      id: 'pt-h-1',
-      patientId: 'pat-hesam',
-      title: 'Root canal 45',
-      treatmentAt: new Date(2026, 8, 12).toISOString(),
-      status: 'completed',
-      records: [
-        {
-          id: 'ptr-1',
-          treatmentType: 'endo',
-          teeth: ['45'] as FdiToothId[],
-          notes: 'Instrumented and temporized.',
-        },
-      ],
-      documents: [
-        {
-          id: 'doc-1',
-          fileName: 'periapical-45.png',
-          mimeType: 'image/png',
-          sizeBytes: 842_120,
-        },
-        {
-          id: 'doc-2',
-          fileName: 'consent-signed.pdf',
-          mimeType: 'application/pdf',
-          sizeBytes: 312_000,
-        },
-      ],
-    },
-    {
-      id: 'pt-h-2',
-      patientId: 'pat-hesam',
-      title: 'Filling 14, 15',
-      treatmentAt: new Date(2025, 9, 10).toISOString(),
-      status: 'completed',
-      records: [
-        {
-          id: 'ptr-2',
-          treatmentType: 'filling',
-          teeth: ['14', '15'] as FdiToothId[],
-          notes: 'Composite restoration.',
-        },
-      ],
-      documents: [
-        {
-          id: 'doc-3',
-          fileName: 'notes.txt',
-          mimeType: 'text/plain',
-          sizeBytes: 420,
-        },
-      ],
-    },
-  ],
-  'pat-alice': [
-    {
-      id: 'pt-a-1',
-      patientId: 'pat-alice',
-      title: 'Hygiene visit',
-      treatmentAt: addCalendarDays(new Date(), -21).toISOString(),
-      status: 'completed',
-      records: [{ id: 'ptr-a', treatmentType: 'hygiene', teeth: [], notes: 'Scale & polish.' }],
-      documents: [],
-    },
-  ],
-};
-
-const MOCK_ORGS: LinkedOrganizationOption[] = [
-  { id: 'org-lab-north', name: 'North Dental Lab', active: true },
-  { id: 'org-lab-smile', name: 'Smile Ceramics', active: true },
-  { id: 'org-lab-old', name: 'Legacy Lab (inactive)', active: false },
-];
-
-export async function fetchMyAppointmentsForDay(
-  userId: string,
-  day: Date,
-): Promise<TreatmentAppointment[]> {
-  await sleep();
-  return buildSlotsForDay(day, userId);
-}
-
-export async function fetchPastTreatments(patientId: string): Promise<PastTreatment[]> {
-  await sleep();
-  return MOCK_HISTORY[patientId] ?? [];
-}
-
-export async function fetchLinkedOrganizations(): Promise<LinkedOrganizationOption[]> {
-  await sleep(180);
-  return MOCK_ORGS;
-}
-
-export async function saveTreatmentDraft(_payload: SaveTreatmentPayload): Promise<{ ok: true }> {
-  await sleep();
-  return { ok: true };
-}
-
-export async function sendTreatmentRecord(_payload: SendTreatmentRecordPayload): Promise<{ ok: true }> {
-  await sleep();
-  return { ok: true };
-}

frontend/src/types/appointment.ts

@@ -13,6 +13,8 @@ export type AppointmentPurpose = (typeof APPOINTMENT_PURPOSES)[number];
 export interface AppointmentColumnProvider {
   userId: string;
   name: string;
+  hasWorkingHours: boolean;
+  dayBlocks: { startMinute: number; endMinute: number }[];
 }
 
 export interface AppointmentRecord {

frontend/src/types/patient.ts

@@ -12,19 +12,6 @@ export interface Patient {
   updatedAt: string;
 }
 
-export interface TreatmentHistoryItem {
-  id: string;
-  patientId: string;
-  title: string;
-  status: string;
-  treatmentAt: string;
-  tooth?: string | null;
-  notes?: string | null;
-  totalCost?: number | null;
-  createdAt: string;
-  updatedAt: string;
-}
-
 export interface CreatePatientInput {
   firstName: string;
   lastName: string;
@@ -34,15 +21,6 @@ export interface CreatePatientInput {
   notes?: string;
 }
 
-export interface CreateTreatmentHistoryInput {
-  title: string;
-  status: string;
-  treatmentAt: string;
-  tooth?: string;
-  notes?: string;
-  totalCost?: number;
-}
-
 export interface PatientsListResponse {
   success: boolean;
   data: {

frontend/src/types/treatment.ts

@@ -61,20 +61,32 @@ export const TREATMENT_TYPES = [
 
 export type TreatmentType = (typeof TREATMENT_TYPES)[number];
 
-export interface PastTreatmentRecord {
+export interface TreatmentCaseSendInfo {
+  organizationId: string;
+  organizationName: string;
+  sentAt: string;
+}
+
+export interface PastTreatmentCase {
   id: string;
+  clientId: string;
   treatmentType: TreatmentType;
   teeth: FdiToothId[];
   notes?: string | null;
+  attachmentMetas?: TreatmentAttachmentMeta[];
+  sendToOrganizationIds?: string[];
+  sends?: TreatmentCaseSendInfo[];
+  sentAt?: string | null;
 }
 
 export interface PastTreatment {
   id: string;
   patientId: string;
+  appointmentId?: string | null;
   title: string;
   treatmentAt: string;
   status: string;
-  records: PastTreatmentRecord[];
+  cases: PastTreatmentCase[];
   documents: TreatmentAttachmentMeta[];
 }
 
@@ -84,29 +96,33 @@ export interface LinkedOrganizationOption {
   active: boolean;
 }
 
-export interface TreatmentRecordDraft {
+export interface TreatmentCaseDraft {
   clientId: string;
+  id?: string;
   treatmentType: TreatmentType;
   teeth: FdiToothId[];
   comment: string;
   attachmentMetas: TreatmentAttachmentMeta[];
-  /** Organizations selected for sending this record (mock only until API exists) */
   sendToOrganizationIds: string[];
+  sends?: TreatmentCaseSendInfo[];
   sentAt?: string | null;
 }
 
-/** Payload for persisting a draft (mock API); omits ephemeral client-only fields */
-export type SavedTreatmentRecordPayload = Omit<TreatmentRecordDraft, 'clientId' | 'sentAt'>;
+export type SavedTreatmentCasePayload = {
+  clientId: string;
+  id?: string;
+  treatmentType: TreatmentType;
+  teeth: FdiToothId[];
+  comment: string;
+  attachmentIds: string[];
+};
 
 export interface SaveTreatmentPayload {
   appointmentId: string;
   patientId: string;
-  records: SavedTreatmentRecordPayload[];
+  cases: SavedTreatmentCasePayload[];
 }
 
-export interface SendTreatmentRecordPayload {
-  appointmentId: string;
-  patientId: string;
-  recordClientId: string;
+export interface SendTreatmentCasePayload {
   organizationIds: string[];
 }