refactor: reorganize imports and improve session handling in various components 🔨

app/(dashboard)/payments/page.tsx

@@ -1,9 +1,9 @@
+import { redirect } from "next/navigation";
+import { getServerSession } from "next-auth";
+import { Suspense } from "react";
 import { authOptions } from "@/app/auth";
 import { PaymentsTable } from "@/components/payments-table";
 import Search from "@/components/search";
-import { getServerSession } from "next-auth";
-import { redirect } from "next/navigation";
-import { Suspense } from "react";
 
 export default async function Payments({
 	searchParams,

app/(dashboard)/user-devices/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 { AdminDevicesTable } from "@/components/admin/admin-devices-table";
 import DynamicFilter from "@/components/generic-filter";
 
@@ -13,6 +16,8 @@ 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");
 	return (
 		<div>
 			<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">

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

@@ -1,7 +1,7 @@
+import { getServerSession } from "next-auth";
+import { Suspense } from "react";
 import { authOptions } from "@/app/auth";
 import { UsersPaymentsTable } from "@/components/admin/user-payments-table";
-import { getServerSession } from "next-auth";
-import React, { Suspense } from "react";
 
 export default async function UserPayments({
 	searchParams,
@@ -14,13 +14,12 @@ export default async function UserPayments({
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
-	const session = await getServerSession(authOptions);
+	// 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 Payments</h3>
 			</div>
-			<pre>{JSON.stringify(session, null, 2)}</pre>
 			<Suspense key={query} fallback={"loading...."}>
 				<UsersPaymentsTable searchParams={searchParams} />
 			</Suspense>

components/block-device-dialog.tsx

@@ -43,7 +43,7 @@ export default function BlockDeviceDialog({
 
 	const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
 		setDisabled(true);
-		console.log("data in block device dialog", data);
+		console.log(data);
 		toast.promise(
 			blockDevice({
 				deviceId: String(device.id),
@@ -58,9 +58,8 @@ export default function BlockDeviceDialog({
 					return "Blocked!";
 				},
 				error: (error) => {
-					console.error("Error blocking device:", error);
 					setDisabled(false);
-					return error.message || "Something went wrong";
+					return error || "Something went wrong";
 				},
 			},
 		);
@@ -69,15 +68,15 @@ export default function BlockDeviceDialog({
 
 	return (
 		<div>
-			{device.blocked && !admin ? (
+			{device.blocked ? (
 				<Button
 					onClick={() => {
 						setDisabled(true);
 						toast.promise(
 							blockDevice({
-								blocked_by: "ADMIN",
+								blocked_by: "PARENT",
 								deviceId: String(device.id),
-								reason_for_blocking: "",
+								reason_for_blocking: ""
 							}),
 							{
 								loading: "unblockinig...",
@@ -85,9 +84,9 @@ export default function BlockDeviceDialog({
 									setDisabled(false);
 									return "Unblocked!";
 								},
-								error: (error) => {
+								error: () => {
 									setDisabled(false);
-									return error.message || "Something went wrong";
+									return "Something went wrong";
 								},
 							},
 						);
@@ -97,53 +96,83 @@ export default function BlockDeviceDialog({
 				</Button>
 			) : (
 				<div>
-					<Dialog open={open} onOpenChange={setOpen}>
-						<DialogTrigger asChild>
-							<Button disabled={disabled} variant="destructive">
-								<OctagonX />
-								Block
-							</Button>
-						</DialogTrigger>
-						<DialogContent className="sm:max-w-[425px]">
-							<DialogHeader>
-								<DialogTitle className="text-muted-foreground">
-									Reason for blocking this device 🚫
-								</DialogTitle>
-							</DialogHeader>
-							<form onSubmit={handleSubmit(onSubmit)}>
-								<div className="grid gap-2 py-2">
-									<div className="flex flex-col items-start gap-4">
-										<Label htmlFor="reason" className="text-right text-muted-foreground">
-											Reason for blocking
-										</Label>
-										<Textarea
-											rows={10}
-											{...register("reasonForBlocking")}
-											id="reasonForBlocking"
-											className={cn(
-												"col-span-5",
-												errors.reasonForBlocking && "ring-2 ring-red-500",
-											)}
-										/>
-										<span className="text-sm text-red-500">
-											{errors.reasonForBlocking?.message}
-										</span>
+					{!admin ? (
+						<Button
+							variant={"destructive"}
+							onClick={() => {
+								setDisabled(true);
+								toast.promise(
+									blockDevice({
+										blocked_by: "PARENT",
+										deviceId: String(device.id),
+										reason_for_blocking: "",
+									}),
+									{
+										loading: "blocking...",
+										success: () => {
+											setDisabled(false);
+											return "blocked!";
+										},
+										error: () => {
+											setDisabled(false);
+											return "Something went wrong";
+										},
+									},
+								);
+							}}
+						>
+							<OctagonX />
+							{disabled ? <TextShimmer>Blocking</TextShimmer> : "Block"}
+						</Button>
+					) : (
+						<Dialog open={open} onOpenChange={setOpen}>
+							<DialogTrigger asChild>
+								<Button disabled={disabled} variant="destructive">
+									<OctagonX />
+									Block
+								</Button>
+							</DialogTrigger>
+							<DialogContent className="sm:max-w-[425px]">
+								<DialogHeader>
+									<DialogTitle>
+										Please provide a reason for blocking this device.
+									</DialogTitle>
+								</DialogHeader>
+								<form onSubmit={handleSubmit(onSubmit)}>
+									<div className="grid gap-4 py-4">
+										<div className="flex flex-col items-start gap-1">
+											<Label htmlFor="reason" className="text-right">
+												Reason for blocking
+											</Label>
+											<Textarea
+												rows={10}
+												{...register("reasonForBlocking")}
+												id="reasonForBlocking"
+												className={cn(
+													"col-span-5",
+													errors.reasonForBlocking && "ring-2 ring-red-500",
+												)}
+											/>
+											<span className="text-sm text-red-500">
+												{errors.reasonForBlocking?.message}
+											</span>
+										</div>
 									</div>
-								</div>
-								<DialogFooter>
-									<Button
-										variant={"destructive"}
-										disabled={disabled}
-										type="submit"
-									>
-										Block
-									</Button>
-								</DialogFooter>
-							</form>
-						</DialogContent>
-					</Dialog>
+									<DialogFooter>
+										<Button
+											variant={"destructive"}
+											disabled={disabled}
+											type="submit"
+										>
+											Block
+										</Button>
+									</DialogFooter>
+								</form>
+							</DialogContent>
+						</Dialog>
+					)}
 				</div>
 			)}
 		</div>
 	);
-}
+}

components/clickable-row.tsx

@@ -66,7 +66,7 @@ export default function ClickableRow({
 					)}
 					{device.has_a_pending_payment && (
 						<Link href={`/payments/${device.pending_payment_id}`}>
-							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground text-yellow-600">
+							<span className="bg-muted rounded px-2 p-1 mt-2 flex hover:underline items-center justify-center gap-2 text-muted-foreground">
 								Payment Pending{" "}
 								<HandCoins className="animate-pulse" size={14} />
 							</span>

components/devices-table.tsx

@@ -29,7 +29,7 @@ export async function DevicesTable({
 }) {
 	const resolvedParams = await searchParams;
 	const session = await getServerSession(authOptions);
-	const isAdmin = session?.user?.is_superuser;
+	const isAdmin = session?.user?.is_admin;
 
 	const page = Number.parseInt(resolvedParams.page as string) || 1;
 	const limit = 10;

components/devices-to-pay.tsx

@@ -1,4 +1,13 @@
 "use client";
+import {
+	BadgeDollarSign,
+	Clipboard,
+	ClipboardCheck,
+	Loader2,
+	Wallet,
+} from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
 import { verifyPayment } from "@/actions/payment";
 import {
 	Table,
@@ -10,15 +19,6 @@ import {
 } from "@/components/ui/table";
 import type { Payment } from "@/lib/backend-types";
 import type { User } from "@/lib/types/user";
-import {
-	BadgeDollarSign,
-	Clipboard,
-	ClipboardCheck,
-	Loader2,
-	Wallet,
-} from "lucide-react";
-import { useState } from "react";
-import { toast } from "sonner";
 import { Button } from "./ui/button";
 
 export default function DevicesToPay({

components/how-to-get-mac.tsx

@@ -1,3 +1,5 @@
+import { PhoneIcon } from "lucide-react"
+import Link from "next/link"
 import {
   Accordion,
   AccordionContent,
@@ -5,8 +7,6 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion"
 import { Button } from "@/components/ui/button"
-import { PhoneIcon } from "lucide-react"
-import Link from "next/link"
 
 
 export function GetMacAccordion() {
@@ -18,7 +18,7 @@ export function GetMacAccordion() {
     >
       <AccordionItem value="item-1">
         <AccordionTrigger>How do I find my MAC Address?</AccordionTrigger>
-        <AccordionContent className="flex flex-col gap-4 text-balance">
+        <AccordionContent className="flex flex-col gap-4 text-start">
           <p>
             A MAC (Media Access Control) address is a unique identifier assigned
             to a device`&apos;`s network. It is used to identify the device on a

components/payments-table.tsx

@@ -1,3 +1,7 @@
+import { Calendar } from "lucide-react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getPayments } from "@/actions/payment";
 import {
 	Table,
 	TableBody,
@@ -8,14 +12,9 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
-import Link from "next/link";
-
-import { getPayments } from "@/actions/payment";
 import type { Payment } from "@/lib/backend-types";
 import { cn } from "@/lib/utils";
 import { tryCatch } from "@/utils/tryCatch";
-import { Calendar } from "lucide-react";
-import { redirect } from "next/navigation";
 import Pagination from "./pagination";
 import { Badge } from "./ui/badge";
 import { Button } from "./ui/button";
@@ -31,59 +30,6 @@ export async function PaymentsTable({
 	}>;
 }) {
 	const query = (await searchParams)?.query || "";
-	// const session = await auth.api.getSession({
-	// 	headers: await headers(),
-	// });
-	// const query = (await searchParams)?.query || "";
-	// const page = (await searchParams)?.page;
-	// const totalPayments = await prisma.payment.count({
-	// 	where: {
-	// 		userId: session?.session.userId,
-	// 		OR: [
-	// 			{
-	// 				devices: {
-	// 					every: {
-	// 						name: {
-	// 							contains: query || "",
-	// 							mode: "insensitive",
-	// 						},
-	// 					},
-	// 				},
-	// 			},
-	// 		],
-	// 	},
-	// });
-
-	// const totalPages = Math.ceil(totalPayments / 10);
-	// const limit = 10;
-	// const offset = (Number(page) - 1) * limit || 0;
-
-	// const payments = await prisma.payment.findMany({
-	// 	where: {
-	// 		userId: session?.session.userId,
-	// 		OR: [
-	// 			{
-	// 				devices: {
-	// 					every: {
-	// 						name: {
-	// 							contains: query || "",
-	// 							mode: "insensitive",
-	// 						},
-	// 					},
-	// 				},
-	// 			},
-	// 		],
-	// 	},
-	// 	include: {
-	// 		devices: true,
-	// 	},
-
-	// 	skip: offset,
-	// 	take: limit,
-	// 	orderBy: {
-	// 		createdAt: "desc",
-	// 	},
-	// });
 	const [error, payments] = await tryCatch(getPayments());
 
 	if (error) {
@@ -223,7 +169,7 @@ function MobilePaymentDetails({ payment }: { payment: Payment }) {
 	return (
 		<div
 			className={cn(
-				"flex flex-col items-start border rounded p-2",
+				"flex flex-col items-start border rounded p-2 my-2",
 				payment?.paid
 					? "bg-green-500/10 border-dashed border-green=500"
 					: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",

components/ui/dialog.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import * as React from "react"
-import { Dialog as DialogPrimitive } from "radix-ui"
 import { XIcon } from "lucide-react"
+import { Dialog as DialogPrimitive } from "radix-ui"
+import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
@@ -123,7 +123,7 @@ function DialogDescription({
   return (
     <DialogPrimitive.Description
       data-slot="dialog-description"
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-start text-muted-foreground text-sm", className)}
       {...props}
     />
   )

components/user/add-device-dialog.tsx

@@ -1,15 +1,14 @@
 "use client";
 
+import { Loader2, Plus } from "lucide-react";
+import { useActionState, useEffect, useState } from "react"; // Import useActionState
+import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { Loader2, Plus } from "lucide-react";
-import { useActionState, useEffect, useState } from "react"; // Import useActionState
-import { toast } from "sonner";
-import { GetMacAccordion } from "../how-to-get-mac";
-
 import { addDeviceAction } from "@/queries/devices";
+import { GetMacAccordion } from "../how-to-get-mac";
 
 export type AddDeviceFormState = {
 	message: string;
@@ -72,7 +71,7 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 					<div className="grid gap-4 py-4">
 						<div className="flex flex-col gap-2">
 							<div>
-								<Label htmlFor="device_name" className="text-right">
+								<Label htmlFor="device_name">
 									Device Name
 								</Label>
 								<Input
@@ -91,7 +90,7 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 							</div>
 
 							<div>
-								<Label htmlFor="mac_address" className="text-right">
+								<Label htmlFor="mac_address">
 									Mac Address
 								</Label>
 								<Input