Fix: Address broken "Add Domain" button and "Unknown Provider" issue

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/2d6cff72-ec67-4947-b1fb-035d621eef2b.jpg

client/src/components/domain/domain-table.tsx

@@ -25,9 +25,10 @@ import { Cloud, Home, MoreVertical, Loader2, CircleHelp } from "lucide-react";
 interface DomainTableProps {
   onManageDomain?: (domain: Domain) => void;
   onDeleteDomain?: (domain: Domain) => void;
+  onAddDomain?: () => void;
 }
 
-export function DomainTable({ onManageDomain, onDeleteDomain }: DomainTableProps) {
+export function DomainTable({ onManageDomain, onDeleteDomain, onAddDomain }: DomainTableProps) {
   const { currentOrganization } = useOrganization();
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 5;
@@ -42,12 +43,15 @@ export function DomainTable({ onManageDomain, onDeleteDomain }: DomainTableProps
     queryKey: ["/api/providers"],
   });
 
-  const getProviderName = (providerId: string) => {
+  const getProviderName = (providerId: string | null | undefined) => {
+    if (!providerId) return "None";
     const provider = providers.find(p => p.id === providerId);
     return provider?.name || "Unknown";
   };
 
-  const getProviderIcon = (providerId: string) => {
+  const getProviderIcon = (providerId: string | null | undefined) => {
+    if (!providerId) return <CircleHelp className="mr-2 text-primary" size={16} />;
+    
     const provider = providers.find(p => p.id === providerId);
     
     if (!provider) return <CircleHelp className="mr-2 text-primary" size={16} />;
@@ -121,7 +125,7 @@ export function DomainTable({ onManageDomain, onDeleteDomain }: DomainTableProps
           Get started by adding your first domain.
         </p>
         <div className="mt-6">
-          <Button>Add Domain</Button>
+          <Button onClick={onAddDomain}>Add Domain</Button>
         </div>
       </div>
     );
@@ -131,7 +135,7 @@ export function DomainTable({ onManageDomain, onDeleteDomain }: DomainTableProps
     <div className="bg-card rounded-lg shadow-sm border border-border">
       <div className="p-5 border-b border-border flex justify-between items-center">
         <h2 className="text-lg font-semibold">Managed Domains</h2>
-        <Button>
+        <Button onClick={onAddDomain}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="16"

client/src/pages/domains.tsx

@@ -68,7 +68,7 @@ export default function DomainsPage() {
   });
   
   // Fetch providers for the form
-  const { data: providers = [] } = useQuery({
+  const { data: providers = [] } = useQuery<Provider[]>({
     queryKey: ["/api/providers"],
   });
 
@@ -172,6 +172,7 @@ export default function DomainsPage() {
       <DomainTable 
         onManageDomain={handleManageDomain}
         onDeleteDomain={handleDeleteDomain}
+        onAddDomain={() => setIsAddDomainDialogOpen(true)}
       />
 
       {/* Add Domain Dialog */}
@@ -216,10 +217,10 @@ export default function DomainsPage() {
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
-                        {providers.map((provider) => (
+                        {providers.map((provider: Provider) => (
                           <SelectItem 
                             key={provider.id} 
-                            value={provider.id.toString()}
+                            value={provider.id}
                           >
                             {provider.name}
                           </SelectItem>