cheange inlien code to block code and using tamplet

This commit is contained in:
m7amedez511
2026-07-22 17:09:15 +03:00
parent fa49ba8817
commit e42252db47
6 changed files with 262 additions and 347 deletions

View File

@@ -7,6 +7,8 @@ import {
ArchiveButton,
ConfirmDialog,
Toast,
Button,
IconBtn,
} from "@/src/Components/UI";
import { ArchivedDrivers } from "@/src/Components/Driver/archive/ArchivedDrivers";
import { useDrivers } from "@/src/hooks/useDriver";
@@ -59,17 +61,6 @@ const thStyle: React.CSSProperties = {
// Shared across header + rows — keep these in sync or columns will misalign.
const ROW_GRID_COLUMNS = "2fr 1.2fr 1fr 1.1fr 1.1fr 1fr 0.8fr";
const iconBtnBase: React.CSSProperties = {
width: 30,
height: 30,
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "var(--radius-md)",
cursor: "pointer",
flexShrink: 0,
};
// ── Page Component ────────────────────────────────────────────────────────────
export default function DriversPage() {
@@ -346,24 +337,16 @@ export default function DriversPage() {
</span>
{/* ── Inline row actions: edit / delete ──
stopPropagation is required on both buttons so the
click doesn't bubble up to the <li> onClick and
IconBtn already calls stopPropagation internally so
the click doesn't bubble up to the <li> onClick and
open the detail panel as well. */}
<div style={{ display: "flex", gap: "0.4rem" }}>
<button
type="button"
aria-label="تعديل السائق"
<IconBtn
title="تعديل"
onClick={(e) => {
e.stopPropagation();
handleEdit(d);
}}
style={{
...iconBtnBase,
border: "1px solid var(--color-brand-200)",
background: "var(--color-brand-50, #EFF6FF)",
color: "var(--color-brand-600)",
}}
color="var(--color-brand-600)"
bg="var(--color-brand-50, #EFF6FF)"
borderColor="var(--color-brand-200)"
onClick={() => handleEdit(d)}
>
<svg
width="14"
@@ -376,22 +359,14 @@ export default function DriversPage() {
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
</svg>
</button>
</IconBtn>
<button
type="button"
aria-label="حذف السائق"
<IconBtn
title="حذف"
onClick={(e) => {
e.stopPropagation();
handleDelete(d);
}}
style={{
...iconBtnBase,
border: "1px solid #FECACA",
background: "#FEF2F2",
color: "#DC2626",
}}
color="#DC2626"
bg="#FEF2F2"
borderColor="#FECACA"
onClick={() => handleDelete(d)}
>
<svg
width="14"
@@ -406,7 +381,7 @@ export default function DriversPage() {
<path d="M10 11v6M14 11v6" />
<path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
</svg>
</button>
</IconBtn>
</div>
</li>
);
@@ -437,37 +412,22 @@ export default function DriversPage() {
</strong>
</span>
<div style={{ display: "flex", gap: "0.5rem" }}>
{[
{
label: "السابق",
action: () => setPage((p) => Math.max(1, p - 1)),
disabled: page === 1,
},
{
label: "التالي",
action: () => setPage((p) => Math.min(pages, p + 1)),
disabled: page === pages,
},
].map((btn) => (
<button
key={btn.label}
onClick={btn.action}
disabled={btn.disabled}
style={{
borderRadius: "var(--radius-lg)",
border: "1px solid var(--color-border)",
background: "var(--color-surface-muted)",
padding: "0.375rem 0.875rem",
fontSize: 12,
color: "var(--color-text-secondary)",
cursor: btn.disabled ? "not-allowed" : "pointer",
opacity: btn.disabled ? 0.4 : 1,
fontFamily: "var(--font-sans)",
}}
>
{btn.label}
</button>
))}
<Button
variant="secondary"
size="sm"
onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={page === 1}
>
السابق
</Button>
<Button
variant="secondary"
size="sm"
onClick={() => setPage((p) => Math.min(pages, p + 1))}
disabled={page === pages}
>
التالي
</Button>
</div>
</div>
)}