feat: port inventory (انبارداری) page from tauri to admin dashboard
Add a per-tenant (doctor/clinic) Inventory domain and admin page, ported from clinic-pro-tauri /inventory (which was static/mock) into a real feature. Backend (src/Inventory/): - Entities InventoryItem, InventoryPackage, InventoryPackageItem, scoped via entity_type/entity_id like TenantTag. Item status is derived, package total and availability derived at read time. - InventoryService (stats, package assembly, availability), thin InventoryController with CRUD for items and packages + categories endpoint. - Migration + docs/api/inventory.md + functional tests (10 tests, 42 assertions). Frontend (assets/admin/): - InventoryPage with two tabs (کالاهای مصرفی / پکیج), stat cards, items table (desktop + mobile cards), packages accordion, add/edit item and package modals, search + category filter — pixel-matched to the tauri source. - useInventory hook (TanStack Query), route + sidebar link for doctor/clinic. - Vitest coverage (real data, empty state, modal, packages tab). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
hamed
@@ -0,0 +1,165 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { PlusIcon, MagnifyingGlassIcon, ArchiveBoxIcon } from '@heroicons/react/24/outline';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import { useInventory } from '../hooks/useInventory';
|
||||
import type { InventoryItem, InventoryPackage, ItemPayload, PackagePayload } from '../hooks/useInventory';
|
||||
import InventoryStatCards from '../components/inventory/InventoryStatCards';
|
||||
import InventoryItemsTable from '../components/inventory/InventoryItemsTable';
|
||||
import PackagesView from '../components/inventory/PackagesView';
|
||||
import AddItemModal from '../components/inventory/AddItemModal';
|
||||
import AddPackageModal from '../components/inventory/AddPackageModal';
|
||||
|
||||
type Tab = 'stock' | 'packages';
|
||||
|
||||
/** انبارداری — consumable stock items + packages. Ported from clinic-pro-tauri /inventory. */
|
||||
export default function InventoryPage() {
|
||||
const {
|
||||
items, stats, packages, categories, itemsLoading, packagesLoading,
|
||||
createItem, updateItem, deleteItem, createPackage, updatePackage, deletePackage,
|
||||
} = useInventory();
|
||||
|
||||
const [tab, setTab] = useState<Tab>('stock');
|
||||
const [search, setSearch] = useState('');
|
||||
const [category, setCategory] = useState('');
|
||||
|
||||
const [itemModal, setItemModal] = useState<{ open: boolean; editing: InventoryItem | null }>({ open: false, editing: null });
|
||||
const [pkgModal, setPkgModal] = useState<{ open: boolean; editing: InventoryPackage | null }>({ open: false, editing: null });
|
||||
const [itemToDelete, setItemToDelete] = useState<InventoryItem | null>(null);
|
||||
const [pkgToDelete, setPkgToDelete] = useState<InventoryPackage | null>(null);
|
||||
|
||||
const filteredItems = useMemo(() => {
|
||||
const q = search.trim();
|
||||
return items.filter((it) =>
|
||||
(q === '' || it.name.includes(q)) &&
|
||||
(category === '' || it.consumable === category)
|
||||
);
|
||||
}, [items, search, category]);
|
||||
|
||||
const saveItem = (payload: ItemPayload, uuid?: string) => {
|
||||
const opts = { onSuccess: () => setItemModal({ open: false, editing: null }) };
|
||||
if (uuid) updateItem.mutate({ uuid, d: payload }, opts);
|
||||
else createItem.mutate(payload, opts);
|
||||
};
|
||||
const savePackage = (payload: PackagePayload, uuid?: string) => {
|
||||
const opts = { onSuccess: () => setPkgModal({ open: false, editing: null }) };
|
||||
if (uuid) updatePackage.mutate({ uuid, d: payload }, opts);
|
||||
else createPackage.mutate(payload, opts);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fade-in" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 style={{ fontSize: 18, fontWeight: 800, color: 'var(--text)', marginBottom: 12 }}>انبارداری</h1>
|
||||
<div className="inv-tabs">
|
||||
<button className={`inv-tab${tab === 'stock' ? ' active' : ''}`} onClick={() => setTab('stock')}>کالاهای مصرفی</button>
|
||||
<button className={`inv-tab${tab === 'packages' ? ' active' : ''}`} onClick={() => setTab('packages')}>پکیج</button>
|
||||
</div>
|
||||
|
||||
{tab === 'stock' ? (
|
||||
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
|
||||
<div style={{ display: 'flex', gap: 16, flexWrap: 'wrap', flex: 1 }}>
|
||||
<div className="field" style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 240, flex: '1 1 300px', maxWidth: 442 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 18, height: 18, color: 'var(--text-3)', flexShrink: 0 }} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder="جستجو در کالاهای مصرفی..."
|
||||
style={{ border: 'none', background: 'transparent', flex: 1, padding: 0 }}
|
||||
/>
|
||||
</div>
|
||||
<div className="field" style={{ minWidth: 200, flex: '1 1 260px', maxWidth: 397 }}>
|
||||
<select value={category} onChange={(e) => setCategory(e.target.value)}>
|
||||
<option value="">دستهبندی کالا را انتخاب کنید...</option>
|
||||
{categories.map((c) => <option key={c} value={c}>{c}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn primary" onClick={() => setItemModal({ open: true, editing: null })}>
|
||||
<PlusIcon style={{ width: 16 }} /> افزودن کالا
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
|
||||
<button className="btn primary" onClick={() => setPkgModal({ open: true, editing: null })}>
|
||||
<PlusIcon style={{ width: 16 }} /> افزودن پکیج
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
{tab === 'stock' ? (
|
||||
<>
|
||||
<InventoryStatCards stats={stats} />
|
||||
{itemsLoading ? (
|
||||
<div style={{ padding: 16, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
|
||||
) : filteredItems.length === 0 ? (
|
||||
<EmptyState label={items.length === 0 ? 'هنوز کالایی ثبت نشده است.' : 'کالایی با این فیلتر یافت نشد.'} />
|
||||
) : (
|
||||
<InventoryItemsTable
|
||||
items={filteredItems}
|
||||
onEdit={(item) => setItemModal({ open: true, editing: item })}
|
||||
onDelete={setItemToDelete}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : packagesLoading ? (
|
||||
<div style={{ padding: 16, color: 'var(--text-3)', fontSize: 13 }}>در حال بارگذاری...</div>
|
||||
) : packages.length === 0 ? (
|
||||
<EmptyState label="هنوز پکیجی ثبت نشده است." />
|
||||
) : (
|
||||
<PackagesView
|
||||
packages={packages}
|
||||
onEdit={(pkg) => setPkgModal({ open: true, editing: pkg })}
|
||||
onDelete={setPkgToDelete}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Modals */}
|
||||
<AddItemModal
|
||||
open={itemModal.open}
|
||||
editing={itemModal.editing}
|
||||
saving={createItem.isPending || updateItem.isPending}
|
||||
onClose={() => setItemModal({ open: false, editing: null })}
|
||||
onSave={saveItem}
|
||||
/>
|
||||
<AddPackageModal
|
||||
open={pkgModal.open}
|
||||
editing={pkgModal.editing}
|
||||
items={items}
|
||||
saving={createPackage.isPending || updatePackage.isPending}
|
||||
onClose={() => setPkgModal({ open: false, editing: null })}
|
||||
onSave={savePackage}
|
||||
/>
|
||||
|
||||
<ConfirmDialog
|
||||
open={!!itemToDelete}
|
||||
title="حذف کالا"
|
||||
message={`آیا از حذف «${itemToDelete?.name}» مطمئن هستید؟`}
|
||||
confirmLabel="حذف"
|
||||
loading={deleteItem.isPending}
|
||||
onConfirm={() => itemToDelete && deleteItem.mutate(itemToDelete.uuid, { onSuccess: () => setItemToDelete(null) })}
|
||||
onCancel={() => setItemToDelete(null)}
|
||||
/>
|
||||
<ConfirmDialog
|
||||
open={!!pkgToDelete}
|
||||
title="حذف پکیج"
|
||||
message={`آیا از حذف «${pkgToDelete?.title}» مطمئن هستید؟`}
|
||||
confirmLabel="حذف"
|
||||
loading={deletePackage.isPending}
|
||||
onConfirm={() => pkgToDelete && deletePackage.mutate(pkgToDelete.uuid, { onSuccess: () => setPkgToDelete(null) })}
|
||||
onCancel={() => setPkgToDelete(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState({ label }: { label: string }) {
|
||||
return (
|
||||
<div className="card" style={{ padding: '56px 0', textAlign: 'center', color: 'var(--text-3)' }}>
|
||||
<ArchiveBoxIcon style={{ width: 48, margin: '0 auto 14px', display: 'block', opacity: 0.3 }} />
|
||||
<div style={{ fontSize: 14, color: 'var(--text-2)' }}>{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user