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.

app/(dashboard)/devices/[deviceId]/page.tsx

@@ -0,0 +1,39 @@
+import prisma from '@/lib/db'
+import React from 'react'
+
+export default async function DeviceDetails({ params }: {
+  params: Promise<{ deviceId: string }>
+}) {
+  const deviceId = (await params)?.deviceId
+  const device = await prisma.device.findUnique({
+    where: {
+      id: deviceId,
+    },
+
+  })
+  return (
+    <div>
+      <div className="flex flex-col justify-between items-start border-b-2 text-gray-500 title-bg py-4 px-2 mb-4">
+        <h3 className='text-2xl font-bold'>
+          {device?.name}
+        </h3>
+        <span>{device?.mac}</span>
+      </div>
+
+      <div
+        id="user-filters"
+        className=" border-b-2 pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+      >
+        {/* <Search /> */}
+        {/* <Filter
+        options={sortfilterOptions}
+        defaultOption="asc"
+        queryParamKey="sortBy"
+      /> */}
+      </div>
+      {/* <Suspense key={query} fallback={"loading...."}>
+      <DevicesTable searchParams={searchParams} />
+    </Suspense> */}
+    </div>
+  )
+}