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/devices-to-pay.tsx

@@ -1,4 +1,3 @@
-'use client'
 import {
   Table,
   TableBody,
@@ -7,26 +6,33 @@ import {
   TableFooter,
   TableRow,
 } from "@/components/ui/table"
-import { deviceCartAtom } from '@/lib/atoms'
-import type { BillFormula } from "@prisma/client"
-import { useAtomValue } from 'jotai'
+import type { BillFormula, Prisma } from "@prisma/client"
 import React from 'react'
 
-export default function DevicesToPay({ billFormula }: { billFormula?: BillFormula }) {
-  const devices = useAtomValue(deviceCartAtom)
-  if (devices.length === 0) {
+
+type PaymentWithDevices = Prisma.PaymentGetPayload<{
+  include: {
+    devices: true
+  }
+}>
+
+export default function DevicesToPay({ billFormula, payment }: { billFormula?: BillFormula, payment?: PaymentWithDevices }) {
+  const devices = payment?.devices
+  if (devices?.length === 0) {
     return null
   }
   const baseAmount = billFormula?.baseAmount ?? 100
   const discountPercentage = billFormula?.discountPercentage ?? 75
   // 100+(n−1)×75
-  const total = baseAmount + (devices.length - 1) * discountPercentage
+  const total = baseAmount + (devices?.length ?? 1 - 1) * discountPercentage
   return (
     <div className='w-full'>
       <div className='p-2 flex flex-col gap-2'>
-        <h3 className='title-bg my-1 font-semibold text-lg'>Devices to pay</h3>
+        <h3 className='title-bg my-1 font-semibold text-lg'>
+          {!payment?.paid ? 'Devices to pay' : 'Devices Paid'}
+        </h3>
         <div className="flex flex-col gap-2">
-          {devices.map((device) => (
+          {devices?.map((device) => (
             <div key={device.id} className="bg-muted border rounded p-2 flex gap-2 items-center">
               <div className="flex flex-col">
                 <div className="text-sm font-medium">{device.name}</div>
@@ -44,7 +50,7 @@ export default function DevicesToPay({ billFormula }: { billFormula?: BillFormul
           <TableBody>
             <TableRow>
               <TableCell>Total Devices</TableCell>
-              <TableCell className="text-right">{devices.length}</TableCell>
+              <TableCell className="text-right">{devices?.length}</TableCell>
             </TableRow>
           </TableBody>
           <TableFooter>