Add payment processing and device management features

- Introduced createPayment action for handling payment creation.
- Added PaymentsTable component for displaying payment records with pagination.
- Implemented new PaymentPage for viewing individual payment details and associated devices.
- Refactored DeviceCartDrawer to integrate payment creation and device selection.
- Enhanced DevicesToPay component to display devices based on payment status.
- Updated PriceCalculator component for better user input handling.
- Introduced NumberInput component for consistent number input across forms.
- Modified Prisma schema to include new fields for payments and devices.
- Improved overall user experience with responsive design adjustments and new UI elements.

components/devices-table.tsx

@@ -9,6 +9,7 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import prisma from "@/lib/db";
+import Link from "next/link";
 import AddDevicesToCartButton from "./add-devices-to-cart-button";
 import Pagination from "./pagination";
 
@@ -40,6 +41,11 @@ export async function DevicesTable({
 					},
 				},
 			],
+			NOT: {
+				payment: {
+					paid: false
+				}
+			},
 		},
 	});
 
@@ -63,6 +69,11 @@ export async function DevicesTable({
 					},
 				},
 			],
+			NOT: {
+				payment: {
+					paid: false
+				}
+			},
 		},
 
 		skip: offset,
@@ -92,7 +103,24 @@ export async function DevicesTable({
 						<TableBody className="overflow-scroll">
 							{devices.map((device) => (
 								<TableRow key={device.id}>
-									<TableCell className="font-medium">{device.name}</TableCell>
+									<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>
 										<AddDevicesToCartButton device={device} />