mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-11-06 01:36:59 +00:00
Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| dc10fa6be4 | |||
| 39e84723b1 | |||
| 19043aa692 | |||
| f2a17d522b | |||
| 43b8e22196 |
@@ -1,5 +1,12 @@
|
||||
# Changelog
|
||||
|
||||
## <small>0.2.2 (2025-09-20)</small>
|
||||
|
||||
* refactor: remove table captions from all tables 🔧 ([39e8472](https://github.com/i701/sarlink-portal/commit/39e8472))
|
||||
* fix: hide account information once the payment is verified/expired/cancelled 🔧 ([f2a17d5](https://github.com/i701/sarlink-portal/commit/f2a17d5))
|
||||
* fix: remove pagination if there is only 1 page 🔧 ([43b8e22](https://github.com/i701/sarlink-portal/commit/43b8e22))
|
||||
* fix: set 100 MVR for default wallet topup amount 🔧 ([19043aa](https://github.com/i701/sarlink-portal/commit/19043aa))
|
||||
|
||||
## <small>0.2.1 (2025-09-20)</small>
|
||||
|
||||
* fix: add release script 🔧 ([e5298aa](https://github.com/i701/sarlink-portal/commit/e5298aa))
|
||||
|
||||
@@ -1,78 +1,76 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export default function DevicesTableSkeleton() {
|
||||
return (
|
||||
<>
|
||||
<div className="hidden sm:block">
|
||||
<Table className="overflow-scroll">
|
||||
<TableCaption>Table of all devices.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Device Name</TableHead>
|
||||
<TableHead>MAC Address</TableHead>
|
||||
<TableHead>#</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<TableRow key={`${i + 1}`}>
|
||||
<TableCell>
|
||||
<Skeleton className="w-full h-10 rounded" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="w-full h-10 rounded" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="w-full h-10 rounded" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={2}>
|
||||
<Skeleton className="w-full h-4 rounded" />
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<Skeleton className="w-20 h-4 rounded" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="sm:hidden my-4">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<DeviceCardSkeleton key={`${i + 1}`} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div className="hidden sm:block">
|
||||
<Table className="overflow-scroll">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Device Name</TableHead>
|
||||
<TableHead>MAC Address</TableHead>
|
||||
<TableHead>#</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<TableRow key={`${i + 1}`}>
|
||||
<TableCell>
|
||||
<Skeleton className="w-full h-10 rounded" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="w-full h-10 rounded" />
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Skeleton className="w-full h-10 rounded" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={2}>
|
||||
<Skeleton className="w-full h-4 rounded" />
|
||||
</TableCell>
|
||||
<TableCell className="text-muted-foreground">
|
||||
<Skeleton className="w-20 h-4 rounded" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="sm:hidden my-4">
|
||||
{Array.from({ length: 10 }).map((_, i) => (
|
||||
<DeviceCardSkeleton key={`${i + 1}`} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function DeviceCardSkeleton() {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex text-sm justify-between items-center my-2 p-4 border rounded-md bg-gray-100",
|
||||
)}
|
||||
>
|
||||
<div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
|
||||
<Skeleton className="w-32 h-6" />
|
||||
<Skeleton className="w-36 h-6" />
|
||||
<Skeleton className="w-32 h-4" />
|
||||
<Skeleton className="w-40 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex text-sm justify-between items-center my-2 p-4 border rounded-md bg-gray-100",
|
||||
)}
|
||||
>
|
||||
<div className="font-semibold flex w-full flex-col items-start gap-2 mb-2 relative">
|
||||
<Skeleton className="w-32 h-6" />
|
||||
<Skeleton className="w-36 h-6" />
|
||||
<Skeleton className="w-32 h-4" />
|
||||
<Skeleton className="w-40 h-8" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,72 +9,72 @@ import { TextShimmer } from "@/components/ui/text-shimmer";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { tryCatch } from "@/utils/tryCatch";
|
||||
export default async function TopupPage({
|
||||
params,
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ topupId: string }>;
|
||||
params: Promise<{ topupId: string }>;
|
||||
}) {
|
||||
const topupId = (await params).topupId;
|
||||
const [error, topup] = await tryCatch(getTopup({ id: topupId }));
|
||||
if (error) {
|
||||
if (error.message === "Invalid token.") redirect("/auth/signin");
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
const topupId = (await params).topupId;
|
||||
const [error, topup] = await tryCatch(getTopup({ id: topupId }));
|
||||
if (error) {
|
||||
if (error.message === "Invalid token.") redirect("/auth/signin");
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
|
||||
<h3 className="text-sarLinkOrange text-2xl">Topup</h3>
|
||||
<div className="flex flex-col gap-4 items-end w-full">
|
||||
{!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
|
||||
<Button
|
||||
disabled
|
||||
className={cn(
|
||||
"rounded-md opacity-100! uppercase font-semibold",
|
||||
topup?.paid
|
||||
? "text-green-900 bg-green-500/20"
|
||||
: "text-inherit bg-yellow-400",
|
||||
)}
|
||||
>
|
||||
{topup.status}
|
||||
</Button>
|
||||
)}
|
||||
{topup.status === "PENDING" && !topup.is_expired && (
|
||||
<Button>
|
||||
<TextShimmer>Payment Pending</TextShimmer>{" "}
|
||||
</Button>
|
||||
)}
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-4 mb-4 mx-2">
|
||||
<h3 className="text-sarLinkOrange text-2xl">Topup</h3>
|
||||
<div className="flex flex-col gap-4 items-end w-full">
|
||||
{!topup.is_expired && topup.paid && topup.status !== "PENDING" && (
|
||||
<Button
|
||||
disabled
|
||||
className={cn(
|
||||
"rounded-md opacity-100! uppercase font-semibold",
|
||||
topup?.paid
|
||||
? "text-green-900 bg-green-500/20"
|
||||
: "text-inherit bg-yellow-400",
|
||||
)}
|
||||
>
|
||||
{topup.status}
|
||||
</Button>
|
||||
)}
|
||||
{topup.status === "PENDING" && !topup.is_expired && (
|
||||
<Button>
|
||||
<TextShimmer>Payment Pending</TextShimmer>{" "}
|
||||
</Button>
|
||||
)}
|
||||
|
||||
{!topup.paid &&
|
||||
(topup.is_expired ? (
|
||||
<Button
|
||||
disabled
|
||||
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
|
||||
>
|
||||
Topup Expired
|
||||
</Button>
|
||||
) : topup.status === "PENDING" ? (
|
||||
<CancelTopupButton topupId={topupId} />
|
||||
) : topup.status === "CANCELLED" ? (
|
||||
<Button disabled>Topup Cancelled</Button>
|
||||
) : (
|
||||
""
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
|
||||
<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
|
||||
)}
|
||||
<div
|
||||
id="user-topup-details"
|
||||
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
||||
>
|
||||
<TopupToPay
|
||||
disabled={
|
||||
topup.paid || topup.is_expired || topup.status === "CANCELLED"
|
||||
}
|
||||
topup={topup || undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
{!topup.paid &&
|
||||
(topup.is_expired ? (
|
||||
<Button
|
||||
disabled
|
||||
className="rounded-md opacity-100! uppercase font-semibold text-red-500 bg-red-500/20"
|
||||
>
|
||||
Topup Expired
|
||||
</Button>
|
||||
) : topup.status === "PENDING" ? (
|
||||
<CancelTopupButton topupId={topupId} />
|
||||
) : topup.status === "CANCELLED" ? (
|
||||
<Button disabled>Topup Cancelled</Button>
|
||||
) : (
|
||||
""
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{!topup.paid && topup.status === "PENDING" && !topup.is_expired && (
|
||||
<ExpiryCountDown expiryLabel="Top up" expiresAt={topup.expires_at} />
|
||||
)}
|
||||
<div
|
||||
id="user-topup-details"
|
||||
className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
|
||||
>
|
||||
<TopupToPay
|
||||
disabled={
|
||||
topup.paid || topup.is_expired || topup.status === "CANCELLED"
|
||||
}
|
||||
topup={topup || undefined}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -4,14 +4,13 @@ import { redirect } from "next/navigation";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/app/auth";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getDevices } from "@/queries/devices";
|
||||
@@ -21,156 +20,155 @@ import ClientErrorMessage from "../client-error-message";
|
||||
import Pagination from "../pagination";
|
||||
|
||||
export async function AdminDevicesTable({
|
||||
searchParams,
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams;
|
||||
const session = await getServerSession(authOptions);
|
||||
const isAdmin = session?.user?.is_admin;
|
||||
const resolvedParams = await searchParams;
|
||||
const session = await getServerSession(authOptions);
|
||||
const isAdmin = session?.user?.is_admin;
|
||||
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
|
||||
// Build params object for getDevices
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
// Build params object for getDevices
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
|
||||
const [error, devices] = await tryCatch(getDevices(apiParams, true));
|
||||
if (error) {
|
||||
if (error.message === "UNAUTHORIZED") {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
}
|
||||
const { meta, data } = devices;
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||
<h3>No devices.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<Table className="overflow-scroll">
|
||||
<TableCaption>Table of all devices.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Device Name</TableHead>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>MAC Address</TableHead>
|
||||
<TableHead>Vendor</TableHead>
|
||||
<TableHead>#</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{data?.map((device) => (
|
||||
<TableRow key={device.id}>
|
||||
<TableCell>
|
||||
<div className="flex flex-col items-start">
|
||||
<Link
|
||||
className={cn(
|
||||
"hover:underline font-semibold",
|
||||
device.is_active ? "text-green-600" : "",
|
||||
)}
|
||||
href={`/devices/${device.id}`}
|
||||
>
|
||||
{device.name}
|
||||
</Link>
|
||||
{device.is_active ? (
|
||||
<div className="text-muted-foreground">
|
||||
Active until{" "}
|
||||
<span className="font-semibold">
|
||||
{new Date(
|
||||
device.expiry_date || "",
|
||||
).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted-foreground">
|
||||
Device Inactive
|
||||
</p>
|
||||
)}
|
||||
{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">
|
||||
Payment Pending{" "}
|
||||
<HandCoins className="animate-pulse" size={14} />
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
const [error, devices] = await tryCatch(getDevices(apiParams, true));
|
||||
if (error) {
|
||||
if (error.message === "UNAUTHORIZED") {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
}
|
||||
const { meta, data } = devices;
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||
<h3>No devices.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<Table className="overflow-scroll">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Device Name</TableHead>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>MAC Address</TableHead>
|
||||
<TableHead>Vendor</TableHead>
|
||||
<TableHead>#</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{data?.map((device) => (
|
||||
<TableRow key={device.id}>
|
||||
<TableCell>
|
||||
<div className="flex flex-col items-start">
|
||||
<Link
|
||||
className={cn(
|
||||
"hover:underline font-semibold",
|
||||
device.is_active ? "text-green-600" : "",
|
||||
)}
|
||||
href={`/devices/${device.id}`}
|
||||
>
|
||||
{device.name}
|
||||
</Link>
|
||||
{device.is_active ? (
|
||||
<div className="text-muted-foreground">
|
||||
Active until{" "}
|
||||
<span className="font-semibold">
|
||||
{new Date(
|
||||
device.expiry_date || "",
|
||||
).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-muted-foreground">
|
||||
Device Inactive
|
||||
</p>
|
||||
)}
|
||||
{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">
|
||||
Payment Pending{" "}
|
||||
<HandCoins className="animate-pulse" size={14} />
|
||||
</span>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{device.blocked_by === "ADMIN" && device.blocked && (
|
||||
<div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
|
||||
<span className="font-semibold">Comment</span>
|
||||
<p className="text-neutral-400">
|
||||
{device?.reason_for_blocking}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex flex-col items-start">
|
||||
{device?.user?.name}
|
||||
<span className="text-muted-foreground">
|
||||
{device?.user?.id_card}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{device.mac}</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{device?.vendor}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{!device.has_a_pending_payment && (
|
||||
<BlockDeviceDialog
|
||||
admin={isAdmin}
|
||||
type={device.blocked ? "unblock" : "block"}
|
||||
device={device}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} device.</p>
|
||||
) : (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} devices.
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
{device.blocked_by === "ADMIN" && device.blocked && (
|
||||
<div className="p-2 rounded border my-2 bg-white dark:bg-neutral-800 shadow">
|
||||
<span className="font-semibold">Comment</span>
|
||||
<p className="text-neutral-400">
|
||||
{device?.reason_for_blocking}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
<div className="flex flex-col items-start">
|
||||
{device?.user?.name}
|
||||
<span className="text-muted-foreground">
|
||||
{device?.user?.id_card}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{device.mac}</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{device?.vendor}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{!device.has_a_pending_payment && (
|
||||
<BlockDeviceDialog
|
||||
admin={isAdmin}
|
||||
type={device.blocked ? "unblock" : "block"}
|
||||
device={device}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} device.</p>
|
||||
) : (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} devices.
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,14 +2,13 @@ import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getTopups } from "@/actions/payment";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { tryCatch } from "@/utils/tryCatch";
|
||||
import Pagination from "../pagination";
|
||||
@@ -17,123 +16,122 @@ import { Badge } from "../ui/badge";
|
||||
import { Button } from "../ui/button";
|
||||
|
||||
export async function AdminTopupsTable({
|
||||
searchParams,
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
// Build params object
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, topups] = await tryCatch(getTopups(apiParams, true));
|
||||
const resolvedParams = await searchParams;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
// Build params object
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, topups] = await tryCatch(getTopups(apiParams, true));
|
||||
|
||||
if (error) {
|
||||
if (error.message.includes("Unauthorized")) {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||
}
|
||||
}
|
||||
const { data, meta } = topups;
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||
<h3>No topups yet.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<Table className="overflow-scroll">
|
||||
<TableCaption>Table of all topups.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{topups?.data?.map((topup) => (
|
||||
<TableRow key={topup.id}>
|
||||
<TableCell>
|
||||
<div className="flex flex-col items-start">
|
||||
{topup?.user?.name}
|
||||
<span className="text-muted-foreground">
|
||||
{topup?.user?.id_card}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{topup.paid ? (
|
||||
<Badge
|
||||
className="bg-green-100 dark:bg-green-700"
|
||||
variant="outline"
|
||||
>
|
||||
{topup.status}
|
||||
</Badge>
|
||||
) : topup.is_expired ? (
|
||||
<Badge>Expired</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">{topup.status}</Badge>
|
||||
)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{topup.amount.toFixed(2)}
|
||||
</span>
|
||||
MVR
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={`/top-ups/${topup.id}`}
|
||||
>
|
||||
<Button size={"sm"} variant="outline">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} topup.</p>
|
||||
) : (
|
||||
<p className="text-center">Total {meta?.total} topups.</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
if (error) {
|
||||
if (error.message.includes("Unauthorized")) {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||
}
|
||||
}
|
||||
const { data, meta } = topups;
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||
<h3>No topups yet.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<Table className="overflow-scroll">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{topups?.data?.map((topup) => (
|
||||
<TableRow key={topup.id}>
|
||||
<TableCell>
|
||||
<div className="flex flex-col items-start">
|
||||
{topup?.user?.name}
|
||||
<span className="text-muted-foreground">
|
||||
{topup?.user?.id_card}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{topup.paid ? (
|
||||
<Badge
|
||||
className="bg-green-100 dark:bg-green-700"
|
||||
variant="outline"
|
||||
>
|
||||
{topup.status}
|
||||
</Badge>
|
||||
) : topup.is_expired ? (
|
||||
<Badge>Expired</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">{topup.status}</Badge>
|
||||
)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{topup.amount.toFixed(2)}
|
||||
</span>
|
||||
MVR
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={`/top-ups/${topup.id}`}
|
||||
>
|
||||
<Button size={"sm"} variant="outline">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} topup.</p>
|
||||
) : (
|
||||
<p className="text-center">Total {meta?.total} topups.</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -5,170 +5,168 @@ import Pagination from "@/components/pagination";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { tryCatch } from "@/utils/tryCatch";
|
||||
import ClientErrorMessage from "../client-error-message";
|
||||
|
||||
export async function UsersPaymentsTable({
|
||||
searchParams,
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams;
|
||||
const resolvedParams = await searchParams;
|
||||
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
|
||||
// Build params object for getDevices
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
// Build params object for getDevices
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
|
||||
const [error, payments] = await tryCatch(getPayments(apiParams, true));
|
||||
if (error) {
|
||||
if (error.message === "UNAUTHORIZED") {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
}
|
||||
const { meta, data } = payments;
|
||||
const [error, payments] = await tryCatch(getPayments(apiParams, true));
|
||||
if (error) {
|
||||
if (error.message === "UNAUTHORIZED") {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
}
|
||||
const { meta, data } = payments;
|
||||
|
||||
// return <pre>{JSON.stringify(payments, null, 2)}</pre>;
|
||||
return (
|
||||
<div>
|
||||
{data.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||
<h3>No user payments yet.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Table className="overflow-scroll">
|
||||
<TableCaption>Table of all users.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Devices paid</TableHead>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
<TableHead>Duration</TableHead>
|
||||
<TableHead>Payment Status</TableHead>
|
||||
<TableHead>Payment Method</TableHead>
|
||||
<TableHead>MIB Reference</TableHead>
|
||||
<TableHead>Paid At</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{data.map((payment) => (
|
||||
<TableRow
|
||||
className={`${payment.paid && "title-bg dark:bg-black"}`}
|
||||
key={payment.id}
|
||||
>
|
||||
<TableCell className="font-medium">
|
||||
<ol className="list-disc list-inside text-sm">
|
||||
{payment.devices.map((device) => (
|
||||
<li
|
||||
key={device.id}
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
{device.name}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{/* {payment.user.id_card} */}
|
||||
<div className="flex flex-col items-start">
|
||||
{payment?.user?.name}
|
||||
<span className="text-muted-foreground">
|
||||
{payment?.user?.id_card}
|
||||
</span>
|
||||
</div>{" "}
|
||||
</TableCell>
|
||||
<TableCell>{payment.amount} MVR</TableCell>
|
||||
<TableCell>{payment.number_of_months} Months</TableCell>
|
||||
// return <pre>{JSON.stringify(payments, null, 2)}</pre>;
|
||||
return (
|
||||
<div>
|
||||
{data.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||
<h3>No user payments yet.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Table className="overflow-scroll">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Devices paid</TableHead>
|
||||
<TableHead>User</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
<TableHead>Duration</TableHead>
|
||||
<TableHead>Payment Status</TableHead>
|
||||
<TableHead>Payment Method</TableHead>
|
||||
<TableHead>MIB Reference</TableHead>
|
||||
<TableHead>Paid At</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{data.map((payment) => (
|
||||
<TableRow
|
||||
className={`${payment.paid && "title-bg dark:bg-black"}`}
|
||||
key={payment.id}
|
||||
>
|
||||
<TableCell className="font-medium">
|
||||
<ol className="list-disc list-inside text-sm">
|
||||
{payment.devices.map((device) => (
|
||||
<li
|
||||
key={device.id}
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
{device.name}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">
|
||||
{/* {payment.user.id_card} */}
|
||||
<div className="flex flex-col items-start">
|
||||
{payment?.user?.name}
|
||||
<span className="text-muted-foreground">
|
||||
{payment?.user?.id_card}
|
||||
</span>
|
||||
</div>{" "}
|
||||
</TableCell>
|
||||
<TableCell>{payment.amount} MVR</TableCell>
|
||||
<TableCell>{payment.number_of_months} Months</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{payment.status === "PENDING" ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-yellow-100 text-black"
|
||||
>
|
||||
{payment.status}
|
||||
</Badge>
|
||||
) : payment.status === "PAID" ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-lime-100 text-black"
|
||||
>
|
||||
{payment.status}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-red-100 text-black"
|
||||
>
|
||||
{payment.status}
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{payment.method}</TableCell>
|
||||
<TableCell>{payment.mib_reference}</TableCell>
|
||||
<TableCell>
|
||||
{new Date(payment.paid_at ?? "").toLocaleDateString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
},
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{payment.status === "PENDING" ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-yellow-100 text-black"
|
||||
>
|
||||
{payment.status}
|
||||
</Badge>
|
||||
) : payment.status === "PAID" ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-lime-100 text-black"
|
||||
>
|
||||
{payment.status}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-red-100 text-black"
|
||||
>
|
||||
{payment.status}
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>{payment.method}</TableCell>
|
||||
<TableCell>{payment.mib_reference}</TableCell>
|
||||
<TableCell>
|
||||
{new Date(payment.paid_at ?? "").toLocaleDateString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
},
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<Link href={`/payments/${payment.id}`}>
|
||||
<Button>Details</Button>
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={10} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} payment.</p>
|
||||
) : (
|
||||
<p className="text-center">Total {meta?.total} payments.</p>
|
||||
)}{" "}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
<TableCell>
|
||||
<Link href={`/payments/${payment.id}`}>
|
||||
<Button>Details</Button>
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={10} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} payment.</p>
|
||||
) : (
|
||||
<p className="text-center">Total {meta?.total} payments.</p>
|
||||
)}{" "}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,14 +2,13 @@ import { redirect } from "next/navigation";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { authOptions } from "@/app/auth";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { getDevices } from "@/queries/devices";
|
||||
import { tryCatch } from "@/utils/tryCatch";
|
||||
@@ -19,107 +18,106 @@ import DeviceCard from "./device-card";
|
||||
import Pagination from "./pagination";
|
||||
|
||||
export async function DevicesTable({
|
||||
searchParams,
|
||||
parentalControl,
|
||||
additionalFilters = {},
|
||||
searchParams,
|
||||
parentalControl,
|
||||
additionalFilters = {},
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
parentalControl?: boolean;
|
||||
additionalFilters?: Record<string, string | number | boolean>;
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
parentalControl?: boolean;
|
||||
additionalFilters?: Record<string, string | number | boolean>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams;
|
||||
const session = await getServerSession(authOptions);
|
||||
const isAdmin = session?.user?.is_admin;
|
||||
const resolvedParams = await searchParams;
|
||||
const session = await getServerSession(authOptions);
|
||||
const isAdmin = session?.user?.is_admin;
|
||||
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
|
||||
// Build params object for getDevices
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
// Build params object for getDevices
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
|
||||
for (const [key, value] of Object.entries(additionalFilters)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, devices] = await tryCatch(getDevices(apiParams));
|
||||
if (error) {
|
||||
if (error.message === "UNAUTHORIZED") {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
}
|
||||
const { meta, data } = devices;
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||
<h3>{parentalControl ? "No active devices" : "No devices."}</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="hidden sm:block">
|
||||
<Table className="overflow-scroll">
|
||||
<TableCaption>Table of all devices.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Device Name</TableHead>
|
||||
<TableHead>MAC Address</TableHead>
|
||||
<TableHead>Vendor</TableHead>
|
||||
<TableHead>#</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{data?.map((device) => (
|
||||
<ClickableRow
|
||||
admin={isAdmin}
|
||||
key={device.id}
|
||||
device={device}
|
||||
parentalControl={parentalControl}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} device.</p>
|
||||
) : (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} devices.
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="sm:hidden my-4">
|
||||
{data?.map((device) => (
|
||||
<DeviceCard
|
||||
parentalControl={parentalControl}
|
||||
key={device.id}
|
||||
device={device}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
for (const [key, value] of Object.entries(additionalFilters)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, devices] = await tryCatch(getDevices(apiParams));
|
||||
if (error) {
|
||||
if (error.message === "UNAUTHORIZED") {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
}
|
||||
const { meta, data } = devices;
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||
<h3>{parentalControl ? "No active devices" : "No devices."}</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="hidden sm:block">
|
||||
<Table className="overflow-scroll">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Device Name</TableHead>
|
||||
<TableHead>MAC Address</TableHead>
|
||||
<TableHead>Vendor</TableHead>
|
||||
<TableHead>#</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{data?.map((device) => (
|
||||
<ClickableRow
|
||||
admin={isAdmin}
|
||||
key={device.id}
|
||||
device={device}
|
||||
parentalControl={parentalControl}
|
||||
/>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} device.</p>
|
||||
) : (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} devices.
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="sm:hidden my-4">
|
||||
{data?.map((device) => (
|
||||
<DeviceCard
|
||||
parentalControl={parentalControl}
|
||||
key={device.id}
|
||||
device={device}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,62 +1,63 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Minus, Plus } from "lucide-react";
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
Button,
|
||||
Group,
|
||||
Input,
|
||||
Label,
|
||||
NumberField,
|
||||
Button,
|
||||
Group,
|
||||
Input,
|
||||
Label,
|
||||
NumberField,
|
||||
} from "react-aria-components";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export default function NumberInput({
|
||||
maxAllowed,
|
||||
label,
|
||||
value,
|
||||
onChange,
|
||||
className,
|
||||
isDisabled,
|
||||
maxAllowed,
|
||||
label,
|
||||
value = 100,
|
||||
onChange,
|
||||
className,
|
||||
isDisabled,
|
||||
}: {
|
||||
maxAllowed?: number;
|
||||
label: string;
|
||||
value: number;
|
||||
onChange: (value: number) => void;
|
||||
className?: string;
|
||||
isDisabled?: boolean;
|
||||
maxAllowed?: number;
|
||||
label: string;
|
||||
value?: number;
|
||||
onChange: (value: number) => void;
|
||||
className?: string;
|
||||
isDisabled?: boolean;
|
||||
}) {
|
||||
useEffect(() => {
|
||||
if (maxAllowed) {
|
||||
if (value > maxAllowed) {
|
||||
onChange(maxAllowed);
|
||||
}
|
||||
}
|
||||
}, [maxAllowed, value, onChange]);
|
||||
return (
|
||||
<NumberField
|
||||
isDisabled={isDisabled}
|
||||
className={cn(className)}
|
||||
value={value}
|
||||
minValue={0}
|
||||
onChange={onChange}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium text-foreground">{label}</Label>
|
||||
<Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">
|
||||
<Button
|
||||
slot="decrement"
|
||||
className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Minus size={16} strokeWidth={2} aria-hidden="true" />
|
||||
</Button>
|
||||
<Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
|
||||
<Button
|
||||
slot="increment"
|
||||
className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Plus size={16} strokeWidth={2} aria-hidden="true" />
|
||||
</Button>
|
||||
</Group>
|
||||
</div>
|
||||
</NumberField>
|
||||
);
|
||||
useEffect(() => {
|
||||
if (maxAllowed) {
|
||||
if (value > maxAllowed) {
|
||||
onChange(maxAllowed);
|
||||
}
|
||||
}
|
||||
}, [maxAllowed, value, onChange]);
|
||||
|
||||
return (
|
||||
<NumberField
|
||||
isDisabled={isDisabled}
|
||||
className={cn(className)}
|
||||
value={value}
|
||||
minValue={0}
|
||||
onChange={onChange}
|
||||
>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium text-foreground">{label}</Label>
|
||||
<Group className="relative inline-flex h-9 w-full items-center overflow-hidden whitespace-nowrap rounded-lg border border-input text-sm shadow-sm shadow-black/5 transition-shadow data-[focus-within]:border-ring data-disabled:opacity-50 data-focus-within:outline-none data-focus-within:ring-[3px] data-[focus-within]:ring-ring/20">
|
||||
<Button
|
||||
slot="decrement"
|
||||
className="-ms-px flex aspect-square h-[inherit] items-center justify-center rounded-s-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Minus size={16} strokeWidth={2} aria-hidden="true" />
|
||||
</Button>
|
||||
<Input className="w-full grow bg-background px-3 py-2 text-center text-base tabular-nums text-foreground focus:outline-none" />
|
||||
<Button
|
||||
slot="increment"
|
||||
className="-me-px flex aspect-square h-[inherit] items-center justify-center rounded-e-lg border border-input bg-background text-sm text-muted-foreground/80 transition-shadow hover:bg-accent hover:text-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<Plus size={16} strokeWidth={2} aria-hidden="true" />
|
||||
</Button>
|
||||
</Group>
|
||||
</div>
|
||||
</NumberField>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,109 +1,113 @@
|
||||
"use client";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeftIcon, ArrowRightIcon } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type PaginationProps = {
|
||||
totalPages: number;
|
||||
currentPage: number;
|
||||
maxVisible?: number;
|
||||
totalPages: number;
|
||||
currentPage: number;
|
||||
maxVisible?: number;
|
||||
};
|
||||
|
||||
export default function Pagination({
|
||||
totalPages,
|
||||
currentPage,
|
||||
maxVisible = 4,
|
||||
totalPages,
|
||||
currentPage,
|
||||
maxVisible = 4,
|
||||
}: PaginationProps) {
|
||||
const searchParams = useSearchParams();
|
||||
const activePage = searchParams.get("page") ?? 1;
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const activePage = searchParams.get("page") ?? 1;
|
||||
const router = useRouter();
|
||||
|
||||
const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
|
||||
const [queryParams, setQueryParams] = useState<{ [key: string]: string }>({});
|
||||
|
||||
useEffect(() => {
|
||||
const params = Object.fromEntries(
|
||||
Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
|
||||
);
|
||||
setQueryParams(params);
|
||||
}, [searchParams]);
|
||||
useEffect(() => {
|
||||
const params = Object.fromEntries(
|
||||
Array.from(searchParams.entries()).filter(([key]) => key !== "page"),
|
||||
);
|
||||
setQueryParams(params);
|
||||
}, [searchParams]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!searchParams.has("page")) {
|
||||
router.replace(`?page=1${IncludeQueries()}`);
|
||||
}
|
||||
});
|
||||
useEffect(() => {
|
||||
if (!searchParams.has("page")) {
|
||||
router.replace(`?page=1${IncludeQueries()}`);
|
||||
}
|
||||
});
|
||||
|
||||
function IncludeQueries() {
|
||||
return Object.entries(queryParams)
|
||||
.map(([key, value]) => `&${key}=${value}`)
|
||||
.join("");
|
||||
}
|
||||
function IncludeQueries() {
|
||||
return Object.entries(queryParams)
|
||||
.map(([key, value]) => `&${key}=${value}`)
|
||||
.join("");
|
||||
}
|
||||
|
||||
const generatePageNumbers = (): (number | string)[] => {
|
||||
const halfVisible = Math.floor(maxVisible / 2);
|
||||
let startPage = Math.max(currentPage - halfVisible, 1);
|
||||
const endPage = Math.min(startPage + maxVisible - 1, totalPages);
|
||||
const generatePageNumbers = (): (number | string)[] => {
|
||||
const halfVisible = Math.floor(maxVisible / 2);
|
||||
let startPage = Math.max(currentPage - halfVisible, 1);
|
||||
const endPage = Math.min(startPage + maxVisible - 1, totalPages);
|
||||
|
||||
if (endPage - startPage + 1 < maxVisible) {
|
||||
startPage = Math.max(endPage - maxVisible + 1, 1);
|
||||
}
|
||||
if (endPage - startPage + 1 < maxVisible) {
|
||||
startPage = Math.max(endPage - maxVisible + 1, 1);
|
||||
}
|
||||
|
||||
const pageNumbers: (number | string)[] = [];
|
||||
const pageNumbers: (number | string)[] = [];
|
||||
|
||||
if (startPage > 1) {
|
||||
pageNumbers.push(1);
|
||||
if (startPage > 2) pageNumbers.push("...");
|
||||
}
|
||||
if (startPage > 1) {
|
||||
pageNumbers.push(1);
|
||||
if (startPage > 2) pageNumbers.push("...");
|
||||
}
|
||||
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
for (let i = startPage; i <= endPage; i++) {
|
||||
pageNumbers.push(i);
|
||||
}
|
||||
|
||||
if (endPage < totalPages) {
|
||||
if (endPage < totalPages - 1) pageNumbers.push("...");
|
||||
pageNumbers.push(totalPages);
|
||||
}
|
||||
if (endPage < totalPages) {
|
||||
if (endPage < totalPages - 1) pageNumbers.push("...");
|
||||
pageNumbers.push(totalPages);
|
||||
}
|
||||
|
||||
return pageNumbers;
|
||||
};
|
||||
return pageNumbers;
|
||||
};
|
||||
|
||||
const pageNumbers = generatePageNumbers();
|
||||
const pageNumbers = generatePageNumbers();
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 my-4">
|
||||
{currentPage > 1 && (
|
||||
<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
|
||||
<Button variant="secondary" className="flex items-center gap-2">
|
||||
<ArrowLeftIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
if (totalPages <= 1) {
|
||||
return null;
|
||||
}
|
||||
|
||||
{pageNumbers.map((page) => (
|
||||
<React.Fragment key={`${page}`}>
|
||||
{typeof page === "number" ? (
|
||||
<Link href={`?page=${page}${IncludeQueries()}`}>
|
||||
<Button
|
||||
variant={Number(activePage) === page ? "default" : "outline"}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<span className="px-2">...</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
return (
|
||||
<div className="flex items-center justify-center space-x-2 my-4">
|
||||
{currentPage > 1 && (
|
||||
<Link href={`?page=${Number(currentPage) - 1}${IncludeQueries()}`}>
|
||||
<Button variant="secondary" className="flex items-center gap-2">
|
||||
<ArrowLeftIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{currentPage < totalPages && (
|
||||
<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
|
||||
<Button variant="secondary" className="flex items-center gap-2">
|
||||
<ArrowRightIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
{pageNumbers.map((page) => (
|
||||
<React.Fragment key={`${page}`}>
|
||||
{typeof page === "number" ? (
|
||||
<Link href={`?page=${page}${IncludeQueries()}`}>
|
||||
<Button
|
||||
variant={Number(activePage) === page ? "default" : "outline"}
|
||||
>
|
||||
{page}
|
||||
</Button>
|
||||
</Link>
|
||||
) : (
|
||||
<span className="px-2">...</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
|
||||
{currentPage < totalPages && (
|
||||
<Link href={`?page=${Number(currentPage) + 1}${IncludeQueries()}`}>
|
||||
<Button variant="secondary" className="flex items-center gap-2">
|
||||
<ArrowRightIcon className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,14 +3,13 @@ import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getPayments } from "@/actions/payment";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { Payment } from "@/lib/backend-types";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -21,266 +20,265 @@ import { Button } from "./ui/button";
|
||||
import { Separator } from "./ui/separator";
|
||||
|
||||
export async function PaymentsTable({
|
||||
searchParams,
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, payments] = await tryCatch(getPayments(apiParams));
|
||||
const resolvedParams = await searchParams;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, payments] = await tryCatch(getPayments(apiParams));
|
||||
|
||||
if (error) {
|
||||
if (error.message.includes("Unauthorized")) {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||
}
|
||||
}
|
||||
const { data, meta } = payments;
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||
<h3>No Payments.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="hidden sm:block">
|
||||
<Table className="overflow-scroll">
|
||||
<TableCaption>Table of all devices.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Details</TableHead>
|
||||
<TableHead>Duration</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{payments?.data?.map((payment) => (
|
||||
<TableRow key={payment.id}>
|
||||
<TableCell>
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-start border rounded p-2",
|
||||
payment?.paid
|
||||
? "bg-green-500/10 border-dashed border-green-500"
|
||||
: payment?.is_expired
|
||||
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} opacity={0.5} />
|
||||
<span className="text-muted-foreground">
|
||||
{new Date(payment.created_at).toLocaleDateString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
timeZone: "Indian/Maldives", // Force consistent timezone
|
||||
},
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
if (error) {
|
||||
if (error.message.includes("Unauthorized")) {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||
}
|
||||
}
|
||||
const { data, meta } = payments;
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] text-muted-foreground flex flex-col items-center justify-center my-4">
|
||||
<h3>No Payments.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="hidden sm:block">
|
||||
<Table className="overflow-scroll">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Details</TableHead>
|
||||
<TableHead>Duration</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{payments?.data?.map((payment) => (
|
||||
<TableRow key={payment.id}>
|
||||
<TableCell>
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-start border rounded p-2",
|
||||
payment?.paid
|
||||
? "bg-green-500/10 border-dashed border-green-500"
|
||||
: payment?.is_expired
|
||||
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} opacity={0.5} />
|
||||
<span className="text-muted-foreground">
|
||||
{new Date(payment.created_at).toLocaleDateString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
timeZone: "Indian/Maldives", // Force consistent timezone
|
||||
},
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={`/payments/${payment.id}`}
|
||||
>
|
||||
<Button size={"sm"} variant="outline">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
|
||||
<h3 className="text-sm font-medium">Devices</h3>
|
||||
<ol className="list-disc list-inside text-sm">
|
||||
{payment.devices.map((device) => (
|
||||
<li
|
||||
key={device.id}
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
{device.name}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={`/payments/${payment.id}`}
|
||||
>
|
||||
<Button size={"sm"} variant="outline">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
|
||||
<h3 className="text-sm font-medium">Devices</h3>
|
||||
<ol className="list-disc list-inside text-sm">
|
||||
{payment.devices.map((device) => (
|
||||
<li
|
||||
key={device.id}
|
||||
className="text-sm text-muted-foreground"
|
||||
>
|
||||
{device.name}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="font-medium">
|
||||
{payment.number_of_months} Months
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{payment.paid ? (
|
||||
<Badge
|
||||
className={cn(
|
||||
payment.status === "PENDING"
|
||||
? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
|
||||
: "bg-green-100 dark:bg-green-700",
|
||||
)}
|
||||
variant="outline"
|
||||
>
|
||||
{payment.status}
|
||||
</Badge>
|
||||
) : payment.is_expired ? (
|
||||
<Badge>Expired</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">{payment.status}</Badge>
|
||||
)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{payment.amount.toFixed(2)}
|
||||
</span>
|
||||
MVR
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} payment.
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} payments.
|
||||
</p>
|
||||
)}{" "}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
<Pagination
|
||||
totalPages={meta.last_page}
|
||||
currentPage={meta.current_page}
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:hidden block">
|
||||
{data.map((payment) => (
|
||||
<MobilePaymentDetails key={payment.id} payment={payment} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
<TableCell className="font-medium">
|
||||
{payment.number_of_months} Months
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{payment.paid ? (
|
||||
<Badge
|
||||
className={cn(
|
||||
payment.status === "PENDING"
|
||||
? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
|
||||
: "bg-green-100 dark:bg-green-700",
|
||||
)}
|
||||
variant="outline"
|
||||
>
|
||||
{payment.status}
|
||||
</Badge>
|
||||
) : payment.is_expired ? (
|
||||
<Badge>Expired</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">{payment.status}</Badge>
|
||||
)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{payment.amount.toFixed(2)}
|
||||
</span>
|
||||
MVR
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} payment.
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} payments.
|
||||
</p>
|
||||
)}{" "}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
<Pagination
|
||||
totalPages={meta.last_page}
|
||||
currentPage={meta.current_page}
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:hidden block">
|
||||
{data.map((payment) => (
|
||||
<MobilePaymentDetails key={payment.id} payment={payment} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function MobilePaymentDetails({
|
||||
payment,
|
||||
isAdmin = false,
|
||||
payment,
|
||||
isAdmin = false,
|
||||
}: {
|
||||
payment: Payment;
|
||||
isAdmin?: boolean;
|
||||
payment: Payment;
|
||||
isAdmin?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-start border rounded p-2 my-2",
|
||||
payment?.paid
|
||||
? "bg-green-500/10 border-dashed border-green-500"
|
||||
: payment?.is_expired
|
||||
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} opacity={0.5} />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{new Date(payment.created_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
timeZone: "Indian/Maldives", // Force consistent timezone
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-start border rounded p-2 my-2",
|
||||
payment?.paid
|
||||
? "bg-green-500/10 border-dashed border-green-500"
|
||||
: payment?.is_expired
|
||||
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} opacity={0.5} />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{new Date(payment.created_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
timeZone: "Indian/Maldives", // Force consistent timezone
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={`/payments/${payment.id}`}
|
||||
>
|
||||
<Button size={"sm"} variant="outline">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
|
||||
<h3 className="text-sm font-medium">Devices</h3>
|
||||
<ol className="list-disc list-inside text-sm">
|
||||
{payment.devices.map((device) => (
|
||||
<li key={device.id} className="text-sm text-muted-foreground">
|
||||
{device.name}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<div className="block sm:hidden">
|
||||
<Separator className="my-2" />
|
||||
<h3 className="text-sm font-medium">Duration</h3>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{payment.number_of_months} Months
|
||||
</span>
|
||||
<Separator className="my-2" />
|
||||
<h3 className="text-sm font-medium">Amount</h3>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{payment.amount.toFixed(2)} MVR
|
||||
</span>
|
||||
<span className="font-semibold pr-2">
|
||||
{payment.paid ? (
|
||||
<Badge
|
||||
className={cn(
|
||||
payment.status === "PENDING"
|
||||
? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
|
||||
: "bg-green-100 dark:bg-green-700",
|
||||
)}
|
||||
variant="outline"
|
||||
>
|
||||
{payment.status}
|
||||
</Badge>
|
||||
) : payment.is_expired ? (
|
||||
<Badge>Expired</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">{payment.status}</Badge>
|
||||
)}
|
||||
</span>
|
||||
{isAdmin && (
|
||||
<div className="my-2 text-primary flex flex-col items-start text-sm border rounded p-2 mt-2 w-full bg-white dark:bg-black">
|
||||
{payment?.user?.name}
|
||||
<span className="text-muted-foreground">
|
||||
{payment?.user?.id_card}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={`/payments/${payment.id}`}
|
||||
>
|
||||
<Button size={"sm"} variant="outline">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border">
|
||||
<h3 className="text-sm font-medium">Devices</h3>
|
||||
<ol className="list-disc list-inside text-sm">
|
||||
{payment.devices.map((device) => (
|
||||
<li key={device.id} className="text-sm text-muted-foreground">
|
||||
{device.name}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
<div className="block sm:hidden">
|
||||
<Separator className="my-2" />
|
||||
<h3 className="text-sm font-medium">Duration</h3>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{payment.number_of_months} Months
|
||||
</span>
|
||||
<Separator className="my-2" />
|
||||
<h3 className="text-sm font-medium">Amount</h3>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{payment.amount.toFixed(2)} MVR
|
||||
</span>
|
||||
<span className="font-semibold pr-2">
|
||||
{payment.paid ? (
|
||||
<Badge
|
||||
className={cn(
|
||||
payment.status === "PENDING"
|
||||
? "bg-yellow-100 text-yellow-700 dark:bg-yellow-700 dark:text-yellow-100"
|
||||
: "bg-green-100 dark:bg-green-700",
|
||||
)}
|
||||
variant="outline"
|
||||
>
|
||||
{payment.status}
|
||||
</Badge>
|
||||
) : payment.is_expired ? (
|
||||
<Badge>Expired</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">{payment.status}</Badge>
|
||||
)}
|
||||
</span>
|
||||
{isAdmin && (
|
||||
<div className="my-2 text-primary flex flex-col items-start text-sm border rounded p-2 mt-2 w-full bg-white dark:bg-black">
|
||||
{payment?.user?.name}
|
||||
<span className="text-muted-foreground">
|
||||
{payment?.user?.id_card}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,151 +3,155 @@ import { BadgeDollarSign, Loader2 } from "lucide-react";
|
||||
import { useActionState, useEffect } from "react";
|
||||
import { toast } from "sonner";
|
||||
import {
|
||||
type VerifyTopupPaymentState,
|
||||
verifyTopupPayment,
|
||||
type VerifyTopupPaymentState,
|
||||
verifyTopupPayment,
|
||||
} from "@/actions/payment";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { Topup } from "@/lib/backend-types";
|
||||
import { AccountInfomation } from "./account-information";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
const initialState: VerifyTopupPaymentState = {
|
||||
message: "",
|
||||
success: false,
|
||||
fieldErrors: {},
|
||||
message: "",
|
||||
success: false,
|
||||
fieldErrors: {},
|
||||
};
|
||||
export default function TopupToPay({
|
||||
topup,
|
||||
disabled,
|
||||
topup,
|
||||
disabled,
|
||||
}: {
|
||||
topup?: Topup;
|
||||
disabled?: boolean;
|
||||
topup?: Topup;
|
||||
disabled?: boolean;
|
||||
}) {
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
verifyTopupPayment,
|
||||
initialState,
|
||||
);
|
||||
const [state, formAction, isPending] = useActionState(
|
||||
verifyTopupPayment,
|
||||
initialState,
|
||||
);
|
||||
|
||||
// Handle toast notifications based on state changes
|
||||
useEffect(() => {
|
||||
if (state.success && state.message) {
|
||||
toast.success("Topup successful!", {
|
||||
closeButton: true,
|
||||
description: state.transaction
|
||||
? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
|
||||
: state.message,
|
||||
});
|
||||
} else if (
|
||||
!state.success &&
|
||||
state.message &&
|
||||
state.message !== initialState.message
|
||||
) {
|
||||
toast.error("Topup Payment Verification Failed", {
|
||||
closeButton: true,
|
||||
description: state.message,
|
||||
});
|
||||
}
|
||||
}, [state]);
|
||||
// Handle toast notifications based on state changes
|
||||
useEffect(() => {
|
||||
if (state.success && state.message) {
|
||||
toast.success("Topup successful!", {
|
||||
closeButton: true,
|
||||
description: state.transaction
|
||||
? `Your topup payment has been verified successfully using ${state.transaction.sourceBank} bank transfer on ${state.transaction.trxDate}.`
|
||||
: state.message,
|
||||
});
|
||||
} else if (
|
||||
!state.success &&
|
||||
state.message &&
|
||||
state.message !== initialState.message
|
||||
) {
|
||||
toast.error("Topup Payment Verification Failed", {
|
||||
closeButton: true,
|
||||
description: state.message,
|
||||
});
|
||||
}
|
||||
}, [state]);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
|
||||
<Table>
|
||||
<TableCaption>
|
||||
<div className="max-w-sm mx-auto">
|
||||
<p>Please send the following amount to the payment address</p>
|
||||
<AccountInfomation
|
||||
accName="Baraveli Dev"
|
||||
accountNo="90101400028321000"
|
||||
/>
|
||||
{topup?.paid ? (
|
||||
<Button
|
||||
size={"lg"}
|
||||
variant={"secondary"}
|
||||
disabled
|
||||
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
||||
>
|
||||
Topup Payment Verified
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<form action={formAction}>
|
||||
<input
|
||||
type="hidden"
|
||||
name="topupId"
|
||||
value={topup?.id ?? ""}
|
||||
/>
|
||||
<Button
|
||||
disabled={disabled || isPending}
|
||||
type="submit"
|
||||
size={"lg"}
|
||||
className="mb-4 w-full"
|
||||
>
|
||||
{isPending ? "Processing payment..." : "I have paid"}
|
||||
{isPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<BadgeDollarSign />
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</TableCaption>
|
||||
<TableBody className="">
|
||||
<TableRow>
|
||||
<TableCell>Topup created</TableCell>
|
||||
<TableCell className="text-right text-muted-foreground">
|
||||
{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
second: "2-digit",
|
||||
})}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Payment received</TableCell>
|
||||
<TableCell className="text-right text-sarLinkOrange">
|
||||
{topup?.paid_at
|
||||
? new Date(topup.paid_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
second: "2-digit",
|
||||
})
|
||||
: "-"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>MIB Reference</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{topup?.mib_reference ? topup.mib_reference : "-"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow className="">
|
||||
<TableCell colSpan={1}>Total Due</TableCell>
|
||||
<TableCell className="text-right text-3xl font-bold">
|
||||
{topup?.amount?.toFixed(2)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<div className="w-full">
|
||||
<div className="m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded">
|
||||
<Table>
|
||||
<TableCaption>
|
||||
{!topup?.paid ||
|
||||
topup?.is_expired ||
|
||||
(topup?.status !== "CANCELLED" && (
|
||||
<div className="max-w-sm mx-auto">
|
||||
<p>Please send the following amount to the payment address</p>
|
||||
<AccountInfomation
|
||||
accName="Baraveli Dev"
|
||||
accountNo="90101400028321000"
|
||||
/>
|
||||
{topup?.paid ? (
|
||||
<Button
|
||||
size={"lg"}
|
||||
variant={"secondary"}
|
||||
disabled
|
||||
className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold"
|
||||
>
|
||||
Topup Payment Verified
|
||||
</Button>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
<form action={formAction}>
|
||||
<input
|
||||
type="hidden"
|
||||
name="topupId"
|
||||
value={topup?.id ?? ""}
|
||||
/>
|
||||
<Button
|
||||
disabled={disabled || isPending}
|
||||
type="submit"
|
||||
size={"lg"}
|
||||
className="mb-4 w-full"
|
||||
>
|
||||
{isPending ? "Processing payment..." : "I have paid"}
|
||||
{isPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : (
|
||||
<BadgeDollarSign />
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</TableCaption>
|
||||
<TableBody className="">
|
||||
<TableRow>
|
||||
<TableCell>Topup created</TableCell>
|
||||
<TableCell className="text-right text-muted-foreground">
|
||||
{new Date(topup?.created_at ?? "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
second: "2-digit",
|
||||
})}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>Payment received</TableCell>
|
||||
<TableCell className="text-right text-sarLinkOrange">
|
||||
{topup?.paid_at
|
||||
? new Date(topup.paid_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
second: "2-digit",
|
||||
})
|
||||
: "-"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableCell>MIB Reference</TableCell>
|
||||
<TableCell className="text-right">
|
||||
{topup?.mib_reference ? topup.mib_reference : "-"}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow className="">
|
||||
<TableCell colSpan={1}>Total Due</TableCell>
|
||||
<TableCell className="text-right text-3xl font-bold">
|
||||
{topup?.amount?.toFixed(2)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,14 +3,13 @@ import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getTopups } from "@/actions/payment";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { Topup } from "@/lib/backend-types";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -20,200 +19,199 @@ import { Badge } from "./ui/badge";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
export async function TopupsTable({
|
||||
searchParams,
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
// Build params object
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, topups] = await tryCatch(getTopups(apiParams));
|
||||
const resolvedParams = await searchParams;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
// Build params object
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, topups] = await tryCatch(getTopups(apiParams));
|
||||
|
||||
if (error) {
|
||||
if (error.message.includes("Unauthorized")) {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||
}
|
||||
}
|
||||
const { data, meta } = topups;
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex text-muted-foreground flex-col items-center justify-center my-4">
|
||||
<h3>No topups.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="hidden sm:block">
|
||||
<Table className="overflow-scroll">
|
||||
<TableCaption>Table of all topups.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Details</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{topups?.data?.map((topup) => (
|
||||
<TableRow key={topup.id}>
|
||||
<TableCell>
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-start border rounded p-2",
|
||||
topup?.paid
|
||||
? "bg-green-500/10 border-dashed border-green-500"
|
||||
: topup?.is_expired
|
||||
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} opacity={0.5} />
|
||||
<span className="text-muted-foreground">
|
||||
{new Date(topup.created_at).toLocaleDateString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
},
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
if (error) {
|
||||
if (error.message.includes("Unauthorized")) {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||
}
|
||||
}
|
||||
const { data, meta } = topups;
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex text-muted-foreground flex-col items-center justify-center my-4">
|
||||
<h3>No topups.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="hidden sm:block">
|
||||
<Table className="overflow-scroll">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Details</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{topups?.data?.map((topup) => (
|
||||
<TableRow key={topup.id}>
|
||||
<TableCell>
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-start border rounded p-2",
|
||||
topup?.paid
|
||||
? "bg-green-500/10 border-dashed border-green-500"
|
||||
: topup?.is_expired
|
||||
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
|
||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} opacity={0.5} />
|
||||
<span className="text-muted-foreground">
|
||||
{new Date(topup.created_at).toLocaleDateString(
|
||||
"en-US",
|
||||
{
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
},
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={`/top-ups/${topup.id}`}
|
||||
>
|
||||
<Button size={"sm"} variant="outline">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={`/top-ups/${topup.id}`}
|
||||
>
|
||||
<Button size={"sm"} variant="outline">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{topup.paid ? (
|
||||
<Badge
|
||||
className="bg-green-100 dark:bg-green-700"
|
||||
variant="outline"
|
||||
>
|
||||
{topup.status}
|
||||
</Badge>
|
||||
) : topup.is_expired ? (
|
||||
<Badge>Expired</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">{topup.status}</Badge>
|
||||
)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{topup.amount.toFixed(2)}
|
||||
</span>
|
||||
MVR
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} topup.</p>
|
||||
) : (
|
||||
<p className="text-center">Total {meta?.total} topups.</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="sm:hidden block">
|
||||
{data.map((topup) => (
|
||||
<MobileTopupDetails key={topup.id} topup={topup} />
|
||||
))}
|
||||
</div>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{topup.paid ? (
|
||||
<Badge
|
||||
className="bg-green-100 dark:bg-green-700"
|
||||
variant="outline"
|
||||
>
|
||||
{topup.status}
|
||||
</Badge>
|
||||
) : topup.is_expired ? (
|
||||
<Badge>Expired</Badge>
|
||||
) : (
|
||||
<Badge variant="outline">{topup.status}</Badge>
|
||||
)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{topup.amount.toFixed(2)}
|
||||
</span>
|
||||
MVR
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} topup.</p>
|
||||
) : (
|
||||
<p className="text-center">Total {meta?.total} topups.</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="sm:hidden block">
|
||||
{data.map((topup) => (
|
||||
<MobileTopupDetails key={topup.id} topup={topup} />
|
||||
))}
|
||||
</div>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MobileTopupDetails({ topup }: { topup: Topup }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-start border rounded p-2 my-2",
|
||||
topup?.paid
|
||||
? "bg-green-500/10 border-dashed border-green=500"
|
||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} opacity={0.5} />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{new Date(topup.created_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-start border rounded p-2 my-2",
|
||||
topup?.paid
|
||||
? "bg-green-500/10 border-dashed border-green=500"
|
||||
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} opacity={0.5} />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{new Date(topup.created_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={`/top-ups/${topup.id}`}
|
||||
>
|
||||
<Button size={"sm"} variant="outline">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={`/top-ups/${topup.id}`}
|
||||
>
|
||||
<Button size={"sm"} variant="outline">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
|
||||
<div className="block sm:hidden">
|
||||
<h3 className="text-sm font-medium">Amount</h3>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{topup.amount.toFixed(2)} MVR
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-semibold pr-2">
|
||||
{topup.paid ? (
|
||||
<Badge className="bg-green-100 dark:bg-green-700" variant="outline">
|
||||
{topup.status}
|
||||
</Badge>
|
||||
) : topup.is_expired ? (
|
||||
<Badge>Expired</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">{topup.status}</Badge>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
|
||||
<div className="block sm:hidden">
|
||||
<h3 className="text-sm font-medium">Amount</h3>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{topup.amount.toFixed(2)} MVR
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-semibold pr-2">
|
||||
{topup.paid ? (
|
||||
<Badge className="bg-green-100 dark:bg-green-700" variant="outline">
|
||||
{topup.status}
|
||||
</Badge>
|
||||
) : topup.is_expired ? (
|
||||
<Badge>Expired</Badge>
|
||||
) : (
|
||||
<Badge variant="secondary">{topup.status}</Badge>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,18 +1,3 @@
|
||||
// import {
|
||||
// Table,
|
||||
// TableBody,
|
||||
// TableCaption,
|
||||
// TableCell,
|
||||
// TableFooter,
|
||||
// TableHead,
|
||||
// TableHeader,
|
||||
// TableRow,
|
||||
// } from "@/components/ui/table";
|
||||
// import Link from "next/link";
|
||||
// import Pagination from "./pagination";
|
||||
// import { Badge } from "./ui/badge";
|
||||
// import { Button } from "./ui/button";
|
||||
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { getUsers } from "@/queries/users";
|
||||
@@ -22,136 +7,134 @@ import Pagination from "./pagination";
|
||||
import { Badge } from "./ui/badge";
|
||||
import { Button } from "./ui/button";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "./ui/table";
|
||||
|
||||
export async function UsersTable({
|
||||
searchParams,
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams;
|
||||
const resolvedParams = await searchParams;
|
||||
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, users] = await tryCatch(getUsers(apiParams));
|
||||
if (error) {
|
||||
if (error.message === "UNAUTHORIZED") {
|
||||
redirect("/auth/signin");
|
||||
}
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
const { meta, data } = users;
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, users] = await tryCatch(getUsers(apiParams));
|
||||
if (error) {
|
||||
if (error.message === "UNAUTHORIZED") {
|
||||
redirect("/auth/signin");
|
||||
}
|
||||
return <ClientErrorMessage message={error.message} />;
|
||||
}
|
||||
const { meta, data } = users;
|
||||
|
||||
// return null;
|
||||
return (
|
||||
<div>
|
||||
{users?.data.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||
<h3>No Users yet.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Table className="overflow-scroll">
|
||||
<TableCaption>Table of all users.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>ID Card</TableHead>
|
||||
<TableHead>Atoll</TableHead>
|
||||
<TableHead>Island</TableHead>
|
||||
<TableHead>House Name</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Dob</TableHead>
|
||||
<TableHead>Phone Number</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{data.map((user) => (
|
||||
<TableRow
|
||||
className={`${user.verified && "title-bg dark:bg-black"}`}
|
||||
key={user.id}
|
||||
>
|
||||
<TableCell className="font-medium">
|
||||
{user.first_name} {user.last_name}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{user.id_card}</TableCell>
|
||||
<TableCell>{user.atoll?.name}</TableCell>
|
||||
<TableCell>{user.island?.name}</TableCell>
|
||||
<TableCell>{user.address}</TableCell>
|
||||
// return null;
|
||||
return (
|
||||
<div>
|
||||
{users?.data.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||
<h3>No Users yet.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<Table className="overflow-scroll">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>ID Card</TableHead>
|
||||
<TableHead>Atoll</TableHead>
|
||||
<TableHead>Island</TableHead>
|
||||
<TableHead>House Name</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Dob</TableHead>
|
||||
<TableHead>Phone Number</TableHead>
|
||||
<TableHead>Action</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{data.map((user) => (
|
||||
<TableRow
|
||||
className={`${user.verified && "title-bg dark:bg-black"}`}
|
||||
key={user.id}
|
||||
>
|
||||
<TableCell className="font-medium">
|
||||
{user.first_name} {user.last_name}
|
||||
</TableCell>
|
||||
<TableCell className="font-medium">{user.id_card}</TableCell>
|
||||
<TableCell>{user.atoll?.name}</TableCell>
|
||||
<TableCell>{user.island?.name}</TableCell>
|
||||
<TableCell>{user.address}</TableCell>
|
||||
|
||||
<TableCell>
|
||||
{user.verified ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-lime-100 text-black"
|
||||
>
|
||||
Verified
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-yellow-100 text-black"
|
||||
>
|
||||
Unverified
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{new Date(user.dob ?? "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.verified ? (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-lime-100 text-black"
|
||||
>
|
||||
Verified
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="bg-yellow-100 text-black"
|
||||
>
|
||||
Unverified
|
||||
</Badge>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{new Date(user.dob ?? "").toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
})}
|
||||
</TableCell>
|
||||
|
||||
<TableCell>{user.mobile}</TableCell>
|
||||
<TableCell>
|
||||
<Link href={`/users/${user.id}/details`}>
|
||||
<Button>Details</Button>
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={9}>
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} user.</p>
|
||||
) : (
|
||||
<p className="text-center">Total {meta?.total} users.</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
<TableCell>{user.mobile}</TableCell>
|
||||
<TableCell>
|
||||
<Link href={`/users/${user.id}/details`}>
|
||||
<Button>Details</Button>
|
||||
</Link>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={9}>
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">Total {meta?.total} user.</p>
|
||||
) : (
|
||||
<p className="text-center">Total {meta?.total} users.</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -2,14 +2,13 @@ import { Calendar } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCaption,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import type { WalletTransaction } from "@/lib/backend-types";
|
||||
import { cn } from "@/lib/utils";
|
||||
@@ -20,224 +19,223 @@ import { Badge } from "./ui/badge";
|
||||
import { Button } from "./ui/button";
|
||||
|
||||
export async function WalletTransactionsTable({
|
||||
searchParams,
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
// Build params object
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, transactions] = await tryCatch(
|
||||
getWaleltTransactions(apiParams),
|
||||
);
|
||||
const resolvedParams = await searchParams;
|
||||
const page = Number.parseInt(resolvedParams.page as string) || 1;
|
||||
const limit = 10;
|
||||
const offset = (page - 1) * limit;
|
||||
// Build params object
|
||||
const apiParams: Record<string, string | number | undefined> = {};
|
||||
for (const [key, value] of Object.entries(resolvedParams)) {
|
||||
if (value !== undefined && value !== "") {
|
||||
apiParams[key] = typeof value === "number" ? value : String(value);
|
||||
}
|
||||
}
|
||||
apiParams.limit = limit;
|
||||
apiParams.offset = offset;
|
||||
const [error, transactions] = await tryCatch(
|
||||
getWaleltTransactions(apiParams),
|
||||
);
|
||||
|
||||
if (error) {
|
||||
if (error.message.includes("Unauthorized")) {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||
}
|
||||
}
|
||||
const { data, meta } = transactions;
|
||||
const totalDebit = data.reduce(
|
||||
(acc, trx) => acc + (trx.transaction_type === "DEBIT" ? trx.amount : 0),
|
||||
0,
|
||||
);
|
||||
const totalCredit = data.reduce(
|
||||
(acc, trx) => acc + (trx.transaction_type === "TOPUP" ? trx.amount : 0),
|
||||
0,
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||
<h3>No transactions yet.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="flex gap-4 mb-4 w-full">
|
||||
<div className="bg-red-400 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 p-2 px-4 rounded-md mb-2">
|
||||
<h5 className="text-lg font-semibold">Total Debit</h5>
|
||||
<p>{totalDebit.toFixed(2)} MVR</p>
|
||||
</div>
|
||||
<div className="bg-green-400 w-full sm:w-fit dark:bg-green-950 dark:text-green-400 text-green-900 p-2 px-4 rounded-md mb-2">
|
||||
<h5 className="text-lg font-semibold">Total Credit</h5>
|
||||
<p>{totalCredit.toFixed(2)} MVR</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<Table className="overflow-scroll">
|
||||
<TableCaption>Table of all transactions.</TableCaption>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
<TableHead>Transaction Type</TableHead>
|
||||
<TableHead>View Details</TableHead>
|
||||
<TableHead>Created at</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{transactions?.data?.map((trx) => (
|
||||
<TableRow
|
||||
className={cn(
|
||||
"items-start border rounded p-2",
|
||||
trx?.transaction_type === "TOPUP"
|
||||
? "credit-bg"
|
||||
: "debit-bg",
|
||||
)}
|
||||
key={trx.id}
|
||||
>
|
||||
<TableCell>
|
||||
<span className="text-muted-foreground">
|
||||
{trx.description}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>{trx.amount.toFixed(2)} MVR</TableCell>
|
||||
if (error) {
|
||||
if (error.message.includes("Unauthorized")) {
|
||||
redirect("/auth/signin");
|
||||
} else {
|
||||
return <pre>{JSON.stringify(error, null, 2)}</pre>;
|
||||
}
|
||||
}
|
||||
const { data, meta } = transactions;
|
||||
const totalDebit = data.reduce(
|
||||
(acc, trx) => acc + (trx.transaction_type === "DEBIT" ? trx.amount : 0),
|
||||
0,
|
||||
);
|
||||
const totalCredit = data.reduce(
|
||||
(acc, trx) => acc + (trx.transaction_type === "TOPUP" ? trx.amount : 0),
|
||||
0,
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
{data?.length === 0 ? (
|
||||
<div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
|
||||
<h3>No transactions yet.</h3>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<div className="flex gap-4 mb-4 w-full">
|
||||
<div className="bg-red-400 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 p-2 px-4 rounded-md mb-2">
|
||||
<h5 className="text-lg font-semibold">Total Debit</h5>
|
||||
<p>{totalDebit.toFixed(2)} MVR</p>
|
||||
</div>
|
||||
<div className="bg-green-400 w-full sm:w-fit dark:bg-green-950 dark:text-green-400 text-green-900 p-2 px-4 rounded-md mb-2">
|
||||
<h5 className="text-lg font-semibold">Total Credit</h5>
|
||||
<p>{totalCredit.toFixed(2)} MVR</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<Table className="overflow-scroll">
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Description</TableHead>
|
||||
<TableHead>Amount</TableHead>
|
||||
<TableHead>Transaction Type</TableHead>
|
||||
<TableHead>View Details</TableHead>
|
||||
<TableHead>Created at</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody className="overflow-scroll">
|
||||
{transactions?.data?.map((trx) => (
|
||||
<TableRow
|
||||
className={cn(
|
||||
"items-start border rounded p-2",
|
||||
trx?.transaction_type === "TOPUP"
|
||||
? "credit-bg"
|
||||
: "debit-bg",
|
||||
)}
|
||||
key={trx.id}
|
||||
>
|
||||
<TableCell>
|
||||
<span className="text-muted-foreground">
|
||||
{trx.description}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>{trx.amount.toFixed(2)} MVR</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{trx.transaction_type === "TOPUP" ? (
|
||||
<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
|
||||
{trx.transaction_type}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
|
||||
{trx.transaction_type}
|
||||
</Badge>
|
||||
)}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="font-semibold pr-2">
|
||||
{trx.transaction_type === "TOPUP" ? (
|
||||
<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
|
||||
{trx.transaction_type}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
|
||||
{trx.transaction_type}
|
||||
</Badge>
|
||||
)}
|
||||
</span>
|
||||
</TableCell>
|
||||
|
||||
<TableCell>
|
||||
<span className="">
|
||||
{new Date(trx.created_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button>
|
||||
<Link
|
||||
className="font-medium "
|
||||
href={
|
||||
trx.transaction_type === "TOPUP"
|
||||
? `/top-ups/${trx.reference_id}`
|
||||
: `/payments/${trx.reference_id}`
|
||||
}
|
||||
>
|
||||
View Details
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} transaction.
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} transactions.
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="sm:hidden block">
|
||||
{data.map((trx) => (
|
||||
<MobileTransactionDetails key={trx.id} trx={trx} />
|
||||
))}
|
||||
</div>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
<TableCell>
|
||||
<span className="">
|
||||
{new Date(trx.created_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Button>
|
||||
<Link
|
||||
className="font-medium "
|
||||
href={
|
||||
trx.transaction_type === "TOPUP"
|
||||
? `/top-ups/${trx.reference_id}`
|
||||
: `/payments/${trx.reference_id}`
|
||||
}
|
||||
>
|
||||
View Details
|
||||
</Link>
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
<TableFooter>
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-muted-foreground">
|
||||
{meta?.total === 1 ? (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} transaction.
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-center">
|
||||
Total {meta?.total} transactions.
|
||||
</p>
|
||||
)}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
<div className="sm:hidden block">
|
||||
{data.map((trx) => (
|
||||
<MobileTransactionDetails key={trx.id} trx={trx} />
|
||||
))}
|
||||
</div>
|
||||
<Pagination
|
||||
totalPages={meta?.last_page}
|
||||
currentPage={meta?.current_page}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MobileTransactionDetails({ trx }: { trx: WalletTransaction }) {
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-start border rounded p-2 my-2",
|
||||
trx?.transaction_type === "TOPUP" ? "credit-bg" : "debit-bg",
|
||||
)}
|
||||
>
|
||||
<div className="bg-white shadow dark:bg-black p-2 rounded w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} opacity={0.5} />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{new Date(trx.created_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground py-4">{trx.description}</p>
|
||||
</div>
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"flex flex-col items-start border rounded p-2 my-2",
|
||||
trx?.transaction_type === "TOPUP" ? "credit-bg" : "debit-bg",
|
||||
)}
|
||||
>
|
||||
<div className="bg-white shadow dark:bg-black p-2 rounded w-full">
|
||||
<div className="flex items-center gap-2">
|
||||
<Calendar size={16} opacity={0.5} />
|
||||
<span className="text-muted-foreground text-sm">
|
||||
{new Date(trx.created_at).toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "2-digit",
|
||||
year: "numeric",
|
||||
minute: "2-digit",
|
||||
hour: "2-digit",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground py-4">{trx.description}</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
|
||||
<div className="block sm:hidden">
|
||||
<h3 className="text-sm font-medium">Amount</h3>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{trx.amount.toFixed(2)} MVR
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-semibold pr-2">
|
||||
{trx.transaction_type === "TOPUP" ? (
|
||||
<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
|
||||
{trx.transaction_type}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
|
||||
{trx.transaction_type}
|
||||
</Badge>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2 w-full">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={
|
||||
trx.transaction_type === "TOPUP"
|
||||
? `/top-ups/${trx.reference_id}`
|
||||
: `/payments/${trx.reference_id}`
|
||||
}
|
||||
>
|
||||
<Button size={"sm"} className="w-full">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="bg-white dark:bg-black p-2 rounded mt-2 w-full border flex justify-between items-center">
|
||||
<div className="block sm:hidden">
|
||||
<h3 className="text-sm font-medium">Amount</h3>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{trx.amount.toFixed(2)} MVR
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-semibold pr-2">
|
||||
{trx.transaction_type === "TOPUP" ? (
|
||||
<Badge className="bg-green-100 text-green-950 dark:bg-green-700">
|
||||
{trx.transaction_type}
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge className="bg-red-500 text-red-950 dark:bg-red-700">
|
||||
{trx.transaction_type}
|
||||
</Badge>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2 w-full">
|
||||
<Link
|
||||
className="font-medium hover:underline"
|
||||
href={
|
||||
trx.transaction_type === "TOPUP"
|
||||
? `/top-ups/${trx.reference_id}`
|
||||
: `/payments/${trx.reference_id}`
|
||||
}
|
||||
>
|
||||
<Button size={"sm"} className="w-full">
|
||||
View Details
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,101 +7,100 @@ import { toast } from "sonner";
|
||||
import { createTopup } from "@/actions/payment";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerFooter,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "@/components/ui/drawer";
|
||||
import { WalletDrawerOpenAtom, walletTopUpValue } from "@/lib/atoms";
|
||||
import type { TopupType } from "@/lib/types";
|
||||
import NumberInput from "./number-input";
|
||||
|
||||
export function Wallet({ walletBalance }: { walletBalance: number }) {
|
||||
const pathname = usePathname();
|
||||
const [amount, setAmount] = useAtom(walletTopUpValue);
|
||||
const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [amount, setAmount] = useAtom(walletTopUpValue);
|
||||
const [isOpen, setIsOpen] = useAtom(WalletDrawerOpenAtom);
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
if (pathname === "/payment") {
|
||||
return null;
|
||||
}
|
||||
if (pathname === "/payment") {
|
||||
return null;
|
||||
}
|
||||
|
||||
const data: TopupType = {
|
||||
amount: Number.parseFloat(amount.toFixed(2)),
|
||||
};
|
||||
const data: TopupType = {
|
||||
amount: Number.parseFloat(amount.toFixed(2)),
|
||||
};
|
||||
|
||||
return (
|
||||
<Drawer open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DrawerTrigger asChild>
|
||||
<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
|
||||
{walletBalance}{" "}
|
||||
MVR
|
||||
<Wallet2 />
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<div className="mx-auto w-full max-w-sm">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Wallet</DrawerTitle>
|
||||
<DrawerDescription asChild>
|
||||
<div>
|
||||
Your wallet balance is{" "}
|
||||
<span className="font-semibold">
|
||||
{new Intl.NumberFormat("en-US", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(walletBalance)}
|
||||
</span>{" "}
|
||||
</div>
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
return (
|
||||
<Drawer open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DrawerTrigger asChild>
|
||||
<Button onClick={() => setIsOpen(!isOpen)} variant="outline">
|
||||
{walletBalance} MVR
|
||||
<Wallet2 />
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<div className="mx-auto w-full max-w-sm">
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Wallet</DrawerTitle>
|
||||
<DrawerDescription asChild>
|
||||
<div>
|
||||
Your wallet balance is{" "}
|
||||
<span className="font-semibold">
|
||||
{new Intl.NumberFormat("en-US", {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2,
|
||||
}).format(walletBalance)}
|
||||
</span>{" "}
|
||||
</div>
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
|
||||
<div className="px-4 flex flex-col gap-4">
|
||||
<NumberInput
|
||||
label="Set amount to top up"
|
||||
value={amount}
|
||||
onChange={(value) => setAmount(value)}
|
||||
maxAllowed={5000}
|
||||
isDisabled={amount === 0}
|
||||
/>
|
||||
</div>
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
console.log(data);
|
||||
setDisabled(true);
|
||||
const topup = await createTopup(data);
|
||||
setDisabled(false);
|
||||
if (topup) {
|
||||
router.push(`/top-ups/${topup.id}`);
|
||||
setIsOpen(!isOpen);
|
||||
} else {
|
||||
toast.error("Something went wrong.");
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
disabled={amount === 0 || disabled}
|
||||
>
|
||||
{disabled ? (
|
||||
<Loader2 className="ml-2 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
Go to payment
|
||||
<CircleDollarSign />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
<div className="px-4 flex flex-col gap-4">
|
||||
<NumberInput
|
||||
label="Set amount to top up"
|
||||
value={amount}
|
||||
onChange={(value) => setAmount(value)}
|
||||
maxAllowed={5000}
|
||||
isDisabled={amount === 0}
|
||||
/>
|
||||
</div>
|
||||
<DrawerFooter>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
console.log(data);
|
||||
setDisabled(true);
|
||||
const topup = await createTopup(data);
|
||||
setDisabled(false);
|
||||
if (topup) {
|
||||
router.push(`/top-ups/${topup.id}`);
|
||||
setIsOpen(!isOpen);
|
||||
} else {
|
||||
toast.error("Something went wrong.");
|
||||
}
|
||||
}}
|
||||
className="w-full"
|
||||
disabled={amount === 0 || disabled}
|
||||
>
|
||||
{disabled ? (
|
||||
<Loader2 className="ml-2 animate-spin" />
|
||||
) : (
|
||||
<>
|
||||
Go to payment
|
||||
<CircleDollarSign />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<DrawerClose asChild>
|
||||
<Button variant="outline">Cancel</Button>
|
||||
</DrawerClose>
|
||||
</DrawerFooter>
|
||||
</div>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
22
lib/atoms.ts
22
lib/atoms.ts
@@ -10,7 +10,7 @@ export const discountPercentageAtom = atom(75);
|
||||
export const numberOfDevicesAtom = atom(1);
|
||||
export const numberOfDaysAtom = atom(30);
|
||||
export const numberOfMonths = atom(1);
|
||||
export const walletTopUpValue = atom(1);
|
||||
export const walletTopUpValue = atom(100);
|
||||
export const formulaResultAtom = atom("");
|
||||
export const deviceCartAtom = atom<Device[]>([]);
|
||||
export const cartDrawerOpenAtom = atom(false);
|
||||
@@ -19,14 +19,14 @@ export const loadingDevicesToPayAtom = atom(false);
|
||||
|
||||
// Export the atoms with their store
|
||||
export const atoms = {
|
||||
initialPriceAtom,
|
||||
discountPercentageAtom,
|
||||
numberOfDevicesAtom,
|
||||
numberOfDaysAtom,
|
||||
numberOfMonths,
|
||||
formulaResultAtom,
|
||||
deviceCartAtom,
|
||||
cartDrawerOpenAtom,
|
||||
walletTopUpValue,
|
||||
loadingDevicesToPayAtom,
|
||||
initialPriceAtom,
|
||||
discountPercentageAtom,
|
||||
numberOfDevicesAtom,
|
||||
numberOfDaysAtom,
|
||||
numberOfMonths,
|
||||
formulaResultAtom,
|
||||
deviceCartAtom,
|
||||
cartDrawerOpenAtom,
|
||||
walletTopUpValue,
|
||||
loadingDevicesToPayAtom,
|
||||
};
|
||||
|
||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "sarlink-portal",
|
||||
"version": "0.2.1",
|
||||
"version": "0.2.2",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "sarlink-portal",
|
||||
"version": "0.2.1",
|
||||
"version": "0.2.2",
|
||||
"dependencies": {
|
||||
"@commitlint/cli": "^19.8.1",
|
||||
"@commitlint/config-conventional": "^19.8.1",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "sarlink-portal",
|
||||
"version": "0.2.1",
|
||||
"version": "0.2.2",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
|
||||
Reference in New Issue
Block a user