feat: implement filtered and paginated doctor appointments panel with status filtering

assets/admin/components/dashboard/NewAppointmentsTable.tsx

@@ -89,6 +89,11 @@ export function NewAppointmentsTable({ rows, loading, queryKey, emptyText }: Pro
               <Cell><bdi dir="ltr">{formatTime(r.slot_end)}</bdi></Cell>
               <Cell>{r.service_name || '—'}</Cell>
               <Cell>{r.doctor_name ? `دکتر ${r.doctor_name}` : '—'}</Cell>
+              <Cell>
+                {queryKey && r.version != null
+                  ? <AppointmentStatusDropdown uuid={r.uuid} currentStatus={r.status} version={r.version} queryKey={queryKey} />
+                  : <StatusPill status={r.status} />}
+              </Cell>
               <td className="py-[10px] px-[18px] text-center">
                 <Link
                   to={isoDay(r.slot_start) ? `/admin/appointments?date=${isoDay(r.slot_start)}` : '/admin/appointments'}
@@ -105,6 +110,20 @@ export function NewAppointmentsTable({ rows, loading, queryKey, emptyText }: Pro
   );
 }
 
+/** نمایش فقط‌خواندنی وضعیت — وقتی version یا queryKey در دسترس نیست. */
+function StatusPill({ status }: { status: string }) {
+  const meta = STATUS_META[status] ?? { label: status, color: '#9ca3af' };
+  return (
+    <span
+      className="inline-flex items-center gap-[5px] px-[10px] py-[3px] rounded-full text-[12px] font-bold whitespace-nowrap"
+      style={{ background: `${meta.color}15`, border: `1.5px solid ${meta.color}30`, color: meta.color }}
+    >
+      <span className="w-[7px] h-[7px] rounded-full shrink-0" style={{ background: meta.color }} />
+      {meta.label}
+    </span>
+  );
+}
+
 /** همه‌ی سلول‌ها text-start هستند تا دقیقاً زیر هدر هم‌نامشان بنشینند. */
 function Cell({ children, className = '' }: { children: React.ReactNode; className?: string }) {
   return (