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/add-devices-to-cart-button.tsx

@@ -0,0 +1,32 @@
+'use client'
+import { deviceCartAtom } from '@/lib/atoms'
+import type { Device } from '@prisma/client'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { BadgePlus, CheckCheck } from 'lucide-react'
+import React from 'react'
+import { Button } from './ui/button'
+
+export default function AddDevicesToCartButton({ device }: { device: Device }) {
+  const setDeviceCart = useSetAtom(deviceCartAtom)
+  const devices = useAtomValue(deviceCartAtom)
+  return (
+    <Button
+      disabled={devices.some((d) => d.id === device.id)}
+      onClick={() => setDeviceCart((prev) => [...prev, device])}
+    >
+      {devices.some((d) => d.id === device.id) ? (
+        <>
+          Added
+          <CheckCheck />
+        </>
+      ) : (
+        <>
+          Add to cart
+          <BadgePlus />
+
+        </>
+
+      )}
+    </Button>
+  )
+}