feat: enhance device cart with cancel feature and improve payments table filters

README.md

@@ -6,11 +6,12 @@ This is a web portal for SAR Link customers.
 ## User Menu
 ### Devices
  - [x] Add mac vendor validation for adding devices
- - [ ] Add all the filters for devices table (mobile responsive)
+ - [x] Add all the filters for devices table (mobile responsive)
+ - [x] Add cancel feature to selected devices floating button
 
-### Payments
- - [ ] Show payments table
- - [ ] Add all the filters for payment table (mobile responsive)
+ ### Payments
+ - [x] Show payments table
+ - [x] Add all the filters for payment table (mobile responsive)
  - [ ] Fix bill formula linking for generated payments
 
 ### Parental Control

components/device-cart.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { Button } from "@/components/ui/button";
-import { deviceCartAtom } from "@/lib/atoms";
-import { useAtomValue } from "jotai";
+import { useAtom } from "jotai";
 import { MonitorSmartphone } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { deviceCartAtom } from "@/lib/atoms";
 
 export function DeviceCartDrawer() {
 	const pathname = usePathname();
-	const devices = useAtomValue(deviceCartAtom);
+	const [devices, setDevices] = useAtom(deviceCartAtom);
 	const router = useRouter();
 	if (pathname === "/payment" || pathname === "/devices-to-pay") {
 		return null;
@@ -16,14 +16,23 @@ export function DeviceCartDrawer() {
 
 	if (devices.length === 0) return null;
 	return (
-		<Button
-			size={"lg"}
-			className="bg-sarLinkOrange dark:hover:bg-orange-900 fixed bottom-20 w-80 uppercase h-12 z-20 left-1/2 transform -translate-x-1/2 hover:ring-2 hover:ring-sarLinkOrange transition-all duration-200"
-			onClick={() => router.push("/devices-to-pay")}
-			variant="outline"
-		>
-			<MonitorSmartphone />
-			Pay {devices.length > 0 && `(${devices.length})`} Device
-		</Button>
+		<div className="bg-sarLinkOrange rounded-lg shadow-2xl dark:hover:bg-orange-900 fixed bottom-20 w-80 uppercase h-auto z-20 left-1/2 transform -translate-x-1/2 hover:ring-2 hover:ring-sarLinkOrange transition-all duration-200 p-2 flex flex-col gap-2">
+			<Button
+				size={"lg"}
+				className="w-ful"
+				onClick={() => router.push("/devices-to-pay")}
+				variant="secondary"
+			>
+				<MonitorSmartphone />
+				Pay {devices.length > 0 && `(${devices.length})`} {devices.length > 1 ? "devices" : "device"}
+			</Button>
+			<Button
+				variant={"destructive"}
+				onClick={() => setDevices([])}
+				className="w-full"
+			>
+				Cancel
+			</Button>
+		</div>
 	);
 }

components/devices-for-payment.tsx

@@ -46,7 +46,7 @@ export default function DevicesForPayment() {
 	};
 
 	if (disabled) {
-		return <FullPageLoader />
+		return <FullPageLoader />;
 	}
 	return (
 		<div className="max-w-lg mx-auto space-y-4 px-4">