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.
This commit is contained in:
hamed
2026-07-18 12:34:42 +03:30
parent c4a661b542
commit c13cc57c48
11 changed files with 530 additions and 40 deletions
+67 -33
View File
@@ -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>