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.

actions/payment.ts

@@ -0,0 +1,26 @@
+"use server";
+
+import prisma from "@/lib/db";
+import type { PaymentType } from "@/lib/types";
+import { revalidatePath } from "next/cache";
+
+export async function createPayment(data: PaymentType) {
+	console.log("hi", 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,
+					};
+				}),
+			},
+		},
+	});
+	revalidatePath("/devices");
+	return payment;
+}