fix(treatment): let the operator actually record an area

Starting a session created area records with no device, and the panel only ever
read the device it never set — so every "اتمام این ناحیه" came back 422 with
"دستگاه این ناحیه مشخص نیست". The backend tests passed because they sent
resource_uuid explicitly; from the UI the flow was unusable end to end.

The device now inherits from the appointment's resource, which the secretary
already chose at booking; asking the operator again is taking one decision
twice. The session screen offers a picker per area on top of that, because one
session really does run bikini on an alexandrite and underarms on a diode.

Treating without a device is allowed: botox is an injection, and requiring a
device would make clinics invent a fake resource per injection. Sending readings
with no device is still rejected — there would be no schema to validate against.

A protocol whose service has no ResourceServiceOffering rows now says so in the
tab where the manager is standing. It does not block booking: "no offering means
any resource" is a deliberate, tested rule. But silence meant the gap surfaced
only when the operator was already in front of a patient.

Also adds the live timer the spec asked for, and wires slot-suggestions into the
unbooked queue — the endpoint existed and tested green but no screen called it.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

assets/admin/pages/StaffSessionDetailPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
@@ -7,7 +7,8 @@ import PageHeader from '../components/ui/PageHeader';
 import StatusBadge from '../components/ui/StatusBadge';
 import SearchableSelect from '../components/ui/SearchableSelect';
 import { formatDate } from '../lib/utils';
-import type { SessionAreaRecord, StaffSessionDetail, TreatmentFormField } from '../types';
+import { useElapsed } from '../hooks/useElapsed';
+import type { SessionAreaRecord, StaffSessionDetail, TreatmentDevice, TreatmentFormField } from '../types';
 
 const BASE = '/api/v1/dashboard/staff';
 
@@ -70,6 +71,9 @@ export default function StaffSessionDetailPage() {
     onError: (e) => fail(e, 'ثبت اطلاعات ناحیه ناموفق بود'),
   });
 
+  // پیش از هر return زودهنگام: ترتیب hookها باید در هر رندر یکی باشد.
+  const elapsed = useElapsed(session?.started_at ?? null, session?.finished_at ?? null);
+
   if (isLoading) {
     return <div className="card card-pad" style={{ fontSize: 13, color: 'var(--text-3)' }}>در حال بارگذاری...</div>;
   }
@@ -100,6 +104,11 @@ export default function StaffSessionDetailPage() {
           {session.appointment && <span>تاریخ: {formatDate(session.appointment.slot_start)}</span>}
           {session.performed_by && <span>اپراتور: {session.performed_by.name}</span>}
           <span>{settled} از {areas.length} ناحیه انجام شده</span>
+          {elapsed && (
+            <span style={{ fontVariantNumeric: 'tabular-nums' }}>
+              {session.finished_at === null ? 'در حال انجام: ' : 'مدت جلسه: '}{elapsed}
+            </span>
+          )}
         </div>
 
         {!started && !finished && (
@@ -128,6 +137,7 @@ export default function StaffSessionDetailPage() {
           <AreaCard
             key={area.uuid}
             area={area}
+            devices={session.devices}
             forms={session.forms}
             disabled={finished}
             onSkip={() => skipArea.mutate(area.uuid)}
@@ -167,20 +177,25 @@ export default function StaffSessionDetailPage() {
   );
 }
 
-function AreaCard({ area, forms, disabled, onSkip, onComplete, saving }: {
+function AreaCard({ area, devices, forms, disabled, onSkip, onComplete, saving }: {
   area: SessionAreaRecord;
+  devices: TreatmentDevice[];
   forms: Record<string, TreatmentFormField[]>;
   disabled: boolean;
   onSkip: () => void;
   onComplete: (body: Record<string, unknown>) => void;
   saving: boolean;
 }) {
-  const [open, setOpen]             = useState(false);
-  const [values, setValues]         = useState<Record<string, string>>({});
-  const [areaNote, setAreaNote]     = useState('');
-  const resourceUuid                = area.resource?.uuid ?? null;
-  const fields                      = resourceUuid ? forms[resourceUuid] ?? [] : [];
-  const settled                     = area.status === 'completed' || area.status === 'skipped';
+  const [open, setOpen]         = useState(false);
+  const [values, setValues]     = useState<Record<string, string>>({});
+  const [areaNote, setAreaNote] = useState('');
+  // پیش‌فرض همان دستگاهی است که از نوبت به ارث رسیده؛ اپراتور فقط اگر لازم شد عوضش می‌کند.
+  const [resourceUuid, setResourceUuid] = useState<string | null>(area.resource?.uuid ?? null);
+  const fields   = resourceUuid ? forms[resourceUuid] ?? [] : [];
+  const settled  = area.status === 'completed' || area.status === 'skipped';
+  const elapsed  = useElapsed(area.started_at, area.finished_at);
+
+  useEffect(() => setResourceUuid(area.resource?.uuid ?? null), [area.resource?.uuid]);
 
   const submit = () => {
     const parameters: Record<string, string> = {};
@@ -203,6 +218,11 @@ function AreaCard({ area, forms, disabled, onSkip, onComplete, saving }: {
         {area.resource && (
           <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>دستگاه: {area.resource.name}</span>
         )}
+        {elapsed && (
+          <span style={{ fontSize: 12.5, color: 'var(--text-3)', fontVariantNumeric: 'tabular-nums' }}>
+            {area.finished_at === null ? 'در حال انجام: ' : 'مدت: '}{elapsed}
+          </span>
+        )}
       </div>
 
       {settled && area.parameters && (
@@ -232,7 +252,22 @@ function AreaCard({ area, forms, disabled, onSkip, onComplete, saving }: {
 
       {!settled && open && (
         <div style={{ display: 'grid', gap: 10 }}>
-          {fields.length === 0 && (
+          <label className="field" style={{ display: 'grid', gap: 4 }}>
+            <span style={{ fontSize: 12.5 }}>دستگاه</span>
+            <SearchableSelect
+              options={devices.map((d) => ({ value: d.uuid, label: d.name }))}
+              value={resourceUuid}
+              onChange={(v) => setResourceUuid(v === null ? null : String(v))}
+              placeholder="بدون دستگاه"
+              isClearable
+              ariaLabel={`دستگاه ناحیهٔ ${area.area.name}`}
+            />
+            <span className="field-hint">
+              پیش‌فرض همان دستگاه نوبت است. فرم زیر از روی همین دستگاه ساخته می‌شود.
+            </span>
+          </label>
+
+          {resourceUuid !== null && fields.length === 0 && (
             <span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
               برای این دستگاه فرمی تعریف نشده است. در «تنظیمات ← انواع منابع» می‌توانید فیلدها را تعریف کنید.
             </span>