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/payments-table.tsx

@@ -0,0 +1,166 @@
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import prisma from "@/lib/db";
+import Link from "next/link";
+
+import { Calendar } from "lucide-react";
+import Pagination from "./pagination";
+import { Badge } from "./ui/badge";
+import { Button } from "./ui/button";
+
+export async function PaymentsTable({
+  searchParams,
+}: {
+  searchParams: Promise<{
+    query: string;
+    page: number;
+    sortBy: string;
+  }>;
+}) {
+  const query = (await searchParams)?.query || "";
+  const page = (await searchParams)?.page;
+  const totalPayments = await prisma.payment.count({
+    where: {
+      OR: [
+        {
+          devices: {
+            every: {
+              name: {
+                contains: query || "",
+                mode: "insensitive",
+              },
+            },
+          },
+        },
+      ],
+    },
+  });
+
+  const totalPages = Math.ceil(totalPayments / 10);
+  const limit = 10;
+  const offset = (Number(page) - 1) * limit || 0;
+
+  const payments = await prisma.payment.findMany({
+    where: {
+      OR: [
+        {
+          devices: {
+            every: {
+              name: {
+                contains: query || "",
+                mode: "insensitive",
+              },
+            },
+          },
+        },
+      ],
+    },
+    include: {
+      devices: true
+    },
+
+    skip: offset,
+    take: limit,
+    orderBy: {
+      createdAt: "desc",
+    },
+  });
+
+  return (
+    <div>
+      {payments.length === 0 ? (
+        <div className="h-[calc(100svh-400px)] flex flex-col items-center justify-center my-4">
+          <h3>No Payments yet.</h3>
+        </div>
+      ) : (
+        <>
+          <Table className="overflow-scroll">
+            <TableCaption>Table of all devices.</TableCaption>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Details</TableHead>
+                <TableHead>Duration</TableHead>
+
+                <TableHead>Amount</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody className="overflow-scroll">
+              {payments.map((payment) => (
+                <TableRow key={payment.id}>
+                  <TableCell>
+                    <div className="flex flex-col items-start title-bg border rounded p-2">
+                      <div className="flex items-center gap-2">
+                        <Calendar size={16} opacity={0.5} />
+                        <span className="text-muted-foreground">
+                          {new Date(payment.createdAt).toLocaleDateString("en-US", {
+                            month: "short",
+                            day: "2-digit",
+                            year: "numeric",
+                          })}
+                        </span>
+                      </div>
+
+                      <div className="flex items-center gap-2 mt-2">
+                        <Link className="font-medium hover:underline" href={`/payments/${payment.id}`}>
+                          <Button size={"sm"} variant="outline">
+                            View Details
+                          </Button>
+                        </Link>
+                        <Badge className="p-2" variant={payment.paid ? "outline" : "secondary"}>
+                          {payment.paid ? "Paid" : "Unpaid"}
+                        </Badge>
+                      </div>
+                      <div className="bg-white dark:bg-black p-2 rounded mt-2 w-full">
+                        <h3 className="text-sm font-medium">Devices</h3>
+                        <ol className="list-disc list-inside text-sm">
+                          {payment.devices.map((device) => (
+                            <li key={device.id} className="text-sm text-muted-foreground">
+                              {device.name}
+                            </li>
+                          ))}
+                        </ol>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell className="font-medium">
+                    {payment.numberOfMonths} Months
+                  </TableCell>
+                  <TableCell>
+                    <span className="font-semibold pr-2">
+                      {payment.amount.toFixed(2)}
+                    </span>
+                    MVR
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+            <TableFooter>
+              <TableRow>
+                <TableCell colSpan={2}>
+                  {query.length > 0 && (
+                    <p className="text-sm text-muted-foreground">
+                      Showing {payments.length} locations for &quot;{query}
+                      &quot;
+                    </p>
+                  )}
+                </TableCell>
+                <TableCell className="text-muted-foreground">
+                  {totalPayments} payments
+                </TableCell>
+              </TableRow>
+            </TableFooter>
+          </Table>
+          <Pagination totalPages={totalPages} currentPage={page} />
+        </>
+      )}
+    </div>
+  );
+}