"use client"; import { Spinner } from "../UI"; import type { User } from "../../types/user"; // ── role ──────────────────────────────────────────────────────────────── function RoleBadge({ name }: { name?: string }) { const isAdmin = name === "مدير النظام"; return ( {name ?? "—"} ); } // ── status ─────────────────────────────────────────────────────────────── function StatusBadge({ active }: { active: boolean }) { return ( {active ? "نشط" : "معطل"} ); } // icon buton ─────────────────────────────────────────────────────────────── function IconBtn({ onClick, title, color, bg, borderColor, children }: { onClick: () => void; title: string; color: string; bg: string; borderColor: string; children: React.ReactNode }) { return ( ); } // ── title style ─────────────────────────────────────────────────── const cardStyle: React.CSSProperties = { borderRadius: "var(--radius-xl)", border: "1px solid var(--color-border)", background: "var(--color-surface)", overflow: "hidden", boxShadow: "var(--shadow-card)", }; const thStyle: React.CSSProperties = { padding: "0.75rem 1.5rem", fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.2em", color: "var(--color-text-muted)", background: "var(--color-surface-muted)", borderBottom: "1px solid var(--color-border)", }; // ── Props ────────────────────────────────────────────────────────────── interface UserTableProps { users: User[]; loading: boolean; search: string; page: number; pages: number; onEdit: (user: User) => void; onDelete: (user: User) => void; onAddFirst: () => void; onPageChange: (p: number) => void; } // ── main table ──────────────────────────────────────────────────────────── export function UserTable({ users, loading, search, page, pages, onEdit, onDelete, onAddFirst, onPageChange }: UserTableProps) { return (
{/* column headers */}
الاسم اسم المستخدم الفرع الدور الحالة تاريخ الإنشاء إجراءات
{/* loading state */} {loading ? (
جارٍ التحميل…
) : users.length === 0 ? ( // empty state

{search ? `لا توجد نتائج لـ "${search}"` : "لا يوجد مستخدمون لعرضهم."}

{!search && ( )}
) : ( // data rows )} {/* pagination */} {pages > 1 && (
صفحة {page} من {pages}
{[ { label: "السابق", action: () => onPageChange(Math.max(1, page - 1)), disabled: page === 1 }, { label: "التالي", action: () => onPageChange(Math.min(pages, page + 1)), disabled: page === pages }, ].map(btn => ( ))}
)}
); }