refactor: update axios client import, enhance device and payment handling, and add cancel payment button component

components/devices-table.tsx

@@ -56,43 +56,6 @@ export async function DevicesTable({
 							</TableHeader>
 							<TableBody className="overflow-scroll">
 								{data.map((device) => (
-									// <TableRow key={device.id}>
-									// 	<TableCell>
-									// 		<div className="flex flex-col items-start">
-									// 			<Link
-									// 				className="font-medium hover:underline"
-									// 				href={`/devices/${device.id}`}
-									// 			>
-									// 				{device.name}
-									// 			</Link>
-									// 			<span className="text-muted-foreground">
-									// 				Active until{" "}
-									// 				{new Date().toLocaleDateString("en-US", {
-									// 					month: "short",
-									// 					day: "2-digit",
-									// 					year: "numeric",
-									// 				})}
-									// 			</span>
-									// 			{parentalControl && (
-									// 				<div className="p-2 rounded border my-2">
-									// 					<span>Comment: </span>
-									// 					<p className="text-neutral-500">
-									// 						blocked because he was watching youtube
-									// 					</p>
-									// 				</div>
-									// 			)}
-
-									// 		</div>
-									// 	</TableCell>
-									// 	<TableCell className="font-medium">{device.mac}</TableCell>
-									// 	<TableCell>
-									// 		{!parentalControl ? (
-									// 			<AddDevicesToCartButton device={device} />
-									// 		) : (
-									// 			<BlockDeviceButton device={device} />
-									// 		)}
-									// 	</TableCell>
-									// </TableRow>
 									<ClickableRow
 										admin={isAdmin}
 										key={device.id}