Enhance device management and user experience features

- Updated `package.json` to include the latest version of `@radix-ui/react-separator` and added `moment` for date handling.
- Modified `blockDevice` function in `omada-actions.ts` to include a `blockedBy` parameter, allowing differentiation between admin and parent actions.
- Refactored `payment.ts` to include expiry date handling for devices during payment processing.
- Improved `DevicesTable` and `ClickableRow` components to support admin functionalities and enhance device interaction.
- Updated `BlockDeviceDialog` to accept an `admin` prop, allowing for tailored blocking actions based on user role.
- Enhanced UI components for better consistency and responsiveness across the dashboard.

These changes improve the overall functionality and maintainability of the application, providing a better user experience in device management.

actions/payment.ts

@@ -3,6 +3,7 @@
 import prisma from "@/lib/db";
 import type { PaymentType } from "@/lib/types";
 import { formatMacAddress } from "@/lib/utils";
+import type { Prisma } from "@prisma/client";
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 import { addDevicesToGroup } from "./omada-actions";
@@ -38,13 +39,11 @@ type VerifyPaymentType = {
 	type?: "TRANSFER" | "WALLET";
 };
 
-type PaymentWithDevices = {
-	id: string;
-	devices: Array<{
-		name: string;
-		mac: string;
-	}>;
-};
+type PaymentWithDevices = Prisma.PaymentGetPayload<{
+	include: {
+		devices: true;
+	};
+}>;
 
 class InsufficientFundsError extends Error {
 	constructor() {
@@ -67,6 +66,8 @@ async function processWalletPayment(
 		throw new InsufficientFundsError();
 	}
 
+	const expiryDate = new Date();
+	expiryDate.setMonth(expiryDate.getMonth() + payment.numberOfMonths);
 	await prisma.$transaction([
 		prisma.payment.update({
 			where: { id: payment.id },
@@ -76,7 +77,7 @@ async function processWalletPayment(
 				devices: {
 					updateMany: {
 						where: { paymentId: payment.id },
-						data: { isActive: true },
+						data: { isActive: true, expiryDate: expiryDate },
 					},
 				},
 			},
@@ -107,7 +108,7 @@ async function verifyExternalPayment(
 	data: VerifyPaymentType,
 	payment: PaymentWithDevices | null,
 ): Promise<VerifyPaymentResponse> {
-	console.log('payment verify data ->', data)
+	console.log("payment verify data ->", data);
 	const response = await fetch(
 		"https://verifypaymentsapi.baraveli.dev/verify-payment",
 		{
@@ -118,12 +119,14 @@ async function verifyExternalPayment(
 	);
 
 	const json = await response.json();
-	console.log(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: {
@@ -132,7 +135,7 @@ async function verifyExternalPayment(
 				devices: {
 					updateMany: {
 						where: { paymentId: payment.id },
-						data: { isActive: true },
+						data: { isActive: true, expiryDate: expiryDate },
 					},
 				},
 			},