cheange inlien code to block code and using tamplet
This commit is contained in:
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user