Enhance dashboard functionality with new payment and device management features

- Added new PaymentPage component for processing payments and displaying devices to pay.
- Introduced DeviceDetails component for viewing individual device information.
- Implemented PriceCalculator component for calculating costs based on user input.
- Integrated Jotai for state management across components, including device cart functionality.
- Updated layout to include Jotai Provider for state management.
- Enhanced DevicesTable with AddDevicesToCartButton for adding devices to the cart.
- Refactored sidebar to include a link to the new Price Calculator page.
- Updated Prisma schema to include Payment and BillFormula models for better data handling.
- Added new UI components for device cart management and drawer functionality.
- Improved overall user experience with responsive design adjustments and new UI elements.

components/devices-to-pay.tsx

@@ -0,0 +1,61 @@
+'use client'
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableRow,
+} from "@/components/ui/table"
+import { deviceCartAtom } from '@/lib/atoms'
+import type { BillFormula } from "@prisma/client"
+import { useAtomValue } from 'jotai'
+import React from 'react'
+
+export default function DevicesToPay({ billFormula }: { billFormula?: BillFormula }) {
+  const devices = useAtomValue(deviceCartAtom)
+  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
+  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>
+        <div className="flex flex-col gap-2">
+          {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>
+                <div className="text-xs text-muted-foreground">
+                  {device.mac}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className='m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded'>
+        <Table>
+          <TableCaption>Please send the following amount to the payment address</TableCaption>
+          <TableBody>
+            <TableRow>
+              <TableCell>Total Devices</TableCell>
+              <TableCell className="text-right">{devices.length}</TableCell>
+            </TableRow>
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={1}>Total</TableCell>
+              <TableCell className="text-right">{total.toFixed(2)}</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+    </div>
+
+  )
+}