initial setup for viewing domain details

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

@@ -0,0 +1,50 @@
+import { internal } from "@app/lib/api";
+import { AxiosResponse } from "axios";
+import { redirect } from "next/navigation";
+import { authCookieHeader } from "@app/lib/api/cookies";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { getTranslations } from "next-intl/server";
+import { GetDomainResponse } from "@server/routers/domain/getDomain";
+import DomainProvider from "@app/providers/DomainProvider";
+import DomainInfoCard from "@app/components/DomainInfoCard";
+
+interface SettingsLayoutProps {
+    children: React.ReactNode;
+    params: Promise<{ domainId: string; orgId: string }>;
+}
+
+export default async function SettingsLayout(props: SettingsLayoutProps) {
+    const params = await props.params;
+
+    const { children } = props;
+
+    let domain = null;
+    try {
+        const res = await internal.get<AxiosResponse<GetDomainResponse>>(
+            `/org/${params.orgId}/domain/${params.domainId}`,
+            await authCookieHeader()
+        );
+        domain = res.data.data;
+        console.log(JSON.stringify(domain));
+    } catch {
+        redirect(`/${params.orgId}/settings/domains`);
+    }
+
+    const t = await getTranslations();
+
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={domain ? domain.baseDomain : t('domainSetting')}
+                description={t('domainSettingDescription')}
+            />
+
+            <DomainProvider domain={domain}>
+                <div className="space-y-6">
+                    <DomainInfoCard />
+                </div>
+            </DomainProvider>
+        </>
+    );
+}

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

@@ -0,0 +1,8 @@
+import { redirect } from "next/navigation";
+
+export default async function DomainPage(props: {
+    params: Promise<{ orgId: string; domainId: string }>;
+}) {
+    const params = await props.params;
+    redirect(`/${params.orgId}/settings/domains/${params.domainId}`);
+}

src/components/DomainInfoCard.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { InfoIcon } from "lucide-react";
+import {
+    InfoSection,
+    InfoSectionContent,
+    InfoSections,
+    InfoSectionTitle
+} from "@app/components/InfoSection";
+import { useTranslations } from "next-intl";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useDomainContext } from "@app/hooks/useDomainContext";
+
+type DomainInfoCardProps = {};
+
+export default function DomainInfoCard({ }: DomainInfoCardProps) {
+    const { domain, updateDomain } = useDomainContext();
+    const t = useTranslations();
+    const { env } = useEnvContext();
+
+
+    return (
+        <Alert>
+            <AlertDescription>
+                <InfoSections cols={env.flags.enableClients ? 3 : 2}>
+                    <InfoSection>
+                        <InfoSectionTitle>
+                            {t("type")}
+                        </InfoSectionTitle>
+                        <InfoSectionContent>
+                            <span>
+                                {domain.type}
+                            </span>
+                        </InfoSectionContent>
+                    </InfoSection>
+                    <InfoSection>
+                        <InfoSectionTitle>
+                            {t("status")}
+                        </InfoSectionTitle>
+                        <InfoSectionContent>
+                            {domain.verified ? (
+                                <div className="text-green-500 flex items-center space-x-2">
+                                    <div className="w-2 h-2 bg-green-500 rounded-full"></div>
+                                    <span>{t("verified")}</span>
+                                </div>
+                            ) : (   
+                                <div className="text-neutral-500 flex items-center space-x-2">
+                                    <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
+                                    <span>{t("unverified")}</span>
+                                </div>
+                            )}
+                        </InfoSectionContent>
+                    </InfoSection>
+                </InfoSections>
+            </AlertDescription>
+        </Alert>
+    );
+}

src/contexts/domainContext.ts

@@ -0,0 +1,11 @@
+import { GetDomainResponse } from "@server/routers/domain/getDomain";
+import { createContext } from "react";
+
+interface DomainContextType {
+    domain: GetDomainResponse;
+    updateDomain: (updatedDomain: Partial<GetDomainResponse>) => void;
+}
+
+const DomainContext = createContext<DomainContextType | undefined>(undefined);
+
+export default DomainContext;

src/hooks/useDomainContext.ts

@@ -0,0 +1,10 @@
+import DomainContext from "@app/contexts/domainContext";
+import { useContext } from "react";
+
+export function useDomainContext() {
+    const context = useContext(DomainContext);
+    if (context === undefined) {
+        throw new Error('useDomainContext must be used within a DomainProvider');
+    }
+    return context;
+}

src/providers/DomainProvider.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+import { useTranslations } from "next-intl";
+import { GetDomainResponse } from "@server/routers/domain/getDomain";
+import DomainContext from "@app/contexts/domainContext";
+
+interface DomainProviderProps {
+    children: React.ReactNode;
+    domain: GetDomainResponse;
+}
+
+export function DomainProvider({
+    children,
+    domain: serverDomain
+}: DomainProviderProps) {
+    const [domain, setDomain] = useState<GetDomainResponse>(serverDomain);
+
+    const t = useTranslations();
+
+    const updateDomain = (updatedDomain: Partial<GetDomainResponse>) => {
+        if (!domain) {
+            throw new Error(t('domainErrorNoUpdate'));
+        }
+        setDomain((prev) => {
+            if (!prev) {
+                return prev;
+            }
+            return {
+                ...prev,
+                ...updatedDomain
+            };
+        });
+    };
+
+    return (
+        <DomainContext.Provider value={{ domain, updateDomain }}>
+            {children}
+        </DomainContext.Provider>
+    );
+}
+
+export default DomainProvider;