Refactor payment verification and add MAC address guide

- Updated payment verification logic in `actions/payment.ts` to remove unused code and improve clarity.
- Enhanced `DevicesToPay` component to handle separate states for wallet and transfer payment verification.
- Introduced a new `GetMacAccordion` component to guide users on finding their MAC addresses.
- Created a reusable accordion component in `ui/accordion.tsx` for better UI consistency.
- Integrated the MAC address guide into the device addition dialog.
- Updated Tailwind CSS configuration to include animations for the accordion component.
- Added Radix UI Accordion dependency to package.json and package-lock.json.
- Improved error handling in API response utility to log unauthorized responses.

components/devices-to-pay.tsx

@@ -25,8 +25,9 @@ export default function DevicesToPay({
 	payment,
 	user,
 }: { payment?: Payment; user?: User }) {
-	console.log(user);
-	const [verifying, setVerifying] = useState(false);
+	const [verifyingWalletPayment, setVerifyingWalletPayment] = useState(false);
+	const [verifyingTransferPayment, setVerifyingTransferPayment] = useState(false);
+
 
 	const devices = payment?.devices;
 	if (devices?.length === 0) {
@@ -81,37 +82,47 @@ export default function DevicesToPay({
 								<div className="flex flex-col gap-2">
 									{isWalletPayVisible && (
 										<Button
-											disabled={verifying}
+											disabled={verifyingWalletPayment || verifyingTransferPayment}
 											onClick={async () => {
-												setVerifying(true);
+												setVerifyingWalletPayment(true);
 												await verifyPayment({
 													method: "WALLET",
 													id: payment?.id ?? "",
 												});
-												setVerifying(false);
+												setVerifyingWalletPayment(false);
 											}}
 											variant={"secondary"}
 											size={"lg"}
 										>
-											{verifying ? "Paying..." : "Pay with wallet"}
+											{verifyingWalletPayment ? "Processing payment..." : "Pay with wallet"}
 											<Wallet />
 										</Button>
 									)}
 									<Button
-										disabled={verifying}
+										disabled={verifyingTransferPayment || verifyingWalletPayment}
 										onClick={async () => {
-											setVerifying(true);
-											const res = await verifyPayment({
-												id: payment?.id ?? "",
-												method: "TRANSFER",
-											});
-											setVerifying(false);
+											setVerifyingTransferPayment(true);
+											try {
+												const res = await verifyPayment({
+													id: payment?.id ?? "",
+													method: "TRANSFER"
+												});
+												toast.success("Payment verification successful!");
+											} catch (error: unknown) {
+												if (error instanceof Error) {
+													toast.error(error.message);
+												} else {
+													toast.error("Payment verification failed.");
+												}
+											} finally {
+												setVerifyingTransferPayment(false);
+											}
 										}}
 										size={"lg"}
 										className="mb-4"
 									>
-										{verifying ? "Verifying..." : "Verify Payment"}
-										{verifying ? (
+										{verifyingTransferPayment ? "Processing payment..." : "I have paid"}
+										{verifyingTransferPayment ? (
 											<Loader2 className="animate-spin" />
 										) : (
 											<BadgeDollarSign />