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-table.tsx

@@ -9,6 +9,7 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import prisma from "@/lib/db";
+import AddDevicesToCartButton from "./add-devices-to-cart-button";
 import Pagination from "./pagination";
 
 export async function DevicesTable({
@@ -38,8 +39,6 @@ export async function DevicesTable({
 						mode: "insensitive",
 					},
 				},
-
-
 			],
 		},
 	});
@@ -63,8 +62,6 @@ export async function DevicesTable({
 						mode: "insensitive",
 					},
 				},
-
-
 			],
 		},
 
@@ -75,7 +72,6 @@ export async function DevicesTable({
 		},
 	});
 
-
 	return (
 		<div>
 			{devices.length === 0 ? (
@@ -90,20 +86,16 @@ export async function DevicesTable({
 							<TableRow>
 								<TableHead>Device Name</TableHead>
 								<TableHead>MAC Address</TableHead>
-								<TableHead>Status</TableHead>
+								<TableHead>Actions</TableHead>
 							</TableRow>
 						</TableHeader>
 						<TableBody className="overflow-scroll">
 							{devices.map((device) => (
-								<TableRow
-
-									key={device.id}
-								>
+								<TableRow key={device.id}>
 									<TableCell className="font-medium">{device.name}</TableCell>
 									<TableCell className="font-medium">{device.mac}</TableCell>
-
 									<TableCell>
-										Parental Controls
+										<AddDevicesToCartButton device={device} />
 									</TableCell>
 								</TableRow>
 							))}