From cd6a51f5555a65dfb168df4d0884088baeb3cd8c Mon Sep 17 00:00:00 2001
From: alphaeusmote <41258468-alphaeusmote@users.noreply.replit.com>
Date: Thu, 10 Apr 2025 16:11:40 +0000
Subject: [PATCH] Enhance domain details display and add auto IP address
 option.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9111ef36-26c8-4085-84ca-a35dc1fec1b5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7083d608-d6d3-4a6a-9a27-6286c5109627/047afec0-aed8-488c-9dff-5c38706fcc42.jpg
---
 .../src/components/domain/domain-details.tsx  | 182 ++--
 .../components/domain/domain-details.tsx.new  | 970 ------------------
 2 files changed, 93 insertions(+), 1059 deletions(-)
 delete mode 100644 client/src/components/domain/domain-details.tsx.new

diff --git a/client/src/components/domain/domain-details.tsx b/client/src/components/domain/domain-details.tsx
index 4a53588..eb98c64 100644
--- a/client/src/components/domain/domain-details.tsx
+++ b/client/src/components/domain/domain-details.tsx
@@ -372,11 +372,11 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                         <Tooltip>
                           <TooltipTrigger asChild>
                             <span className="truncate max-w-[150px] inline-block">
-                              {record.content}
+                              {record.isAutoIP ? "Auto IP" : record.content}
                             </span>
                           </TooltipTrigger>
                           <TooltipContent>
-                            <p>{record.content}</p>
+                            <p>{record.isAutoIP ? "Auto IP" : record.content}</p>
                             {record.notes && (
                               <>
                                 <div className="border-t my-1"></div>
@@ -396,7 +396,7 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                     </TableCell>
                     <TableCell>
                       {record.isActive ? (
-                        <Badge variant="success">Active</Badge>
+                        <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">Active</Badge>
                       ) : (
                         <Badge variant="secondary">Inactive</Badge>
                       )}
@@ -547,26 +547,51 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                 )}
               />
               
-              <FormField
-                control={form.control}
-                name="content"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Content</FormLabel>
-                    <FormControl>
-                      <Input placeholder="192.168.1.1, example.com, etc" {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      {form.watch("type") === "A" && "IP address (e.g. 192.168.1.1)"}
-                      {form.watch("type") === "AAAA" && "IPv6 address"}
-                      {form.watch("type") === "CNAME" && "Domain name (e.g. example.com)"}
-                      {form.watch("type") === "MX" && "Mail server (e.g. mail.example.com)"}
-                      {form.watch("type") === "TXT" && "Text content"}
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              {(form.watch("type") === "A" || form.watch("type") === "AAAA") && (
+                <FormField
+                  control={form.control}
+                  name="isAutoIP"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                      <div className="space-y-0.5">
+                        <FormLabel className="text-base">Auto IP Address</FormLabel>
+                        <FormDescription>
+                          Automatically determine IP address using STUN
+                        </FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              )}
+              
+              {(!form.watch("isAutoIP") || (form.watch("type") !== "A" && form.watch("type") !== "AAAA")) && (
+                <FormField
+                  control={form.control}
+                  name="content"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Content</FormLabel>
+                      <FormControl>
+                        <Input placeholder="192.168.1.1, example.com, etc" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        {form.watch("type") === "A" && "IP address (e.g. 192.168.1.1)"}
+                        {form.watch("type") === "AAAA" && "IPv6 address"}
+                        {form.watch("type") === "CNAME" && "Domain name (e.g. example.com)"}
+                        {form.watch("type") === "MX" && "Mail server (e.g. mail.example.com)"}
+                        {form.watch("type") === "TXT" && "Text content"}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
               
               <FormField
                 control={form.control}
@@ -632,29 +657,6 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                 )}
               />
               
-              {(form.watch("type") === "A" || form.watch("type") === "AAAA") && (
-                <FormField
-                  control={form.control}
-                  name="isAutoIP"
-                  render={({ field }) => (
-                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                      <div className="space-y-0.5">
-                        <FormLabel className="text-base">Auto IP Address</FormLabel>
-                        <FormDescription>
-                          Automatically determine IP address using STUN
-                        </FormDescription>
-                      </div>
-                      <FormControl>
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-              )}
-              
               <FormField
                 control={form.control}
                 name="notes"
@@ -787,26 +789,51 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                 )}
               />
               
-              <FormField
-                control={form.control}
-                name="content"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Content</FormLabel>
-                    <FormControl>
-                      <Input placeholder="192.168.1.1, example.com, etc" {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      {form.watch("type") === "A" && "IP address (e.g. 192.168.1.1)"}
-                      {form.watch("type") === "AAAA" && "IPv6 address"}
-                      {form.watch("type") === "CNAME" && "Domain name (e.g. example.com)"}
-                      {form.watch("type") === "MX" && "Mail server (e.g. mail.example.com)"}
-                      {form.watch("type") === "TXT" && "Text content"}
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
+              {(form.watch("type") === "A" || form.watch("type") === "AAAA") && (
+                <FormField
+                  control={form.control}
+                  name="isAutoIP"
+                  render={({ field }) => (
+                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+                      <div className="space-y-0.5">
+                        <FormLabel className="text-base">Auto IP Address</FormLabel>
+                        <FormDescription>
+                          Automatically determine IP address using STUN
+                        </FormDescription>
+                      </div>
+                      <FormControl>
+                        <Switch
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+              )}
+              
+              {(!form.watch("isAutoIP") || (form.watch("type") !== "A" && form.watch("type") !== "AAAA")) && (
+                <FormField
+                  control={form.control}
+                  name="content"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Content</FormLabel>
+                      <FormControl>
+                        <Input placeholder="192.168.1.1, example.com, etc" {...field} />
+                      </FormControl>
+                      <FormDescription>
+                        {form.watch("type") === "A" && "IP address (e.g. 192.168.1.1)"}
+                        {form.watch("type") === "AAAA" && "IPv6 address"}
+                        {form.watch("type") === "CNAME" && "Domain name (e.g. example.com)"}
+                        {form.watch("type") === "MX" && "Mail server (e.g. mail.example.com)"}
+                        {form.watch("type") === "TXT" && "Text content"}
+                      </FormDescription>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              )}
               
               <FormField
                 control={form.control}
@@ -872,29 +899,6 @@ export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
                 )}
               />
               
-              {(form.watch("type") === "A" || form.watch("type") === "AAAA") && (
-                <FormField
-                  control={form.control}
-                  name="isAutoIP"
-                  render={({ field }) => (
-                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                      <div className="space-y-0.5">
-                        <FormLabel className="text-base">Auto IP Address</FormLabel>
-                        <FormDescription>
-                          Automatically determine IP address using STUN
-                        </FormDescription>
-                      </div>
-                      <FormControl>
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-              )}
-              
               <FormField
                 control={form.control}
                 name="notes"
diff --git a/client/src/components/domain/domain-details.tsx.new b/client/src/components/domain/domain-details.tsx.new
deleted file mode 100644
index eb98c64..0000000
--- a/client/src/components/domain/domain-details.tsx.new
+++ /dev/null
@@ -1,970 +0,0 @@
-import { useState } from "react";
-import { useQuery, useMutation } from "@tanstack/react-query";
-import { DnsRecord, InsertDnsRecord, Domain, Provider, recordTypes } from "@shared/schema";
-import { apiRequest, queryClient } from "@/lib/queryClient";
-import { useToast } from "@/hooks/use-toast";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  FormDescription,
-} from "@/components/ui/form";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Switch } from "@/components/ui/switch";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { 
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from "@/components/ui/tooltip";
-import { RecentActivity } from "@/components/activity/recent-activity";
-import { Pagination } from "@/components/shared/pagination";
-import { Loader2, FileText, Pencil, Trash2, Plus } from "lucide-react";
-import { formatDistanceToNow } from "date-fns";
-
-// DNS Record form schema
-const dnsRecordSchema = z.object({
-  name: z.string().min(1, "Record name is required"),
-  type: z.enum(recordTypes),
-  content: z.string().min(1, "Content is required").optional().or(z.literal('')),
-  ttl: z.number().int().min(1).default(3600),
-  proxied: z.boolean().default(false),
-  isActive: z.boolean().default(true),
-  isAutoIP: z.boolean().default(false),
-  notes: z.string().optional(),
-  providerId: z.string().uuid().optional(),
-}).refine(data => {
-  // Content is required if isAutoIP is false
-  if (!data.isAutoIP && (!data.content || data.content.trim() === '')) {
-    return false;
-  }
-  return true;
-}, {
-  message: "Content is required when Auto IP is disabled",
-  path: ["content"]
-});
-
-interface DomainDetailsProps {
-  domain: Domain;
-  onBack?: () => void;
-}
-
-export function DomainDetails({ domain, onBack }: DomainDetailsProps) {
-  const { toast } = useToast();
-  
-  const [isAddRecordDialogOpen, setIsAddRecordDialogOpen] = useState(false);
-  const [isEditRecordDialogOpen, setIsEditRecordDialogOpen] = useState(false);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [selectedRecord, setSelectedRecord] = useState<DnsRecord | null>(null);
-  const [currentPage, setCurrentPage] = useState(1);
-  const pageSize = 5;
-  
-  // Fetch providers for the form
-  const { data: providers = [] } = useQuery<Provider[]>({
-    queryKey: ["/api/providers"],
-  });
-
-  // Fetch DNS Records
-  const { 
-    data: records = [], 
-    isLoading 
-  } = useQuery<DnsRecord[]>({
-    queryKey: ["/api/dns-records", domain.id],
-    queryFn: async () => {
-      const res = await apiRequest("GET", `/api/dns-records?domainId=${domain.id}`);
-      return await res.json();
-    },
-    enabled: !!domain?.id,
-  });
-
-  // Form for adding/editing a record
-  const form = useForm<z.infer<typeof dnsRecordSchema>>({
-    resolver: zodResolver(dnsRecordSchema),
-    defaultValues: {
-      name: "",
-      type: "A",
-      content: "",
-      ttl: 3600,
-      proxied: false,
-      isActive: true,
-      isAutoIP: false,
-      notes: "",
-      providerId: undefined,
-    },
-  });
-
-  // Add record mutation
-  const addRecordMutation = useMutation({
-    mutationFn: async (data: z.infer<typeof dnsRecordSchema>) => {
-      // Prepare record data
-      const recordData: InsertDnsRecord = {
-        ...data,
-        domainId: domain.id,
-      };
-      
-      // Handle providerId - convert "none" to null
-      if (recordData.providerId === "none") {
-        recordData.providerId = null;
-      }
-      
-      const res = await apiRequest("POST", "/api/dns-records", recordData);
-      return await res.json();
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/dns-records", domain.id] });
-      setIsAddRecordDialogOpen(false);
-      form.reset();
-      toast({
-        title: "Record added",
-        description: "The DNS record has been successfully added.",
-      });
-    },
-    onError: (error) => {
-      toast({
-        title: "Failed to add record",
-        description: error.message,
-        variant: "destructive",
-      });
-    },
-  });
-
-  // Update record mutation
-  const updateRecordMutation = useMutation({
-    mutationFn: async (data: z.infer<typeof dnsRecordSchema> & { id: string }) => {
-      const { id, ...updateData } = data;
-      
-      // Handle providerId - convert "none" to null
-      if (updateData.providerId === "none") {
-        updateData.providerId = null;
-      }
-      
-      const res = await apiRequest("PUT", `/api/dns-records/${id}`, updateData);
-      return await res.json();
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/dns-records", domain.id] });
-      setIsEditRecordDialogOpen(false);
-      setSelectedRecord(null);
-      toast({
-        title: "Record updated",
-        description: "The DNS record has been successfully updated.",
-      });
-    },
-    onError: (error) => {
-      toast({
-        title: "Failed to update record",
-        description: error.message,
-        variant: "destructive",
-      });
-    },
-  });
-
-  // Delete record mutation
-  const deleteRecordMutation = useMutation({
-    mutationFn: async (recordId: string) => {
-      await apiRequest("DELETE", `/api/dns-records/${recordId}`);
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["/api/dns-records", domain.id] });
-      setIsDeleteDialogOpen(false);
-      setSelectedRecord(null);
-      toast({
-        title: "Record deleted",
-        description: "The DNS record has been successfully deleted.",
-      });
-    },
-    onError: (error) => {
-      toast({
-        title: "Failed to delete record",
-        description: error.message,
-        variant: "destructive",
-      });
-    },
-  });
-
-  // Form submission handlers
-  const onAddSubmit = (data: z.infer<typeof dnsRecordSchema>) => {
-    addRecordMutation.mutate(data);
-  };
-
-  const onEditSubmit = (data: z.infer<typeof dnsRecordSchema>) => {
-    if (selectedRecord) {
-      updateRecordMutation.mutate({ ...data, id: selectedRecord.id });
-    }
-  };
-
-  // Handle record editing
-  const handleEditRecord = (record: DnsRecord) => {
-    setSelectedRecord(record);
-    
-    // Set form values for editing
-    form.reset({
-      name: record.name,
-      type: record.type,
-      content: record.content,
-      ttl: record.ttl,
-      proxied: record.proxied,
-      isActive: record.isActive,
-      isAutoIP: record.isAutoIP,
-      notes: record.notes || "",
-      providerId: record.providerId || "none",
-    });
-    
-    setIsEditRecordDialogOpen(true);
-  };
-
-  // Handle record deletion
-  const handleDeleteRecord = (record: DnsRecord) => {
-    setSelectedRecord(record);
-    setIsDeleteDialogOpen(true);
-  };
-
-  // Confirm deletion
-  const confirmDeleteRecord = () => {
-    if (selectedRecord) {
-      deleteRecordMutation.mutate(selectedRecord.id);
-    }
-  };
-
-  // Get a human-readable provider name from the provider ID
-  const getProviderName = (providerId: string | null) => {
-    if (!providerId) return "None";
-    const provider = providers.find(p => p.id === providerId);
-    return provider ? provider.name : "Unknown Provider";
-  };
-
-  // Calculate pagination
-  const startIndex = (currentPage - 1) * pageSize;
-  const endIndex = startIndex + pageSize;
-  const paginatedRecords = records.slice(startIndex, endIndex);
-  const totalPages = Math.ceil(records.length / pageSize);
-
-  // Handle adding a new record
-  const handleAddRecord = () => {
-    // Reset form with defaults
-    form.reset({
-      name: "",
-      type: "A",
-      content: "",
-      ttl: 3600,
-      proxied: false,
-      isActive: true,
-      isAutoIP: false,
-      notes: "",
-      providerId: "none",
-    });
-    setIsAddRecordDialogOpen(true);
-  };
-
-  if (isLoading) {
-    return (
-      <div className="flex justify-center items-center py-8">
-        <Loader2 className="h-8 w-8 animate-spin text-primary" />
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <div className="mb-6 flex justify-between items-center">
-        <h2 className="text-xl font-semibold">DNS Records for {domain.name}</h2>
-        <Button onClick={handleAddRecord}>
-          <Plus className="mr-2 h-4 w-4" />
-          Add Record
-        </Button>
-      </div>
-
-      {records.length === 0 ? (
-        <div className="text-center py-8 border rounded-lg">
-          <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-primary/10">
-            <FileText className="h-6 w-6 text-primary" />
-          </div>
-          <h3 className="mt-4 text-lg font-medium">No DNS records found</h3>
-          <p className="mt-2 text-sm text-muted-foreground">
-            Get started by adding your first DNS record.
-          </p>
-          <div className="mt-6">
-            <Button onClick={handleAddRecord}>Add DNS Record</Button>
-          </div>
-        </div>
-      ) : (
-        <div className="bg-card rounded-lg border shadow-sm">
-          <div className="overflow-x-auto">
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Name</TableHead>
-                  <TableHead>Type</TableHead>
-                  <TableHead>Content</TableHead>
-                  <TableHead>TTL</TableHead>
-                  <TableHead>Provider</TableHead>
-                  <TableHead>Last Update</TableHead>
-                  <TableHead>Status</TableHead>
-                  <TableHead className="text-right">Actions</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {paginatedRecords.map(record => (
-                  <TableRow key={record.id}>
-                    <TableCell className="font-medium">
-                      {record.name === "@" ? (
-                        <TooltipProvider>
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <span>{record.name}</span>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                              <p>Root domain: {domain.name}</p>
-                            </TooltipContent>
-                          </Tooltip>
-                        </TooltipProvider>
-                      ) : (
-                        record.name
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <Badge variant="outline">{record.type}</Badge>
-                    </TableCell>
-                    <TableCell>
-                      <TooltipProvider>
-                        <Tooltip>
-                          <TooltipTrigger asChild>
-                            <span className="truncate max-w-[150px] inline-block">
-                              {record.isAutoIP ? "Auto IP" : record.content}
-                            </span>
-                          </TooltipTrigger>
-                          <TooltipContent>
-                            <p>{record.isAutoIP ? "Auto IP" : record.content}</p>
-                            {record.notes && (
-                              <>
-                                <div className="border-t my-1"></div>
-                                <p className="italic text-xs">{record.notes}</p>
-                              </>
-                            )}
-                          </TooltipContent>
-                        </Tooltip>
-                      </TooltipProvider>
-                    </TableCell>
-                    <TableCell>{record.ttl}s</TableCell>
-                    <TableCell>{getProviderName(record.providerId)}</TableCell>
-                    <TableCell>
-                      {record.lastUpdated 
-                        ? formatDistanceToNow(new Date(record.lastUpdated), { addSuffix: true }) 
-                        : "Never"}
-                    </TableCell>
-                    <TableCell>
-                      {record.isActive ? (
-                        <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">Active</Badge>
-                      ) : (
-                        <Badge variant="secondary">Inactive</Badge>
-                      )}
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex justify-end gap-2">
-                        <Button 
-                          variant="ghost" 
-                          size="icon"
-                          onClick={() => handleEditRecord(record)}
-                        >
-                          <Pencil className="h-4 w-4" />
-                        </Button>
-                        <Button 
-                          variant="ghost" 
-                          size="icon"
-                          className="text-destructive hover:text-destructive"
-                          onClick={() => handleDeleteRecord(record)}
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
-          
-          {records.length > pageSize && (
-            <div className="p-4 border-t">
-              <Pagination
-                currentPage={currentPage}
-                totalPages={totalPages}
-                onPageChange={setCurrentPage}
-                itemLabel="records"
-                totalItems={records.length}
-                itemsPerPage={pageSize}
-              />
-            </div>
-          )}
-        </div>
-      )}
-
-      <div className="mt-6">
-        <Card>
-          <CardHeader>
-            <CardTitle>Recent Activity</CardTitle>
-          </CardHeader>
-          <CardContent>
-            <RecentActivity domainId={domain.id} />
-          </CardContent>
-        </Card>
-      </div>
-
-      {/* Add Record Dialog */}
-      <Dialog open={isAddRecordDialogOpen} onOpenChange={setIsAddRecordDialogOpen}>
-        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>Add DNS Record</DialogTitle>
-            <DialogDescription>
-              Add a new DNS record to {domain.name}.
-            </DialogDescription>
-          </DialogHeader>
-          
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onAddSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input placeholder="@, www, subdomain, etc" {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      Use @ for root domain or enter subdomain name
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="providerId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>DNS Provider</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select a DNS provider" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="none">None</SelectItem>
-                        {providers.map((provider) => (
-                          <SelectItem 
-                            key={provider.id} 
-                            value={provider.id}
-                          >
-                            {provider.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormDescription>
-                      Select the DNS provider to use for this record
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="type"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Record Type</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select record type" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {recordTypes.map((type) => (
-                          <SelectItem 
-                            key={type} 
-                            value={type}
-                          >
-                            {type}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              {(form.watch("type") === "A" || form.watch("type") === "AAAA") && (
-                <FormField
-                  control={form.control}
-                  name="isAutoIP"
-                  render={({ field }) => (
-                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                      <div className="space-y-0.5">
-                        <FormLabel className="text-base">Auto IP Address</FormLabel>
-                        <FormDescription>
-                          Automatically determine IP address using STUN
-                        </FormDescription>
-                      </div>
-                      <FormControl>
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-              )}
-              
-              {(!form.watch("isAutoIP") || (form.watch("type") !== "A" && form.watch("type") !== "AAAA")) && (
-                <FormField
-                  control={form.control}
-                  name="content"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Content</FormLabel>
-                      <FormControl>
-                        <Input placeholder="192.168.1.1, example.com, etc" {...field} />
-                      </FormControl>
-                      <FormDescription>
-                        {form.watch("type") === "A" && "IP address (e.g. 192.168.1.1)"}
-                        {form.watch("type") === "AAAA" && "IPv6 address"}
-                        {form.watch("type") === "CNAME" && "Domain name (e.g. example.com)"}
-                        {form.watch("type") === "MX" && "Mail server (e.g. mail.example.com)"}
-                        {form.watch("type") === "TXT" && "Text content"}
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              )}
-              
-              <FormField
-                control={form.control}
-                name="ttl"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>TTL (seconds)</FormLabel>
-                    <FormControl>
-                      <Input 
-                        type="number" 
-                        {...field} 
-                        value={field.value}
-                        onChange={e => field.onChange(parseInt(e.target.value || "3600"))}
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Time-to-live in seconds. 3600 = 1 hour
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="proxied"
-                render={({ field }) => (
-                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                    <div className="space-y-0.5">
-                      <FormLabel className="text-base">Proxied</FormLabel>
-                      <FormDescription>
-                        Enable proxying through CDN (Cloudflare only)
-                      </FormDescription>
-                    </div>
-                    <FormControl>
-                      <Switch
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="isActive"
-                render={({ field }) => (
-                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                    <div className="space-y-0.5">
-                      <FormLabel className="text-base">Active</FormLabel>
-                      <FormDescription>
-                        Enable this record to be used
-                      </FormDescription>
-                    </div>
-                    <FormControl>
-                      <Switch
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="notes"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Notes</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Optional notes about this record" {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      Add any additional information about this record
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <DialogFooter>
-                <Button 
-                  type="submit" 
-                  disabled={addRecordMutation.isPending}
-                >
-                  {addRecordMutation.isPending ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Adding...
-                    </>
-                  ) : (
-                    "Add Record"
-                  )}
-                </Button>
-              </DialogFooter>
-            </form>
-          </Form>
-        </DialogContent>
-      </Dialog>
-
-      {/* Edit Record Dialog */}
-      <Dialog open={isEditRecordDialogOpen} onOpenChange={setIsEditRecordDialogOpen}>
-        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
-          <DialogHeader>
-            <DialogTitle>Edit DNS Record</DialogTitle>
-            <DialogDescription>
-              Update the DNS record for {domain.name}.
-            </DialogDescription>
-          </DialogHeader>
-          
-          <Form {...form}>
-            <form onSubmit={form.handleSubmit(onEditSubmit)} className="space-y-4">
-              <FormField
-                control={form.control}
-                name="name"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Name</FormLabel>
-                    <FormControl>
-                      <Input placeholder="@, www, subdomain, etc" {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      Use @ for root domain or enter subdomain name
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="providerId"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>DNS Provider</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select a DNS provider" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        <SelectItem value="none">None</SelectItem>
-                        {providers.map((provider) => (
-                          <SelectItem 
-                            key={provider.id} 
-                            value={provider.id}
-                          >
-                            {provider.name}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormDescription>
-                      Select the DNS provider to use for this record
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="type"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Record Type</FormLabel>
-                    <Select
-                      onValueChange={field.onChange}
-                      defaultValue={field.value}
-                    >
-                      <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select record type" />
-                        </SelectTrigger>
-                      </FormControl>
-                      <SelectContent>
-                        {recordTypes.map((type) => (
-                          <SelectItem 
-                            key={type} 
-                            value={type}
-                          >
-                            {type}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              {(form.watch("type") === "A" || form.watch("type") === "AAAA") && (
-                <FormField
-                  control={form.control}
-                  name="isAutoIP"
-                  render={({ field }) => (
-                    <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                      <div className="space-y-0.5">
-                        <FormLabel className="text-base">Auto IP Address</FormLabel>
-                        <FormDescription>
-                          Automatically determine IP address using STUN
-                        </FormDescription>
-                      </div>
-                      <FormControl>
-                        <Switch
-                          checked={field.value}
-                          onCheckedChange={field.onChange}
-                        />
-                      </FormControl>
-                    </FormItem>
-                  )}
-                />
-              )}
-              
-              {(!form.watch("isAutoIP") || (form.watch("type") !== "A" && form.watch("type") !== "AAAA")) && (
-                <FormField
-                  control={form.control}
-                  name="content"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel>Content</FormLabel>
-                      <FormControl>
-                        <Input placeholder="192.168.1.1, example.com, etc" {...field} />
-                      </FormControl>
-                      <FormDescription>
-                        {form.watch("type") === "A" && "IP address (e.g. 192.168.1.1)"}
-                        {form.watch("type") === "AAAA" && "IPv6 address"}
-                        {form.watch("type") === "CNAME" && "Domain name (e.g. example.com)"}
-                        {form.watch("type") === "MX" && "Mail server (e.g. mail.example.com)"}
-                        {form.watch("type") === "TXT" && "Text content"}
-                      </FormDescription>
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-              )}
-              
-              <FormField
-                control={form.control}
-                name="ttl"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>TTL (seconds)</FormLabel>
-                    <FormControl>
-                      <Input 
-                        type="number" 
-                        {...field} 
-                        value={field.value}
-                        onChange={e => field.onChange(parseInt(e.target.value || "3600"))}
-                      />
-                    </FormControl>
-                    <FormDescription>
-                      Time-to-live in seconds. 3600 = 1 hour
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="proxied"
-                render={({ field }) => (
-                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                    <div className="space-y-0.5">
-                      <FormLabel className="text-base">Proxied</FormLabel>
-                      <FormDescription>
-                        Enable proxying through CDN (Cloudflare only)
-                      </FormDescription>
-                    </div>
-                    <FormControl>
-                      <Switch
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="isActive"
-                render={({ field }) => (
-                  <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
-                    <div className="space-y-0.5">
-                      <FormLabel className="text-base">Active</FormLabel>
-                      <FormDescription>
-                        Enable this record to be used
-                      </FormDescription>
-                    </div>
-                    <FormControl>
-                      <Switch
-                        checked={field.value}
-                        onCheckedChange={field.onChange}
-                      />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
-              
-              <FormField
-                control={form.control}
-                name="notes"
-                render={({ field }) => (
-                  <FormItem>
-                    <FormLabel>Notes</FormLabel>
-                    <FormControl>
-                      <Input placeholder="Optional notes about this record" {...field} />
-                    </FormControl>
-                    <FormDescription>
-                      Add any additional information about this record
-                    </FormDescription>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-              
-              <DialogFooter>
-                <Button 
-                  type="submit" 
-                  disabled={updateRecordMutation.isPending}
-                >
-                  {updateRecordMutation.isPending ? (
-                    <>
-                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                      Updating...
-                    </>
-                  ) : (
-                    "Update Record"
-                  )}
-                </Button>
-              </DialogFooter>
-            </form>
-          </Form>
-        </DialogContent>
-      </Dialog>
-
-      {/* Delete Confirmation Dialog */}
-      <AlertDialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
-        <AlertDialogContent className="max-w-md">
-          <AlertDialogHeader>
-            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
-            <AlertDialogDescription>
-              This will permanently delete the DNS record <strong>{selectedRecord?.name}</strong> of type <strong>{selectedRecord?.type}</strong>. 
-              This action cannot be undone.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel>Cancel</AlertDialogCancel>
-            <AlertDialogAction 
-              onClick={confirmDeleteRecord}
-              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
-              disabled={deleteRecordMutation.isPending}
-            >
-              {deleteRecordMutation.isPending ? (
-                <>
-                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-                  Deleting...
-                </>
-              ) : (
-                "Delete"
-              )}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    </>
-  );
-}
\ No newline at end of file