refactor: add tryCatch utility for error handling, update device-related components and types, and clean up unused code in payment actions

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

@@ -1,12 +1,10 @@
-import DevicesForPayment from '@/components/devices-for-payment'
-import prisma from '@/lib/db';
-import React from 'react'
+import DevicesForPayment from "@/components/devices-for-payment";
+import React from "react";
 
 export default async function DevicesToPay() {
-  const billFormula = await prisma.billFormula.findFirst();
-  return (
-    <div>
-      <DevicesForPayment billFormula={billFormula ?? undefined} />
-    </div>
-  )
+	return (
+		<div>
+			<DevicesForPayment />
+		</div>
+	);
 }

app/(dashboard)/devices/[deviceId]/page.tsx

@@ -1,39 +1,34 @@
-import prisma from '@/lib/db'
-import React from 'react'
+import React from "react";
 
-export default async function DeviceDetails({ params }: {
-  params: Promise<{ deviceId: string }>
+export default async function DeviceDetails({
+	params,
+}: {
+	params: Promise<{ deviceId: string }>;
 }) {
-  const deviceId = (await params)?.deviceId
-  const device = await prisma.device.findUnique({
-    where: {
-      id: deviceId,
-    },
+	const deviceId = (await params)?.deviceId;
 
-  })
-  return (
-    <div>
-      <div className="flex flex-col justify-between items-start text-gray-500 title-bg py-4 px-2 mb-4">
-        <h3 className='text-2xl font-bold'>
-          {device?.name}
-        </h3>
-        <span>{device?.mac}</span>
-      </div>
+	return null;
+	return (
+		<div>
+			<div className="flex flex-col justify-between items-start text-gray-500 title-bg py-4 px-2 mb-4">
+				<h3 className="text-2xl font-bold">{device?.name}</h3>
+				<span>{device?.mac}</span>
+			</div>
 
-      <div
-        id="user-filters"
-        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
-      >
-        {/* <Search /> */}
-        {/* <Filter
+			<div
+				id="user-filters"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+			>
+				{/* <Search /> */}
+				{/* <Filter
         options={sortfilterOptions}
         defaultOption="asc"
         queryParamKey="sortBy"
       /> */}
-      </div>
-      {/* <Suspense key={query} fallback={"loading...."}>
+			</div>
+			{/* <Suspense key={query} fallback={"loading...."}>
       <DevicesTable searchParams={searchParams} />
     </Suspense> */}
-    </div>
-  )
+		</div>
+	);
 }

app/(dashboard)/devices/page.tsx

@@ -23,8 +23,6 @@ export default async function Devices({
 				<h3 className="text-sarLinkOrange text-2xl">My Devices</h3>
 				<AddDeviceDialogForm user_id={session?.user?.id} />
 			</div>
-			<pre>{JSON.stringify(session, null, 2)}</pre>
-
 			<div
 				id="user-filters"
 				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"

app/next-auth.d.ts

@@ -0,0 +1,27 @@
+import NextAuth, { DefaultSession, type User } from "next-auth";
+import { Session } from "next-auth";
+declare module "next-auth" {
+	/**
+	 * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
+	 */
+
+	interface Session {
+		apiToken?: string;
+		name?: string | null;
+		email?: string | null;
+		image?: string | null;
+		user?: User & {
+			expiry?: string;
+			id?: number;
+			username?: string;
+			user_permissions?: { id: number; name: string }[];
+			id_card?: string;
+			first_name?: string;
+			last_name?: string;
+			last_login?: string;
+			date_joined?: string;
+			is_superuser?: boolean;
+		};
+		expires: ISODateString;
+	}
+}