hamed
3e5dee0ad5
- Added a new 'category' field to the InventoryItem entity and updated the database schema. - Replaced free-text input for 'unit' and 'category' with select dropdowns in the AddItemModal. - Introduced a new API endpoint to fetch metadata for units and categories. - Updated inventory filtering logic to use the new 'category' field instead of 'consumable'. - Enhanced validation for item creation and updates to ensure valid unit and category values. - Updated tests to cover new functionality and ensure proper validation.
92 lines
3.9 KiB
TypeScript
92 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
|
|
import { formatRial, formatNumber } from '../../lib/utils';
|
|
import type { InventoryItem } from '../../hooks/useInventory';
|
|
import InventoryStatusBadge from './InventoryStatusBadge';
|
|
import InventoryActionsMenu from './InventoryActionsMenu';
|
|
|
|
interface Props {
|
|
items: InventoryItem[];
|
|
onEdit: (item: InventoryItem) => void;
|
|
onDelete: (item: InventoryItem) => void;
|
|
}
|
|
|
|
const HEAD = ['نام کالا', 'دستهبندی', 'موجودی', 'واحد', 'قیمت', 'وضعیت', 'عملیات'];
|
|
|
|
/** Consumable-items list: desktop table + mobile card grid (tauri InventoryList). */
|
|
export default function InventoryItemsTable({ items, onEdit, onDelete }: Props) {
|
|
return (
|
|
<div style={{ width: '100%' }}>
|
|
{/* Desktop table */}
|
|
<div
|
|
className="inv-desktop"
|
|
style={{ border: '1px solid #E7E7E7', borderRadius: 8, overflow: 'hidden' }}
|
|
>
|
|
<table className="inv-table">
|
|
<thead>
|
|
<tr>{HEAD.map((h) => <th key={h}>{h}</th>)}</tr>
|
|
</thead>
|
|
<tbody>
|
|
{items.map((item) => (
|
|
<tr key={item.uuid}>
|
|
<td style={{ color: 'var(--text-2)' }}>{item.name}</td>
|
|
<td style={{ color: 'var(--text-3)' }}>{item.category ?? '—'}</td>
|
|
<td>{formatNumber(item.stock)}</td>
|
|
<td>{item.unit}</td>
|
|
<td>{formatRial(item.price)}</td>
|
|
<td><InventoryStatusBadge status={item.status} /></td>
|
|
<td><InventoryActionsMenu item={item} onEdit={onEdit} onDelete={onDelete} /></td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{/* Mobile cards */}
|
|
<ul
|
|
className="inv-mobile"
|
|
style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))', gap: 16, margin: 0, padding: 0, listStyle: 'none' }}
|
|
>
|
|
{items.map((item) => (
|
|
<li
|
|
key={item.uuid}
|
|
style={{
|
|
padding: 12, background: 'var(--surface)', border: '1px solid var(--border)',
|
|
borderRadius: 8, boxShadow: 'var(--shadow-sm)',
|
|
}}
|
|
>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
|
|
<span style={{ color: 'var(--text)', fontSize: 14, fontWeight: 600 }}>{item.name}</span>
|
|
<InventoryStatusBadge status={item.status} />
|
|
</div>
|
|
{[
|
|
['دستهبندی:', item.category ?? '—'],
|
|
['موجودی:', formatNumber(item.stock)],
|
|
['واحد:', item.unit],
|
|
['قیمت:', formatRial(item.price)],
|
|
].map(([label, value], i, arr) => (
|
|
<div key={label}>
|
|
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
|
|
<span style={{ color: 'var(--text-3)', fontSize: 14 }}>{label}</span>
|
|
<span style={{ color: 'var(--text-2)', fontSize: 14, fontWeight: 500 }}>{value}</span>
|
|
</div>
|
|
{i < arr.length - 1 && (
|
|
<div style={{ height: 1, background: 'var(--border)', margin: '8px auto', width: 'calc(100% - 20px)' }} />
|
|
)}
|
|
</div>
|
|
))}
|
|
<div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8, marginTop: 12 }}>
|
|
<button className="btn sm ghost" aria-label="ویرایش" onClick={() => onEdit(item)} style={{ color: 'var(--text-2)' }}>
|
|
<PencilSquareIcon style={{ width: 16 }} />
|
|
</button>
|
|
<button className="btn sm ghost" aria-label="حذف" onClick={() => onDelete(item)} style={{ color: 'var(--danger)' }}>
|
|
<TrashIcon style={{ width: 16 }} />
|
|
</button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|