Replace SVGs with icons, restructure the table for CRUD operations across the project, standardize the application's display, and build a new template for the table's action buttons.
This commit is contained in:
m7amedez5511
@@ -1,18 +1,17 @@
|
||||
"use client";
|
||||
|
||||
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { Alert, Toast, ArchiveButton, ConfirmDialog } from "@/src/Components/UI";
|
||||
import { ORDER_STATUS_MAP } from "@/src/Components/Order/OrderDetailModel";
|
||||
import { OrderTable } from "@/src/Components/Order/OrderTable";
|
||||
import { ArchivedOrdersModal } from "@/src/Components/Order/archive/ArchivedOrdersModal";
|
||||
import { useOrders } from "@/src/hooks/useOrder";
|
||||
import type { CreateOrderPayload, Order, UpdateOrderPayload } from "@/src/types/order";
|
||||
import { OrderFormModal, OrderDetailPanel, OrderTable } from "@/src/Components/Order";
|
||||
import Header from "@/src/Components/UI/Header";
|
||||
import { OrderFormModal , OrderDetailPanel} from "@/src/Components/Order";
|
||||
|
||||
// ── Page Component ───────────────────────────────────────────────────────
|
||||
// Table markup/styles now live in src/Components/Order/orderTable.tsx;
|
||||
// detail panel in OrderDetailModel.tsx (renamed from OrderDetailBanel.tsx);
|
||||
// form modal unchanged in OrderFormModal.tsx. This page only wires state
|
||||
// and handlers between the three.
|
||||
|
||||
export default function OrderComponent() {
|
||||
const {
|
||||
@@ -93,18 +92,97 @@ export default function OrderComponent() {
|
||||
<section style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>
|
||||
|
||||
{/* ── Header ── */}
|
||||
<Header mainTitle="إدارة الطلبات"
|
||||
title="الطلبات"
|
||||
name="طلب"
|
||||
state={{ total }}
|
||||
search={search}
|
||||
setSearch={handleSearch}
|
||||
module=""
|
||||
setModule={() => {}}
|
||||
setPage={setPage}
|
||||
isAudit={false}
|
||||
onAdd={() => setFormOrder("new")}/>
|
||||
<header style={{
|
||||
borderRadius: "var(--radius-xl)",
|
||||
border: "1px solid var(--color-border)",
|
||||
background: "var(--color-surface)",
|
||||
padding: "1.5rem 2rem",
|
||||
boxShadow: "var(--shadow-card)",
|
||||
}}>
|
||||
<p style={{ fontSize: 11, letterSpacing: "0.3em", textTransform: "uppercase", color: "#2563EB", fontWeight: 600 }}>
|
||||
إدارة الشحنات
|
||||
</p>
|
||||
<div style={{ marginTop: "0.75rem", display: "flex", flexDirection: "column", gap: "1rem" }}>
|
||||
<div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", flexWrap: "wrap", gap: "1rem" }}>
|
||||
<div>
|
||||
<h1 style={{ fontSize: "1.5rem", fontWeight: 700, color: "var(--color-text-primary)", margin: 0 }}>
|
||||
الطلبات
|
||||
</h1>
|
||||
<p style={{ marginTop: "0.25rem", fontSize: 13, color: "var(--color-text-muted)" }}>
|
||||
إجمالي{" "}
|
||||
<strong style={{ color: "var(--color-text-primary)" }}>{total}</strong>{" "}
|
||||
طلب مسجل
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style={{ display: "flex", gap: "0.75rem", alignItems: "center", flexWrap: "wrap" }}>
|
||||
{/* Status filter — ported from app/dashboard/orders/page.tsx */}
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => handleStatusFilter(e.target.value)}
|
||||
dir="rtl"
|
||||
style={{
|
||||
height: 40, borderRadius: "var(--radius-lg)",
|
||||
border: "1px solid var(--color-border)",
|
||||
background: "var(--color-surface)",
|
||||
fontSize: 13, color: "var(--color-text-secondary)",
|
||||
padding: "0 0.75rem", outline: "none",
|
||||
fontFamily: "var(--font-sans)", cursor: "pointer",
|
||||
}}
|
||||
>
|
||||
<option value="">كل الحالات</option>
|
||||
{Object.entries(ORDER_STATUS_MAP).map(([k, v]) => (
|
||||
<option key={k} value={k}>{v.label}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{/* Search */}
|
||||
<div style={{ position: "relative", width: 288 }}>
|
||||
<i
|
||||
className="ti ti-search"
|
||||
aria-hidden="true"
|
||||
style={{ position: "absolute", right: 12, top: "50%", transform: "translateY(-50%)", fontSize: 16, color: "var(--color-text-hint)", pointerEvents: "none" }}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="رقم الشحنة أو المستلم..."
|
||||
value={search}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
dir="rtl"
|
||||
style={{
|
||||
width: "100%", height: 40, paddingRight: 36, paddingLeft: 12,
|
||||
borderRadius: "var(--radius-lg)",
|
||||
border: "1px solid var(--color-border)",
|
||||
background: "var(--color-surface)",
|
||||
fontSize: 13, color: "var(--color-text-primary)",
|
||||
outline: "none", fontFamily: "var(--font-sans)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Add button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setFormOrder("new")}
|
||||
style={{
|
||||
height: 40, padding: "0 1.25rem",
|
||||
borderRadius: "var(--radius-lg)",
|
||||
border: "none",
|
||||
background: "var(--color-brand-600)",
|
||||
fontSize: 13, fontWeight: 700, color: "#FFF",
|
||||
cursor: "pointer",
|
||||
display: "flex", alignItems: "center", gap: 8,
|
||||
fontFamily: "var(--font-sans)",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<i className="ti ti-plus" style={{ fontSize: 15 }} aria-hidden="true" />
|
||||
إضافة طلب
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* ── Notifications: page-level error banner (e.g. failed list load)
|
||||
dismissible via clearError() from the hook. Action-result
|
||||
@@ -124,7 +202,7 @@ export default function OrderComponent() {
|
||||
page={page}
|
||||
pages={pages}
|
||||
setPage={setPage}
|
||||
onRowClick={setSelectedOrderId}
|
||||
onRowClick={(orderId) => setSelectedOrderId(orderId)}
|
||||
onEdit={handleEdit}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
@@ -183,5 +261,6 @@ export default function OrderComponent() {
|
||||
}
|
||||
|
||||
// Named export alongside the default, mirroring src/Components/Driver/index.ts's
|
||||
// pattern of re-exporting each piece for use elsewhere.
|
||||
// pattern of re-exporting each piece for use elsewhere (e.g. a future
|
||||
// app/dashboard/orders/page.tsx importing { OrderComponent }).
|
||||
export { OrderComponent };
|
||||
Reference in New Issue
Block a user