feat(user-topups): add user topups page with dynamic filtering and admin table integration ✨

feat(admin-devices-table): update admin check to use is_admin and clean up device display logic ✨
feat(admin-topup-table): create admin topups table with pagination and detail view links ✨
fix(user-payments-table): correct user data access and display payment amount with currency ✨
feat(app-sidebar): add link for user topups in the admin sidebar ✨
fix(backend-types): enhance Payment interface to include user details for better data handling ✨

components/device-card.tsx

@@ -12,12 +12,13 @@ import { Badge } from "./ui/badge";
 export default function DeviceCard({
 	device,
 	parentalControl,
-}: { device: Device; parentalControl?: boolean }) {
+}: { device: Device; parentalControl?: boolean, isAdmin?: boolean }) {
 	const [devices, setDeviceCart] = useAtom(deviceCartAtom);
 
 	const isChecked = devices.some((d) => d.id === device.id);
 
 	return (
+		// biome-ignore lint/a11y/noStaticElementInteractions: <dw about it>
 		<div
 			onKeyUp={() => { }}
 			onClick={() => {
@@ -58,6 +59,7 @@ export default function DeviceCard({
 						</Badge>
 					</div>
 
+
 					{device.is_active ? (
 						<div className="text-muted-foreground ml-0.5">
 							Active until{" "}
@@ -77,7 +79,7 @@ export default function DeviceCard({
 					)}
 					{device.has_a_pending_payment && (
 						<Link href={`/payments/${device.pending_payment_id}`}>
-							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
+							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-yellow-600">
 								Payment Pending{" "}
 								<HandCoins className="animate-pulse" size={14} />
 							</span>