Enhance payment processing and device management features

- Introduced wallet payment option in verifyPayment function to allow users to pay using their wallet balance.
- Added new BlockDeviceDialog component for managing device blocking and unblocking actions.
- Updated DeviceCard component to display device status and integrate blocking functionality.
- Refactored DevicesTable to utilize DeviceCard for better UI representation of devices.
- Implemented Wallet component to manage wallet balance and top-up functionality.
- Enhanced API routes and Prisma schema to support wallet transactions and device blocking reasons.
- Improved overall user experience with responsive design adjustments and new UI elements.

These changes improve user control over payments and device management, enhancing the overall functionality of the application.

lib/atoms.ts

@@ -10,9 +10,12 @@ export const discountPercentageAtom = atom(75);
 export const numberOfDevicesAtom = atom(1);
 export const numberOfDaysAtom = atom(30);
 export const numberOfMonths = atom(1);
+export const walletTopUpValue = atom(1);
 export const formulaResultAtom = atom("");
 export const deviceCartAtom = atom<Device[]>([]);
 export const cartDrawerOpenAtom = atom(false);
+export const WalletDrawerOpenAtom = atom(false);
+
 // Export the atoms with their store
 export const atoms = {
 	initialPriceAtom,
@@ -23,4 +26,5 @@ export const atoms = {
 	formulaResultAtom,
 	deviceCartAtom,
 	cartDrawerOpenAtom,
+	walletTopUpValue,
 };

lib/types.ts

@@ -6,6 +6,12 @@ export type PaymentType = {
 	paid: boolean;
 };
 
+export type TopupType = {
+	amount: number;
+	userId: string;
+	paid: boolean;
+};
+
 interface IpAddress {
 	ip: string;
 	mask: number;