add admin checks for admin pages and run biome formating 🔨

app/(auth)/auth/layout.tsx

@@ -1,7 +1,8 @@
-
 export default function AuthLayout({
 	children,
-}: { children: React.ReactNode }) {
+}: {
+	children: React.ReactNode;
+}) {
 	return (
 		<div className="bg-gray-100 dark:bg-black w-full h-screen flex items-center justify-center font-sans">
 			{children}

app/(auth)/auth/verify-otp-registration/page.tsx

@@ -11,7 +11,7 @@ export default async function VerifyRegistrationOTP({
 }: {
 	searchParams: Promise<{ phone_number: string }>;
 }) {
-	const session = await getServerSession(authOptions)
+	const session = await getServerSession(authOptions);
 	if (session) {
 		// If the user is already logged in, redirect them to the home page
 		return redirect("/");

app/(dashboard)/agreements/page.tsx

@@ -1,13 +1,11 @@
-import React from 'react'
+import React from "react";
 
 export default function Agreements() {
-  return (
-    <div>
-      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">
-          Agreements
-        </h3>
-      </div>
-    </div>
-  )
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">Agreements</h3>
+			</div>
+		</div>
+	);
 }

app/(dashboard)/devices-to-pay/loading.tsx

@@ -1,8 +1,6 @@
-import FullPageLoader from '@/components/full-page-loader'
-import React from 'react'
+import FullPageLoader from "@/components/full-page-loader";
+import React from "react";
 
 export default function Loading() {
-  return (
-    <FullPageLoader />
-  )
+	return <FullPageLoader />;
 }

app/(dashboard)/devices/page.tsx

@@ -49,7 +49,7 @@ export default async function Devices({
 							label: "Vendor",
 							type: "string",
 							placeholder: "Enter vendor name",
-						}
+						},
 					]}
 				/>
 			</div>

app/(dashboard)/layout.tsx

@@ -6,9 +6,9 @@ export default function DashboardLayout({
 }: Readonly<{
 	children: React.ReactNode;
 }>) {
-	return <ApplicationLayout>
-		<QueryProvider>
-			{children}
-		</QueryProvider>
-	</ApplicationLayout>;
+	return (
+		<ApplicationLayout>
+			<QueryProvider>{children}</QueryProvider>
+		</ApplicationLayout>
+	);
 }

app/(dashboard)/parental-control/page.tsx

@@ -3,61 +3,61 @@ import { DevicesTable } from "@/components/devices-table";
 import DynamicFilter from "@/components/generic-filter";
 
 export default async function ParentalControl({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    page: number;
-    sortBy: string;
-    status: string;
-  }>;
+	searchParams: Promise<{
+		page: number;
+		sortBy: string;
+		status: string;
+	}>;
 }) {
+	const parentalControlFilters = {
+		is_active: "true",
+		has_a_pending_payment: "false",
+	};
 
-  const parentalControlFilters = {
-    is_active: "true",
-    has_a_pending_payment: "false",
-  };
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">Parental Control</h3>
+			</div>
 
-  return (
-    <div>
-      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">Parental Control</h3>
-      </div>
-
-      <div
-        id="user-filters"
-        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-      >
-        <DynamicFilter
-          description="Filter devices by name, MAC address, or vendor."
-          title="Device Filter"
-          inputs={[
-            {
-              name: "name",
-              label: "Device Name",
-              type: "string",
-              placeholder: "Enter device name",
-            },
-            {
-              name: "mac",
-              label: "MAC Address",
-              type: "string",
-              placeholder: "Enter MAC address",
-            },
-            {
-              name: "vendor",
-              label: "Vendor",
-              type: "string",
-              placeholder: "Enter vendor name",
-            }
-          ]}
-        />      </div>
-      <Suspense key={(await searchParams).page} fallback={"loading...."}>
-        <DevicesTable
-          parentalControl={true}
-          searchParams={searchParams}
-          additionalFilters={parentalControlFilters}
-        />
-      </Suspense>
-    </div>
-  );
+			<div
+				id="user-filters"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+			>
+				<DynamicFilter
+					description="Filter devices by name, MAC address, or vendor."
+					title="Device Filter"
+					inputs={[
+						{
+							name: "name",
+							label: "Device Name",
+							type: "string",
+							placeholder: "Enter device name",
+						},
+						{
+							name: "mac",
+							label: "MAC Address",
+							type: "string",
+							placeholder: "Enter MAC address",
+						},
+						{
+							name: "vendor",
+							label: "Vendor",
+							type: "string",
+							placeholder: "Enter vendor name",
+						},
+					]}
+				/>{" "}
+			</div>
+			<Suspense key={(await searchParams).page} fallback={"loading...."}>
+				<DevicesTable
+					parentalControl={true}
+					searchParams={searchParams}
+					additionalFilters={parentalControlFilters}
+				/>
+			</Suspense>
+		</div>
+	);
 }

app/(dashboard)/payments/[paymentId]/page.tsx

@@ -31,19 +31,21 @@ export default async function PaymentPage({
 			<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">Payment</h3>
 				<div className="flex flex-col gap-4 items-end w-full">
-					{!payment.is_expired && payment.paid && payment.status !== "PENDING" && (
-						<Button
-							disabled
-							className={cn(
-								"rounded-md opacity-100! uppercase font-semibold",
-								payment?.paid
-									? "text-green-900 bg-green-500/20"
-									: "text-inherit bg-yellow-400",
-							)}
-						>
-							{payment.status}
-						</Button>
-					)}
+					{!payment.is_expired &&
+						payment.paid &&
+						payment.status !== "PENDING" && (
+							<Button
+								disabled
+								className={cn(
+									"rounded-md opacity-100! uppercase font-semibold",
+									payment?.paid
+										? "text-green-900 bg-green-500/20"
+										: "text-inherit bg-yellow-400",
+								)}
+							>
+								{payment.status}
+							</Button>
+						)}
 					{payment.status === "PENDING" && !payment.is_expired && (
 						<Button>
 							<TextShimmer>Payment Pending</TextShimmer>{" "}

app/(dashboard)/price-calculator/page.tsx

@@ -1,8 +1,6 @@
-import PriceCalculator from '@/components/price-calculator'
-import React from 'react'
+import PriceCalculator from "@/components/price-calculator";
+import React from "react";
 
 export default function Pricing() {
-  return (
-    <PriceCalculator />
-  )
+	return <PriceCalculator />;
 }

app/(dashboard)/profile/page.tsx

@@ -8,88 +8,88 @@ import { getProfileById } from "@/queries/users";
 import { tryCatch } from "@/utils/tryCatch";
 
 export default async function Profile() {
-  const session = await getServerSession(authOptions);
-  if (!session?.user) return redirect("/auth/signin?callbackUrl=/profile");
-  const [error, profile] = await tryCatch(getProfileById(session?.user.id));
-  if (error) {
-    if (error.message === "Invalid token.") redirect("/auth/signin");
-    return <ClientErrorMessage message={error.message} />;
-  }
-  return (
-    <div>
-      <div className="flex justify-between items-center font-bold border rounded-md border-dashed title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">Profile</h3>
-        <div className="text-sarLinkOrange uppercase font-mono text-sm flex flex-col items-center rounded gap-2 py-2 px-4">
-          <span>Profile Status</span>
-          {verifiedStatus(profile?.verified ?? false)}
-        </div>
-      </div>
-      <fieldset>
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl">
-          <FloatingLabelInput
-            id="floating-name"
-            label="Full Name"
-            value={`${profile?.first_name} ${profile?.last_name}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-id-card"
-            label="ID Card"
-            value={`${profile?.id_card}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-island"
-            label="Island"
-            value={`${profile?.atoll.name}. ${profile?.island.name}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-dob"
-            label="Date of Birth"
-            value={`${new Date(
-              profile?.dob.toString() ?? "",
-            ).toLocaleDateString("en-US", {
-              month: "short",
-              day: "2-digit",
-              year: "numeric",
-            })}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-address"
-            label="Address"
-            value={`${profile?.address}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-mobile"
-            label="Phone Number"
-            value={`${profile?.mobile}`}
-            readOnly
-          />
-          <FloatingLabelInput
-            id="floating-account"
-            label="Account Number"
-            value={`${profile?.acc_no}`}
-            readOnly
-          />
-        </div>
-      </fieldset>
-      {/* <Suspense key={query} fallback={"loading...."}>
+	const session = await getServerSession(authOptions);
+	if (!session?.user) return redirect("/auth/signin?callbackUrl=/profile");
+	const [error, profile] = await tryCatch(getProfileById(session?.user.id));
+	if (error) {
+		if (error.message === "Invalid token.") redirect("/auth/signin");
+		return <ClientErrorMessage message={error.message} />;
+	}
+	return (
+		<div>
+			<div className="flex justify-between items-center font-bold border rounded-md border-dashed title-bg py-4 px-2 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">Profile</h3>
+				<div className="text-sarLinkOrange uppercase font-mono text-sm flex flex-col items-center rounded gap-2 py-2 px-4">
+					<span>Profile Status</span>
+					{verifiedStatus(profile?.verified ?? false)}
+				</div>
+			</div>
+			<fieldset>
+				<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 max-w-4xl">
+					<FloatingLabelInput
+						id="floating-name"
+						label="Full Name"
+						value={`${profile?.first_name} ${profile?.last_name}`}
+						readOnly
+					/>
+					<FloatingLabelInput
+						id="floating-id-card"
+						label="ID Card"
+						value={`${profile?.id_card}`}
+						readOnly
+					/>
+					<FloatingLabelInput
+						id="floating-island"
+						label="Island"
+						value={`${profile?.atoll.name}. ${profile?.island.name}`}
+						readOnly
+					/>
+					<FloatingLabelInput
+						id="floating-dob"
+						label="Date of Birth"
+						value={`${new Date(
+							profile?.dob.toString() ?? "",
+						).toLocaleDateString("en-US", {
+							month: "short",
+							day: "2-digit",
+							year: "numeric",
+						})}`}
+						readOnly
+					/>
+					<FloatingLabelInput
+						id="floating-address"
+						label="Address"
+						value={`${profile?.address}`}
+						readOnly
+					/>
+					<FloatingLabelInput
+						id="floating-mobile"
+						label="Phone Number"
+						value={`${profile?.mobile}`}
+						readOnly
+					/>
+					<FloatingLabelInput
+						id="floating-account"
+						label="Account Number"
+						value={`${profile?.acc_no}`}
+						readOnly
+					/>
+				</div>
+			</fieldset>
+			{/* <Suspense key={query} fallback={"loading...."}>
         <TopupsTable searchParams={searchParams} />
       </Suspense> */}
-    </div>
-  );
+		</div>
+	);
 }
 
 function verifiedStatus(status: boolean) {
-  switch (status) {
-    case true:
-      return <Badge className="bg-green-500 text-white">Verified</Badge>;
-    case false:
-      return <Badge className="bg-red-500 text-white">Not Verified</Badge>;
-    default:
-      return <Badge className="bg-yellow-500 text-white">Unknown</Badge>;
-  }
+	switch (status) {
+		case true:
+			return <Badge className="bg-green-500 text-white">Verified</Badge>;
+		case false:
+			return <Badge className="bg-red-500 text-white">Not Verified</Badge>;
+		default:
+			return <Badge className="bg-yellow-500 text-white">Unknown</Badge>;
+	}
 }

app/(dashboard)/top-ups/[topupId]/page.tsx

@@ -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>
+	);
 }

app/(dashboard)/top-ups/page.tsx

@@ -3,84 +3,84 @@ import DynamicFilter from "@/components/generic-filter";
 import { TopupsTable } from "@/components/topups-table";
 
 export default async function Topups({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    query: string;
-    page: number;
-    sortBy: string;
-    status: string;
-  }>;
+	searchParams: Promise<{
+		query: string;
+		page: number;
+		sortBy: string;
+		status: string;
+	}>;
 }) {
-  const query = (await searchParams)?.query || "";
+	const query = (await searchParams)?.query || "";
 
-  return (
-    <div>
-      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">My Topups</h3>
-      </div>
-      <div
-        id="topup-filters"
-        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-      >
-        <DynamicFilter
-          inputs={[
-            {
-              label: "Status",
-              name: "status",
-              type: "radio-group",
-              options: [
-                {
-                  label: "All",
-                  value: "",
-                },
-                {
-                  label: "Pending",
-                  value: "PENDING",
-                },
-                {
-                  label: "Cancelled",
-                  value: "CANCELLED",
-                },
-                {
-                  label: "Paid",
-                  value: "PAID",
-                },
-              ],
-            },
-            {
-              label: "Topup Expiry",
-              name: "is_expired",
-              type: "radio-group",
-              options: [
-                {
-                  label: "All",
-                  value: "",
-                },
-                {
-                  label: "Expired",
-                  value: "true",
-                },
-                {
-                  label: "Not Expired",
-                  value: "false",
-                },
-              ],
-            },
-            {
-              label: "Topup Amount",
-              name: "amount",
-              type: "dual-range-slider",
-              min: 0,
-              max: 1000,
-              step: 10,
-            },
-          ]}
-        />
-      </div>
-      <Suspense key={query} fallback={"loading...."}>
-        <TopupsTable searchParams={searchParams} />
-      </Suspense>
-    </div>
-  );
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">My Topups</h3>
+			</div>
+			<div
+				id="topup-filters"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+			>
+				<DynamicFilter
+					inputs={[
+						{
+							label: "Status",
+							name: "status",
+							type: "radio-group",
+							options: [
+								{
+									label: "All",
+									value: "",
+								},
+								{
+									label: "Pending",
+									value: "PENDING",
+								},
+								{
+									label: "Cancelled",
+									value: "CANCELLED",
+								},
+								{
+									label: "Paid",
+									value: "PAID",
+								},
+							],
+						},
+						{
+							label: "Topup Expiry",
+							name: "is_expired",
+							type: "radio-group",
+							options: [
+								{
+									label: "All",
+									value: "",
+								},
+								{
+									label: "Expired",
+									value: "true",
+								},
+								{
+									label: "Not Expired",
+									value: "false",
+								},
+							],
+						},
+						{
+							label: "Topup Amount",
+							name: "amount",
+							type: "dual-range-slider",
+							min: 0,
+							max: 1000,
+							step: 10,
+						},
+					]}
+				/>
+			</div>
+			<Suspense key={query} fallback={"loading...."}>
+				<TopupsTable searchParams={searchParams} />
+			</Suspense>
+		</div>
+	);
 }

app/(dashboard)/user-devices/page.tsx

@@ -17,7 +17,7 @@ export default async function UserDevices({
 }) {
 	const query = (await searchParams)?.query || "";
 	const session = await getServerSession(authOptions);
-	if (session?.user?.is_admin !== true) redirect("/devices?page=1");
+	if (!session?.user?.is_admin) redirect("/devices?page=1");
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
@@ -55,7 +55,7 @@ export default async function UserDevices({
 							label: "Device User",
 							type: "string",
 							placeholder: "User name or id card",
-						}
+						},
 					]}
 				/>
 			</div>

app/(dashboard)/user-payments/page.tsx

@@ -1,4 +1,7 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
 import { Suspense } from "react";
+import { authOptions } from "@/app/auth";
 import { UsersPaymentsTable } from "@/components/admin/user-payments-table";
 import DynamicFilter from "@/components/generic-filter";
 
@@ -13,7 +16,9 @@ export default async function UserPayments({
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
-	// const session = await getServerSession(authOptions);
+	const session = await getServerSession(authOptions);
+	if (!session?.user?.is_admin) redirect("/payments?page=1");
+
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
@@ -70,9 +75,8 @@ export default async function UserPayments({
 							{ label: "All", value: "" },
 							{ label: "Wallet", value: "WALLET" },
 							{ label: "Transfer", value: "TRANSFER" },
-						]
+						],
 					},
-
 				]}
 			/>
 			<Suspense key={query} fallback={"loading...."}>

app/(dashboard)/user-topups/page.tsx

@@ -1,86 +1,90 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
 import { Suspense } from "react";
+import { authOptions } from "@/app/auth";
 import { AdminTopupsTable } from "@/components/admin/admin-topup-table";
 import DynamicFilter from "@/components/generic-filter";
 
 export default async function UserTopups({
-  searchParams,
+	searchParams,
 }: {
-  searchParams: Promise<{
-    [key: string]: string;
-  }>;
+	searchParams: Promise<{
+		[key: string]: string;
+	}>;
 }) {
-  const query = (await searchParams)?.query || "";
-  // const session = await getServerSession(authOptions);
-  return (
-    <div>
-      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">User Topups</h3>
-      </div>
-      <DynamicFilter
-        title="User Topups Filter"
-        description="Filter user topups by status, topup expiry, or amount."
-        inputs={[
-          {
-            name: "user",
-            label: "User",
-            type: "string",
-            placeholder: "Enter user name",
-          },
-          {
-            label: "Status",
-            name: "status",
-            type: "radio-group",
-            options: [
-              {
-                label: "All",
-                value: "",
-              },
-              {
-                label: "Pending",
-                value: "PENDING",
-              },
-              {
-                label: "Cancelled",
-                value: "CANCELLED",
-              },
-              {
-                label: "Paid",
-                value: "PAID",
-              },
-            ],
-          },
-          {
-            label: "Topup Expiry",
-            name: "is_expired",
-            type: "radio-group",
-            options: [
-              {
-                label: "All",
-                value: "",
-              },
-              {
-                label: "Expired",
-                value: "true",
-              },
-              {
-                label: "Not Expired",
-                value: "false",
-              },
-            ],
-          },
-          {
-            label: "Topup Amount",
-            name: "amount",
-            type: "dual-range-slider",
-            min: 0,
-            max: 1000,
-            step: 10,
-          },
-        ]}
-      />
-      <Suspense key={query} fallback={"loading...."}>
-        <AdminTopupsTable searchParams={searchParams} />
-      </Suspense>
-    </div>
-  );
+	const query = (await searchParams)?.query || "";
+	const session = await getServerSession(authOptions);
+	if (!session?.user?.is_admin) redirect("/top-ups?page=1");
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">User Topups</h3>
+			</div>
+			<DynamicFilter
+				title="User Topups Filter"
+				description="Filter user topups by status, topup expiry, or amount."
+				inputs={[
+					{
+						name: "user",
+						label: "User",
+						type: "string",
+						placeholder: "Enter user name",
+					},
+					{
+						label: "Status",
+						name: "status",
+						type: "radio-group",
+						options: [
+							{
+								label: "All",
+								value: "",
+							},
+							{
+								label: "Pending",
+								value: "PENDING",
+							},
+							{
+								label: "Cancelled",
+								value: "CANCELLED",
+							},
+							{
+								label: "Paid",
+								value: "PAID",
+							},
+						],
+					},
+					{
+						label: "Topup Expiry",
+						name: "is_expired",
+						type: "radio-group",
+						options: [
+							{
+								label: "All",
+								value: "",
+							},
+							{
+								label: "Expired",
+								value: "true",
+							},
+							{
+								label: "Not Expired",
+								value: "false",
+							},
+						],
+					},
+					{
+						label: "Topup Amount",
+						name: "amount",
+						type: "dual-range-slider",
+						min: 0,
+						max: 1000,
+						step: 10,
+					},
+				]}
+			/>
+			<Suspense key={query} fallback={"loading...."}>
+				<AdminTopupsTable searchParams={searchParams} />
+			</Suspense>
+		</div>
+	);
 }

app/(dashboard)/users/[userId]/agreement/page.tsx

@@ -16,32 +16,33 @@ import { tryCatch } from "@/utils/tryCatch";
 // } from "@/components/ui/select";
 
 export default async function UserUpdate({
-  params,
+	params,
 }: {
-  params: Promise<{
-    userId: string;
-  }>;
+	params: Promise<{
+		userId: string;
+	}>;
 }) {
-  const { userId } = await params;
-  const session = await getServerSession(authOptions);
-  if (!session?.user?.is_admin) return null
-  const [error, user] = await tryCatch(getProfileById(userId));
+	const { userId } = await params;
+	const session = await getServerSession(authOptions);
+	if (!session?.user?.is_admin) return redirect("/devices?page=1");
+	const [error, user] = await tryCatch(getProfileById(userId));
 
+	if (error) {
+		if (error.message === "UNAUTHORIZED") {
+			redirect("/auth/signin");
+		} else {
+			return <ClientErrorMessage message={error.message} />;
+		}
+	}
 
-  if (error) {
-    if (error.message === "UNAUTHORIZED") {
-      redirect("/auth/signin");
-    } else {
-      return <ClientErrorMessage message={error.message} />;
-    }
-  }
-
-  return (
-    <div>
-      <div className="flex items-center justify-between text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">Upload user user agreement</h3>
-      </div>
-      <UserAgreementForm user={user} />
-    </div>
-  );
+	return (
+		<div>
+			<div className="flex items-center justify-between text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">
+					Upload user user agreement
+				</h3>
+			</div>
+			<UserAgreementForm user={user} />
+		</div>
+	);
 }

app/(dashboard)/users/[userId]/update/page.tsx

@@ -16,32 +16,31 @@ import { tryCatch } from "@/utils/tryCatch";
 // } from "@/components/ui/select";
 
 export default async function UserUpdate({
-  params,
+	params,
 }: {
-  params: Promise<{
-    userId: string;
-  }>;
+	params: Promise<{
+		userId: string;
+	}>;
 }) {
-  const { userId } = await params;
-  const session = await getServerSession(authOptions);
-  if (!session?.user?.is_admin) return null
-  const [error, user] = await tryCatch(getProfileById(userId));
+	const { userId } = await params;
+	const session = await getServerSession(authOptions);
+	if (!session?.user?.is_admin) return redirect("/devices?page=1");
+	const [error, user] = await tryCatch(getProfileById(userId));
 
+	if (error) {
+		if (error.message === "UNAUTHORIZED") {
+			redirect("/auth/signin");
+		} else {
+			return <ClientErrorMessage message={error.message} />;
+		}
+	}
 
-  if (error) {
-    if (error.message === "UNAUTHORIZED") {
-      redirect("/auth/signin");
-    } else {
-      return <ClientErrorMessage message={error.message} />;
-    }
-  }
-
-  return (
-    <div>
-      <div className="flex items-center justify-between text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">Verify user</h3>
-      </div>
-      <UserUpdateForm user={user} />
-    </div>
-  );
+	return (
+		<div>
+			<div className="flex items-center justify-between text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">Verify user</h3>
+			</div>
+			<UserUpdateForm user={user} />
+		</div>
+	);
 }

app/(dashboard)/users/[userId]/verify/page.tsx

@@ -22,7 +22,9 @@ export default async function VerifyUserPage({
 	const userId = (await params).userId;
 	const [error, dbUser] = await tryCatch(getProfileById(userId));
 
-	const [nationalDataEror, nationalData] = await tryCatch(getNationalPerson({ idCard: dbUser?.id_card ?? "" }))
+	const [nationalDataEror, nationalData] = await tryCatch(
+		getNationalPerson({ idCard: dbUser?.id_card ?? "" }),
+	);
 	if (nationalDataEror) {
 		console.warn("Error fetching national data:", nationalDataEror);
 	}
@@ -47,19 +49,23 @@ export default async function VerifyUserPage({
 				<div className="flex flex-wrap gap-2">
 					{dbUser && !dbUser?.verified && <UserVerifyDialog user={dbUser} />}
 					{dbUser && !dbUser?.verified && <UserRejectDialog user={dbUser} />}
-					<Link href={'update'}>
+					<Link href={"update"}>
 						<Button className="hover:cursor-pointer">
 							<PencilIcon />
 							Update User
 						</Button>
 					</Link>
-					<Link href={'agreement'}>
+					<Link href={"agreement"}>
 						<Button className="hover:cursor-pointer">
 							<FileTextIcon />
 							Update Agreement
 						</Button>
 					</Link>
-					<Link href={dbUser?.agreement || "#"} target="_blank" rel="noopener noreferrer">
+					<Link
+						href={dbUser?.agreement || "#"}
+						target="_blank"
+						rel="noopener noreferrer"
+					>
 						<Button className="hover:cursor-pointer">
 							<EyeIcon />
 							View Agreement
@@ -114,9 +120,7 @@ export default async function VerifyUserPage({
 
 						<InputReadOnly
 							showCheck
-							checkTrue={
-								dbUserDob === nationalDob
-							}
+							checkTrue={dbUserDob === nationalDob}
 							labelClassName="text-sarLinkOrange"
 							label="DOB"
 							value={new Date(dbUser?.dob ?? "").toLocaleDateString("en-US", {
@@ -134,7 +138,7 @@ export default async function VerifyUserPage({
 						/>
 					</div>
 				</div>
-				{(
+				{
 					<div id="national-information">
 						<h4 className="p-2 rounded font-semibold">National Information</h4>
 						<div className="bg-green-800/10 shadow p-2 rounded-lg border border-dashed border-green-800 space-y-1 my-2 grid grid-cols-1 md:grid-cols-2 gap-2">
@@ -198,7 +202,7 @@ export default async function VerifyUserPage({
 							</div>
 						</div>
 					</div>
-				)}
+				}
 			</div>
 		</div>
 	);

app/(dashboard)/users/page.tsx

@@ -1,18 +1,19 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
 import { Suspense } from "react";
+import { authOptions } from "@/app/auth";
 import DynamicFilter from "@/components/generic-filter";
 import { UsersTable } from "@/components/user-table";
 
-
 export default async function AdminUsers({
 	searchParams,
 }: {
 	searchParams: Promise<{
-		query: string;
-		page: number;
-		sortBy: string;
-		status: string;
+		[key: string]: string;
 	}>;
 }) {
+	const session = await getServerSession(authOptions);
+	if (!session?.user?.is_admin) redirect("/devices?page=1");
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
@@ -73,8 +74,9 @@ export default async function AdminUsers({
 								{
 									label: "Unverified",
 									value: "false",
-								}]
-						}
+								},
+							],
+						},
 					]}
 				/>
 			</div>

app/(dashboard)/wallet/page.tsx

@@ -1,13 +1,11 @@
-import React from 'react'
+import React from "react";
 
 export default function UserWallet() {
-  return (
-    <div>
-      <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
-        <h3 className="text-sarLinkOrange text-2xl">
-          My Wallet
-        </h3>
-      </div>
-    </div>
-  )
+	return (
+		<div>
+			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
+				<h3 className="text-sarLinkOrange text-2xl">My Wallet</h3>
+			</div>
+		</div>
+	);
 }

app/layout.tsx

@@ -11,49 +11,48 @@ import QueryProvider from "@/providers/query-provider";
 import { getServerSession } from "next-auth";
 import { authOptions } from "./auth";
 const barlow = Barlow({
-  subsets: ["latin"],
-  weight: ["100", "300", "400", "500", "600", "700", "800", "900"],
-  variable: "--font-barlow",
+	subsets: ["latin"],
+	weight: ["100", "300", "400", "500", "600", "700", "800", "900"],
+	variable: "--font-barlow",
 });
 
 const bokor = Bokor({
-  subsets: ["latin"],
-  weight: ["400"],
-  variable: "--font-bokor",
+	subsets: ["latin"],
+	weight: ["400"],
+	variable: "--font-bokor",
 });
 
 export const metadata: Metadata = {
-  title: "SAR Link Portal",
-  description: "Sarlink Portal",
+	title: "SAR Link Portal",
+	description: "Sarlink Portal",
 };
 
 export default async function RootLayout({
-  children,
+	children,
 }: Readonly<{
-  children: React.ReactNode;
+	children: React.ReactNode;
 }>) {
-  const session = await getServerSession(authOptions);
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <body className={`${barlow.variable} ${bokor.variable} antialiased font-sans bg-gray-100 dark:bg-black`}>
-        <AuthProvider session={session || undefined}>
-          <Provider>
-            <NextTopLoader color="#f49d1b" showSpinner={false} zIndex={9999} />
-            <Toaster richColors />
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="system"
-              enableSystem
-              disableTransitionOnChange
-            >
-              <QueryProvider>
-                {children}
-              </QueryProvider>
-            </ThemeProvider>
-          </Provider>
-        </AuthProvider>
-      </body>
-
-    </html>
-  );
+	const session = await getServerSession(authOptions);
+	return (
+		<html lang="en" suppressHydrationWarning>
+			<body
+				className={`${barlow.variable} ${bokor.variable} antialiased font-sans bg-gray-100 dark:bg-black`}
+			>
+				<AuthProvider session={session || undefined}>
+					<Provider>
+						<NextTopLoader color="#f49d1b" showSpinner={false} zIndex={9999} />
+						<Toaster richColors />
+						<ThemeProvider
+							attribute="class"
+							defaultTheme="system"
+							enableSystem
+							disableTransitionOnChange
+						>
+							<QueryProvider>{children}</QueryProvider>
+						</ThemeProvider>
+					</Provider>
+				</AuthProvider>
+			</body>
+		</html>
+	);
 }

app/page.tsx

@@ -1,5 +1,5 @@
 import { redirect } from "next/navigation";
 
 export default async function Home() {
-  return redirect("/devices");
+	return redirect("/devices");
 }