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/user/add-device-dialog.tsx

@@ -22,6 +22,7 @@ import { useState } from "react";
 import { type SubmitHandler, useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { z } from "zod";
+import { GetMacAccordion } from "../how-to-get-mac";
 
 export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 	const formSchema = z.object({
@@ -90,6 +91,7 @@ export default function AddDeviceDialogForm({ user_id }: { user_id?: string }) {
 						To add a new device, enter the device name and mac address below.
 						Click save when you are done.
 					</DialogDescription>
+					<GetMacAccordion />
 				</DialogHeader>
 				<form onSubmit={handleSubmit(onSubmit)}>
 					<div className="grid gap-4 py-4">