2025-12-20 11:12:11 +01:00
|
|
|
"use client";
|
|
|
|
|
|
|
|
|
|
import { useEffect, useState, useCallback } from "react";
|
|
|
|
|
import { Permission } from "../../auth-context";
|
|
|
|
|
import { api } from "../../api";
|
|
|
|
|
import { sharedStyles } from "../../styles/shared";
|
|
|
|
|
import { Header } from "../../components/Header";
|
|
|
|
|
import { useRequireAuth } from "../../hooks/useRequireAuth";
|
|
|
|
|
|
|
|
|
|
interface InviteRecord {
|
|
|
|
|
id: number;
|
|
|
|
|
identifier: string;
|
|
|
|
|
godfather_id: number;
|
|
|
|
|
godfather_email: string;
|
|
|
|
|
status: string;
|
|
|
|
|
used_by_id: number | null;
|
|
|
|
|
used_by_email: string | null;
|
|
|
|
|
created_at: string;
|
|
|
|
|
spent_at: string | null;
|
|
|
|
|
revoked_at: string | null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface PaginatedResponse<T> {
|
|
|
|
|
records: T[];
|
|
|
|
|
total: number;
|
|
|
|
|
page: number;
|
|
|
|
|
per_page: number;
|
|
|
|
|
total_pages: number;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface UserOption {
|
|
|
|
|
id: number;
|
|
|
|
|
email: string;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function AdminInvitesPage() {
|
|
|
|
|
const [data, setData] = useState<PaginatedResponse<InviteRecord> | null>(null);
|
|
|
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
|
const [page, setPage] = useState(1);
|
|
|
|
|
const [statusFilter, setStatusFilter] = useState<string>("");
|
|
|
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
|
|
|
const [newGodfatherId, setNewGodfatherId] = useState("");
|
|
|
|
|
const [createError, setCreateError] = useState<string | null>(null);
|
|
|
|
|
const [users, setUsers] = useState<UserOption[]>([]);
|
|
|
|
|
const { user, isLoading, isAuthorized } = useRequireAuth({
|
2025-12-20 11:43:32 +01:00
|
|
|
requiredPermission: Permission.MANAGE_INVITES,
|
2025-12-20 11:12:11 +01:00
|
|
|
fallbackRedirect: "/",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
const fetchUsers = useCallback(async () => {
|
|
|
|
|
try {
|
|
|
|
|
const data = await api.get<UserOption[]>("/api/admin/users");
|
|
|
|
|
setUsers(data);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
console.error("Failed to fetch users:", err);
|
|
|
|
|
}
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
const fetchInvites = useCallback(async (page: number, status: string) => {
|
|
|
|
|
setError(null);
|
|
|
|
|
try {
|
|
|
|
|
let url = `/api/admin/invites?page=${page}&per_page=10`;
|
|
|
|
|
if (status) {
|
|
|
|
|
url += `&status=${status}`;
|
|
|
|
|
}
|
|
|
|
|
const data = await api.get<PaginatedResponse<InviteRecord>>(url);
|
|
|
|
|
setData(data);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
setData(null);
|
|
|
|
|
setError(err instanceof Error ? err.message : "Failed to load invites");
|
|
|
|
|
}
|
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (user && isAuthorized) {
|
|
|
|
|
fetchUsers();
|
|
|
|
|
fetchInvites(page, statusFilter);
|
|
|
|
|
}
|
|
|
|
|
}, [user, page, statusFilter, isAuthorized, fetchUsers, fetchInvites]);
|
|
|
|
|
|
|
|
|
|
const handleCreateInvite = async () => {
|
|
|
|
|
if (!newGodfatherId) {
|
|
|
|
|
setCreateError("Please enter a godfather user ID");
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setIsCreating(true);
|
|
|
|
|
setCreateError(null);
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
await api.post("/api/admin/invites", {
|
|
|
|
|
godfather_id: parseInt(newGodfatherId),
|
|
|
|
|
});
|
|
|
|
|
setNewGodfatherId("");
|
|
|
|
|
fetchInvites(1, statusFilter);
|
|
|
|
|
setPage(1);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
setCreateError(err instanceof Error ? err.message : "Failed to create invite");
|
|
|
|
|
} finally {
|
|
|
|
|
setIsCreating(false);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const handleRevoke = async (inviteId: number) => {
|
|
|
|
|
try {
|
|
|
|
|
await api.post(`/api/admin/invites/${inviteId}/revoke`);
|
|
|
|
|
fetchInvites(page, statusFilter);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
setError(err instanceof Error ? err.message : "Failed to revoke invite");
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const formatDate = (dateStr: string) => {
|
|
|
|
|
return new Date(dateStr).toLocaleString();
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const getStatusBadgeStyle = (status: string) => {
|
|
|
|
|
switch (status) {
|
|
|
|
|
case "ready":
|
|
|
|
|
return styles.statusReady;
|
|
|
|
|
case "spent":
|
|
|
|
|
return styles.statusSpent;
|
|
|
|
|
case "revoked":
|
|
|
|
|
return styles.statusRevoked;
|
|
|
|
|
default:
|
|
|
|
|
return {};
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if (isLoading) {
|
|
|
|
|
return (
|
|
|
|
|
<main style={styles.main}>
|
|
|
|
|
<div style={styles.loader}>Loading...</div>
|
|
|
|
|
</main>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!user || !isAuthorized) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<main style={styles.main}>
|
|
|
|
|
<Header currentPage="admin-invites" />
|
|
|
|
|
|
|
|
|
|
<div style={styles.content}>
|
|
|
|
|
<div style={styles.pageContainer}>
|
|
|
|
|
{/* Create Invite Section */}
|
|
|
|
|
<div style={styles.createCard}>
|
|
|
|
|
<h2 style={styles.createTitle}>Create Invite</h2>
|
|
|
|
|
<div style={styles.createForm}>
|
|
|
|
|
<div style={styles.inputGroup}>
|
|
|
|
|
<label style={styles.inputLabel}>Godfather (user who can share this invite)</label>
|
|
|
|
|
<select
|
|
|
|
|
value={newGodfatherId}
|
|
|
|
|
onChange={(e) => setNewGodfatherId(e.target.value)}
|
|
|
|
|
style={styles.select}
|
|
|
|
|
>
|
|
|
|
|
<option value="">Select a user...</option>
|
|
|
|
|
{users.map((u) => (
|
|
|
|
|
<option key={u.id} value={u.id}>
|
|
|
|
|
{u.email}
|
|
|
|
|
</option>
|
|
|
|
|
))}
|
|
|
|
|
</select>
|
|
|
|
|
{users.length === 0 && (
|
|
|
|
|
<span style={styles.inputHint}>
|
|
|
|
|
No users loaded yet. Create at least one invite to populate the list.
|
|
|
|
|
</span>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
{createError && <div style={styles.createError}>{createError}</div>}
|
|
|
|
|
<button
|
|
|
|
|
onClick={handleCreateInvite}
|
|
|
|
|
disabled={isCreating || !newGodfatherId}
|
|
|
|
|
style={{
|
|
|
|
|
...styles.createButton,
|
|
|
|
|
...(!newGodfatherId ? styles.createButtonDisabled : {}),
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
{isCreating ? "Creating..." : "Create Invite"}
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{/* Invites Table */}
|
|
|
|
|
<div style={styles.tableCard}>
|
|
|
|
|
<div style={styles.tableHeader}>
|
|
|
|
|
<h2 style={styles.tableTitle}>All Invites</h2>
|
|
|
|
|
<div style={styles.filterGroup}>
|
|
|
|
|
<select
|
|
|
|
|
value={statusFilter}
|
|
|
|
|
onChange={(e) => {
|
|
|
|
|
setStatusFilter(e.target.value);
|
|
|
|
|
setPage(1);
|
|
|
|
|
}}
|
|
|
|
|
style={styles.filterSelect}
|
|
|
|
|
>
|
|
|
|
|
<option value="">All statuses</option>
|
|
|
|
|
<option value="ready">Ready</option>
|
|
|
|
|
<option value="spent">Spent</option>
|
|
|
|
|
<option value="revoked">Revoked</option>
|
|
|
|
|
</select>
|
|
|
|
|
<span style={styles.totalCount}>
|
|
|
|
|
{data?.total ?? 0} invites
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div style={styles.tableWrapper}>
|
|
|
|
|
<table style={styles.table}>
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th style={styles.th}>Code</th>
|
|
|
|
|
<th style={styles.th}>Godfather</th>
|
|
|
|
|
<th style={styles.th}>Status</th>
|
|
|
|
|
<th style={styles.th}>Used By</th>
|
|
|
|
|
<th style={styles.th}>Created</th>
|
|
|
|
|
<th style={styles.th}>Actions</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
{error && (
|
|
|
|
|
<tr>
|
|
|
|
|
<td colSpan={6} style={styles.errorRow}>{error}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
)}
|
|
|
|
|
{!error && data?.records.map((record) => (
|
|
|
|
|
<tr key={record.id} style={styles.tr}>
|
|
|
|
|
<td style={styles.tdCode}>{record.identifier}</td>
|
|
|
|
|
<td style={styles.td}>{record.godfather_email}</td>
|
|
|
|
|
<td style={styles.td}>
|
|
|
|
|
<span style={{ ...styles.statusBadge, ...getStatusBadgeStyle(record.status) }}>
|
|
|
|
|
{record.status}
|
|
|
|
|
</span>
|
|
|
|
|
</td>
|
|
|
|
|
<td style={styles.td}>
|
|
|
|
|
{record.used_by_email || "-"}
|
|
|
|
|
</td>
|
|
|
|
|
<td style={styles.tdDate}>{formatDate(record.created_at)}</td>
|
|
|
|
|
<td style={styles.td}>
|
|
|
|
|
{record.status === "ready" && (
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => handleRevoke(record.id)}
|
|
|
|
|
style={styles.revokeButton}
|
|
|
|
|
>
|
|
|
|
|
Revoke
|
|
|
|
|
</button>
|
|
|
|
|
)}
|
|
|
|
|
</td>
|
|
|
|
|
</tr>
|
|
|
|
|
))}
|
|
|
|
|
{!error && (!data || data.records.length === 0) && (
|
|
|
|
|
<tr>
|
|
|
|
|
<td colSpan={6} style={styles.emptyRow}>No invites yet</td>
|
|
|
|
|
</tr>
|
|
|
|
|
)}
|
|
|
|
|
</tbody>
|
|
|
|
|
</table>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
{data && data.total_pages > 1 && (
|
|
|
|
|
<div style={styles.pagination}>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
|
|
|
|
disabled={page === 1}
|
|
|
|
|
style={styles.pageBtn}
|
|
|
|
|
>
|
|
|
|
|
←
|
|
|
|
|
</button>
|
|
|
|
|
<span style={styles.pageInfo}>
|
|
|
|
|
{page} / {data.total_pages}
|
|
|
|
|
</span>
|
|
|
|
|
<button
|
|
|
|
|
onClick={() => setPage((p) => Math.min(data.total_pages, p + 1))}
|
|
|
|
|
disabled={page === data.total_pages}
|
|
|
|
|
style={styles.pageBtn}
|
|
|
|
|
>
|
|
|
|
|
→
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const pageStyles: Record<string, React.CSSProperties> = {
|
|
|
|
|
content: {
|
|
|
|
|
flex: 1,
|
|
|
|
|
padding: "2rem",
|
|
|
|
|
overflowY: "auto",
|
|
|
|
|
},
|
|
|
|
|
pageContainer: {
|
|
|
|
|
display: "flex",
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
gap: "2rem",
|
|
|
|
|
maxWidth: "1000px",
|
|
|
|
|
margin: "0 auto",
|
|
|
|
|
},
|
|
|
|
|
createCard: {
|
|
|
|
|
background: "rgba(99, 102, 241, 0.08)",
|
|
|
|
|
border: "1px solid rgba(99, 102, 241, 0.2)",
|
|
|
|
|
borderRadius: "16px",
|
|
|
|
|
padding: "1.5rem",
|
|
|
|
|
},
|
|
|
|
|
createTitle: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "1rem",
|
|
|
|
|
fontWeight: 600,
|
|
|
|
|
color: "rgba(255, 255, 255, 0.9)",
|
|
|
|
|
margin: "0 0 1rem 0",
|
|
|
|
|
},
|
|
|
|
|
createForm: {
|
|
|
|
|
display: "flex",
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
gap: "1rem",
|
|
|
|
|
},
|
|
|
|
|
inputGroup: {
|
|
|
|
|
display: "flex",
|
|
|
|
|
flexDirection: "column",
|
|
|
|
|
gap: "0.5rem",
|
|
|
|
|
},
|
|
|
|
|
inputLabel: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.8rem",
|
|
|
|
|
color: "rgba(255, 255, 255, 0.5)",
|
|
|
|
|
},
|
|
|
|
|
input: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.9rem",
|
|
|
|
|
padding: "0.75rem",
|
|
|
|
|
background: "rgba(255, 255, 255, 0.05)",
|
|
|
|
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
|
|
|
borderRadius: "8px",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
maxWidth: "300px",
|
|
|
|
|
},
|
|
|
|
|
select: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.9rem",
|
|
|
|
|
padding: "0.75rem",
|
|
|
|
|
background: "rgba(255, 255, 255, 0.05)",
|
|
|
|
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
|
|
|
borderRadius: "8px",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
maxWidth: "400px",
|
|
|
|
|
cursor: "pointer",
|
|
|
|
|
},
|
|
|
|
|
createError: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.85rem",
|
|
|
|
|
color: "#f87171",
|
|
|
|
|
},
|
|
|
|
|
createButton: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.9rem",
|
|
|
|
|
fontWeight: 500,
|
|
|
|
|
padding: "0.75rem 1.5rem",
|
|
|
|
|
background: "rgba(99, 102, 241, 0.3)",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
border: "1px solid rgba(99, 102, 241, 0.5)",
|
|
|
|
|
borderRadius: "8px",
|
|
|
|
|
cursor: "pointer",
|
|
|
|
|
alignSelf: "flex-start",
|
|
|
|
|
},
|
|
|
|
|
createButtonDisabled: {
|
|
|
|
|
opacity: 0.5,
|
|
|
|
|
cursor: "not-allowed",
|
|
|
|
|
},
|
|
|
|
|
inputHint: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.75rem",
|
|
|
|
|
color: "rgba(255, 255, 255, 0.4)",
|
|
|
|
|
fontStyle: "italic",
|
|
|
|
|
},
|
|
|
|
|
tableCard: {
|
|
|
|
|
background: "rgba(255, 255, 255, 0.03)",
|
|
|
|
|
backdropFilter: "blur(10px)",
|
|
|
|
|
border: "1px solid rgba(255, 255, 255, 0.08)",
|
|
|
|
|
borderRadius: "20px",
|
|
|
|
|
padding: "1.5rem",
|
|
|
|
|
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)",
|
|
|
|
|
},
|
|
|
|
|
tableHeader: {
|
|
|
|
|
display: "flex",
|
|
|
|
|
justifyContent: "space-between",
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
marginBottom: "1rem",
|
|
|
|
|
flexWrap: "wrap",
|
|
|
|
|
gap: "1rem",
|
|
|
|
|
},
|
|
|
|
|
tableTitle: {
|
|
|
|
|
fontFamily: "'Instrument Serif', Georgia, serif",
|
|
|
|
|
fontSize: "1.5rem",
|
|
|
|
|
fontWeight: 400,
|
|
|
|
|
color: "#fff",
|
|
|
|
|
margin: 0,
|
|
|
|
|
},
|
|
|
|
|
filterGroup: {
|
|
|
|
|
display: "flex",
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
gap: "1rem",
|
|
|
|
|
},
|
|
|
|
|
filterSelect: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.85rem",
|
|
|
|
|
padding: "0.5rem 1rem",
|
|
|
|
|
background: "rgba(255, 255, 255, 0.05)",
|
|
|
|
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
|
|
|
borderRadius: "8px",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
cursor: "pointer",
|
|
|
|
|
},
|
|
|
|
|
totalCount: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.875rem",
|
|
|
|
|
color: "rgba(255, 255, 255, 0.4)",
|
|
|
|
|
},
|
|
|
|
|
tableWrapper: {
|
|
|
|
|
overflowX: "auto",
|
|
|
|
|
},
|
|
|
|
|
table: {
|
|
|
|
|
width: "100%",
|
|
|
|
|
borderCollapse: "collapse",
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
},
|
|
|
|
|
th: {
|
|
|
|
|
textAlign: "left",
|
|
|
|
|
padding: "0.75rem 1rem",
|
|
|
|
|
fontSize: "0.75rem",
|
|
|
|
|
fontWeight: 600,
|
|
|
|
|
color: "rgba(255, 255, 255, 0.4)",
|
|
|
|
|
textTransform: "uppercase",
|
|
|
|
|
letterSpacing: "0.05em",
|
|
|
|
|
borderBottom: "1px solid rgba(255, 255, 255, 0.08)",
|
|
|
|
|
},
|
|
|
|
|
tr: {
|
|
|
|
|
borderBottom: "1px solid rgba(255, 255, 255, 0.04)",
|
|
|
|
|
},
|
|
|
|
|
td: {
|
|
|
|
|
padding: "0.875rem 1rem",
|
|
|
|
|
fontSize: "0.875rem",
|
|
|
|
|
color: "rgba(255, 255, 255, 0.7)",
|
|
|
|
|
},
|
|
|
|
|
tdCode: {
|
|
|
|
|
padding: "0.875rem 1rem",
|
|
|
|
|
fontSize: "0.875rem",
|
|
|
|
|
color: "#fff",
|
|
|
|
|
fontFamily: "'DM Mono', monospace",
|
|
|
|
|
},
|
|
|
|
|
tdDate: {
|
|
|
|
|
padding: "0.875rem 1rem",
|
|
|
|
|
fontSize: "0.75rem",
|
|
|
|
|
color: "rgba(255, 255, 255, 0.4)",
|
|
|
|
|
},
|
|
|
|
|
statusBadge: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.7rem",
|
|
|
|
|
fontWeight: 500,
|
|
|
|
|
padding: "0.25rem 0.5rem",
|
|
|
|
|
borderRadius: "4px",
|
|
|
|
|
textTransform: "uppercase",
|
|
|
|
|
},
|
|
|
|
|
statusReady: {
|
|
|
|
|
background: "rgba(99, 102, 241, 0.2)",
|
|
|
|
|
color: "rgba(129, 140, 248, 0.9)",
|
|
|
|
|
},
|
|
|
|
|
statusSpent: {
|
|
|
|
|
background: "rgba(34, 197, 94, 0.2)",
|
|
|
|
|
color: "rgba(34, 197, 94, 0.9)",
|
|
|
|
|
},
|
|
|
|
|
statusRevoked: {
|
|
|
|
|
background: "rgba(239, 68, 68, 0.2)",
|
|
|
|
|
color: "rgba(239, 68, 68, 0.9)",
|
|
|
|
|
},
|
|
|
|
|
revokeButton: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.75rem",
|
|
|
|
|
padding: "0.4rem 0.75rem",
|
|
|
|
|
background: "rgba(239, 68, 68, 0.15)",
|
|
|
|
|
color: "rgba(239, 68, 68, 0.9)",
|
|
|
|
|
border: "1px solid rgba(239, 68, 68, 0.3)",
|
|
|
|
|
borderRadius: "6px",
|
|
|
|
|
cursor: "pointer",
|
|
|
|
|
},
|
|
|
|
|
emptyRow: {
|
|
|
|
|
padding: "2rem 1rem",
|
|
|
|
|
textAlign: "center",
|
|
|
|
|
color: "rgba(255, 255, 255, 0.3)",
|
|
|
|
|
fontSize: "0.875rem",
|
|
|
|
|
},
|
|
|
|
|
errorRow: {
|
|
|
|
|
padding: "2rem 1rem",
|
|
|
|
|
textAlign: "center",
|
|
|
|
|
color: "#f87171",
|
|
|
|
|
fontSize: "0.875rem",
|
|
|
|
|
},
|
|
|
|
|
pagination: {
|
|
|
|
|
display: "flex",
|
|
|
|
|
justifyContent: "center",
|
|
|
|
|
alignItems: "center",
|
|
|
|
|
gap: "1rem",
|
|
|
|
|
marginTop: "1rem",
|
|
|
|
|
paddingTop: "1rem",
|
|
|
|
|
borderTop: "1px solid rgba(255, 255, 255, 0.06)",
|
|
|
|
|
},
|
|
|
|
|
pageBtn: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
padding: "0.5rem 1rem",
|
|
|
|
|
fontSize: "1rem",
|
|
|
|
|
background: "rgba(255, 255, 255, 0.05)",
|
|
|
|
|
color: "rgba(255, 255, 255, 0.7)",
|
|
|
|
|
border: "1px solid rgba(255, 255, 255, 0.1)",
|
|
|
|
|
borderRadius: "8px",
|
|
|
|
|
cursor: "pointer",
|
|
|
|
|
transition: "all 0.2s",
|
|
|
|
|
},
|
|
|
|
|
pageInfo: {
|
|
|
|
|
fontFamily: "'DM Sans', system-ui, sans-serif",
|
|
|
|
|
fontSize: "0.875rem",
|
|
|
|
|
color: "rgba(255, 255, 255, 0.5)",
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const styles = { ...sharedStyles, ...pageStyles };
|
|
|
|
|
|
