From 2834f23f80a6c215407cafeb1eec1ce692432e91 Mon Sep 17 00:00:00 2001
From: i701 <idhaan701@outlook.com>
Date: Sun, 29 Jun 2025 19:55:00 +0500
Subject: [PATCH] feat: enhance device cart with cancel feature and improve
 payments table filters

---
 README.md                          |  9 ++++----
 components/device-cart.tsx         | 35 +++++++++++++++++++-----------
 components/devices-for-payment.tsx |  2 +-
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 4d1e2a6..23e4045 100644
--- a/README.md
+++ b/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
diff --git a/components/device-cart.tsx b/components/device-cart.tsx
index f226eef..f1d5669 100644
--- a/components/device-cart.tsx
+++ b/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>
 	);
 }
diff --git a/components/devices-for-payment.tsx b/components/devices-for-payment.tsx
index a554b9f..0bc0c82 100644
--- a/components/devices-for-payment.tsx
+++ b/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">