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>
+  );
+}

app/(dashboard)/payments/page.tsx

@@ -1,14 +1,33 @@
-"use client";
-import { authClient } from "@/lib/auth-client";
-import React from "react";
+import { PaymentsTable } from "@/components/payments-table";
+import Search from "@/components/search";
+import { Suspense } from "react";
 
-export default function MyPayments() {
-	const session = authClient.useSession();
+export default async function Devices({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    query: string;
+    page: number;
+    sortBy: string;
+    status: string;
+  }>;
+}) {
+  const query = (await searchParams)?.query || "";
+  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>My Payments</h3>
+      </div>
 
-	return (
-		<div>
-			<h3>Client session</h3>
-			<pre>{JSON.stringify(session.data, null, 2)}</pre>
-		</div>
-	);
+      <div
+        id="user-filters"
+        className=" border-b-2 pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        <Search />
+      </div>
+      <Suspense key={query} fallback={"loading...."}>
+        <PaymentsTable searchParams={searchParams} />
+      </Suspense>
+    </div>
+  );
 }