feat: refactor resource management by removing modal components and integrating functionality into tabs; add ResourceBlocksPanel for temporary deactivation of resources

assets/admin/pages/ResourceDetailPage.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { PencilIcon } from '@heroicons/react/24/outline';
 import PageHeader from '../components/ui/PageHeader';
+import ConfirmDialog from '../components/ui/ConfirmDialog';
 import { ActiveBadge } from '../components/ui/StatusBadge';
 import ResourceFormModal from '../components/resources/ResourceFormModal';
 import ResourceWorkingHoursPanel from '../components/resources/ResourceWorkingHoursPanel';
@@ -9,6 +10,7 @@ import ResourceExceptionsPanel from '../components/resources/ResourceExceptionsP
 import ResourceServicesPanel from '../components/resources/ResourceServicesPanel';
 import ResourceSkillsPanel from '../components/resources/ResourceSkillsPanel';
 import ResourceCategoriesPanel from '../components/resources/ResourceCategoriesPanel';
+import ResourceBlocksPanel from '../components/resources/ResourceBlocksPanel';
 import { useUrlState } from '../hooks/useUrlState';
 import { usePermissions } from '../hooks/usePermissions';
 import { useAddresses } from '../hooks/useAddresses';
@@ -23,6 +25,7 @@ const TABS = [
   { id: 'services',   label: 'سرویس‌ها' },
   { id: 'skills',     label: 'مهارت‌ها' },
   { id: 'categories', label: 'دسته‌بندی‌ها' },
+  { id: 'blocks',     label: 'غیرفعال‌سازی موقت' },
 ] as const;
 type TabId = typeof TABS[number]['id'];
 
@@ -41,6 +44,7 @@ const SUBJECT_LABEL: Record<string, string> = {
  */
 export default function ResourceDetailPage() {
   const { resourceUuid } = useParams<{ resourceUuid: string }>();
+  const navigate = useNavigate();
   const [urlState, setUrlState] = useUrlState({ tab: 'info' });
   const tab = (TABS.some((t) => t.id === urlState.tab) ? urlState.tab : 'info') as TabId;
 
@@ -48,13 +52,14 @@ export default function ResourceDetailPage() {
   const { addresses } = useAddresses();
   const { types } = useResourceTypes();
   const { skills } = useSkills();
-  const { update, setSkills, setCategories } = useResources();
+  const { update, remove, setSkills, setCategories } = useResources();
   const { offerings, save: saveServices } = useResourceServices(resourceUuid);
   const { items: serviceOptions } = useAllServiceItems();
   const { can } = usePermissions();
   const canUpdate = can('appointment_settings', 'update');
 
   const [editOpen, setEditOpen] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
 
   // حالت‌های بارگذاری و نبودِ منبع هم داخل پوستهٔ تنظیمات می‌مانند، وگرنه منوی کناری
   // یک لحظه می‌پرد و دوباره برمی‌گردد.
@@ -86,11 +91,12 @@ export default function ResourceDetailPage() {
         <ActiveBadge active={resource.active} />
       </div>
 
-      <div className="seg" style={{ marginBottom: 'var(--gap)', overflowX: 'auto', flexWrap: 'nowrap' }}>
+      <div className="seg" role="group" aria-label="تنظیمات منبع" style={{ marginBottom: 'var(--gap)', overflowX: 'auto', flexWrap: 'nowrap' }}>
         {TABS.map((t) => (
           <button
             key={t.id}
             className={tab === t.id ? 'active' : ''}
+            aria-pressed={tab === t.id}
             style={{ whiteSpace: 'nowrap' }}
             onClick={() => setUrlState({ tab: t.id })}
           >
@@ -99,7 +105,15 @@ export default function ResourceDetailPage() {
         ))}
       </div>
 
-      {tab === 'info' && <InfoTab resource={resource} />}
+      {tab === 'info' && (
+        <InfoTab
+          resource={resource}
+          canUpdate={canUpdate}
+          toggling={update.isPending}
+          onToggleActive={() => update.mutate({ uuid: resource.uuid, d: { active: !resource.active } })}
+          onDelete={() => setConfirmDelete(true)}
+        />
+      )}
 
       {tab === 'hours' && <ResourceWorkingHoursPanel resourceUuid={resourceUuid} canUpdate={canUpdate} />}
 
@@ -137,6 +151,27 @@ export default function ResourceDetailPage() {
         />
       )}
 
+      {tab === 'blocks' && <ResourceBlocksPanel resourceUuid={resourceUuid} canUpdate={canUpdate} />}
+
+      {/* حذف موفق یعنی این صفحه دیگر منبعی ندارد؛ ماندن روی آن یک «منبع یافت نشد» است. */}
+      <ConfirmDialog
+        open={confirmDelete}
+        title="حذف منبع"
+        message={`آیا از حذف «${resource.name}» مطمئن هستید؟ این کار برگشت‌پذیر نیست.`}
+        confirmLabel="حذف"
+        danger
+        loading={remove.isPending}
+        onConfirm={() =>
+          remove.mutate(resource.uuid, {
+            onSuccess: () => {
+              setConfirmDelete(false);
+              navigate('/admin/resources');
+            },
+          })
+        }
+        onCancel={() => setConfirmDelete(false)}
+      />
+
       <ResourceFormModal
         open={editOpen}
         resource={resource}
@@ -164,10 +199,24 @@ function Row({ label, children }: { label: string; children: React.ReactNode })
   );
 }
 
-function InfoTab({ resource }: { resource: ClinicResource }) {
+/**
+ * اطلاعات منبع + دو اقدامِ سطح-منبع.
+ *
+ * فعال/غیرفعال و حذف پیش‌تر دکمه‌های ردیفِ جدول بودند. جدول حالا فقط فهرست است و
+ * هر اقدام کنارِ همان چیزی نشسته که تغییرش می‌دهد؛ حذف هم پایین و جدا از بقیه است
+ * تا با «ویرایش» و «غیرفعال» یک‌جا هم‌وزن دیده نشود.
+ */
+function InfoTab({ resource, canUpdate, toggling, onToggleActive, onDelete }: {
+  resource: ClinicResource;
+  canUpdate: boolean;
+  toggling: boolean;
+  onToggleActive: () => void;
+  onDelete: () => void;
+}) {
   const attributes = Object.entries(resource.attributes ?? {});
 
   return (
+    <div style={{ display: 'grid', gap: 'var(--gap)' }}>
     <div className="card card-pad">
       <Row label="شعبه">{resource.address_name || '—'}</Row>
       <Row label="نوع منبع">{resource.type_name}</Row>
@@ -199,5 +248,47 @@ function InfoTab({ resource }: { resource: ClinicResource }) {
         <Row key={key} label={key}>{String(value)}</Row>
       ))}
     </div>
+
+    {canUpdate && (
+      <div className="card card-pad">
+        <h2 style={{ fontSize: 16, fontWeight: 700, color: 'var(--text)', marginBottom: 4 }}>
+          وضعیت منبع
+        </h2>
+        <p className="field-hint" style={{ marginTop: 0, marginBottom: 14 }}>
+          منبع غیرفعال در نوبت‌دهی پیشنهاد نمی‌شود. برای بستن فقط یک بازهٔ مشخص، از تب
+          «غیرفعال‌سازی موقت» استفاده کنید.
+        </p>
+
+        <div className="toggle-row">
+          <div>
+            <div className="tr-title">{resource.active ? 'این منبع فعال است' : 'این منبع غیرفعال است'}</div>
+            <div className="tr-desc">
+              {resource.active
+                ? 'در جستجوی وقت و رزرو نوبت در دسترس است.'
+                : 'در جستجوی وقت و رزرو نوبت ظاهر نمی‌شود.'}
+            </div>
+          </div>
+          <button
+            type="button"
+            className={resource.active ? 'btn secondary' : 'btn primary'}
+            disabled={toggling}
+            onClick={onToggleActive}
+          >
+            {resource.active ? 'غیرفعال کردن' : 'فعال کردن'}
+          </button>
+        </div>
+
+        {/* پس‌زمینه عمداً خنثی می‌ماند: `.btn.danger` خودش `--danger-bg` است و روی
+            ردیفِ هم‌رنگ نامرئی می‌شد. مرزِ قرمز به‌تنهایی هشدار را می‌رساند. */}
+        <div className="toggle-row" style={{ marginTop: 10, borderColor: 'var(--danger)' }}>
+          <div>
+            <div className="tr-title">حذف منبع</div>
+            <div className="tr-desc">برگشت‌پذیر نیست. اگر فقط موقتاً لازمش ندارید، غیرفعالش کنید.</div>
+          </div>
+          <button type="button" className="btn danger" onClick={onDelete}>حذف</button>
+        </div>
+      </div>
+    )}
+    </div>
   );
 }