ui and layout fix

messages/en-US.json

@@ -1904,5 +1904,7 @@
     "recordName": "Record Name",
     "auto": "Auto",
     "TTL": "TTL",
-    "howToAddRecords": "How to Add Records"
+    "howToAddRecords": "How to Add Records",
+    "dnsRecord": "DNS Records",
+    "required": "Required"
 }

server/db/pg/schema/schema.ts

@@ -33,6 +33,7 @@ export const dnsRecords = pgTable("dnsRecords", {
     recordType: varchar("recordType").notNull(), // "NS" | "CNAME" | "A" | "TXT"
     baseDomain: varchar("baseDomain"),
     value: varchar("value").notNull(),
+    verified: boolean("verified").notNull().default(false),
 });
 
 export const orgs = pgTable("orgs", {

server/db/sqlite/schema/schema.ts

@@ -25,6 +25,7 @@ export const dnsRecords = sqliteTable("dnsRecords", {
     recordType: text("recordType").notNull(), // "NS" | "CNAME" | "A" | "TXT"
     baseDomain: text("baseDomain"),
     value: text("value").notNull(), 
+    verified: integer("verified", { mode: "boolean" }).notNull().default(false),
 });
 
 

src/app/[orgId]/settings/domains/[domainId]/DomainSettingsLayout.tsx

@@ -1,112 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { toast } from "@app/hooks/useToast";
-import { useRouter } from "next/navigation";
-import { RefreshCw } from "lucide-react";
-import { Button } from "@app/components/ui/button";
-import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
-import DomainInfoCard from "@app/components/DomainInfoCard";
-import DomainProvider from "@app/providers/DomainProvider";
-import { useTranslations } from "next-intl";
-
-
-interface DomainSettingsLayoutProps {
-  orgId: string;
-  domain: any,
-  children: React.ReactNode;
-}
-
-export default function DomainSettingsLayout({ orgId, domain, children }: DomainSettingsLayoutProps) {
-  const router = useRouter();
-  const api = createApiClient(useEnvContext());
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [restartingDomains, setRestartingDomains] = useState<Set<string>>(new Set());
-  const t = useTranslations();
-  const refreshData = async () => {
-    setIsRefreshing(true);
-    try {
-      await new Promise((resolve) => setTimeout(resolve, 200));
-      router.refresh();
-    } catch {
-      toast({
-        title: t("error"),
-        description: t("refreshError"),
-        variant: "destructive",
-      });
-    } finally {
-      setIsRefreshing(false);
-    }
-  };
-
-  const restartDomain = async (domainId: string) => {
-    setRestartingDomains((prev) => new Set(prev).add(domainId));
-    try {
-      await api.post(`/org/${orgId}/domain/${domainId}/restart`);
-      toast({
-        title: t("success"),
-        description: t("domainRestartedDescription", {
-          fallback: "Domain verification restarted successfully",
-        }),
-      });
-      refreshData();
-    } catch (e) {
-      toast({
-        title: t("error"),
-        description: formatAxiosError(e),
-        variant: "destructive",
-      });
-    } finally {
-      setRestartingDomains((prev) => {
-        const newSet = new Set(prev);
-        newSet.delete(domainId);
-        return newSet;
-      });
-    }
-  };
-
-  const isRestarting = restartingDomains.has(domain.domainId);
-
-  return (
-    <>
-      <div className="flex items-center justify-between mb-6">
-        <SettingsSectionTitle
-          title={domain ? domain.baseDomain : t("domainSetting")}
-          description={t("domainSettingDescription")}
-        />
-
-        <Button
-          variant="outline"
-          size="sm"
-          onClick={() => restartDomain(domain.domainId)}
-          disabled={isRestarting}
-        >
-          {isRestarting ? (
-            <>
-              <RefreshCw
-                className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
-              />
-              {t("restarting", { fallback: "Restarting..." })}
-            </>
-          ) : (
-            <>
-              <RefreshCw
-                className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
-              />
-              {t("restart", { fallback: "Restart" })}
-            </>
-          )}
-        </Button>
-      </div>
-
-      <DomainProvider domain={domain}>
-        <div className="space-y-6">
-          <DomainInfoCard orgId={orgId} domainId={domain.domainId} />
-        </div>
-        {children}
-      </DomainProvider>
-    </>
-  );
-}

src/app/[orgId]/settings/domains/[domainId]/layout.tsx

@@ -3,18 +3,17 @@ import { authCookieHeader } from "@app/lib/api/cookies";
 import { internal } from "@app/lib/api";
 import { GetDomainResponse } from "@server/routers/domain/getDomain";
 import { AxiosResponse } from "axios";
-import { getTranslations } from "next-intl/server";
+import DomainProvider from "@app/providers/DomainProvider";
-import SettingsLayoutClient from "./DomainSettingsLayout";
 
 interface SettingsLayoutProps {
   children: React.ReactNode;
-  params: { domainId: string; orgId: string };
+  params: Promise<{ domainId: string; orgId: string }>;
 }
 
 export default async function SettingsLayout({ children, params }: SettingsLayoutProps) {
-  const { domainId, orgId } = params;
+  const { domainId, orgId } = await params;
-
   let domain = null;
+
   try {
     const res = await internal.get<AxiosResponse<GetDomainResponse>>(
       `/org/${orgId}/domain/${domainId}`,
@@ -25,14 +24,9 @@ export default async function SettingsLayout({ children, params }: SettingsLayou
     redirect(`/${orgId}/settings/domains`);
   }
 
-  const t = await getTranslations();
-
   return (
-    <SettingsLayoutClient
+    <DomainProvider domain={domain} orgId={orgId}>
-      orgId={orgId}
-      domain={domain}
-    >
       {children}
-    </SettingsLayoutClient>
+    </DomainProvider>
   );
 }

src/app/[orgId]/settings/domains/[domainId]/page.tsx

@@ -1,3 +1,105 @@
-export default function DomainPage() {
+"use client";
-  return null;
+import { useState } from "react";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { useRouter } from "next/navigation";
+import { RefreshCw } from "lucide-react";
+import { Button } from "@app/components/ui/button";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import DomainInfoCard from "@app/components/DomainInfoCard";
+import { useDomain } from "@app/contexts/domainContext";
+import { useTranslations } from "next-intl";
+
+export default function DomainSettingsPage() {
+  const { domain, orgId } = useDomain();
+  const router = useRouter();
+  const api = createApiClient(useEnvContext());
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [restartingDomains, setRestartingDomains] = useState<Set<string>>(new Set());
+  const t = useTranslations();
+
+  const refreshData = async () => {
+    setIsRefreshing(true);
+    try {
+      await new Promise((resolve) => setTimeout(resolve, 200));
+      router.refresh();
+    } catch {
+      toast({
+        title: t("error"),
+        description: t("refreshError"),
+        variant: "destructive",
+      });
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const restartDomain = async (domainId: string) => {
+    setRestartingDomains((prev) => new Set(prev).add(domainId));
+    try {
+      await api.post(`/org/${orgId}/domain/${domainId}/restart`);
+      toast({
+        title: t("success"),
+        description: t("domainRestartedDescription", {
+          fallback: "Domain verification restarted successfully",
+        }),
+      });
+      refreshData();
+    } catch (e) {
+      toast({
+        title: t("error"),
+        description: formatAxiosError(e),
+        variant: "destructive",
+      });
+    } finally {
+      setRestartingDomains((prev) => {
+        const newSet = new Set(prev);
+        newSet.delete(domainId);
+        return newSet;
+      });
+    }
+  };
+
+  if (!domain) {
+    return null;
+  }
+
+  const isRestarting = restartingDomains.has(domain.domainId);
+
+  return (
+    <>
+      <div className="flex justify-between">
+        <SettingsSectionTitle
+          title={domain.baseDomain}
+          description={t("domainSettingDescription")}
+        />
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => restartDomain(domain.domainId)}
+          disabled={isRestarting}
+        >
+          {isRestarting ? (
+            <>
+              <RefreshCw
+                className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
+              />
+              {t("restarting", { fallback: "Restarting..." })}
+            </>
+          ) : (
+            <>
+              <RefreshCw
+                className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
+              />
+              {t("restart", { fallback: "Restart" })}
+            </>
+          )}
+        </Button>
+      </div>
+      <div className="space-y-6">
+        <DomainInfoCard orgId={orgId} domainId={domain.domainId} />
+      </div>
+    </>
+  );
 }

src/components/DNSRecordTable.tsx

@@ -1,12 +1,8 @@
 "use client";
 
 import { ColumnDef } from "@tanstack/react-table";
-import { Button } from "@app/components/ui/button";
-import { useState } from "react";
 import { useTranslations } from "next-intl";
-import { useToast } from "@app/hooks/useToast";
 import { Badge } from "@app/components/ui/badge";
-import CopyToClipboard from "@app/components/CopyToClipboard";
 import { DNSRecordsDataTable } from "./DNSRecordsDataTable";
 
 export type DNSRecordRow = {
@@ -114,7 +110,9 @@ export default function DNSRecordsTable({ records, domainId, isRefreshing }: Pro
                     verified ? (
                         <Badge variant="green">{t("verified")}</Badge>
                     ) : (
-                        <Badge variant="secondary">{t("unverified")}</Badge>
+                        <Badge variant="destructive">
+                            {t("failed", { fallback: "Failed" })}
+                        </Badge>
                     )
                 );
             }

src/components/DNSRecordsDataTable.tsx

@@ -108,9 +108,9 @@ export function DNSRecordsDataTable<TData, TValue>({
             <Card>
                 <CardHeader className="flex flex-col space-y-4 sm:flex-row sm:items-center sm:justify-between sm:space-y-0 pb-4">
                     <div className="flex flex-row space-y-3 w-full sm:mr-2 gap-2 justify-between">
-                        <div className="relative w-full sm:max-w-sm flex flex-row gap-10 items-center">
+                        <div className="relative w-full sm:max-w-sm flex flex-row gap-4 items-center">
-                            <h1 className="font-bold">DNS Records</h1>
+                            <h1 className="font-bold">{t("dnsRecord")}</h1>
-                            <Badge variant="secondary">Required</Badge>
+                            <Badge variant="secondary">{t("required")}</Badge>
                         </div>
                         <Button
                             variant="outline"
@@ -125,7 +125,7 @@ export function DNSRecordsDataTable<TData, TValue>({
                     <Table>
                         <TableHeader>
                             {table.getHeaderGroups().map((headerGroup) => (
-                                <TableRow key={headerGroup.id} className="bg-[#E8E8E8] dark:bg-transparent">
+                                <TableRow key={headerGroup.id} className="bg-secondary">
                                     {headerGroup.headers.map((header) => (
                                         <TableHead key={header.id}>
                                             {header.isPlaceholder

src/components/DomainInfoCard.tsx

@@ -30,7 +30,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { build } from "@server/build";
 import { Switch } from "./ui/switch";
 import { useEffect, useState } from "react";
-import DNSRecordsTable, {DNSRecordRow} from "./DNSRecordTable";
+import DNSRecordsTable, { DNSRecordRow } from "./DNSRecordTable";
 import { createApiClient } from "@app/lib/api";
 import { useToast } from "@app/hooks/useToast";
 import { formatAxiosError } from "@app/lib/api";
@@ -150,19 +150,33 @@ export default function DomainInfoCard({ orgId, domainId }: DomainInfoCardProps)
         }
     }, [domain.domainId]);
 
+    const getTypeDisplay = (type: string) => {
+        switch (type) {
+            case "ns":
+                return t("selectDomainTypeNsName");
+            case "cname":
+                return t("selectDomainTypeCnameName");
+            case "wildcard":
+                return t("selectDomainTypeWildcardName");
+            default:
+                return type;
+        }
+    };
+
+
 
     return (
         <>
             <Alert>
                 <AlertDescription>
-                    <InfoSections cols={2}>
+                    <InfoSections cols={3}>
                         <InfoSection>
                             <InfoSectionTitle>
                                 {t("type")}
                             </InfoSectionTitle>
                             <InfoSectionContent>
                                 <span>
-                                    {domain.type}
+                                    {getTypeDisplay(domain.type ? domain.type : "")}
                                 </span>
                             </InfoSectionContent>
                         </InfoSection>
@@ -172,16 +186,11 @@ export default function DomainInfoCard({ orgId, domainId }: DomainInfoCardProps)
                             </InfoSectionTitle>
                             <InfoSectionContent>
                                 {domain.verified ? (
-                                    <div className="text-green-500 flex items-center space-x-2">
+                                    <Badge variant="green">{t("verified")}</Badge>
-                                        <Badge variant="green">
-                                            {t("verified")}
-                                        </Badge>
-                                    </div>
                                 ) : (
-                                    <div className="text-neutral-500 flex items-center space-x-2">
+                                    <Badge variant="destructive">
-                                        <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
+                                        {t("failed", { fallback: "Failed" })}
-                                        <span>{t("unverified")}</span>
+                                    </Badge>
-                                    </div>
                                 )}
                             </InfoSectionContent>
                         </InfoSection>

src/contexts/domainContext.ts

@@ -1,11 +1,19 @@
 import { GetDomainResponse } from "@server/routers/domain/getDomain";
-import { createContext } from "react";
+import { createContext, useContext } from "react";
-
 interface DomainContextType {
     domain: GetDomainResponse;
     updateDomain: (updatedDomain: Partial<GetDomainResponse>) => void;
+    orgId: string;
 }
 
 const DomainContext = createContext<DomainContextType | undefined>(undefined);
 
+export function useDomain() {
+    const context = useContext(DomainContext);
+    if (!context) {
+        throw new Error("useDomain must be used within DomainProvider");
+    }
+    return context;
+}
+
 export default DomainContext;

src/providers/DomainProvider.tsx

@@ -8,11 +8,13 @@ import DomainContext from "@app/contexts/domainContext";
 interface DomainProviderProps {
     children: React.ReactNode;
     domain: GetDomainResponse;
+    orgId: string;
 }
 
 export function DomainProvider({
     children,
-    domain: serverDomain
+    domain: serverDomain,
+    orgId
 }: DomainProviderProps) {
     const [domain, setDomain] = useState<GetDomainResponse>(serverDomain);
 
@@ -34,7 +36,7 @@ export function DomainProvider({
     };
 
     return (
-        <DomainContext.Provider value={{ domain, updateDomain }}>
+        <DomainContext.Provider value={{ domain, updateDomain, orgId }}>
             {children}
         </DomainContext.Provider>
     );