Implement Omada device management and enhance payment processing

- Added new omada-actions.ts file to handle fetching and updating device groups in Omada.
- Updated authMiddleware to include new payment routes.
- Enhanced createPayment function to add devices to a group upon successful payment verification.
- Improved payment verification process to include device management.
- Refactored PaymentsTable and DevicesToPay components for better UI and state handling.
- Removed unused hasSession function from auth-guard.ts for cleaner code.

components/devices-to-pay.tsx

@@ -42,7 +42,7 @@ export default function DevicesToPay({
   return (
     <div className="w-full">
       <div className="p-2 flex flex-col gap-2">
-        <h3 className="title-bg my-1 font-semibold text-lg">
+        <h3 className="title-bg my-1 p-2 font-semibold text-lg">
           {!payment?.paid ? "Devices to pay" : "Devices Paid"}
         </h3>
         <div className="flex flex-col gap-2">
@@ -71,7 +71,7 @@ export default function DevicesToPay({
                 accountNo="90101400028321000"
               />
               {payment?.paid ? (
-                <Button size={"lg"} variant={"secondary"} disabled className="text-green-400 bg-green-800">Payment Verified</Button>
+                <Button size={"lg"} variant={"secondary"} disabled className="dark:text-green-200 text-green-900 bg-green-500/20 uppercase font-semibold">Payment Verified</Button>
               ) : (
                 <Button
                   disabled={verifying}

components/payments-table.tsx

@@ -11,6 +11,7 @@ import {
 import prisma from "@/lib/db";
 import Link from "next/link";
 
+import { cn } from "@/lib/utils";
 import { Calendar } from "lucide-react";
 import Pagination from "./pagination";
 import { Badge } from "./ui/badge";
@@ -96,7 +97,7 @@ export async function PaymentsTable({
               {payments.map((payment) => (
                 <TableRow key={payment.id}>
                   <TableCell>
-                    <div className="flex flex-col items-start title-bg border rounded p-2">
+                    <div className={cn("flex flex-col items-start title-bg border rounded p-2", payment?.paid ? "bg-green-500/10 border-dashed border-green=500" : "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50")}>
                       <div className="flex items-center gap-2">
                         <Calendar size={16} opacity={0.5} />
                         <span className="text-muted-foreground">
@@ -114,7 +115,7 @@ export async function PaymentsTable({
                             View Details
                           </Button>
                         </Link>
-                        <Badge className="p-2" variant={payment.paid ? "outline" : "secondary"}>
+                        <Badge className={cn(payment?.paid ? "text-green-500 bg-green-500/20" : "text-yellow-500 bg-yellow-500/20")} variant={payment.paid ? "outline" : "secondary"}>
                           {payment.paid ? "Paid" : "Unpaid"}
                         </Badge>
                       </div>