fix: ui updates for org api keys

Signed-off-by: allanice001 <allanice001@gmail.com>

ui/src/pages/cluster-page.tsx

@@ -1,36 +1,56 @@
-;
 // src/pages/ClustersPage.tsx
 
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react"
-import { clustersApi } from "@/api/clusters";
+import { clustersApi } from "@/api/clusters"
-import { dnsApi } from "@/api/dns";
+import { dnsApi } from "@/api/dns"
-import { loadBalancersApi } from "@/api/loadbalancers";
+import { loadBalancersApi } from "@/api/loadbalancers"
-import { nodePoolsApi } from "@/api/node_pools";
+import { nodePoolsApi } from "@/api/node_pools"
-import { serversApi } from "@/api/servers";
+import { serversApi } from "@/api/servers"
-import type { DtoClusterResponse, DtoDomainResponse, DtoLoadBalancerResponse, DtoNodePoolResponse, DtoRecordSetResponse, DtoServerResponse } from "@/sdk";
+import type {
-import { zodResolver } from "@hookform/resolvers/zod";
+  DtoClusterResponse,
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+  DtoDomainResponse,
-import { AlertCircle, CheckCircle2, CircleSlash2, FileCode2, Globe2, Loader2, MapPin, Pencil, Plus, Search, Server, Wrench } from "lucide-react";
+  DtoLoadBalancerResponse,
-import { useForm } from "react-hook-form";
+  DtoNodePoolResponse,
-import { toast } from "sonner";
+  DtoRecordSetResponse,
-import { z } from "zod";
+  DtoServerResponse,
-
+} from "@/sdk"
-
+import { zodResolver } from "@hookform/resolvers/zod"
-
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
-import { truncateMiddle } from "@/lib/utils";
+import {
-import { Badge } from "@/components/ui/badge.tsx";
+  AlertCircle,
-import { Button } from "@/components/ui/button.tsx";
+  CheckCircle2,
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog.tsx";
+  CircleSlash2,
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form.tsx";
+  FileCode2,
-import { Input } from "@/components/ui/input.tsx";
+  Globe2,
-import { Label } from "@/components/ui/label.tsx";
+  Loader2,
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select.tsx";
+  MapPin,
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table.tsx";
+  Pencil,
-import { Textarea } from "@/components/ui/textarea.tsx";
+  Plus,
-
+  Search,
-
+  Server,
-
+  Wrench,
+} from "lucide-react"
+import { useForm } from "react-hook-form"
+import { toast } from "sonner"
+import { z } from "zod"
 
+import { truncateMiddle } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge.tsx"
+import { Button } from "@/components/ui/button.tsx"
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog.tsx"
+import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage, } from "@/components/ui/form.tsx"
+import { Input } from "@/components/ui/input.tsx"
+import { Label } from "@/components/ui/label.tsx"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select.tsx"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@/components/ui/table.tsx"
+import { Textarea } from "@/components/ui/textarea.tsx"
 
 // --- Schemas ---
 

ui/src/pages/org/api-keys.tsx

@@ -8,6 +8,7 @@ import { useForm } from "react-hook-form"
 import { toast } from "sonner"
 import { z } from "zod"
 
+import { Badge } from "@/components/ui/badge.tsx"
 import { Button } from "@/components/ui/button.tsx"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card.tsx"
 import {
@@ -161,6 +162,7 @@ export const OrgApiKeys = () => {
                 <TableHead>Scope</TableHead>
                 <TableHead>Created</TableHead>
                 <TableHead>Expires</TableHead>
+                <TableHead>Status</TableHead>
                 <TableHead className="w-28" />
               </TableRow>
             </TableHeader>
@@ -173,6 +175,33 @@ export const OrgApiKeys = () => {
                   <TableCell>
                     {k.expires_at ? new Date(k.expires_at).toLocaleString() : "-"}
                   </TableCell>
+                  <TableCell>
+                    {(() => {
+                      const isExpired = k.expires_at ? new Date(k.expires_at) <= new Date() : false
+
+                      if (k.revoked) {
+                        return (
+                          <Badge variant="destructive" className="font-mono">
+                            Revoked
+                          </Badge>
+                        )
+                      }
+
+                      if (isExpired) {
+                        return (
+                          <Badge variant="outline" className="font-mono">
+                            Expired
+                          </Badge>
+                        )
+                      }
+
+                      return (
+                        <Badge variant="secondary" className="font-mono">
+                          Active
+                        </Badge>
+                      )
+                    })()}
+                  </TableCell>
                   <TableCell className="text-right">
                     <Button variant="destructive" size="sm" onClick={() => deleteMut.mutate(k.id!)}>
                       Delete