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.

assets/admin/components/ServiceItemFormModal.tsx

@@ -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>
 
         {/* بیمه — تنظیمات فقط در «پوشش بیمه» مدیریت می‌شود تا داده‌ی تکراری ساخته نشود. */}