Enhance payment processing and device management features

- Introduced wallet payment option in verifyPayment function to allow users to pay using their wallet balance.
- Added new BlockDeviceDialog component for managing device blocking and unblocking actions.
- Updated DeviceCard component to display device status and integrate blocking functionality.
- Refactored DevicesTable to utilize DeviceCard for better UI representation of devices.
- Implemented Wallet component to manage wallet balance and top-up functionality.
- Enhanced API routes and Prisma schema to support wallet transactions and device blocking reasons.
- Improved overall user experience with responsive design adjustments and new UI elements.

These changes improve user control over payments and device management, enhancing the overall functionality of the application.

components/devices-table.tsx

@@ -13,7 +13,8 @@ import prisma from "@/lib/db";
 import { headers } from "next/headers";
 import Link from "next/link";
 import AddDevicesToCartButton from "./add-devices-to-cart-button";
-import BlockDeviceButton from "./block-device-button";
+import BlockDeviceButton from "./block-device-dialog";
+import DeviceCard from "./device-card";
 import Pagination from "./pagination";
 
 export async function DevicesTable({
@@ -56,6 +57,7 @@ export async function DevicesTable({
 				}
 			},
 			isActive: parentalControl ? parentalControl : undefined,
+			blocked: parentalControl !== undefined ? undefined : false,
 		},
 	});
 
@@ -86,6 +88,8 @@ export async function DevicesTable({
 				}
 			},
 			isActive: parentalControl,
+			blocked: parentalControl !== undefined ? undefined : false,
+
 		},
 
 		skip: offset,
@@ -103,65 +107,82 @@ export async function DevicesTable({
 				</div>
 			) : (
 				<>
-					<Table className="overflow-scroll">
-						<TableCaption>Table of all devices.</TableCaption>
-						<TableHeader>
-							<TableRow>
-								<TableHead>Device Name</TableHead>
-								<TableHead>MAC Address</TableHead>
-								<TableHead>Actions</TableHead>
-							</TableRow>
-						</TableHeader>
-						<TableBody className="overflow-scroll">
-							{devices.map((device) => (
-								<TableRow key={device.id}>
-									<TableCell>
-										<div className="flex flex-col items-start">
-											<Link
-												className="font-medium hover:underline"
-												href={`/devices/${device.id}`}
-											>
-												{device.name}
-											</Link>
-											<span className="text-muted-foreground">
-												Active until{" "}
-												{new Date().toLocaleDateString("en-US", {
-													month: "short",
-													day: "2-digit",
-													year: "numeric",
-												})}
-											</span>
-										</div>
-									</TableCell>
-									<TableCell className="font-medium">{device.mac}</TableCell>
-									<TableCell>
-										{!parentalControl ? (
-											<AddDevicesToCartButton device={device} />
-										) : (
-											<BlockDeviceButton device={device} />
+					<div className="hidden sm:block">
+						<Table className="overflow-scroll">
+							<TableCaption>Table of all devices.</TableCaption>
+							<TableHeader>
+								<TableRow>
+									<TableHead>Device Name</TableHead>
+									<TableHead>MAC Address</TableHead>
+									<TableHead>Actions</TableHead>
+								</TableRow>
+							</TableHeader>
+							<TableBody className="overflow-scroll">
+								{devices.map((device) => (
+									<TableRow key={device.id}>
+										<TableCell>
+											<div className="flex flex-col items-start">
+												<Link
+													className="font-medium hover:underline"
+													href={`/devices/${device.id}`}
+												>
+													{device.name}
+												</Link>
+												<span className="text-muted-foreground">
+													Active until{" "}
+													{new Date().toLocaleDateString("en-US", {
+														month: "short",
+														day: "2-digit",
+														year: "numeric",
+													})}
+												</span>
+												{parentalControl && (
+													<div className="p-2 rounded border my-2">
+														<span>Comment: </span>
+														<p className="text-neutral-500">
+															blocked because he was watching youtube
+														</p>
+													</div>
+												)}
+
+											</div>
+										</TableCell>
+										<TableCell className="font-medium">{device.mac}</TableCell>
+										<TableCell>
+											{!parentalControl ? (
+												<AddDevicesToCartButton device={device} />
+											) : (
+												<BlockDeviceButton device={device} />
+											)}
+										</TableCell>
+									</TableRow>
+								))}
+							</TableBody>
+							<TableFooter>
+								<TableRow>
+									<TableCell colSpan={2}>
+										{query.length > 0 && (
+											<p className="text-sm text-muted-foreground">
+												Showing {devices.length} locations for &quot;{query}
+												&quot;
+											</p>
 										)}
 									</TableCell>
+									<TableCell className="text-muted-foreground">
+										{totalDevices} devices
+									</TableCell>
 								</TableRow>
-							))}
-						</TableBody>
-						<TableFooter>
-							<TableRow>
-								<TableCell colSpan={2}>
-									{query.length > 0 && (
-										<p className="text-sm text-muted-foreground">
-											Showing {devices.length} locations for &quot;{query}
-											&quot;
-										</p>
-									)}
-								</TableCell>
-								<TableCell className="text-muted-foreground">
-									{totalDevices} devices
-								</TableCell>
-							</TableRow>
-						</TableFooter>
-					</Table>
-					<Pagination totalPages={totalPages} currentPage={page} />
+							</TableFooter>
+						</Table>
+						<Pagination totalPages={totalPages} currentPage={page} />
+					</div>
+					<div className="sm:hidden my-4">
+						{devices.map((device) => (
+							<DeviceCard parentalControl={parentalControl} key={device.id} device={device} />
+						))}
+					</div>
 				</>
+
 			)}
 		</div>
 	);