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/ui/app-sidebar.tsx

@@ -1,4 +1,5 @@
 import {
+	Calculator,
 	ChevronRight,
 	Coins,
 	CreditCard,
@@ -72,6 +73,11 @@ const data = {
 					url: "/user-payments",
 					icon: <Coins size={16} />,
 				},
+				{
+					title: "Price Calculator",
+					url: "/price-calculator",
+					icon: <Calculator size={16} />,
+				},
 			],
 		},
 	],
@@ -84,7 +90,7 @@ export function AppSidebar({
 	return (
 		<Sidebar {...props} className="z-50">
 			<SidebarHeader>
-				<h4 className="p-2 rounded shadow text-center uppercase ">
+				<h4 className="p-2 rounded title-bg border text-center uppercase ">
 					Sar Link Portal
 				</h4>
 			</SidebarHeader>