Fix organization page display and IPv6 address handling. Improved IPv6 validation and updated display of unavailable addresses.

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/1ce93fd3-3464-4f05-817e-542376e8c183.jpg

client/src/App.tsx

@@ -13,6 +13,7 @@ import ApiTokensPage from "@/pages/api-tokens";
 import UsersRolesPage from "@/pages/users-roles";
 import ProvidersPage from "@/pages/providers";
 import SettingsPage from "@/pages/settings";
+import OrganizationsPage from "@/pages/organizations";
 import { AuthProvider } from "@/hooks/use-auth";
 import { ProtectedRoute } from "@/lib/protected-route";
 import { ThemeProvider } from "@/hooks/use-theme";
@@ -23,6 +24,7 @@ function Router() {
     <Switch>
       <Route path="/auth" component={AuthPage} />
       <ProtectedRoute path="/" component={DashboardPage} />
+      <ProtectedRoute path="/organizations" component={OrganizationsPage} />
       <ProtectedRoute path="/domains" component={DomainsPage} />
       <ProtectedRoute path="/dns-records" component={DnsRecordsPage} />
       <ProtectedRoute path="/metrics" component={MetricsPage} />

client/src/components/shared/public-ip-card.tsx

@@ -12,6 +12,16 @@ export function PublicIpCard() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
+  // Function to validate if a string is a valid IPv6 address
+  const isValidIPv6 = (ip: string | null): boolean => {
+    if (!ip) return false;
+    
+    // Basic IPv6 format check using regex
+    const ipv6Regex = /^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])\.){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$/;
+    
+    return ipv6Regex.test(ip);
+  };
+
   useEffect(() => {
     const fetchPublicIp = async () => {
       try {
@@ -28,7 +38,15 @@ export function PublicIpCard() {
           .catch(() => ({ ip: null }));
 
         setIpv4(ipv4Response.ip);
-        setIpv6(ipv6Response.ip);
+        
+        // Validate that the IPv6 response is actually an IPv6 address
+        const ipv6Address = ipv6Response.ip;
+        if (isValidIPv6(ipv6Address)) {
+          setIpv6(ipv6Address);
+        } else {
+          setIpv6(null); // Not a valid IPv6 address
+        }
+        
         setError(false);
       } catch (err) {
         console.error('Error fetching public IP:', err);
@@ -91,7 +109,7 @@ export function PublicIpCard() {
               )}
             </div>
             <div className="bg-card border rounded-md p-3 text-sm font-mono">
-              {loading ? 'Loading...' : error ? 'Error fetching IP' : ipv4 || 'N/A'}
+              {loading ? 'Loading...' : error ? 'Error fetching IP' : ipv4 || 'Not Available'}
             </div>
           </div>
 
@@ -112,7 +130,7 @@ export function PublicIpCard() {
               )}
             </div>
             <div className="bg-card border rounded-md p-3 text-sm font-mono overflow-x-auto">
-              {loading ? 'Loading...' : error ? 'Error fetching IP' : ipv6 || 'N/A'}
+              {loading ? 'Loading...' : error ? 'Error fetching IP' : ipv6 || 'Not Available'}
             </div>
           </div>
         </div>

client/src/pages/organizations.tsx

@@ -0,0 +1,220 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { MainLayout } from '@/components/layouts/main-layout';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Input } from '@/components/ui/input';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Organization } from '@shared/schema';
+import { useOrganization } from '@/context/organization-context';
+import { useToast } from '@/hooks/use-toast';
+import { useAuth } from '@/hooks/use-auth';
+import { Users, Plus, Edit, Trash2, Building } from 'lucide-react';
+import { apiRequest, queryClient } from '@/lib/queryClient';
+import { cn } from '@/lib/utils';
+
+export default function OrganizationsPage() {
+  const { user } = useAuth();
+  const { organizations, currentOrganization, setCurrentOrganization, createOrganizationMutation } = useOrganization();
+  const { toast } = useToast();
+  const [newOrgName, setNewOrgName] = useState('');
+  const [newOrgActive, setNewOrgActive] = useState(true);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  
+  const isAdmin = user?.role === 'admin';
+  
+  const handleCreateOrganization = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!newOrgName.trim()) {
+      toast({
+        title: 'Error',
+        description: 'Organization name cannot be empty',
+        variant: 'destructive',
+      });
+      return;
+    }
+    
+    try {
+      await createOrganizationMutation.mutateAsync({
+        name: newOrgName,
+        isActive: newOrgActive,
+      });
+      
+      setNewOrgName('');
+      setNewOrgActive(true);
+      setIsDialogOpen(false);
+      
+      toast({
+        title: 'Success',
+        description: 'Organization created successfully',
+      });
+    } catch (error) {
+      console.error('Error creating organization:', error);
+      toast({
+        title: 'Error',
+        description: 'Failed to create organization',
+        variant: 'destructive',
+      });
+    }
+  };
+  
+  return (
+    <MainLayout 
+      title="Organizations" 
+      description="Manage your organizations and their settings."
+    >
+      <div className="flex justify-between items-center mb-6">
+        <h2 className="text-2xl font-bold">Organizations</h2>
+        {isAdmin && (
+          <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+            <DialogTrigger asChild>
+              <Button>
+                <Plus className="mr-2 h-4 w-4" />
+                Add Organization
+              </Button>
+            </DialogTrigger>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Create New Organization</DialogTitle>
+                <DialogDescription>
+                  Add a new organization to your account.
+                </DialogDescription>
+              </DialogHeader>
+              <form onSubmit={handleCreateOrganization}>
+                <div className="grid gap-4 py-4">
+                  <div className="grid gap-2">
+                    <Label htmlFor="orgName">Organization Name</Label>
+                    <Input
+                      id="orgName"
+                      value={newOrgName}
+                      onChange={(e) => setNewOrgName(e.target.value)}
+                      placeholder="Enter organization name"
+                      required
+                    />
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <Checkbox
+                      id="isActive"
+                      checked={newOrgActive}
+                      onCheckedChange={(checked) => setNewOrgActive(checked as boolean)}
+                    />
+                    <Label htmlFor="isActive">Active</Label>
+                  </div>
+                </div>
+                <DialogFooter>
+                  <Button
+                    type="submit"
+                    disabled={createOrganizationMutation.isPending}
+                  >
+                    {createOrganizationMutation.isPending ? 'Creating...' : 'Create Organization'}
+                  </Button>
+                </DialogFooter>
+              </form>
+            </DialogContent>
+          </Dialog>
+        )}
+      </div>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {organizations.map((org) => (
+          <Card 
+            key={org.id} 
+            className={cn(
+              'cursor-pointer transition-all hover:shadow-md',
+              currentOrganization?.id === org.id && 'border-primary'
+            )}
+            onClick={() => setCurrentOrganization(org)}
+          >
+            <CardHeader className="pb-3">
+              <div className="flex justify-between items-start">
+                <div className="flex items-center">
+                  <div className="p-2 rounded-full bg-primary/10 mr-3">
+                    <Building className="h-5 w-5 text-primary" />
+                  </div>
+                  <div>
+                    <CardTitle className="text-lg mb-1">{org.name}</CardTitle>
+                    <CardDescription>
+                      {org.isActive ? 'Active' : 'Inactive'}
+                    </CardDescription>
+                  </div>
+                </div>
+                {currentOrganization?.id === org.id && (
+                  <div className="flex items-center justify-center w-6 h-6 rounded-full bg-primary">
+                    <Users className="h-3.5 w-3.5 text-primary-foreground" />
+                  </div>
+                )}
+              </div>
+            </CardHeader>
+            <CardContent className="pb-3">
+              <p className="text-sm text-muted-foreground">
+                Created on {new Date(org.createdAt).toLocaleDateString()}
+              </p>
+            </CardContent>
+            <CardFooter className="flex justify-between pt-2">
+              <Button 
+                variant="ghost" 
+                size="sm"
+                className="text-muted-foreground"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  // View organization details
+                }}
+              >
+                View Details
+              </Button>
+
+              {isAdmin && (
+                <div className="flex space-x-1">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-muted-foreground hover:text-foreground"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      // Edit organization
+                    }}
+                  >
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="h-8 w-8 text-muted-foreground hover:text-destructive"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      // Delete organization
+                    }}
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </div>
+              )}
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+
+      {organizations.length === 0 && (
+        <Card className="border-dashed p-8">
+          <div className="flex flex-col items-center justify-center text-center space-y-4">
+            <Building className="w-10 h-10 text-muted-foreground" />
+            <div>
+              <h3 className="text-lg font-medium">No Organizations</h3>
+              <p className="text-sm text-muted-foreground">
+                You don't have any organizations yet. Create one to get started.
+              </p>
+            </div>
+            {isAdmin && (
+              <Button onClick={() => setIsDialogOpen(true)}>
+                <Plus className="mr-2 h-4 w-4" />
+                Add Organization
+              </Button>
+            )}
+          </div>
+        </Card>
+      )}
+    </MainLayout>
+  );
+}