Refactor authentication middleware to use native fetch, update dependencies, and enhance error handling. Add new error boundary component for dashboard and improve user verification UI. Update payment handling and device management components for better user experience. Adjust CSS for error backgrounds and refine input read-only components with validation indicators.

actions/auth-actions.ts

@@ -138,15 +138,15 @@ export async function signup(_actionState: ActionState, formData: FormData) {
 			details: `
 			A new user has requested for verification. \n
 USER DETAILS:
-	Name: ${parsedData.data.name}
-	Address: ${parsedData.data.address}
-	ID Card: ${parsedData.data.id_card}
-	DOB: ${parsedData.data.dob.toLocaleDateString("en-US", {
-		month: "short",
-		day: "2-digit",
-		year: "numeric",
-	})}
-	ACC No: ${parsedData.data.accNo}\n\nVerify the user with the folloiwing link: ${process.env.BETTER_AUTH_URL}/users/${newUser.id}/verify
+Name: ${parsedData.data.name}
+Address: ${parsedData.data.address}
+ID Card: ${parsedData.data.id_card}
+DOB: ${parsedData.data.dob.toLocaleDateString("en-US", {
+				month: "short",
+				day: "2-digit",
+				year: "numeric",
+			})}
+ACC No: ${parsedData.data.accNo}\n\nVerify the user with the following link: ${process.env.BETTER_AUTH_URL}/users/${newUser.id}/verify
 			`,
 			phoneNumber: process.env.ADMIN_PHONENUMBER ?? "",
 		});

actions/payment.ts

@@ -9,28 +9,23 @@ import { redirect } from "next/navigation";
 import { addDevicesToGroup } from "./omada-actions";
 
 export async function createPayment(data: PaymentType) {
-	try {
-		console.log("data", data);
-		const payment = await prisma.payment.create({
-			data: {
-				amount: data.amount,
-				numberOfMonths: data.numberOfMonths,
-				paid: data.paid,
-				userId: data.userId,
-				devices: {
-					connect: data.deviceIds.map((id) => {
-						return {
-							id,
-						};
-					}),
-				},
+	console.log("data", data);
+	const payment = await prisma.payment.create({
+		data: {
+			amount: data.amount,
+			numberOfMonths: data.numberOfMonths,
+			paid: data.paid,
+			userId: data.userId,
+			devices: {
+				connect: data.deviceIds.map((id) => {
+					return {
+						id,
+					};
+				}),
 			},
-		});
-		return { success: true, paymentId: payment.id };
-	} catch (error) {
-		console.error("Error creating payment:", error);
-		return { success: false, error: "Failed to create payment" };
-	}
+		},
+	});
+	redirect(`/payments/${payment.id}`);
 }
 
 type VerifyPaymentType = {

actions/user-actions.ts

@@ -70,15 +70,16 @@ export async function Rejectuser({
 	if (!user) {
 		throw new Error("User not found");
 	}
+
+	await SendUserRejectionDetailSMS({
+		details: reason,
+		phoneNumber: user.phoneNumber,
+	});
 	await prisma.user.delete({
 		where: {
 			id: userId,
 		},
 	});
-	await SendUserRejectionDetailSMS({
-		details: reason,
-		phoneNumber: user.phoneNumber,
-	});
 	revalidatePath("/users");
 	redirect("/users");
 }
@@ -90,21 +91,25 @@ export const SendUserRejectionDetailSMS = async ({
 	details: string;
 	phoneNumber: string;
 }) => {
-	const respose = await fetch(`${process.env.SMS_API_BASE_URL}/api/sms`, {
-		method: "POST",
-		headers: {
-			"Content-Type": "application/json",
-			Authorization: `Bearer ${process.env.SMS_API_KEY}`,
-		},
-		body: JSON.stringify({
-			check_delivery: false,
-			number: phoneNumber,
-			message: details,
-		}),
-	});
-	const data = await respose.json();
-	console.log(data);
-	return data;
+	try {
+		const respose = await fetch(`${process.env.SMS_API_BASE_URL}/api/sms`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				Authorization: `Bearer ${process.env.SMS_API_KEY}`,
+			},
+			body: JSON.stringify({
+				check_delivery: false,
+				number: phoneNumber,
+				message: details,
+			}),
+		});
+		const data = await respose.json();
+		console.log(data);
+		return data;
+	} catch (error) {
+		console.error(error);
+	}
 };
 
 export async function AddDevice({