feat: add support for individual consumable items in service items

- Introduced `consumables` field in `ServiceItem` to allow multiple individual items alongside inventory packages. - Created `ServiceItemConsumable` entity to manage individual consumable items linked to a service. - Updated `ServiceItemController` to handle CRUD operations for consumables. - Enhanced `ServiceDetailPage` and `ServiceItemFormModal` to display and manage consumables. - Added tests to ensure functionality for adding, updating, and validating consumables. - Updated API documentation to reflect changes in service item structure and consumables.
2026-07-18 12:34:42 +03:30
parent c4a661b542
commit c13cc57c48
11 changed files with 530 additions and 40 deletions
@@ -8,7 +8,7 @@ import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
 import type { ServiceItem, ClinicStaff } from '../types';
-import type { InventoryPackage } from '../hooks/useInventory';
+import type { InventoryPackage, InventoryItem } from '../hooks/useInventory';
 import { rialToToman, tomanToRial } from '../lib/utils';
 import { numericField } from '../lib/forms';
 import Modal from './ui/Modal';
@@ -23,12 +23,14 @@ const itemSchema = z.object({
  bookable:         z.boolean().optional(),
  /** پکیج کالای مصرفی؛ رشته‌ی خالی یعنی بدون پکیج. */
  inventory_package_uuid: z.string().optional(),
+  /** اقلام کالای تکی — مستقل از پکیج. */
+  consumables: z.array(z.object({ item_uuid: z.string(), amount: z.coerce.number().min(1) })).optional(),
 });
 type ItemForm = z.infer<typeof itemSchema>;

 const EMPTY_FORM: ItemForm = {
  name: '', price_rials: 0, staff_uuids: [], duration_minutes: undefined,
-  bookable: false, inventory_package_uuid: '',
+  bookable: false, inventory_package_uuid: '', consumables: [],
 };

 interface Props {
@@ -65,6 +67,14 @@ export default function ServiceItemFormModal({ item, sectionUuid, onClose, onMan
  });
  const packages = packagesData?.data ?? [];

+  // این endpoint پاسخ را در { items, stats } می‌پیچد.
+  const { data: inventoryData } = useQuery<ApiResponse<{ items: InventoryItem[] }>>({
+    queryKey: ['inventory-items'],
+    queryFn: () => api.get('/api/v1/inventory-items'),
+    enabled: item !== null,
+  });
+  const inventoryItems = inventoryData?.data?.items ?? [];
+
  const form = useForm<ItemForm>({ resolver: zodResolver(itemSchema), defaultValues: EMPTY_FORM });

  useEffect(() => {
@@ -77,6 +87,7 @@ export default function ServiceItemFormModal({ item, sectionUuid, onClose, onMan
          duration_minutes: editing.duration_minutes ?? undefined,
          bookable: editing.bookable ?? false,
          inventory_package_uuid: editing.inventory_package_uuid ?? '',
+          consumables: (editing.consumables ?? []).map((c) => ({ item_uuid: c.item_uuid, amount: c.amount })),
        }
      : EMPTY_FORM);
  }, [item]);
@@ -117,6 +128,15 @@ export default function ServiceItemFormModal({ item, sectionUuid, onClose, onMan
    .filter((s) => s.active || editingMembers.some((m) => m.uuid === s.uuid))
    .filter((s) => !selectedStaffUuids.includes(s.uuid))
    .map((s) => ({ value: s.uuid, label: s.active ? s.full_name : `${s.full_name} (غیرفعال)` }));
+  const consumables = form.watch('consumables') ?? [];
+  const inventoryOptions = inventoryItems
+    .filter((i) => !consumables.some((c) => c.item_uuid === i.uuid))
+    .map((i) => ({ value: i.uuid, label: `${i.name} (${i.unit})` }));
+  const inventoryNameOf = (uuid: string) => inventoryItems.find((i) => i.uuid === uuid)?.name ?? uuid;
+  const inventoryUnitOf = (uuid: string) => inventoryItems.find((i) => i.uuid === uuid)?.unit ?? '';
+  const addConsumable = (uuid: string) =>
+    form.setValue('consumables', [...consumables, { item_uuid: uuid, amount: 1 }]);
+
  const staffNameOf = (uuid: string) =>
    allStaff.find((s) => s.uuid === uuid)?.full_name
    ?? editingMembers.find((m) => m.uuid === uuid)?.full_name
@@ -234,6 +254,46 @@ export default function ServiceItemFormModal({ item, sectionUuid, onClose, onMan
              height={42}
            />
          </div>
+
+          {/* کالای تکی — مستقل از پکیج و قابل استفاده هم‌زمان با آن. */}
+          <div>
+            <label className="field-label">کالاهای تکی</label>
+            <SearchableSelect
+              options={inventoryOptions}
+              value={''}
+              onChange={(v) => { if (v != null) addConsumable(String(v)); }}
+              placeholder="افزودن کالا (اختیاری)"
+              noOptionsMessage="کالایی باقی نمانده"
+              height={42}
+            />
+            {consumables.length > 0 && (
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6, marginTop: 8 }}>
+                {consumables.map((line, i) => (
+                  <div key={line.item_uuid} style={{
+                    display: 'flex', alignItems: 'center', gap: 8, padding: '7px 10px',
+                    borderRadius: 'var(--r-sm)', border: '1px solid var(--border)', background: 'var(--surface-2)',
+                  }}>
+                    <span style={{ flex: 1, minWidth: 0, fontSize: 13 }}>{inventoryNameOf(line.item_uuid)}</span>
+                    <input
+                      {...numericField(form.register(`consumables.${i}.amount` as const))}
+                      aria-label={`تعداد ${inventoryNameOf(line.item_uuid)}`}
+                      style={{ width: 64, height: 32, textAlign: 'center' }}
+                    />
+                    <span style={{ fontSize: 12, color: 'var(--text-3)', minWidth: 34 }}>
+                      {inventoryUnitOf(line.item_uuid)}
+                    </span>
+                    <button
+                      type="button" aria-label={`حذف ${inventoryNameOf(line.item_uuid)}`}
+                      onClick={() => form.setValue('consumables', consumables.filter((c) => c.item_uuid !== line.item_uuid))}
+                      style={{ display: 'grid', placeItems: 'center', width: 20, height: 20, border: 'none', cursor: 'pointer', borderRadius: '50%', background: 'var(--surface-3)', color: 'var(--text-3)' }}
+                    >
+                      <XMarkIcon style={{ width: 12 }} />
+                    </button>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
        </div>

        {/* بیمه — تنظیمات فقط در «پوشش بیمه» مدیریت می‌شود تا داده‌ی تکراری ساخته نشود. */}
@@ -55,6 +55,9 @@ const mockApi = (item: unknown = ITEM, notFound = false) => {
    if (url.includes('/tenant-insurances')) return Promise.resolve({ data: { data: [
      { uuid: 'ins1', insurance_name: 'بیمه ایران', insurance_kind: 'basic', coverage_percent: 70 },
    ] } });
+    if (url.includes('/inventory-items')) return Promise.resolve({ success: true, data: { items: [
+      { uuid: 'inv1', name: 'گاز استریل', unit: 'عدد', price: 50_000, stock: 100 },
+    ] } });
    if (url.includes('/inventory-packages')) return Promise.resolve({ success: true, data: [
      {
        uuid: 'pkg1', title: 'پکیج سرم', total: 1_200_000, available: true,
@@ -145,14 +148,42 @@ describe('ServiceDetailPage (جزئیات سرویس)', () => {
    expect(screen.getByText('۲ عدد')).toBeInTheDocument();
  });

-  it('سرویس بدون پکیج، حالت خالی با لینک انبار می‌دهد', async () => {
+  it('سرویس بدون هیچ کالایی، حالت خالی با لینک انبار می‌دهد', async () => {
    render();
    fireEvent.click(await screen.findByText('کالاهای مرتبط'));

-    expect(await screen.findByText('پکیج کالایی به این سرویس متصل نیست')).toBeInTheDocument();
+    expect(await screen.findByText('کالایی به این سرویس متصل نیست')).toBeInTheDocument();
    expect(screen.getByText('مدیریت انبار')).toBeInTheDocument();
  });

+  it('پکیج و کالای تکی هم‌زمان در تب کالاها نمایش داده می‌شوند', async () => {
+    mockApi({
+      ...ITEM,
+      inventory_package_uuid: 'pkg1',
+      inventory_package_title: 'پکیج سرم',
+      consumables: [{ item_uuid: 'inv1', name: 'گاز استریل', unit: 'عدد', price: 50_000, stock: 100, amount: 3 }],
+    });
+    render();
+    fireEvent.click(await screen.findByText('کالاهای مرتبط'));
+
+    expect(await screen.findByText('پکیج')).toBeInTheDocument();
+    expect(screen.getByText('پکیج سرم')).toBeInTheDocument();
+    expect(screen.getByText('کالاهای تکی')).toBeInTheDocument();
+    expect(screen.getByText('گاز استریل')).toBeInTheDocument();
+    expect(screen.getByText('۳ عدد')).toBeInTheDocument();
+  });
+
+  it('کالای تکی با موجودی ناکافی نشان‌دار می‌شود', async () => {
+    mockApi({
+      ...ITEM,
+      consumables: [{ item_uuid: 'inv1', name: 'گاز استریل', unit: 'عدد', price: 50_000, stock: 1, amount: 5 }],
+    });
+    render();
+    fireEvent.click(await screen.findByText('کالاهای مرتبط'));
+
+    expect(await screen.findByText('موجودی ناکافی')).toBeInTheDocument();
+  });
+
  it('تب لاگ تغییرات، مقدار قبل و بعد را خوانا نشان می‌دهد', async () => {
    render();
    fireEvent.click(await screen.findByText('لاگ تغییرات'));
@@ -293,6 +293,8 @@ function GoodsTab({ item, onEdit }: { item: ServiceItem; onEdit: () => void }) {
  });

  const linked = (data?.data ?? []).find((p) => p.uuid === item.inventory_package_uuid);
+  const consumables = item.consumables ?? [];
+  const nothingLinked = !item.inventory_package_uuid && consumables.length === 0;

  return (
    <div className="card card-pad">
@@ -300,52 +302,84 @@ function GoodsTab({ item, onEdit }: { item: ServiceItem; onEdit: () => void }) {
        <div>
          <b style={{ fontSize: 14 }}>کالاهای مرتبط</b>
          <div className="muted" style={{ fontSize: 12 }}>
-            پکیج کالای مصرفی این خدمت؛ در «انبار» ساخته و در فرم سرویس انتخاب می‌شود.
+            پکیج آماده و کالاهای تکیِ مصرفی این خدمت؛ در «انبار» ساخته و در فرم سرویس انتخاب می‌شوند.
          </div>
        </div>
-        <button className="btn primary sm" onClick={onEdit}>انتخاب پکیج</button>
+        <button className="btn primary sm" onClick={onEdit}>ویرایش کالاها</button>
      </div>

      {isLoading ? (
        <div className="muted" style={{ fontSize: 13, padding: '12px 0' }}>در حال بارگذاری...</div>
-      ) : !item.inventory_package_uuid ? (
+      ) : nothingLinked ? (
        <div className="empty" style={{ padding: '28px 0' }}>
          <CubeIcon style={{ width: 30, height: 30 }} />
-          <p className="muted">پکیج کالایی به این سرویس متصل نیست</p>
+          <p className="muted">کالایی به این سرویس متصل نیست</p>
          <Link className="btn sm" to="/admin/inventory">مدیریت انبار</Link>
        </div>
-      ) : !linked ? (
-        <div className="muted" style={{ fontSize: 13, padding: '12px 0' }}>
-          {item.inventory_package_title ?? 'پکیج متصل'} — جزئیات در دسترس نیست
-        </div>
      ) : (
-        <div style={{ marginTop: 12 }}>
-          <div style={{
-            display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
-            padding: '10px 12px', borderRadius: 'var(--r-sm)', background: 'var(--primary-soft)', marginBottom: 10,
-          }}>
-            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
-              <CubeIcon style={{ width: 15, color: 'var(--primary)' }} />
-              <b>{linked.title}</b>
-              {!linked.available && <span className="badge gray" style={{ fontSize: 10 }}>موجودی ناکافی</span>}
-            </span>
-            <b style={{ fontSize: 13.5, color: 'var(--primary)' }}>{formatRial(linked.total)}</b>
-          </div>
+        <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 16 }}>
+          {item.inventory_package_uuid && (
+            <div>
+              <div className="muted" style={{ fontSize: 12, marginBottom: 8 }}>پکیج</div>
+              {!linked ? (
+                <div className="muted" style={{ fontSize: 13 }}>
+                  {item.inventory_package_title ?? 'پکیج متصل'} — جزئیات در دسترس نیست
+                </div>
+              ) : (
+                <>
+                  <div style={{
+                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
+                    padding: '10px 12px', borderRadius: 'var(--r-sm)', background: 'var(--primary-soft)', marginBottom: 8,
+                  }}>
+                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
+                      <CubeIcon style={{ width: 15, color: 'var(--primary)' }} />
+                      <b>{linked.title}</b>
+                      {!linked.available && <span className="badge gray" style={{ fontSize: 10 }}>موجودی ناکافی</span>}
+                    </span>
+                    <b style={{ fontSize: 13.5, color: 'var(--primary)' }}>{formatRial(linked.total)}</b>
+                  </div>

-          <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
-            {linked.items.map((line) => (
-              <div key={line.itemUuid} style={{
-                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
-                padding: '9px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)',
-              }}>
-                <span style={{ fontSize: 13 }}>{line.name}</span>
-                <span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', gap: 10 }}>
-                  <span>{formatNumber(line.amount)} {line.unit}</span>
-                  <span>{formatRial(line.price * line.amount)}</span>
-                </span>
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                    {linked.items.map((line) => (
+                      <div key={line.itemUuid} style={{
+                        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
+                        padding: '9px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)',
+                      }}>
+                        <span style={{ fontSize: 13 }}>{line.name}</span>
+                        <span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', gap: 10 }}>
+                          <span>{formatNumber(line.amount)} {line.unit}</span>
+                          <span>{formatRial(line.price * line.amount)}</span>
+                        </span>
+                      </div>
+                    ))}
+                  </div>
+                </>
+              )}
+            </div>
+          )}
+
+          {consumables.length > 0 && (
+            <div>
+              <div className="muted" style={{ fontSize: 12, marginBottom: 8 }}>کالاهای تکی</div>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                {consumables.map((line) => (
+                  <div key={line.item_uuid} style={{
+                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
+                    padding: '9px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)',
+                  }}>
+                    <span style={{ fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+                      {line.name}
+                      {line.stock < line.amount && <span className="badge gray" style={{ fontSize: 10 }}>موجودی ناکافی</span>}
+                    </span>
+                    <span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', gap: 10 }}>
+                      <span>{formatNumber(line.amount)} {line.unit}</span>
+                      <span>{formatRial(line.price * line.amount)}</span>
+                    </span>
+                  </div>
+                ))}
              </div>
-            ))}
-          </div>
+            </div>
+          )}
        </div>
      )}
    </div>
@@ -510,6 +510,16 @@ export interface ServiceSection {
    items_count?: number;
 }

+/** یک قلم کالای تکی روی سرویس (خروجی ServiceItemConsumable::toArray) */
+export interface ServiceConsumable {
+    item_uuid: string;
+    name: string;
+    unit: string;
+    price: number;   // Rial
+    stock: number;
+    amount: number;
+}
+
 export interface ServiceItem {
    uuid: string;
    name: string;
@@ -519,6 +529,8 @@ export interface ServiceItem {
    /** پکیج کالای مصرفی متصل به این خدمت (اختیاری) */
    inventory_package_uuid?: string | null;
    inventory_package_title?: string | null;
+    /** اقلام کالای تکی — مستقل از پکیج و قابل استفاده هم‌زمان با آن */
+    consumables?: ServiceConsumable[];
    created_at?: number;
    updated_at?: number;
    /** primary staff (first member) — kept for backward compatibility */