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.

app/(dashboard)/payments/[paymentId]/page.tsx

@@ -0,0 +1,37 @@
+import DevicesToPay from "@/components/devices-to-pay";
+import { hasSession } from "@/lib/auth-guard";
+import prisma from "@/lib/db";
+import React from "react";
+
+export default async function PaymentPage({
+  params,
+}: { params: Promise<{ paymentId: string }> }) {
+  const paymentId = (await params).paymentId;
+  const payment = await prisma.payment.findUnique({
+    where: {
+      id: paymentId,
+    },
+    include: {
+      devices: true,
+    },
+  });
+  await hasSession();
+  const formula = await prisma.billFormula.findFirst();
+  return (
+    <div>
+      <div className="flex justify-between items-center border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
+        <h3>Payment</h3>
+      </div>
+
+      <div
+        id="user-filters"
+        className="pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        <DevicesToPay
+          billFormula={formula ?? undefined}
+          payment={payment || undefined}
+        />
+      </div>
+    </div>
+  );
+}