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/auth/application-layout.tsx

@@ -9,6 +9,7 @@ import {
 	SidebarTrigger,
 } from "@/components/ui/sidebar";
 import { auth } from "@/lib/auth";
+import prisma from "@/lib/db";
 import { headers } from "next/headers";
 import { AccountPopover } from "./account-popver";
 
@@ -18,6 +19,7 @@ export async function ApplicationLayout({
 	const session = await auth.api.getSession({
 		headers: await headers()
 	});
+	const billFormula = await prisma.billFormula.findFirst();
 
 	return (
 		<SidebarProvider>
@@ -30,7 +32,7 @@ export async function ApplicationLayout({
 					</div>
 
 					<div className="flex items-center gap-2">
-						<DeviceCartDrawer />
+						<DeviceCartDrawer billFormula={billFormula || null} />
 						<ModeToggle />
 						<AccountPopover />
 					</div>