Files
clinicpro/assets/admin/components/inventory/InventoryActionsMenu.tsx
T
hamedandClaude Opus 4.8 519bc8d7f6 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>
2026-07-15 13:48:29 +03:30

76 lines
2.7 KiB
TypeScript

import React, { useState } from 'react';
import { EllipsisHorizontalCircleIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
import type { InventoryItem } from '../../hooks/useInventory';
interface Props {
item: InventoryItem;
onEdit: (item: InventoryItem) => void;
onDelete: (item: InventoryItem) => void;
}
/** «عملیات» trigger + dropdown — mirrors the tauri InventoryActionsPopover. */
export default function InventoryActionsMenu({ item, onEdit, onDelete }: Props) {
const [open, setOpen] = useState(false);
return (
<div style={{ position: 'relative', display: 'inline-block' }}>
<button
type="button"
onClick={() => setOpen((v) => !v)}
style={{
display: 'flex', alignItems: 'center', gap: 4, cursor: 'pointer',
borderRadius: 6, padding: '4px 8px', background: 'none',
color: '#5559ce', fontSize: 12, fontWeight: 500,
}}
>
<EllipsisHorizontalCircleIcon style={{ width: 18, height: 18 }} />
عملیات
</button>
{open && (
<>
<div
onClick={() => setOpen(false)}
style={{ position: 'fixed', inset: 0, zIndex: 30 }}
/>
<div
role="menu"
style={{
position: 'absolute', top: '100%', insetInlineStart: 0, marginTop: 4, zIndex: 31,
width: 160, background: 'var(--surface)', border: '1px solid var(--border)',
borderRadius: 12, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
}}
>
<button
type="button"
role="menuitem"
onClick={() => { setOpen(false); onEdit(item); }}
style={{
display: 'flex', alignItems: 'center', gap: 8, width: '100%',
padding: '12px 16px', background: 'var(--primary-soft)', border: 'none',
cursor: 'pointer', fontSize: 14, fontWeight: 600, color: 'var(--text)',
}}
>
<PencilSquareIcon style={{ width: 20, height: 20 }} />
ویرایش
</button>
<button
type="button"
role="menuitem"
onClick={() => { setOpen(false); onDelete(item); }}
style={{
display: 'flex', alignItems: 'center', gap: 8, width: '100%',
padding: '12px 16px', background: 'transparent', border: 'none',
cursor: 'pointer', fontSize: 14, color: 'var(--danger)',
}}
>
<TrashIcon style={{ width: 20, height: 20 }} />
حذف
</button>
</div>
</>
)}
</div>
);
}