feat(reports): restore the documented sample threshold, and draw the chart

MIN_SAMPLE goes back to the specified 10. The reason it had been lowered to 3
was real — a small clinic saw an empty report — but the fix was wrong: three
samples do not make an average, and calling that "accurate" is worse than
saying nothing.

Rows below the threshold are now returned rather than dropped, with severity
null and below_min_sample true. That refuses both mistakes: it claims no
severity it cannot support, and it does not show a small clinic an empty page
that implies everything is fine. They sort after the usable rows and render
faded with a "small sample" badge.

The utilization page gets its Recharts bar chart. The table stays underneath —
six numeric columns are not something a chart answers — but the one question
the table is bad at, "which resource is behind", is exactly what a chart is
for. Colours come from the design tokens rather than hex, which is where a
chart usually breaks in dark mode, and a resource with no calendar is left out
entirely: null is not zero, and a zero bar would be a lie.

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

assets/admin/pages/PlanAccuracyPage.tsx

@@ -12,11 +12,13 @@ const RANGES = [
   { value: '90', label: 'سه ماه گذشته' },
 ];
 
-const SEVERITY: Record<AccuracyRow['severity'], { label: string; className: string }> = {
+const SEVERITY: Record<string, { label: string; className: string }> = {
   none: { label: 'دقیق', className: 'badge green' },
   low: { label: 'کم', className: 'badge' },
   medium: { label: 'متوسط', className: 'badge amber' },
   high: { label: 'زیاد', className: 'badge red' },
+  // زیر آستانهٔ نمونه: عدد هست ولی قابل استناد نیست. ادعای «دقیق» اینجا دروغ است.
+  unrated: { label: 'نمونهٔ کم', className: 'badge' },
 };
 
 /**
@@ -68,6 +70,7 @@ export default function PlanAccuracyPage() {
             fontSize: 13,
             fontWeight: 600,
             color: r.severity === 'high' ? 'var(--danger)' : r.severity === 'medium' ? 'var(--warning)' : undefined,
+            opacity: r.below_min_sample ? 0.55 : 1,
           }}
         >
           {r.deviation_percent > 0 ? `+${r.deviation_percent}` : r.deviation_percent}٪
@@ -88,9 +91,9 @@ export default function PlanAccuracyPage() {
       key: 'severity',
       header: 'شدت',
       render: (r) => (
-        <span className={SEVERITY[r.severity].className}>
+        <span className={SEVERITY[r.severity ?? 'unrated'].className}>
           <span className="bdot" />
-          {SEVERITY[r.severity].label}
+          {SEVERITY[r.severity ?? 'unrated'].label}
         </span>
       ),
     },

assets/admin/pages/ResourceUtilizationPage.tsx

@@ -4,6 +4,7 @@ import PageHeader from '../components/ui/PageHeader';
 import DataTable, { type Column } from '../components/ui/DataTable';
 import SearchableSelect from '../components/ui/SearchableSelect';
 import PersianDateInput from '../components/ui/PersianDateInput';
+import ResourceUtilizationChart from '../components/ResourceUtilizationChart';
 import { Link } from 'react-router-dom';
 import { isoToUnix, unixToIso } from '../lib/utils';
 import { useBranches } from '../hooks/useBranches';
@@ -173,6 +174,8 @@ export default function ResourceUtilizationPage() {
         بیمار حاضر بوده. فاصلهٔ این دو نشان می‌دهد بخش‌های نوبت درست تعریف شده‌اند یا نه.
       </p>
 
+      <ResourceUtilizationChart rows={rows} />
+
       <div style={{ overflowX: 'auto' }}>
         <DataTable
           columns={columns}