Add CRM order queue: live sync, view modal, receipt tabs, delete
Wires the CRM (exoCRM GetOrders) into the dashboard as a locally persisted order queue instead of the previous static mockup: - CrmClient Protocol + ExoCrmClient/StubCrmClient for the CRM's signed JSON-RPC API - Order model + migration, synced from CRM on each queue view; soft-deleted orders stay hidden across re-syncs - GET/DELETE /api/v1/orders with "no receipt"/"receipt issued" tabs (the latter is empty until Checkbox fiscalization lands) - Dashboard: real order list, item-detail modal, tab switcher, one-click delete Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,98 @@
|
||||
import { Modal } from '@/components/Modal'
|
||||
import '@/features/orders/OrderDetailModal.css'
|
||||
import type { Order } from '@/features/orders/types'
|
||||
|
||||
interface OrderDetailModalProps {
|
||||
order: Order
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export function OrderDetailModal({ order, onClose }: OrderDetailModalProps) {
|
||||
return (
|
||||
<Modal onClose={onClose}>
|
||||
<div className="order-modal">
|
||||
<div className="order-modal-header">
|
||||
<h3>Просмотр заказа {order.id}</h3>
|
||||
<button type="button" className="order-modal-close" onClick={onClose} aria-label="Закрыть">
|
||||
×
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="order-modal-meta">
|
||||
<div>
|
||||
<span className="order-modal-label">Дата</span>
|
||||
<span>{order.create_date_time}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="order-modal-label">Номер ТТН</span>
|
||||
<span>{order.waybill_number || '—'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="order-modal-label">Клиент</span>
|
||||
<span>{order.recipient_name || '—'}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="order-modal-label">Телефон</span>
|
||||
<span>{order.recipient_phone || '—'}</span>
|
||||
</div>
|
||||
{order.recipient_email && (
|
||||
<div>
|
||||
<span className="order-modal-label">Email</span>
|
||||
<span>{order.recipient_email}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{order.notes && (
|
||||
<div className="order-modal-notes">
|
||||
<span className="order-modal-label">Заметки</span>
|
||||
<p>{order.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<table className="order-modal-goods">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Наименование</th>
|
||||
<th>SKU</th>
|
||||
<th>Цена</th>
|
||||
<th>Кол-во</th>
|
||||
<th>Скидка</th>
|
||||
<th>Сумма</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{order.goods.map((good) => (
|
||||
<tr key={good.id}>
|
||||
<td>{good.name}</td>
|
||||
<td>{good.sku}</td>
|
||||
<td>{good.price}</td>
|
||||
<td>{good.quantity}</td>
|
||||
<td>{good.discount_amount && good.discount_amount !== '0.00' ? good.discount_amount : '—'}</td>
|
||||
<td>{good.amount}</td>
|
||||
</tr>
|
||||
))}
|
||||
{order.goods.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={6} className="order-modal-goods-empty">
|
||||
Товары не указаны
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="order-modal-total">
|
||||
<span>Итого</span>
|
||||
<span>{order.total_amount} ₴</span>
|
||||
</div>
|
||||
|
||||
<div className="order-modal-actions">
|
||||
<button type="button" className="order-modal-close-btn" onClick={onClose}>
|
||||
Закрыть
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user