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.

components/devices-table.tsx

@@ -17,7 +17,7 @@ import Pagination from "./pagination";
 
 export async function DevicesTable({
 	searchParams,
-	parentalControl
+	parentalControl,
 }: {
 	searchParams: Promise<{
 		query: string;
@@ -29,12 +29,13 @@ export async function DevicesTable({
 	const session = await auth.api.getSession({
 		headers: await headers()
 	})
+	const isAdmin = session?.user.role === "ADMIN"
 	const query = (await searchParams)?.query || "";
 	const page = (await searchParams)?.page;
 	const sortBy = (await searchParams)?.sortBy || "asc";
 	const totalDevices = await prisma.device.count({
 		where: {
-			userId: session?.session.userId,
+			userId: isAdmin ? undefined : session?.session.userId,
 			OR: [
 				{
 					name: {
@@ -54,8 +55,8 @@ export async function DevicesTable({
 					paid: false
 				}
 			},
-			isActive: parentalControl,
-			blocked: parentalControl !== undefined ? undefined : false,
+			isActive: isAdmin ? undefined : parentalControl,
+			blocked: isAdmin ? undefined : parentalControl !== undefined ? undefined : false,
 		},
 	});
 
@@ -65,7 +66,7 @@ export async function DevicesTable({
 
 	const devices = await prisma.device.findMany({
 		where: {
-			userId: session?.session.userId,
+			userId: isAdmin ? undefined : session?.session.userId,
 			OR: [
 				{
 					name: {
@@ -85,8 +86,8 @@ export async function DevicesTable({
 					paid: false
 				}
 			},
-			isActive: parentalControl,
-			blocked: parentalControl !== undefined ? undefined : false,
+			isActive: isAdmin ? undefined : parentalControl,
+			blocked: isAdmin ? undefined : parentalControl !== undefined ? undefined : false,
 		},
 
 		skip: offset,
@@ -153,7 +154,7 @@ export async function DevicesTable({
 									// 		)}
 									// 	</TableCell>
 									// </TableRow>
-									<ClickableRow key={device.id} device={device} parentalControl={parentalControl} />
+									<ClickableRow admin={isAdmin} key={device.id} device={device} parentalControl={parentalControl} />
 								))}
 							</TableBody>
 							<TableFooter>
@@ -180,7 +181,6 @@ export async function DevicesTable({
 						))}
 					</div>
 				</>
-
 			)}
 		</div>
 	);