Refactor payment verification and add MAC address guide

- Updated payment verification logic in `actions/payment.ts` to remove unused code and improve clarity. - Enhanced `DevicesToPay` component to handle separate states for wallet and transfer payment verification. - Introduced a new `GetMacAccordion` component to guide users on finding their MAC addresses. - Created a reusable accordion component in `ui/accordion.tsx` for better UI consistency. - Integrated the MAC address guide into the device addition dialog. - Updated Tailwind CSS configuration to include animations for the accordion component. - Added Radix UI Accordion dependency to package.json and package-lock.json. - Improved error handling in API response utility to log unauthorized responses.
2025-06-06 19:16:19 +00:00 · 2025-05-30 23:53:08 +05:00 · 2025-05-30 23:53:08 +05:00 · 07349cda05
commit 07349cda05
parent a093ab1666
9 changed files with 625 additions and 211 deletions
--- a/actions/payment.ts
+++ b/actions/payment.ts
@ -138,19 +138,10 @@ export async function verifyPayment({ id, method }: UpdatePayment) {
 			}),
 		},
 	);
-	revalidatePath("/payments/[paymentsId]");
+	revalidatePath("/payments/[paymentId]", "page");
 	return handleApiResponse<Payment>(response, "updatePayment");
 }

-type VerifyPaymentType = {
-	userId: string;
-	paymentId?: string;
-	benefName: string;
-	accountNo?: string;
-	absAmount: string;
-	time: string;
-	type?: "TRANSFER" | "WALLET";
-};

 export async function getProfile() {
 	const session = await getServerSession(authOptions);
@ -167,114 +158,3 @@ export async function getProfile() {

 	return handleApiResponse<User>(response, "getProfile");
 }
-
-type VerifyPaymentResponse =
-	| {
-			success: boolean;
-			message: string;
-	  }
-	| {
-			success: boolean;
-			message: string;
-			transaction: {
-				ref: string;
-				sourceBank: string;
-				trxDate: string;
-			};
-	  };
-
-// async function verifyExternalPayment(
-// 	data: VerifyPaymentType,
-// 	payment: PaymentWithDevices | null,
-// ): Promise<VerifyPaymentResponse> {
-// 	console.log("payment verify data ->", data);
-// 	const response = await fetch(
-// 		"https://verifypaymentsapi.baraveli.dev/verify-payment",
-// 		{
-// 			method: "POST",
-// 			headers: { "Content-Type": "application/json" },
-// 			body: JSON.stringify(data),
-// 		},
-// 	);
-
-// 	const json = await response.json();
-// 	console.log(json);
-// 	if (!payment) {
-// 		throw new Error("Payment verification failed or payment not found");
-// 	}
-
-// 	if (json.success) {
-// 		const expiryDate = new Date();
-// 		expiryDate.setMonth(expiryDate.getMonth() + payment.numberOfMonths);
-// 		await prisma.payment.update({
-// 			where: { id: payment.id },
-// 			data: {
-// 				paid: true,
-// 				paidAt: new Date(),
-// 				method: "TRANSFER",
-// 				devices: {
-// 					updateMany: payment.devices.map((device) => ({
-// 						where: { id: device.id },
-// 						data: {
-// 							isActive: true,
-// 							expiryDate: expiryDate,
-// 						},
-// 					})),
-// 				},
-// 			},
-// 		});
-// 	}
-
-// 	return json;
-// }
-
-// async function updateDevices(payment: PaymentWithDevices | null) {
-// 	if (!payment) return;
-
-// 	const newDevices = payment.devices.map((d) => ({
-// 		name: d.name,
-// 		macAddress: formatMacAddress(d.mac),
-// 	}));
-
-// 	return await addDevicesToGroup({
-// 		groupId: process.env.OMADA_GROUP_ID,
-// 		siteId: process.env.OMADA_SITE_ID,
-// 		newDevices,
-// 	});
-// }
-
-// export async function verifyPayment(data: VerifyPaymentType) {
-// 	try {
-// 		const [payment, user] = await Promise.all([
-// 			prisma.payment.findUnique({
-// 				where: { id: data.paymentId },
-// 				include: { devices: true },
-// 			}),
-// 			prisma.user.findUnique({
-// 				where: { id: data.userId },
-// 			}),
-// 		]);
-
-// 		if (data.type === "WALLET") {
-// 			console.log("WALLET");
-// 			await processWalletPayment(user, payment, Number(data.absAmount));
-// 			redirect("/payments");
-// 		}
-// 		if (data.type === "TRANSFER") {
-// 			console.log({ data, payment });
-// 			const verificationResult = await verifyExternalPayment(data, payment);
-// 			await updateDevices(payment);
-
-// 			revalidatePath("/payment[paymentId]");
-
-// 			return verificationResult;
-// 		}
-// 	} catch (error) {
-// 		console.error("Payment verification failed:", error);
-// 		throw error; // Re-throw to handle at a higher level
-// 	}
-// }
-
-// export async function addDevicesToOmada() {
-// 	console.log("hi");
-// }
--- a/components/devices-to-pay.tsx
+++ b/components/devices-to-pay.tsx
@ -25,8 +25,9 @@ export default function DevicesToPay({
 	payment,
 	user,
 }: { payment?: Payment; user?: User }) {
-	console.log(user);
-	const [verifying, setVerifying] = useState(false);
+	const [verifyingWalletPayment, setVerifyingWalletPayment] = useState(false);
+	const [verifyingTransferPayment, setVerifyingTransferPayment] = useState(false);
+

 	const devices = payment?.devices;
 	if (devices?.length === 0) {
@ -81,37 +82,47 @@ export default function DevicesToPay({
 								<div className="flex flex-col gap-2">
 									{isWalletPayVisible && (
 										<Button
-											disabled={verifying}
+											disabled={verifyingWalletPayment || verifyingTransferPayment}
 											onClick={async () => {
-												setVerifying(true);
+												setVerifyingWalletPayment(true);
 												await verifyPayment({
 													method: "WALLET",
 													id: payment?.id ?? "",
 												});
-												setVerifying(false);
+												setVerifyingWalletPayment(false);
 											}}
 											variant={"secondary"}
 											size={"lg"}
 										>
-											{verifying ? "Paying..." : "Pay with wallet"}
+											{verifyingWalletPayment ? "Processing payment..." : "Pay with wallet"}
 											<Wallet />
 										</Button>
 									)}
 									<Button
-										disabled={verifying}
+										disabled={verifyingTransferPayment || verifyingWalletPayment}
 										onClick={async () => {
-											setVerifying(true);
+											setVerifyingTransferPayment(true);
+											try {
 												const res = await verifyPayment({
 													id: payment?.id ?? "",
-												method: "TRANSFER",
+													method: "TRANSFER"
 												});
-											setVerifying(false);
+												toast.success("Payment verification successful!");
+											} catch (error: unknown) {
+												if (error instanceof Error) {
+													toast.error(error.message);
+												} else {
+													toast.error("Payment verification failed.");
+												}
+											} finally {
+												setVerifyingTransferPayment(false);
+											}
 										}}
 										size={"lg"}
 										className="mb-4"
 									>
-										{verifying ? "Verifying..." : "Verify Payment"}
-										{verifying ? (
+										{verifyingTransferPayment ? "Processing payment..." : "I have paid"}
+										{verifyingTransferPayment ? (
 											<Loader2 className="animate-spin" />
 										) : (
 											<BadgeDollarSign />
--- a/components/how-to-get-mac.tsx
+++ b/components/how-to-get-mac.tsx
@ -0,0 +1,60 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+
+export function GetMacAccordion() {
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      className="w-full"
+    >
+      <AccordionItem value="item-1">
+        <AccordionTrigger>How do I find my MAC Address?</AccordionTrigger>
+        <AccordionContent className="flex flex-col gap-4 text-balance">
+          <p>
+            A MAC (Media Access Control) address is a unique identifier assigned
+            to a device's network. It is used to identify the device on a
+            network, helping to differentiate devices on a network.
+          </p>
+          <Accordion type="single" collapsible className="w-full">
+            <AccordionItem value="iphone">
+              <AccordionTrigger>iPhone</AccordionTrigger>
+              <AccordionContent>
+                Settings ➜ General ➜ About ➜ Wi-Fi Address
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="redmi">
+              <AccordionTrigger>Redmi</AccordionTrigger>
+              <AccordionContent>
+                Settings ➜ About ➜ Wi-Fi MAC Address
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="samsung">
+              <AccordionTrigger>Samsung</AccordionTrigger>
+              <AccordionContent>
+                Settings ➜ About phone ➜ Status Information ➜ Wi-Fi MAC Address
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="windows">
+              <AccordionTrigger>Windows Laptop</AccordionTrigger>
+              <AccordionContent>
+                Settings ➜ Network and Internet ➜ Wi-Fi ➜ Hardware
+                Properties ➜ Physical address (MAC):
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="other">
+              <AccordionTrigger>Other Device</AccordionTrigger>
+              <AccordionContent>
+                Please contact SAR Link for assistance.
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  )
+}
--- a/components/ui/accordion.tsx
+++ b/components/ui/accordion.tsx
@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
--- a/components/user/add-device-dialog.tsx
+++ b/components/user/add-device-dialog.tsx
@ -22,6 +22,7 @@ import { useState } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { GetMacAccordion } from "../how-to-get-mac";

 export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 	const formSchema = z.object({
@ -90,6 +91,7 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 						To add a new device, enter the device name and mac address below.
 						Click save when you are done.
 					</DialogDescription>
+					<GetMacAccordion />
 				</DialogHeader>
 				<form onSubmit={handleSubmit(onSubmit)}>
 					<div className="grid gap-4 py-4">
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
 			"dependencies": {
 				"@faker-js/faker": "^9.3.0",
 				"@hookform/resolvers": "^3.9.1",
+				"@radix-ui/react-accordion": "^1.2.11",
 				"@radix-ui/react-alert-dialog": "^1.1.2",
 				"@radix-ui/react-checkbox": "^1.1.2",
 				"@radix-ui/react-collapsible": "^1.1.1",
@ -702,6 +703,196 @@
 			"version": "1.1.1",
 			"license": "MIT"
 		},
+		"node_modules/@radix-ui/react-accordion": {
+			"version": "1.2.11",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.11.tgz",
+			"integrity": "sha512-l3W5D54emV2ues7jjeG1xcyN7S3jnK3zE2zHqgn0CmMsy9lNJwmgcrmaxS+7ipw15FAivzKNzH3d5EcGoFKw0A==",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.2",
+				"@radix-ui/react-collapsible": "1.1.11",
+				"@radix-ui/react-collection": "1.1.7",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-direction": "1.1.1",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/primitive": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+			"integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="
+		},
+		"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-collection": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+			"integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-slot": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-compose-refs": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+			"integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-context": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+			"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-direction": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.1.tgz",
+			"integrity": "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-id": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+			"integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+			"dependencies": {
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-primitive": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+			"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+			"dependencies": {
+				"@radix-ui/react-slot": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-slot": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+			"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-use-controllable-state": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+			"integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+			"dependencies": {
+				"@radix-ui/react-use-effect-event": "0.0.2",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-accordion/node_modules/@radix-ui/react-use-layout-effect": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+			"integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-alert-dialog": {
 			"version": "1.1.4",
 			"license": "MIT",
@ -778,17 +969,18 @@
 			}
 		},
 		"node_modules/@radix-ui/react-collapsible": {
-			"version": "1.1.2",
-			"license": "MIT",
+			"version": "1.1.11",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.11.tgz",
+			"integrity": "sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==",
 			"dependencies": {
-				"@radix-ui/primitive": "1.1.1",
-				"@radix-ui/react-compose-refs": "1.1.1",
-				"@radix-ui/react-context": "1.1.1",
-				"@radix-ui/react-id": "1.1.0",
-				"@radix-ui/react-presence": "1.1.2",
-				"@radix-ui/react-primitive": "2.0.1",
-				"@radix-ui/react-use-controllable-state": "1.1.0",
-				"@radix-ui/react-use-layout-effect": "1.1.0"
+				"@radix-ui/primitive": "1.1.2",
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-context": "1.1.2",
+				"@radix-ui/react-id": "1.1.1",
+				"@radix-ui/react-presence": "1.1.4",
+				"@radix-ui/react-primitive": "2.1.3",
+				"@radix-ui/react-use-controllable-state": "1.2.2",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
 			},
 			"peerDependencies": {
 				"@types/react": "*",
@ -805,6 +997,150 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/primitive": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.2.tgz",
+			"integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="
+		},
+		"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-compose-refs": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
+			"integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-context": {
+			"version": "1.1.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+			"integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-id": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+			"integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+			"dependencies": {
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-presence": {
+			"version": "1.1.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+			"integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.2",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-primitive": {
+			"version": "2.1.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+			"integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
+			"dependencies": {
+				"@radix-ui/react-slot": "1.2.3"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-slot": {
+			"version": "1.2.3",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+			"integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
+			"dependencies": {
+				"@radix-ui/react-compose-refs": "1.1.2"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-controllable-state": {
+			"version": "1.2.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+			"integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
+			"dependencies": {
+				"@radix-ui/react-use-effect-event": "0.0.2",
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-collapsible/node_modules/@radix-ui/react-use-layout-effect": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+			"integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-collection": {
 			"version": "1.1.1",
 			"license": "MIT",
@ -1392,6 +1728,37 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-use-effect-event": {
+			"version": "0.0.2",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+			"integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+			"dependencies": {
+				"@radix-ui/react-use-layout-effect": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
+		"node_modules/@radix-ui/react-use-effect-event/node_modules/@radix-ui/react-use-layout-effect": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
+			"integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
+			"peerDependencies": {
+				"@types/react": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-use-escape-keydown": {
 			"version": "1.1.0",
 			"license": "MIT",
--- a/package.json
+++ b/package.json
@ -11,6 +11,7 @@
 	"dependencies": {
 		"@faker-js/faker": "^9.3.0",
 		"@hookform/resolvers": "^3.9.1",
+		"@radix-ui/react-accordion": "^1.2.11",
 		"@radix-ui/react-alert-dialog": "^1.1.2",
 		"@radix-ui/react-checkbox": "^1.1.2",
 		"@radix-ui/react-collapsible": "^1.1.1",
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -11,68 +11,94 @@ export default {
 	theme: {
    	extend: {
    		colors: {
-				sarLinkOrange: "#f49b5b",
-				background: "hsl(var(--background))",
-				foreground: "hsl(var(--foreground))",
+    			sarLinkOrange: '#f49b5b',
+    			background: 'hsl(var(--background))',
+    			foreground: 'hsl(var(--foreground))',
    			card: {
-					DEFAULT: "hsl(var(--card))",
-					foreground: "hsl(var(--card-foreground))",
+    				DEFAULT: 'hsl(var(--card))',
+    				foreground: 'hsl(var(--card-foreground))'
    			},
    			popover: {
-					DEFAULT: "hsl(var(--popover))",
-					foreground: "hsl(var(--popover-foreground))",
+    				DEFAULT: 'hsl(var(--popover))',
+    				foreground: 'hsl(var(--popover-foreground))'
    			},
    			primary: {
-					DEFAULT: "hsl(var(--primary))",
-					foreground: "hsl(var(--primary-foreground))",
+    				DEFAULT: 'hsl(var(--primary))',
+    				foreground: 'hsl(var(--primary-foreground))'
    			},
    			secondary: {
-					DEFAULT: "hsl(var(--secondary))",
-					foreground: "hsl(var(--secondary-foreground))",
+    				DEFAULT: 'hsl(var(--secondary))',
+    				foreground: 'hsl(var(--secondary-foreground))'
    			},
    			muted: {
-					DEFAULT: "hsl(var(--muted))",
-					foreground: "hsl(var(--muted-foreground))",
+    				DEFAULT: 'hsl(var(--muted))',
+    				foreground: 'hsl(var(--muted-foreground))'
    			},
    			accent: {
-					DEFAULT: "hsl(var(--accent))",
-					foreground: "hsl(var(--accent-foreground))",
+    				DEFAULT: 'hsl(var(--accent))',
+    				foreground: 'hsl(var(--accent-foreground))'
    			},
    			destructive: {
-					DEFAULT: "hsl(var(--destructive))",
-					foreground: "hsl(var(--destructive-foreground))",
+    				DEFAULT: 'hsl(var(--destructive))',
+    				foreground: 'hsl(var(--destructive-foreground))'
    			},
-				border: "hsl(var(--border))",
-				input: "hsl(var(--input))",
-				ring: "hsl(var(--ring))",
+    			border: 'hsl(var(--border))',
+    			input: 'hsl(var(--input))',
+    			ring: 'hsl(var(--ring))',
    			chart: {
-					"1": "hsl(var(--chart-1))",
-					"2": "hsl(var(--chart-2))",
-					"3": "hsl(var(--chart-3))",
-					"4": "hsl(var(--chart-4))",
-					"5": "hsl(var(--chart-5))",
+    				'1': 'hsl(var(--chart-1))',
+    				'2': 'hsl(var(--chart-2))',
+    				'3': 'hsl(var(--chart-3))',
+    				'4': 'hsl(var(--chart-4))',
+    				'5': 'hsl(var(--chart-5))'
    			},
    			sidebar: {
-					DEFAULT: "hsl(var(--sidebar-background))",
-					foreground: "hsl(var(--sidebar-foreground))",
-					primary: "hsl(var(--sidebar-primary))",
-					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-					accent: "hsl(var(--sidebar-accent))",
-					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-					border: "hsl(var(--sidebar-border))",
-					ring: "hsl(var(--sidebar-ring))",
-				},
+    				DEFAULT: 'hsl(var(--sidebar-background))',
+    				foreground: 'hsl(var(--sidebar-foreground))',
+    				primary: 'hsl(var(--sidebar-primary))',
+    				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+    				accent: 'hsl(var(--sidebar-accent))',
+    				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+    				border: 'hsl(var(--sidebar-border))',
+    				ring: 'hsl(var(--sidebar-ring))'
+    			}
    		},
    		borderRadius: {
-				lg: "var(--radius)",
-				md: "calc(var(--radius) - 2px)",
-				sm: "calc(var(--radius) - 4px)",
+    			lg: 'var(--radius)',
+    			md: 'calc(var(--radius) - 2px)',
+    			sm: 'calc(var(--radius) - 4px)'
    		},
    		fontFamily: {
-				sans: ["var(--font-barlow)"],
-				mono: ["var(--font-mono)"],
+    			sans: [
+    				'var(--font-barlow)'
+    			],
+    			mono: [
+    				'var(--font-mono)'
+    			]
    		},
+    		keyframes: {
+    			'accordion-down': {
+    				from: {
+    					height: '0'
    				},
+    				to: {
+    					height: 'var(--radix-accordion-content-height)'
+    				}
+    			},
+    			'accordion-up': {
+    				from: {
+    					height: 'var(--radix-accordion-content-height)'
+    				},
+    				to: {
+    					height: '0'
+    				}
+    			}
+    		},
+    		animation: {
+    			'accordion-down': 'accordion-down 0.2s ease-out',
+    			'accordion-up': 'accordion-up 0.2s ease-out'
+    		}
+    	}
    },
 	plugins: [tailwindcssAnimate],
 } satisfies Config;
--- a/utils/tryCatch.ts
+++ b/utils/tryCatch.ts
@ -13,6 +13,7 @@ export async function handleApiResponse<T>(
 ) {
 	const responseData = await response.json();
 	if (response.status === 401) {
+		console.log('response data', responseData)
 		throw new Error("UNAUTHORIZED");
 	}