Merge branch 'dev' into feat-blueprint-ui-on-dashboard

src/actions/server.ts

@@ -80,10 +80,12 @@ async function makeApiRequest<T>(
 
     const headersList = await reqHeaders();
     const host = headersList.get("host");
+    const xForwardedFor = headersList.get("x-forwarded-for");
 
     const headers: Record<string, string> = {
         "Content-Type": "application/json",
         "X-CSRF-Token": "x-csrf-protection",
+        ...(xForwardedFor ? { "X-Forwarded-For": xForwardedFor } : {}),
         ...(cookieHeader && { Cookie: cookieHeader }),
         ...additionalHeaders
     };
@@ -202,6 +204,7 @@ export type LoginRequest = {
     email: string;
     password: string;
     code?: string;
+    resourceGuid?: string;
 };
 
 export type LoginResponse = {

src/app/[orgId]/layout.tsx

@@ -1,7 +1,11 @@
-import { internal } from "@app/lib/api";
+import { formatAxiosError, internal } from "@app/lib/api";
 import { authCookieHeader } from "@app/lib/api/cookies";
 import { verifySession } from "@app/lib/auth/verifySession";
-import { GetOrgResponse } from "@server/routers/org";
+import {
+    CheckOrgUserAccessResponse,
+    GetOrgResponse,
+    ListUserOrgsResponse
+} from "@server/routers/org";
 import { GetOrgUserResponse } from "@server/routers/user";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
@@ -11,6 +15,9 @@ import SubscriptionStatusProvider from "@app/providers/SubscriptionStatusProvide
 import { GetOrgSubscriptionResponse } from "@server/routers/billing/types";
 import { pullEnv } from "@app/lib/pullEnv";
 import { build } from "@server/build";
+import OrgPolicyResult from "@app/components/OrgPolicyResult";
+import UserProvider from "@app/providers/UserProvider";
+import { Layout } from "@app/components/Layout";
 
 export default async function OrgLayout(props: {
     children: React.ReactNode;
@@ -32,25 +39,46 @@ export default async function OrgLayout(props: {
         redirect(`/`);
     }
 
+    let accessRes: CheckOrgUserAccessResponse | null = null;
     try {
-        const getOrgUser = cache(() =>
-            internal.get<AxiosResponse<GetOrgUserResponse>>(
-                `/org/${orgId}/user/${user.userId}`,
+        const checkOrgAccess = cache(() =>
+            internal.get<AxiosResponse<CheckOrgUserAccessResponse>>(
+                `/org/${orgId}/user/${user.userId}/check`,
                 cookie
             )
         );
-        const orgUser = await getOrgUser();
-    } catch {
+        const res = await checkOrgAccess();
+        accessRes = res.data.data;
+    } catch (e) {
         redirect(`/`);
     }
 
-    try {
-        const getOrg = cache(() =>
-            internal.get<AxiosResponse<GetOrgResponse>>(`/org/${orgId}`, cookie)
+    if (!accessRes?.allowed) {
+        // For non-admin users, show the member resources portal
+        let orgs: ListUserOrgsResponse["orgs"] = [];
+        try {
+            const getOrgs = cache(async () =>
+                internal.get<AxiosResponse<ListUserOrgsResponse>>(
+                    `/user/${user.userId}/orgs`,
+                    await authCookieHeader()
+                )
+            );
+            const res = await getOrgs();
+            if (res && res.data.data.orgs) {
+                orgs = res.data.data.orgs;
+            }
+        } catch (e) {}
+        return (
+            <UserProvider user={user}>
+                <Layout orgId={orgId} navItems={[]} orgs={orgs}>
+                    <OrgPolicyResult
+                        orgId={orgId}
+                        userId={user.userId}
+                        accessRes={accessRes}
+                    />
+                </Layout>
+            </UserProvider>
         );
-        await getOrg();
-    } catch {
-        redirect(`/`);
     }
 
     let subscriptionStatus = null;

src/app/[orgId]/settings/clients/create/page.tsx

@@ -72,12 +72,11 @@ interface TunnelTypeOption {
 }
 
 type Commands = {
-    mac: Record<string, string[]>;
-    linux: Record<string, string[]>;
+    unix: Record<string, string[]>;
     windows: Record<string, string[]>;
 };
 
-const platforms = ["linux", "mac", "windows"] as const;
+const platforms = ["unix", "windows"] as const;
 
 type Platform = (typeof platforms)[number];
 
@@ -128,8 +127,8 @@ export default function Page() {
         number | null
     >(null);
 
-    const [platform, setPlatform] = useState<Platform>("linux");
-    const [architecture, setArchitecture] = useState("amd64");
+    const [platform, setPlatform] = useState<Platform>("unix");
+    const [architecture, setArchitecture] = useState("All");
     const [commands, setCommands] = useState<Commands | null>(null);
 
     const [olmId, setOlmId] = useState("");
@@ -148,43 +147,15 @@ export default function Page() {
         version: string
     ) => {
         const commands = {
-            mac: {
-                "Apple Silicon (arm64)": [
-                    `curl -fsSL https://pangolin.net/get-olm.sh | bash`,
-                    `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}`
-                ],
-                "Intel x64 (amd64)": [
-                    `curl -fsSL https://pangolin.net/get-olm.sh | bash`,
-                    `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}`
-                ]
-            },
-            linux: {
-                amd64: [
-                    `curl -fsSL https://pangolin.net/get-olm.sh | bash`,
-                    `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}`
-                ],
-                arm64: [
-                    `curl -fsSL https://pangolin.net/get-olm.sh | bash`,
-                    `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}`
-                ],
-                arm32: [
-                    `curl -fsSL https://pangolin.net/get-olm.sh | bash`,
-                    `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}`
-                ],
-                arm32v6: [
-                    `curl -fsSL https://pangolin.net/get-olm.sh | bash`,
-                    `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}`
-                ],
-                riscv64: [
+            unix: {
+                All: [
                     `curl -fsSL https://pangolin.net/get-olm.sh | bash`,
                     `sudo olm --id ${id} --secret ${secret} --endpoint ${endpoint}`
                 ]
             },
             windows: {
                 x64: [
-                    `# Download and run the installer`,
                     `curl -o olm.exe -L "https://github.com/fosrl/olm/releases/download/${version}/olm_windows_installer.exe"`,
-                    `# Then run olm with your credentials`,
                     `olm.exe --id ${id} --secret ${secret} --endpoint ${endpoint}`
                 ]
             }
@@ -194,10 +165,8 @@ export default function Page() {
 
     const getArchitectures = () => {
         switch (platform) {
-            case "linux":
-                return ["amd64", "arm64", "arm32", "arm32v6", "riscv64"];
-            case "mac":
-                return ["Apple Silicon (arm64)", "Intel x64 (amd64)"];
+            case "unix":
+                return ["All"];
             case "windows":
                 return ["x64"];
             default:
@@ -209,12 +178,12 @@ export default function Page() {
         switch (platformName) {
             case "windows":
                 return "Windows";
-            case "mac":
-                return "macOS";
+            case "unix":
+                return "Unix & macOS";
             case "docker":
                 return "Docker";
             default:
-                return "Linux";
+                return "Unix & macOS";
         }
     };
 
@@ -249,8 +218,8 @@ export default function Page() {
         switch (platformName) {
             case "windows":
                 return <FaWindows className="h-4 w-4 mr-2" />;
-            case "mac":
-                return <FaApple className="h-4 w-4 mr-2" />;
+            case "unix":
+                return <Terminal className="h-4 w-4 mr-2" />;
             case "docker":
                 return <FaDocker className="h-4 w-4 mr-2" />;
             case "kubernetes":

src/app/[orgId]/settings/clients/page.tsx

@@ -44,7 +44,9 @@ export default async function ClientsPage(props: ClientsPageProps) {
             mbIn: formatSize(client.megabytesIn || 0),
             mbOut: formatSize(client.megabytesOut || 0),
             orgId: params.orgId,
-            online: client.online
+            online: client.online,
+            olmVersion: client.olmVersion || undefined,
+            olmUpdateAvailable: client.olmUpdateAvailable || false,
         };
     });
 

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

@@ -0,0 +1,32 @@
+import { redirect } from "next/navigation";
+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 DomainProvider from "@app/providers/DomainProvider";
+
+interface SettingsLayoutProps {
+  children: React.ReactNode;
+  params: Promise<{ domainId: string; orgId: string }>;
+}
+
+export default async function SettingsLayout({ children, params }: SettingsLayoutProps) {
+  const { domainId, orgId } = await params;
+  let domain = null;
+
+  try {
+    const res = await internal.get<AxiosResponse<GetDomainResponse>>(
+      `/org/${orgId}/domain/${domainId}`,
+      await authCookieHeader()
+    );
+    domain = res.data.data;
+  } catch {
+    redirect(`/${orgId}/settings/domains`);
+  }
+
+  return (
+    <DomainProvider domain={domain} orgId={orgId}>
+      {children}
+    </DomainProvider>
+  );
+}

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

@@ -0,0 +1,109 @@
+"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 { 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 { env } = useEnvContext();
+
+    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")}
+                />
+                {env.flags.usePangolinDns && (
+                    <Button
+                        variant="outline"
+                        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/app/[orgId]/settings/domains/page.tsx

@@ -53,7 +53,7 @@ export default async function DomainsPage(props: Props) {
                     title={t("domains")}
                     description={t("domainsDescription")}
                 />
-                <DomainsTable domains={domains} />
+                <DomainsTable domains={domains} orgId={org.org.orgId} />
             </OrgProvider>
         </>
     );

src/app/[orgId]/settings/general/page.tsx

@@ -19,6 +19,13 @@ import {
     FormMessage
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "@/components/ui/select";
 
 import { z } from "zod";
 import { useForm } from "react-hook-form";
@@ -42,15 +49,62 @@ import {
 import { useUserContext } from "@app/hooks/useUserContext";
 import { useTranslations } from "next-intl";
 import { build } from "@server/build";
+import { SwitchInput } from "@app/components/SwitchInput";
+import { SecurityFeaturesAlert } from "@app/components/SecurityFeaturesAlert";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+
+// Session length options in hours
+const SESSION_LENGTH_OPTIONS = [
+    { value: null, labelKey: "unenforced" },
+    { value: 1, labelKey: "1Hour" },
+    { value: 3, labelKey: "3Hours" },
+    { value: 6, labelKey: "6Hours" },
+    { value: 12, labelKey: "12Hours" },
+    { value: 24, labelKey: "1DaySession" },
+    { value: 72, labelKey: "3Days" },
+    { value: 168, labelKey: "7Days" },
+    { value: 336, labelKey: "14Days" },
+    { value: 720, labelKey: "30DaysSession" },
+    { value: 2160, labelKey: "90DaysSession" },
+    { value: 4320, labelKey: "180DaysSession" }
+];
+
+// Password expiry options in days - will be translated in component
+const PASSWORD_EXPIRY_OPTIONS = [
+    { value: null, labelKey: "neverExpire" },
+    { value: 1, labelKey: "1Day" },
+    { value: 30, labelKey: "30Days" },
+    { value: 60, labelKey: "60Days" },
+    { value: 90, labelKey: "90Days" },
+    { value: 180, labelKey: "180Days" },
+    { value: 365, labelKey: "1Year" }
+];
 
 // Schema for general organization settings
 const GeneralFormSchema = z.object({
     name: z.string(),
-    subnet: z.string().optional()
+    subnet: z.string().optional(),
+    requireTwoFactor: z.boolean().optional(),
+    maxSessionLengthHours: z.number().nullable().optional(),
+    passwordExpiryDays: z.number().nullable().optional(),
+    settingsLogRetentionDaysRequest: z.number(),
+    settingsLogRetentionDaysAccess: z.number(),
+    settingsLogRetentionDaysAction: z.number()
 });
 
 type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
 
+const LOG_RETENTION_OPTIONS = [
+    { label: "logRetentionDisabled", value: 0 },
+    { label: "logRetention3Days", value: 3 },
+    { label: "logRetention7Days", value: 7 },
+    { label: "logRetention14Days", value: 14 },
+    { label: "logRetention30Days", value: 30 },
+    { label: "logRetention90Days", value: 90 },
+    ...(build != "saas" ? [{ label: "logRetentionForever", value: -1 }] : [])
+];
+
 export default function GeneralPage() {
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const { orgUser } = userOrgUserContext();
@@ -60,20 +114,61 @@ export default function GeneralPage() {
     const { user } = useUserContext();
     const t = useTranslations();
     const { env } = useEnvContext();
+    const { licenseStatus, isUnlocked } = useLicenseStatusContext();
+    const subscription = useSubscriptionStatusContext();
+
+    // Check if security features are disabled due to licensing/subscription
+    const isSecurityFeatureDisabled = () => {
+        const isEnterpriseNotLicensed = build === "enterprise" && !isUnlocked();
+        const isSaasNotSubscribed =
+            build === "saas" && !subscription?.isSubscribed();
+        return isEnterpriseNotLicensed || isSaasNotSubscribed;
+    };
 
     const [loadingDelete, setLoadingDelete] = useState(false);
     const [loadingSave, setLoadingSave] = useState(false);
+    const [isSecurityPolicyConfirmOpen, setIsSecurityPolicyConfirmOpen] =
+        useState(false);
     const authPageSettingsRef = useRef<AuthPageSettingsRef>(null);
 
     const form = useForm({
         resolver: zodResolver(GeneralFormSchema),
         defaultValues: {
             name: org?.org.name,
-            subnet: org?.org.subnet || "" // Add default value for subnet
+            subnet: org?.org.subnet || "", // Add default value for subnet
+            requireTwoFactor: org?.org.requireTwoFactor || false,
+            maxSessionLengthHours: org?.org.maxSessionLengthHours || null,
+            passwordExpiryDays: org?.org.passwordExpiryDays || null,
+            settingsLogRetentionDaysRequest:
+                org.org.settingsLogRetentionDaysRequest ?? 15,
+            settingsLogRetentionDaysAccess:
+                org.org.settingsLogRetentionDaysAccess ?? 15,
+            settingsLogRetentionDaysAction:
+                org.org.settingsLogRetentionDaysAction ?? 15
         },
         mode: "onChange"
     });
 
+    // Track initial security policy values
+    const initialSecurityValues = {
+        requireTwoFactor: org?.org.requireTwoFactor || false,
+        maxSessionLengthHours: org?.org.maxSessionLengthHours || null,
+        passwordExpiryDays: org?.org.passwordExpiryDays || null
+    };
+
+    // Check if security policies have changed
+    const hasSecurityPolicyChanged = () => {
+        const currentValues = form.getValues();
+        return (
+            currentValues.requireTwoFactor !==
+                initialSecurityValues.requireTwoFactor ||
+            currentValues.maxSessionLengthHours !==
+                initialSecurityValues.maxSessionLengthHours ||
+            currentValues.passwordExpiryDays !==
+                initialSecurityValues.passwordExpiryDays
+        );
+    };
+
     async function deleteOrg() {
         setLoadingDelete(true);
         try {
@@ -126,14 +221,36 @@ export default function GeneralPage() {
     }
 
     async function onSubmit(data: GeneralFormValues) {
+        // Check if security policies have changed
+        if (hasSecurityPolicyChanged()) {
+            setIsSecurityPolicyConfirmOpen(true);
+            return;
+        }
+
+        await performSave(data);
+    }
+
+    async function performSave(data: GeneralFormValues) {
         setLoadingSave(true);
 
         try {
+            const reqData = {
+                name: data.name,
+                settingsLogRetentionDaysRequest:
+                    data.settingsLogRetentionDaysRequest,
+                settingsLogRetentionDaysAccess:
+                    data.settingsLogRetentionDaysAccess,
+                settingsLogRetentionDaysAction:
+                    data.settingsLogRetentionDaysAction
+            } as any;
+            if (build !== "oss") {
+                reqData.requireTwoFactor = data.requireTwoFactor || false;
+                reqData.maxSessionLengthHours = data.maxSessionLengthHours;
+                reqData.passwordExpiryDays = data.passwordExpiryDays;
+            }
+
             // Update organization
-            await api.post(`/org/${org?.org.orgId}`, {
-                name: data.name
-                // subnet: data.subnet // Include subnet in the API request
-            });
+            await api.post(`/org/${org?.org.orgId}`, reqData);
 
             // Also save auth page settings if they have unsaved changes
             if (
@@ -168,9 +285,7 @@ export default function GeneralPage() {
                 }}
                 dialog={
                     <div>
-                        <p>
-                            {t("orgQuestionRemove")}
-                        </p>
+                        <p>{t("orgQuestionRemove")}</p>
                         <p>{t("orgMessageRemove")}</p>
                     </div>
                 }
@@ -179,23 +294,38 @@ export default function GeneralPage() {
                 string={org?.org.name || ""}
                 title={t("orgDelete")}
             />
-            <SettingsSection>
-                <SettingsSectionHeader>
-                    <SettingsSectionTitle>
-                        {t("orgGeneralSettings")}
-                    </SettingsSectionTitle>
-                    <SettingsSectionDescription>
-                        {t("orgGeneralSettingsDescription")}
-                    </SettingsSectionDescription>
-                </SettingsSectionHeader>
-                <SettingsSectionBody>
-                    <SettingsSectionForm>
-                        <Form {...form}>
-                            <form
-                                onSubmit={form.handleSubmit(onSubmit)}
-                                className="space-y-4"
-                                id="org-settings-form"
-                            >
+            <ConfirmDeleteDialog
+                open={isSecurityPolicyConfirmOpen}
+                setOpen={setIsSecurityPolicyConfirmOpen}
+                dialog={
+                    <div>
+                        <p>{t("securityPolicyChangeDescription")}</p>
+                    </div>
+                }
+                buttonText={t("saveSettings")}
+                onConfirm={() => performSave(form.getValues())}
+                string={t("securityPolicyChangeConfirmMessage")}
+                title={t("securityPolicyChangeWarning")}
+                warningText={t("securityPolicyChangeWarningText")}
+            />
+
+            <Form {...form}>
+                <form
+                    onSubmit={form.handleSubmit(onSubmit)}
+                    className="space-y-4"
+                    id="org-settings-form"
+                >
+                    <SettingsSection>
+                        <SettingsSectionHeader>
+                            <SettingsSectionTitle>
+                                {t("orgGeneralSettings")}
+                            </SettingsSectionTitle>
+                            <SettingsSectionDescription>
+                                {t("orgGeneralSettingsDescription")}
+                            </SettingsSectionDescription>
+                        </SettingsSectionHeader>
+                        <SettingsSectionBody>
+                            <SettingsSectionForm>
                                 <FormField
                                     control={form.control}
                                     name="name"
@@ -235,51 +365,507 @@ export default function GeneralPage() {
                                         )}
                                     />
                                 )}
-                            </form>
-                        </Form>
-                    </SettingsSectionForm>
-                </SettingsSectionBody>
-            </SettingsSection>
+                            </SettingsSectionForm>
+                        </SettingsSectionBody>
+                    </SettingsSection>
 
-            {(build === "saas") && (
-                <AuthPageSettings ref={authPageSettingsRef} />
+                    <SettingsSection>
+                        <SettingsSectionHeader>
+                            <SettingsSectionTitle>
+                                {t("logRetention")}
+                            </SettingsSectionTitle>
+                            <SettingsSectionDescription>
+                                {t("logRetentionDescription")}
+                            </SettingsSectionDescription>
+                        </SettingsSectionHeader>
+                        <SettingsSectionBody>
+                            <SettingsSectionForm>
+                                <FormField
+                                    control={form.control}
+                                    name="settingsLogRetentionDaysRequest"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>
+                                                {t("logRetentionRequestLabel")}
+                                            </FormLabel>
+                                            <FormControl>
+                                                <Select
+                                                    value={field.value.toString()}
+                                                    onValueChange={(value) =>
+                                                        field.onChange(
+                                                            parseInt(value, 10)
+                                                        )
+                                                    }
+                                                >
+                                                    <SelectTrigger>
+                                                        <SelectValue
+                                                            placeholder={t(
+                                                                "selectLogRetention"
+                                                            )}
+                                                        />
+                                                    </SelectTrigger>
+                                                    <SelectContent>
+                                                        {LOG_RETENTION_OPTIONS.filter(
+                                                            (option) => {
+                                                                if (
+                                                                    build ==
+                                                                        "saas" &&
+                                                                    !subscription?.subscribed &&
+                                                                    option.value >
+                                                                        30
+                                                                ) {
+                                                                    return false;
+                                                                }
+                                                                return true;
+                                                            }
+                                                        ).map((option) => (
+                                                            <SelectItem
+                                                                key={option.value}
+                                                                value={option.value.toString()}
+                                                            >
+                                                                {t(option.label)}
+                                                            </SelectItem>
+                                                        ))}
+                                                    </SelectContent>
+                                                </Select>
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+
+                                {build != "oss" && (
+                                    <>
+                                        <SecurityFeaturesAlert />
+
+                                        <FormField
+                                            control={form.control}
+                                            name="settingsLogRetentionDaysAccess"
+                                            render={({ field }) => {
+                                                const isDisabled =
+                                                    (build == "saas" &&
+                                                        !subscription
+                                                            ?.subscribed) ||
+                                                    (build == "enterprise" &&
+                                                        !isUnlocked());
+
+                                                return (
+                                                    <FormItem>
+                                                        <FormLabel>
+                                                            {t(
+                                                                "logRetentionAccessLabel"
+                                                            )}
+                                                        </FormLabel>
+                                                        <FormControl>
+                                                            <Select
+                                                                value={field.value.toString()}
+                                                                onValueChange={(
+                                                                    value
+                                                                ) => {
+                                                                    if (
+                                                                        !isDisabled
+                                                                    ) {
+                                                                        field.onChange(
+                                                                            parseInt(
+                                                                                value,
+                                                                                10
+                                                                            )
+                                                                        );
+                                                                    }
+                                                                }}
+                                                                disabled={
+                                                                    isDisabled
+                                                                }
+                                                            >
+                                                                <SelectTrigger>
+                                                                    <SelectValue
+                                                                        placeholder={t(
+                                                                            "selectLogRetention"
+                                                                        )}
+                                                                    />
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    {LOG_RETENTION_OPTIONS.map(
+                                                                        (
+                                                                            option
+                                                                        ) => (
+                                                                            <SelectItem
+                                                                                key={
+                                                                                    option.value
+                                                                                }
+                                                                                value={
+                                                                                    option.value.toString()
+                                                                                }
+                                                                            >
+                                                                                {t(
+                                                                                    option.label
+                                                                                )}
+                                                                            </SelectItem>
+                                                                        )
+                                                                    )}
+                                                                </SelectContent>
+                                                            </Select>
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                );
+                                            }}
+                                        />
+                                        <FormField
+                                            control={form.control}
+                                            name="settingsLogRetentionDaysAction"
+                                            render={({ field }) => {
+                                                const isDisabled =
+                                                    (build == "saas" &&
+                                                        !subscription
+                                                            ?.subscribed) ||
+                                                    (build == "enterprise" &&
+                                                        !isUnlocked());
+
+                                                return (
+                                                    <FormItem>
+                                                        <FormLabel>
+                                                            {t(
+                                                                "logRetentionActionLabel"
+                                                            )}
+                                                        </FormLabel>
+                                                        <FormControl>
+                                                            <Select
+                                                                value={field.value.toString()}
+                                                                onValueChange={(
+                                                                    value
+                                                                ) => {
+                                                                    if (
+                                                                        !isDisabled
+                                                                    ) {
+                                                                        field.onChange(
+                                                                            parseInt(
+                                                                                value,
+                                                                                10
+                                                                            )
+                                                                        );
+                                                                    }
+                                                                }}
+                                                                disabled={
+                                                                    isDisabled
+                                                                }
+                                                            >
+                                                                <SelectTrigger>
+                                                                    <SelectValue
+                                                                        placeholder={t(
+                                                                            "selectLogRetention"
+                                                                        )}
+                                                                    />
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    {LOG_RETENTION_OPTIONS.map(
+                                                                        (
+                                                                            option
+                                                                        ) => (
+                                                                            <SelectItem
+                                                                                key={
+                                                                                    option.value
+                                                                                }
+                                                                                value={
+                                                                                    option.value.toString()
+                                                                                }
+                                                                            >
+                                                                                {t(
+                                                                                    option.label
+                                                                                )}
+                                                                            </SelectItem>
+                                                                        )
+                                                                    )}
+                                                                </SelectContent>
+                                                            </Select>
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                );
+                                            }}
+                                        />
+                                    </>
+                                )}
+                            </SettingsSectionForm>
+                        </SettingsSectionBody>
+                    </SettingsSection>
+                </form>
+            </Form>
+
+            {build !== "oss" && (
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>
+                            {t("securitySettings")}
+                        </SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            {t("securitySettingsDescription")}
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
+                    <SettingsSectionBody>
+                        <SecurityFeaturesAlert />
+
+                        <SettingsSectionForm>
+                            <Form {...form}>
+                                <form
+                                    onSubmit={form.handleSubmit(onSubmit)}
+                                    className="space-y-4"
+                                    id="security-settings-form"
+                                >
+                                    <FormField
+                                        control={form.control}
+                                        name="requireTwoFactor"
+                                        render={({ field }) => {
+                                            const isDisabled =
+                                                isSecurityFeatureDisabled();
+
+                                            return (
+                                                <FormItem className="col-span-2">
+                                                    <div className="flex items-center gap-2">
+                                                        <FormControl>
+                                                            <SwitchInput
+                                                                id="require-two-factor"
+                                                                defaultChecked={
+                                                                    field.value ||
+                                                                    false
+                                                                }
+                                                                label={t(
+                                                                    "requireTwoFactorForAllUsers"
+                                                                )}
+                                                                disabled={
+                                                                    isDisabled
+                                                                }
+                                                                onCheckedChange={(
+                                                                    val
+                                                                ) => {
+                                                                    if (
+                                                                        !isDisabled
+                                                                    ) {
+                                                                        form.setValue(
+                                                                            "requireTwoFactor",
+                                                                            val
+                                                                        );
+                                                                    }
+                                                                }}
+                                                            />
+                                                        </FormControl>
+                                                    </div>
+                                                    <FormMessage />
+                                                    <FormDescription>
+                                                        {t(
+                                                            "requireTwoFactorDescription"
+                                                        )}
+                                                    </FormDescription>
+                                                </FormItem>
+                                            );
+                                        }}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="maxSessionLengthHours"
+                                        render={({ field }) => {
+                                            const isDisabled =
+                                                isSecurityFeatureDisabled();
+
+                                            return (
+                                                <FormItem className="col-span-2">
+                                                    <FormLabel>
+                                                        {t("maxSessionLength")}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Select
+                                                            value={
+                                                                field.value?.toString() ||
+                                                                "null"
+                                                            }
+                                                            onValueChange={(
+                                                                value
+                                                            ) => {
+                                                                if (
+                                                                    !isDisabled
+                                                                ) {
+                                                                    const numValue =
+                                                                        value ===
+                                                                        "null"
+                                                                            ? null
+                                                                            : parseInt(
+                                                                                  value,
+                                                                                  10
+                                                                              );
+                                                                    form.setValue(
+                                                                        "maxSessionLengthHours",
+                                                                        numValue
+                                                                    );
+                                                                }
+                                                            }}
+                                                            disabled={
+                                                                isDisabled
+                                                            }
+                                                        >
+                                                            <SelectTrigger>
+                                                                <SelectValue
+                                                                    placeholder={t(
+                                                                        "selectSessionLength"
+                                                                    )}
+                                                                />
+                                                            </SelectTrigger>
+                                                            <SelectContent>
+                                                                {SESSION_LENGTH_OPTIONS.map(
+                                                                    (
+                                                                        option
+                                                                    ) => (
+                                                                        <SelectItem
+                                                                            key={
+                                                                                option.value ===
+                                                                                null
+                                                                                    ? "null"
+                                                                                    : option.value.toString()
+                                                                            }
+                                                                            value={
+                                                                                option.value ===
+                                                                                null
+                                                                                    ? "null"
+                                                                                    : option.value.toString()
+                                                                            }
+                                                                        >
+                                                                            {t(
+                                                                                option.labelKey
+                                                                            )}
+                                                                        </SelectItem>
+                                                                    )
+                                                                )}
+                                                            </SelectContent>
+                                                        </Select>
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                    <FormDescription>
+                                                        {t(
+                                                            "maxSessionLengthDescription"
+                                                        )}
+                                                    </FormDescription>
+                                                </FormItem>
+                                            );
+                                        }}
+                                    />
+                                    <FormField
+                                        control={form.control}
+                                        name="passwordExpiryDays"
+                                        render={({ field }) => {
+                                            const isDisabled =
+                                                isSecurityFeatureDisabled();
+
+                                            return (
+                                                <FormItem className="col-span-2">
+                                                    <FormLabel>
+                                                        {t(
+                                                            "passwordExpiryDays"
+                                                        )}
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Select
+                                                            value={
+                                                                field.value?.toString() ||
+                                                                "null"
+                                                            }
+                                                            onValueChange={(
+                                                                value
+                                                            ) => {
+                                                                if (
+                                                                    !isDisabled
+                                                                ) {
+                                                                    const numValue =
+                                                                        value ===
+                                                                        "null"
+                                                                            ? null
+                                                                            : parseInt(
+                                                                                  value,
+                                                                                  10
+                                                                              );
+                                                                    form.setValue(
+                                                                        "passwordExpiryDays",
+                                                                        numValue
+                                                                    );
+                                                                }
+                                                            }}
+                                                            disabled={
+                                                                isDisabled
+                                                            }
+                                                        >
+                                                            <SelectTrigger>
+                                                                <SelectValue
+                                                                    placeholder={t(
+                                                                        "selectPasswordExpiry"
+                                                                    )}
+                                                                />
+                                                            </SelectTrigger>
+                                                            <SelectContent>
+                                                                {PASSWORD_EXPIRY_OPTIONS.map(
+                                                                    (
+                                                                        option
+                                                                    ) => (
+                                                                        <SelectItem
+                                                                            key={
+                                                                                option.value ===
+                                                                                null
+                                                                                    ? "null"
+                                                                                    : option.value.toString()
+                                                                            }
+                                                                            value={
+                                                                                option.value ===
+                                                                                null
+                                                                                    ? "null"
+                                                                                    : option.value.toString()
+                                                                            }
+                                                                        >
+                                                                            {t(
+                                                                                option.labelKey
+                                                                            )}
+                                                                        </SelectItem>
+                                                                    )
+                                                                )}
+                                                            </SelectContent>
+                                                        </Select>
+                                                    </FormControl>
+                                                    <FormDescription>
+                                                        <FormMessage />
+                                                        {t(
+                                                            "editPasswordExpiryDescription"
+                                                        )}
+                                                    </FormDescription>
+                                                </FormItem>
+                                            );
+                                        }}
+                                    />
+                                </form>
+                            </Form>
+                        </SettingsSectionForm>
+                    </SettingsSectionBody>
+                </SettingsSection>
             )}
 
-            {/* Save Button */}
-            <div className="flex justify-end">
+            {build === "saas" && <AuthPageSettings ref={authPageSettingsRef} />}
+
+            <div className="flex justify-end gap-2">
+                {build !== "saas" && (
+                    <Button
+                        variant="destructive"
+                        onClick={() => setIsDeleteModalOpen(true)}
+                        className="flex items-center gap-2"
+                        loading={loadingDelete}
+                        disabled={loadingDelete}
+                    >
+                        {t("orgDelete")}
+                    </Button>
+                )}
                 <Button
                     type="submit"
                     form="org-settings-form"
                     loading={loadingSave}
                     disabled={loadingSave}
                 >
-                    {t("saveGeneralSettings")}
+                    {t("saveSettings")}
                 </Button>
             </div>
-
-            {build !== "saas" && (
-                <SettingsSection>
-                    <SettingsSectionHeader>
-                        <SettingsSectionTitle>
-                            {t("orgDangerZone")}
-                        </SettingsSectionTitle>
-                        <SettingsSectionDescription>
-                            {t("orgDangerZoneDescription")}
-                        </SettingsSectionDescription>
-                    </SettingsSectionHeader>
-                    <SettingsSectionFooter>
-                        <Button
-                            variant="destructive"
-                            onClick={() => setIsDeleteModalOpen(true)}
-                            className="flex items-center gap-2"
-                            loading={loadingDelete}
-                            disabled={loadingDelete}
-                        >
-                            {t("orgDelete")}
-                        </Button>
-                    </SettingsSectionFooter>
-                </SettingsSection>
-            )}
         </SettingsContainer>
     );
 }

src/app/[orgId]/settings/logs/access/page.tsx

@@ -0,0 +1,662 @@
+"use client";
+import { Button } from "@app/components/ui/button";
+import { toast } from "@app/hooks/useToast";
+import { useState, useRef, useEffect } from "react";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import {
+    getStoredPageSize,
+    LogDataTable,
+    setStoredPageSize
+} from "@app/components/LogDataTable";
+import { ColumnDef } from "@tanstack/react-table";
+import { DateTimeValue } from "@app/components/DateTimePicker";
+import { ArrowUpRight, Key, User } from "lucide-react";
+import Link from "next/link";
+import { ColumnFilter } from "@app/components/ColumnFilter";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { build } from "@server/build";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+
+export default function GeneralPage() {
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const router = useRouter();
+    const searchParams = useSearchParams();
+    const api = createApiClient(useEnvContext());
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const { orgId } = useParams();
+    const subscription = useSubscriptionStatusContext();
+    const { isUnlocked } = useLicenseStatusContext();
+
+    const [rows, setRows] = useState<any[]>([]);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isExporting, setIsExporting] = useState(false);
+    const [filterAttributes, setFilterAttributes] = useState<{
+        actors: string[];
+        resources: {
+            id: number;
+            name: string | null;
+        }[];
+        locations: string[];
+    }>({
+        actors: [],
+        resources: [],
+        locations: []
+    });
+
+    // Filter states - unified object for all filters
+    const [filters, setFilters] = useState<{
+        action?: string;
+        type?: string;
+        resourceId?: string;
+        location?: string;
+        actor?: string;
+    }>({
+        action: searchParams.get("action") || undefined,
+        type: searchParams.get("type") || undefined,
+        resourceId: searchParams.get("resourceId") || undefined,
+        location: searchParams.get("location") || undefined,
+        actor: searchParams.get("actor") || undefined
+    });
+
+    // Pagination state
+    const [totalCount, setTotalCount] = useState<number>(0);
+    const [currentPage, setCurrentPage] = useState<number>(0);
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Initialize page size from storage or default
+    const [pageSize, setPageSize] = useState<number>(() => {
+        return getStoredPageSize("access-audit-logs", 20);
+    });
+
+    // Set default date range to last 24 hours
+    const getDefaultDateRange = () => {
+        // if the time is in the url params, use that instead
+        const startParam = searchParams.get("start");
+        const endParam = searchParams.get("end");
+        if (startParam && endParam) {
+            return {
+                startDate: {
+                    date: new Date(startParam)
+                },
+                endDate: {
+                    date: new Date(endParam)
+                }
+            };
+        }
+
+        const now = new Date();
+        const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+
+        return {
+            startDate: {
+                date: yesterday
+            },
+            endDate: {
+                date: now
+            }
+        };
+    };
+
+    const [dateRange, setDateRange] = useState<{
+        startDate: DateTimeValue;
+        endDate: DateTimeValue;
+    }>(getDefaultDateRange());
+
+    // Trigger search with default values on component mount
+    useEffect(() => {
+        const defaultRange = getDefaultDateRange();
+        queryDateTime(
+            defaultRange.startDate,
+            defaultRange.endDate,
+            0,
+            pageSize
+        );
+    }, [orgId]); // Re-run if orgId changes
+
+    const handleDateRangeChange = (
+        startDate: DateTimeValue,
+        endDate: DateTimeValue
+    ) => {
+        setDateRange({ startDate, endDate });
+        setCurrentPage(0); // Reset to first page when filtering
+        // put the search params in the url for the time
+        updateUrlParamsForAllFilters({
+            start: startDate.date?.toISOString() || "",
+            end: endDate.date?.toISOString() || ""
+        });
+
+        queryDateTime(startDate, endDate, 0, pageSize);
+    };
+
+    // Handle page changes
+    const handlePageChange = (newPage: number) => {
+        setCurrentPage(newPage);
+        queryDateTime(
+            dateRange.startDate,
+            dateRange.endDate,
+            newPage,
+            pageSize
+        );
+    };
+
+    // Handle page size changes
+    const handlePageSizeChange = (newPageSize: number) => {
+        setPageSize(newPageSize);
+        setStoredPageSize(newPageSize, "access-audit-logs");
+        setCurrentPage(0); // Reset to first page when changing page size
+        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+    };
+
+    // Handle filter changes generically
+    const handleFilterChange = (
+        filterType: keyof typeof filters,
+        value: string | undefined
+    ) => {
+        // Create new filters object with updated value
+        const newFilters = {
+            ...filters,
+            [filterType]: value
+        };
+
+        setFilters(newFilters);
+        setCurrentPage(0); // Reset to first page when filtering
+
+        // Update URL params
+        updateUrlParamsForAllFilters(newFilters);
+
+        // Trigger new query with updated filters (pass directly to avoid async state issues)
+        queryDateTime(
+            dateRange.startDate,
+            dateRange.endDate,
+            0,
+            pageSize,
+            newFilters
+        );
+    };
+
+    const updateUrlParamsForAllFilters = (
+        newFilters:
+            | typeof filters
+            | {
+                  start: string;
+                  end: string;
+              }
+    ) => {
+        const params = new URLSearchParams(searchParams);
+        Object.entries(newFilters).forEach(([key, value]) => {
+            if (value) {
+                params.set(key, value);
+            } else {
+                params.delete(key);
+            }
+        });
+        router.replace(`?${params.toString()}`, { scroll: false });
+    };
+
+    const queryDateTime = async (
+        startDate: DateTimeValue,
+        endDate: DateTimeValue,
+        page: number = currentPage,
+        size: number = pageSize,
+        filtersParam?: {
+            action?: string;
+            type?: string;
+            resourceId?: string;
+            location?: string;
+            actor?: string;
+        }
+    ) => {
+        console.log("Date range changed:", { startDate, endDate, page, size });
+        if (
+            (build == "saas" && !subscription?.subscribed) ||
+            (build == "enterprise" && !isUnlocked())
+        ) {
+            console.log(
+                "Access denied: subscription inactive or license locked"
+            );
+            return;
+        }
+
+        setIsLoading(true);
+
+        try {
+            // Use the provided filters or fall back to current state
+            const activeFilters = filtersParam || filters;
+
+            // Convert the date/time values to API parameters
+            const params: any = {
+                limit: size,
+                offset: page * size,
+                ...activeFilters
+            };
+
+            if (startDate?.date) {
+                const startDateTime = new Date(startDate.date);
+                if (startDate.time) {
+                    const [hours, minutes, seconds] = startDate.time
+                        .split(":")
+                        .map(Number);
+                    startDateTime.setHours(hours, minutes, seconds || 0);
+                }
+                params.timeStart = startDateTime.toISOString();
+            }
+
+            if (endDate?.date) {
+                const endDateTime = new Date(endDate.date);
+                if (endDate.time) {
+                    const [hours, minutes, seconds] = endDate.time
+                        .split(":")
+                        .map(Number);
+                    endDateTime.setHours(hours, minutes, seconds || 0);
+                } else {
+                    // If no time is specified, set to NOW
+                    const now = new Date();
+                    endDateTime.setHours(
+                        now.getHours(),
+                        now.getMinutes(),
+                        now.getSeconds(),
+                        now.getMilliseconds()
+                    );
+                }
+                params.timeEnd = endDateTime.toISOString();
+            }
+
+            const res = await api.get(`/org/${orgId}/logs/access`, { params });
+            if (res.status === 200) {
+                setRows(res.data.data.log || []);
+                setTotalCount(res.data.data.pagination?.total || 0);
+                setFilterAttributes(res.data.data.filterAttributes);
+                console.log("Fetched logs:", res.data);
+            }
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("Failed to filter logs"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const refreshData = async () => {
+        console.log("Data refreshed");
+        setIsRefreshing(true);
+        try {
+            // Refresh data with current date range and pagination
+            await queryDateTime(
+                dateRange.startDate,
+                dateRange.endDate,
+                currentPage,
+                pageSize
+            );
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    const exportData = async () => {
+        try {
+            setIsExporting(true);
+
+            // Prepare query params for export
+            const params: any = {
+                timeStart: dateRange.startDate?.date
+                    ? new Date(dateRange.startDate.date).toISOString()
+                    : undefined,
+                timeEnd: dateRange.endDate?.date
+                    ? new Date(dateRange.endDate.date).toISOString()
+                    : undefined,
+                ...filters
+            };
+
+            const response = await api.get(`/org/${orgId}/logs/access/export`, {
+                responseType: "blob",
+                params
+            });
+
+            // Create a URL for the blob and trigger a download
+            const url = window.URL.createObjectURL(new Blob([response.data]));
+            const link = document.createElement("a");
+            link.href = url;
+            const epoch = Math.floor(Date.now() / 1000);
+            link.setAttribute(
+                "download",
+                `access-audit-logs-${orgId}-${epoch}.csv`
+            );
+            document.body.appendChild(link);
+            link.click();
+            link.parentNode?.removeChild(link);
+            setIsExporting(false);
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("exportError"),
+                variant: "destructive"
+            });
+        }
+    };
+
+    const columns: ColumnDef<any>[] = [
+        {
+            accessorKey: "timestamp",
+            header: ({ column }) => {
+                return t("timestamp");
+            },
+            cell: ({ row }) => {
+                return (
+                    <div className="whitespace-nowrap">
+                        {new Date(
+                            row.original.timestamp * 1000
+                        ).toLocaleString()}
+                    </div>
+                );
+            }
+        },
+        {
+            accessorKey: "action",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("action")}</span>
+                        <ColumnFilter
+                            options={[
+                                { value: "true", label: "Allowed" },
+                                { value: "false", label: "Denied" }
+                            ]}
+                            selectedValue={filters.action}
+                            onValueChange={(value) =>
+                                handleFilterChange("action", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {row.original.action ? <>Allowed</> : <>Denied</>}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "ip",
+            header: ({ column }) => {
+                return t("ip");
+            }
+        },
+        {
+            accessorKey: "location",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("location")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.locations.map(
+                                (location) => ({
+                                    value: location,
+                                    label: location
+                                })
+                            )}
+                            selectedValue={filters.location}
+                            onValueChange={(value) =>
+                                handleFilterChange("location", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {row.original.location ? (
+                            <span className="text-muted-foreground text-xs">
+                                {row.original.location}
+                            </span>
+                        ) : (
+                            <span className="text-muted-foreground text-xs">
+                                -
+                            </span>
+                        )}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "resourceName",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("resource")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.resources.map((res) => ({
+                                value: res.id.toString(),
+                                label: res.name || "Unnamed Resource"
+                            }))}
+                            selectedValue={filters.resourceId}
+                            onValueChange={(value) =>
+                                handleFilterChange("resourceId", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <Link
+                        href={`/${row.original.orgId}/settings/resources/${row.original.resourceNiceId}`}
+                    >
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            className="text-xs h-6"
+                        >
+                            {row.original.resourceName}
+                            <ArrowUpRight className="ml-2 h-3 w-3" />
+                        </Button>
+                    </Link>
+                );
+            }
+        },
+        {
+            accessorKey: "type",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("type")}</span>
+                        <ColumnFilter
+                            options={[
+                                { value: "password", label: "Password" },
+                                { value: "pincode", label: "Pincode" },
+                                { value: "login", label: "Login" },
+                                {
+                                    value: "whitelistedEmail",
+                                    label: "Whitelisted Email"
+                                }
+                            ]}
+                            selectedValue={filters.type}
+                            onValueChange={(value) =>
+                                handleFilterChange("type", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                // should be capitalized first letter
+                return (
+                    <span>
+                        {row.original.type.charAt(0).toUpperCase() +
+                            row.original.type.slice(1) || "-"}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "actor",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("actor")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.actors.map((actor) => ({
+                                value: actor,
+                                label: actor
+                            }))}
+                            selectedValue={filters.actor}
+                            onValueChange={(value) =>
+                                handleFilterChange("actor", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {row.original.actor ? (
+                            <>
+                                {row.original.actorType == "user" ? (
+                                    <User className="h-4 w-4" />
+                                ) : (
+                                    <Key className="h-4 w-4" />
+                                )}
+                                {row.original.actor}
+                            </>
+                        ) : (
+                            <>-</>
+                        )}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "actorId",
+            header: ({ column }) => {
+                return t("actorId");
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {row.original.actorId || "-"}
+                    </span>
+                );
+            }
+        }
+    ];
+
+    const renderExpandedRow = (row: any) => {
+        return (
+            <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
+                    {row.userAgent != "node" && (
+                        <div>
+                            <strong>User Agent:</strong>
+                            <p className="text-muted-foreground mt-1 break-all">
+                                {row.userAgent || "N/A"}
+                            </p>
+                        </div>
+                    )}
+                    <div>
+                        <strong>Metadata:</strong>
+                        <pre className="text-muted-foreground mt-1 text-xs bg-background p-2 rounded border overflow-auto">
+                            {row.metadata
+                                ? JSON.stringify(
+                                      JSON.parse(row.metadata),
+                                      null,
+                                      2
+                                  )
+                                : "N/A"}
+                        </pre>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("accessLogs")}
+                description={t("accessLogsDescription")}
+            />
+
+            {build == "saas" && !subscription?.subscribed ? (
+                <Alert variant="info" className="mb-6">
+                    <AlertDescription>
+                        {t("subscriptionRequiredToUse")}
+                    </AlertDescription>
+                </Alert>
+            ) : null}
+
+            {build == "enterprise" && !isUnlocked() ? (
+                <Alert variant="info" className="mb-6">
+                    <AlertDescription>
+                        {t("licenseRequiredToUse")}
+                    </AlertDescription>
+                </Alert>
+            ) : null}
+
+            <LogDataTable
+                columns={columns}
+                data={rows}
+                title={t("accessLogs")}
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
+                onExport={exportData}
+                isExporting={isExporting}
+                onDateRangeChange={handleDateRangeChange}
+                dateRange={{
+                    start: dateRange.startDate,
+                    end: dateRange.endDate
+                }}
+                defaultSort={{
+                    id: "timestamp",
+                    desc: false
+                }}
+                // Server-side pagination props
+                totalCount={totalCount}
+                currentPage={currentPage}
+                pageSize={pageSize}
+                onPageChange={handlePageChange}
+                onPageSizeChange={handlePageSizeChange}
+                isLoading={isLoading}
+                // Row expansion props
+                expandable={true}
+                renderExpandedRow={renderExpandedRow}
+                disabled={
+                    (build == "saas" && !subscription?.subscribed) ||
+                    (build == "enterprise" && !isUnlocked())
+                }
+            />
+        </>
+    );
+}

src/app/[orgId]/settings/logs/action/page.tsx

@@ -0,0 +1,515 @@
+"use client";
+import { Button } from "@app/components/ui/button";
+import { toast } from "@app/hooks/useToast";
+import { useState, useRef, useEffect } from "react";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import {
+    getStoredPageSize,
+    LogDataTable,
+    setStoredPageSize
+} from "@app/components/LogDataTable";
+import { ColumnDef } from "@tanstack/react-table";
+import { DateTimeValue } from "@app/components/DateTimePicker";
+import { Key, User } from "lucide-react";
+import { ColumnFilter } from "@app/components/ColumnFilter";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { build } from "@server/build";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+
+export default function GeneralPage() {
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const router = useRouter();
+    const api = createApiClient(useEnvContext());
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const { orgId } = useParams();
+    const searchParams = useSearchParams();
+    const subscription = useSubscriptionStatusContext();
+    const { isUnlocked } = useLicenseStatusContext();
+
+    const [rows, setRows] = useState<any[]>([]);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isExporting, setIsExporting] = useState(false);
+    const [filterAttributes, setFilterAttributes] = useState<{
+        actors: string[];
+        actions: string[];
+    }>({
+        actors: [],
+        actions: []
+    });
+
+    // Filter states - unified object for all filters
+    const [filters, setFilters] = useState<{
+        action?: string;
+        actor?: string;
+    }>({
+        action: searchParams.get("action") || undefined,
+        actor: searchParams.get("actor") || undefined
+    });
+
+    // Pagination state
+    const [totalCount, setTotalCount] = useState<number>(0);
+    const [currentPage, setCurrentPage] = useState<number>(0);
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Initialize page size from storage or default
+    const [pageSize, setPageSize] = useState<number>(() => {
+        return getStoredPageSize("action-audit-logs", 20);
+    });
+
+    // Set default date range to last 24 hours
+    const getDefaultDateRange = () => {
+        // if the time is in the url params, use that instead
+        const startParam = searchParams.get("start");
+        const endParam = searchParams.get("end");
+        if (startParam && endParam) {
+            return {
+                startDate: {
+                    date: new Date(startParam)
+                },
+                endDate: {
+                    date: new Date(endParam)
+                }
+            };
+        }
+
+        const now = new Date();
+        const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+
+        return {
+            startDate: {
+                date: yesterday
+            },
+            endDate: {
+                date: now
+            }
+        };
+    };
+
+    const [dateRange, setDateRange] = useState<{
+        startDate: DateTimeValue;
+        endDate: DateTimeValue;
+    }>(getDefaultDateRange());
+
+    // Trigger search with default values on component mount
+    useEffect(() => {
+        const defaultRange = getDefaultDateRange();
+        queryDateTime(
+            defaultRange.startDate,
+            defaultRange.endDate,
+            0,
+            pageSize
+        );
+    }, [orgId]); // Re-run if orgId changes
+
+    const handleDateRangeChange = (
+        startDate: DateTimeValue,
+        endDate: DateTimeValue
+    ) => {
+        setDateRange({ startDate, endDate });
+        setCurrentPage(0); // Reset to first page when filtering
+        // put the search params in the url for the time
+        updateUrlParamsForAllFilters({
+            start: startDate.date?.toISOString() || "",
+            end: endDate.date?.toISOString() || ""
+        });
+
+        queryDateTime(startDate, endDate, 0, pageSize);
+    };
+
+    // Handle page changes
+    const handlePageChange = (newPage: number) => {
+        setCurrentPage(newPage);
+        queryDateTime(
+            dateRange.startDate,
+            dateRange.endDate,
+            newPage,
+            pageSize
+        );
+    };
+
+    // Handle page size changes
+    const handlePageSizeChange = (newPageSize: number) => {
+        setPageSize(newPageSize);
+        setStoredPageSize(newPageSize, "action-audit-logs");
+        setCurrentPage(0); // Reset to first page when changing page size
+        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+    };
+
+    // Handle filter changes generically
+    const handleFilterChange = (
+        filterType: keyof typeof filters,
+        value: string | undefined
+    ) => {
+        // Create new filters object with updated value
+        const newFilters = {
+            ...filters,
+            [filterType]: value
+        };
+
+        setFilters(newFilters);
+        setCurrentPage(0); // Reset to first page when filtering
+
+        // Update URL params
+        updateUrlParamsForAllFilters(newFilters);
+
+        // Trigger new query with updated filters (pass directly to avoid async state issues)
+        queryDateTime(
+            dateRange.startDate,
+            dateRange.endDate,
+            0,
+            pageSize,
+            newFilters
+        );
+    };
+
+    const updateUrlParamsForAllFilters = (
+        newFilters:
+            | typeof filters
+            | {
+                  start: string;
+                  end: string;
+              }
+    ) => {
+        const params = new URLSearchParams(searchParams);
+        Object.entries(newFilters).forEach(([key, value]) => {
+            if (value) {
+                params.set(key, value);
+            } else {
+                params.delete(key);
+            }
+        });
+        router.replace(`?${params.toString()}`, { scroll: false });
+    };
+
+    const queryDateTime = async (
+        startDate: DateTimeValue,
+        endDate: DateTimeValue,
+        page: number = currentPage,
+        size: number = pageSize,
+        filtersParam?: {
+            action?: string;
+            actor?: string;
+        }
+    ) => {
+        console.log("Date range changed:", { startDate, endDate, page, size });
+        if (
+            (build == "saas" && !subscription?.subscribed) ||
+            (build == "enterprise" && !isUnlocked())
+        ) {
+            console.log(
+                "Access denied: subscription inactive or license locked"
+            );
+            return;
+        }
+        setIsLoading(true);
+
+        try {
+            // Use the provided filters or fall back to current state
+            const activeFilters = filtersParam || filters;
+
+            // Convert the date/time values to API parameters
+            const params: any = {
+                limit: size,
+                offset: page * size,
+                ...activeFilters
+            };
+
+            if (startDate?.date) {
+                const startDateTime = new Date(startDate.date);
+                if (startDate.time) {
+                    const [hours, minutes, seconds] = startDate.time
+                        .split(":")
+                        .map(Number);
+                    startDateTime.setHours(hours, minutes, seconds || 0);
+                }
+                params.timeStart = startDateTime.toISOString();
+            }
+
+            if (endDate?.date) {
+                const endDateTime = new Date(endDate.date);
+                if (endDate.time) {
+                    const [hours, minutes, seconds] = endDate.time
+                        .split(":")
+                        .map(Number);
+                    endDateTime.setHours(hours, minutes, seconds || 0);
+                } else {
+                    // If no time is specified, set to NOW
+                    const now = new Date();
+                    endDateTime.setHours(
+                        now.getHours(),
+                        now.getMinutes(),
+                        now.getSeconds(),
+                        now.getMilliseconds()
+                    );
+                }
+                params.timeEnd = endDateTime.toISOString();
+            }
+
+            const res = await api.get(`/org/${orgId}/logs/action`, { params });
+            if (res.status === 200) {
+                setRows(res.data.data.log || []);
+                setTotalCount(res.data.data.pagination?.total || 0);
+                setFilterAttributes(res.data.data.filterAttributes);
+                console.log("Fetched logs:", res.data);
+            }
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("Failed to filter logs"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const refreshData = async () => {
+        console.log("Data refreshed");
+        setIsRefreshing(true);
+        try {
+            // Refresh data with current date range and pagination
+            await queryDateTime(
+                dateRange.startDate,
+                dateRange.endDate,
+                currentPage,
+                pageSize
+            );
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    const exportData = async () => {
+        try {
+            setIsExporting(true);
+
+            // Prepare query params for export
+            const params: any = {
+                timeStart: dateRange.startDate?.date
+                    ? new Date(dateRange.startDate.date).toISOString()
+                    : undefined,
+                timeEnd: dateRange.endDate?.date
+                    ? new Date(dateRange.endDate.date).toISOString()
+                    : undefined,
+                ...filters
+            };
+
+            const response = await api.get(`/org/${orgId}/logs/action/export`, {
+                responseType: "blob",
+                params
+            });
+
+            // Create a URL for the blob and trigger a download
+            const url = window.URL.createObjectURL(new Blob([response.data]));
+            const link = document.createElement("a");
+            link.href = url;
+            const epoch = Math.floor(Date.now() / 1000);
+            link.setAttribute(
+                "download",
+                `action-audit-logs-${orgId}-${epoch}.csv`
+            );
+            document.body.appendChild(link);
+            link.click();
+            link.parentNode?.removeChild(link);
+            setIsExporting(false);
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("exportError"),
+                variant: "destructive"
+            });
+        }
+    };
+
+    const columns: ColumnDef<any>[] = [
+        {
+            accessorKey: "timestamp",
+            header: ({ column }) => {
+                return t("timestamp");
+            },
+            cell: ({ row }) => {
+                return (
+                    <div className="whitespace-nowrap">
+                        {new Date(
+                            row.original.timestamp * 1000
+                        ).toLocaleString()}
+                    </div>
+                );
+            }
+        },
+        {
+            accessorKey: "action",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("action")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.actions.map((action) => ({
+                                label:
+                                    action.charAt(0).toUpperCase() +
+                                    action.slice(1),
+                                value: action
+                            }))}
+                            selectedValue={filters.action}
+                            onValueChange={(value) =>
+                                handleFilterChange("action", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="hitespace-nowrap">
+                        {row.original.action.charAt(0).toUpperCase() +
+                            row.original.action.slice(1)}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "actor",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("actor")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.actors.map((actor) => ({
+                                value: actor,
+                                label: actor
+                            }))}
+                            selectedValue={filters.actor}
+                            onValueChange={(value) =>
+                                handleFilterChange("actor", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {row.original.actorType == "user" ? (
+                            <User className="h-4 w-4" />
+                        ) : (
+                            <Key className="h-4 w-4" />
+                        )}
+                        {row.original.actor}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "actorId",
+            header: ({ column }) => {
+                return t("actorId");
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {row.original.actorId}
+                    </span>
+                );
+            }
+        }
+    ];
+
+    const renderExpandedRow = (row: any) => {
+        return (
+            <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
+                    <div>
+                        <strong>Metadata:</strong>
+                        <pre className="text-muted-foreground mt-1 text-xs bg-background p-2 rounded border overflow-auto">
+                            {row.metadata
+                                ? JSON.stringify(
+                                      JSON.parse(row.metadata),
+                                      null,
+                                      2
+                                  )
+                                : "N/A"}
+                        </pre>
+                    </div>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("actionLogs")}
+                description={t("actionLogsDescription")}
+            />
+
+            {build == "saas" && !subscription?.subscribed ? (
+                <Alert variant="info" className="mb-6">
+                    <AlertDescription>
+                        {t("subscriptionRequiredToUse")}
+                    </AlertDescription>
+                </Alert>
+            ) : null}
+
+            {build == "enterprise" && !isUnlocked() ? (
+                <Alert variant="info" className="mb-6">
+                    <AlertDescription>
+                        {t("licenseRequiredToUse")}
+                    </AlertDescription>
+                </Alert>
+            ) : null}
+
+            <LogDataTable
+                columns={columns}
+                data={rows}
+                title={t("actionLogs")}
+                searchPlaceholder={t("searchLogs")}
+                searchColumn="action"
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
+                onExport={exportData}
+                isExporting={isExporting}
+                onDateRangeChange={handleDateRangeChange}
+                dateRange={{
+                    start: dateRange.startDate,
+                    end: dateRange.endDate
+                }}
+                defaultSort={{
+                    id: "timestamp",
+                    desc: false
+                }}
+                // Server-side pagination props
+                totalCount={totalCount}
+                currentPage={currentPage}
+                pageSize={pageSize}
+                onPageChange={handlePageChange}
+                onPageSizeChange={handlePageSizeChange}
+                isLoading={isLoading}
+                // Row expansion props
+                expandable={true}
+                renderExpandedRow={renderExpandedRow}
+                disabled={
+                    (build == "saas" && !subscription?.subscribed) ||
+                    (build == "enterprise" && !isUnlocked())
+                }
+            />
+        </>
+    );
+}

src/app/[orgId]/settings/logs/layout.tsx

@@ -0,0 +1,22 @@
+import { verifySession } from "@app/lib/auth/verifySession";
+import { redirect } from "next/navigation";
+import { cache } from "react";
+
+type GeneralSettingsProps = {
+    children: React.ReactNode;
+    params: Promise<{ orgId: string }>;
+};
+
+export default async function GeneralSettingsPage({
+    children,
+    params
+}: GeneralSettingsProps) {
+    const getUser = cache(verifySession);
+    const user = await getUser();
+
+    if (!user) {
+        redirect(`/`);
+    }
+
+    return children;
+}

src/app/[orgId]/settings/logs/page.tsx

@@ -0,0 +1,54 @@
+"use client";
+import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
+import AuthPageSettings, {
+    AuthPageSettingsRef
+} from "@app/components/private/AuthPageSettings";
+
+import { Button } from "@app/components/ui/button";
+import { useOrgContext } from "@app/hooks/useOrgContext";
+import { userOrgUserContext } from "@app/hooks/useOrgUserContext";
+import { toast } from "@app/hooks/useToast";
+import { useState, useRef } from "react";
+import {
+    Form,
+    FormControl,
+    FormDescription,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { formatAxiosError } from "@app/lib/api";
+import { AxiosResponse } from "axios";
+import { DeleteOrgResponse, ListUserOrgsResponse } from "@server/routers/org";
+import { useRouter } from "next/navigation";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionHeader,
+    SettingsSectionTitle,
+    SettingsSectionDescription,
+    SettingsSectionBody,
+    SettingsSectionForm,
+    SettingsSectionFooter
+} from "@app/components/Settings";
+import { useUserContext } from "@app/hooks/useUserContext";
+import { useTranslations } from "next-intl";
+import { build } from "@server/build";
+
+export default function GeneralPage() {
+    const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+    const router = useRouter();
+    const api = createApiClient(useEnvContext());
+    const t = useTranslations();
+    const { env } = useEnvContext();
+
+    return <p>dfas</p>;
+}

src/app/[orgId]/settings/logs/request/page.tsx

@@ -0,0 +1,796 @@
+"use client";
+import { Button } from "@app/components/ui/button";
+import { toast } from "@app/hooks/useToast";
+import { useState, useRef, useEffect } from "react";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useTranslations } from "next-intl";
+import { getStoredPageSize, LogDataTable, setStoredPageSize } from "@app/components/LogDataTable";
+import { ColumnDef } from "@tanstack/react-table";
+import { DateTimeValue } from "@app/components/DateTimePicker";
+import { Key, RouteOff, User, Lock, Unlock, ArrowUpRight } from "lucide-react";
+import Link from "next/link";
+import { ColumnFilter } from "@app/components/ColumnFilter";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+
+export default function GeneralPage() {
+    const router = useRouter();
+    const api = createApiClient(useEnvContext());
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const { orgId } = useParams();
+    const searchParams = useSearchParams();
+
+    const [rows, setRows] = useState<any[]>([]);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isExporting, setIsExporting] = useState(false);
+
+    // Pagination state
+    const [totalCount, setTotalCount] = useState<number>(0);
+    const [currentPage, setCurrentPage] = useState<number>(0);
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Initialize page size from storage or default
+    const [pageSize, setPageSize] = useState<number>(() => {
+        return getStoredPageSize("request-audit-logs", 20);
+    });
+
+    const [filterAttributes, setFilterAttributes] = useState<{
+        actors: string[];
+        resources: {
+            id: number;
+            name: string | null;
+        }[];
+        locations: string[];
+        hosts: string[];
+        paths: string[];
+    }>({
+        actors: [],
+        resources: [],
+        locations: [],
+        hosts: [],
+        paths: []
+    });
+
+    // Filter states - unified object for all filters
+    const [filters, setFilters] = useState<{
+        action?: string;
+        resourceId?: string;
+        host?: string;
+        location?: string;
+        actor?: string;
+        method?: string;
+        reason?: string;
+        path?: string;
+    }>({
+        action: searchParams.get("action") || undefined,
+        host: searchParams.get("host") || undefined,
+        resourceId: searchParams.get("resourceId") || undefined,
+        location: searchParams.get("location") || undefined,
+        actor: searchParams.get("actor") || undefined,
+        method: searchParams.get("method") || undefined,
+        reason: searchParams.get("reason") || undefined,
+        path: searchParams.get("path") || undefined
+    });
+
+    // Set default date range to last 24 hours
+    const getDefaultDateRange = () => {
+        // if the time is in the url params, use that instead
+        const startParam = searchParams.get("start");
+        const endParam = searchParams.get("end");
+        if (startParam && endParam) {
+            return {
+                startDate: {
+                    date: new Date(startParam)
+                },
+                endDate: {
+                    date: new Date(endParam)
+                }
+            };
+        }
+
+        const now = new Date();
+        const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+
+        return {
+            startDate: {
+                date: yesterday
+            },
+            endDate: {
+                date: now
+            }
+        };
+    };
+
+    const [dateRange, setDateRange] = useState<{
+        startDate: DateTimeValue;
+        endDate: DateTimeValue;
+    }>(getDefaultDateRange());
+
+    // Trigger search with default values on component mount
+    useEffect(() => {
+        const defaultRange = getDefaultDateRange();
+        queryDateTime(
+            defaultRange.startDate,
+            defaultRange.endDate,
+            0,
+            pageSize
+        );
+    }, [orgId]); // Re-run if orgId changes
+
+    const handleDateRangeChange = (
+        startDate: DateTimeValue,
+        endDate: DateTimeValue
+    ) => {
+        setDateRange({ startDate, endDate });
+        setCurrentPage(0); // Reset to first page when filtering
+        // put the search params in the url for the time
+        updateUrlParamsForAllFilters({
+            start: startDate.date?.toISOString() || "",
+            end: endDate.date?.toISOString() || ""
+        });
+
+        queryDateTime(startDate, endDate, 0, pageSize);
+    };
+
+    // Handle page changes
+    const handlePageChange = (newPage: number) => {
+        setCurrentPage(newPage);
+        queryDateTime(
+            dateRange.startDate,
+            dateRange.endDate,
+            newPage,
+            pageSize
+        );
+    };
+
+    // Handle page size changes
+    const handlePageSizeChange = (newPageSize: number) => {
+        setPageSize(newPageSize);
+        setStoredPageSize(newPageSize, "request-audit-logs");
+        setCurrentPage(0); // Reset to first page when changing page size
+        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+    };
+
+    // Handle filter changes generically
+    const handleFilterChange = (
+        filterType: keyof typeof filters,
+        value: string | undefined
+    ) => {
+        console.log(`${filterType} filter changed:`, value);
+
+        // Create new filters object with updated value
+        const newFilters = {
+            ...filters,
+            [filterType]: value
+        };
+
+        setFilters(newFilters);
+        setCurrentPage(0); // Reset to first page when filtering
+
+        // Update URL params
+        updateUrlParamsForAllFilters(newFilters);
+
+        // Trigger new query with updated filters (pass directly to avoid async state issues)
+        queryDateTime(
+            dateRange.startDate,
+            dateRange.endDate,
+            0,
+            pageSize,
+            newFilters
+        );
+    };
+
+    const updateUrlParamsForAllFilters = (
+        newFilters:
+            | typeof filters
+            | {
+                  start: string;
+                  end: string;
+              }
+    ) => {
+        const params = new URLSearchParams(searchParams);
+        Object.entries(newFilters).forEach(([key, value]) => {
+            if (value) {
+                params.set(key, value);
+            } else {
+                params.delete(key);
+            }
+        });
+        router.replace(`?${params.toString()}`, { scroll: false });
+    };
+
+    const queryDateTime = async (
+        startDate: DateTimeValue,
+        endDate: DateTimeValue,
+        page: number = currentPage,
+        size: number = pageSize,
+        filtersParam?: {
+            action?: string;
+            type?: string;
+        }
+    ) => {
+        console.log("Date range changed:", { startDate, endDate, page, size });
+        setIsLoading(true);
+
+        try {
+            // Use the provided filters or fall back to current state
+            const activeFilters = filtersParam || filters;
+
+            // Convert the date/time values to API parameters
+            const params: any = {
+                limit: size,
+                offset: page * size,
+                ...activeFilters
+            };
+
+            if (startDate?.date) {
+                const startDateTime = new Date(startDate.date);
+                if (startDate.time) {
+                    const [hours, minutes, seconds] = startDate.time
+                        .split(":")
+                        .map(Number);
+                    startDateTime.setHours(hours, minutes, seconds || 0);
+                }
+                params.timeStart = startDateTime.toISOString();
+            }
+
+            if (endDate?.date) {
+                const endDateTime = new Date(endDate.date);
+                if (endDate.time) {
+                    const [hours, minutes, seconds] = endDate.time
+                        .split(":")
+                        .map(Number);
+                    endDateTime.setHours(hours, minutes, seconds || 0);
+                } else {
+                    // If no time is specified, set to NOW
+                    const now = new Date();
+                    endDateTime.setHours(
+                        now.getHours(),
+                        now.getMinutes(),
+                        now.getSeconds(),
+                        now.getMilliseconds()
+                    );
+                }
+                params.timeEnd = endDateTime.toISOString();
+            }
+
+            const res = await api.get(`/org/${orgId}/logs/request`, { params });
+            if (res.status === 200) {
+                setRows(res.data.data.log || []);
+                setTotalCount(res.data.data.pagination?.total || 0);
+                setFilterAttributes(res.data.data.filterAttributes);
+                console.log("Fetched logs:", res.data);
+            }
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("Failed to filter logs"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const refreshData = async () => {
+        console.log("Data refreshed");
+        setIsRefreshing(true);
+        try {
+            // Refresh data with current date range and pagination
+            await queryDateTime(
+                dateRange.startDate,
+                dateRange.endDate,
+                currentPage,
+                pageSize
+            );
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("refreshError"),
+                variant: "destructive"
+            });
+        } finally {
+            setIsRefreshing(false);
+        }
+    };
+
+    const exportData = async () => {
+        try {
+            setIsExporting(true);
+
+            // Prepare query params for export
+            const params: any = {
+                timeStart: dateRange.startDate?.date
+                    ? new Date(dateRange.startDate.date).toISOString()
+                    : undefined,
+                timeEnd: dateRange.endDate?.date
+                    ? new Date(dateRange.endDate.date).toISOString()
+                    : undefined,
+                ...filters
+            };
+
+            const response = await api.get(
+                `/org/${orgId}/logs/request/export`,
+                {
+                    responseType: "blob",
+                    params
+                }
+            );
+
+            // Create a URL for the blob and trigger a download
+            const url = window.URL.createObjectURL(new Blob([response.data]));
+            const link = document.createElement("a");
+            link.href = url;
+            const epoch = Math.floor(Date.now() / 1000);
+            link.setAttribute(
+                "download",
+                `request-audit-logs-${orgId}-${epoch}.csv`
+            );
+            document.body.appendChild(link);
+            link.click();
+            link.parentNode?.removeChild(link);
+            setIsExporting(false);
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: t("exportError"),
+                variant: "destructive"
+            });
+        }
+    };
+
+    // 100 - Allowed by Rule
+    // 101 - Allowed No Auth
+    // 102 - Valid Access Token
+    // 103 - Valid header auth
+    // 104 - Valid Pincode
+    // 105 - Valid Password
+    // 106 - Valid email
+    // 107 - Valid SSO
+
+    // 201 - Resource Not Found
+    // 202 - Resource Blocked
+    // 203 - Dropped by Rule
+    // 204 - No Sessions
+    // 205 - Temporary Request Token
+    // 299 - No More Auth Methods
+
+    const reasonMap: any = {
+        100: t("allowedByRule"),
+        101: t("allowedNoAuth"),
+        102: t("validAccessToken"),
+        103: t("validHeaderAuth"),
+        104: t("validPincode"),
+        105: t("validPassword"),
+        106: t("validEmail"),
+        107: t("validSSO"),
+        201: t("resourceNotFound"),
+        202: t("resourceBlocked"),
+        203: t("droppedByRule"),
+        204: t("noSessions"),
+        205: t("temporaryRequestToken"),
+        299: t("noMoreAuthMethods")
+    };
+
+    // resourceId: integer("resourceId"),
+    // userAgent: text("userAgent"),
+    // metadata: text("details"),
+    // headers: text("headers"), // JSON blob
+    // query: text("query"), // JSON blob
+    // originalRequestURL: text("originalRequestURL"),
+    // scheme: text("scheme"),
+
+    const columns: ColumnDef<any>[] = [
+        {
+            accessorKey: "timestamp",
+            header: ({ column }) => {
+                return t("timestamp");
+            },
+            cell: ({ row }) => {
+                return (
+                    <div className="whitespace-nowrap">
+                        {new Date(
+                            row.original.timestamp * 1000
+                        ).toLocaleString()}
+                    </div>
+                );
+            }
+        },
+        {
+            accessorKey: "action",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("action")}</span>
+                        <ColumnFilter
+                            options={[
+                                { value: "true", label: "Allowed" },
+                                { value: "false", label: "Denied" }
+                            ]}
+                            selectedValue={filters.action}
+                            onValueChange={(value) =>
+                                handleFilterChange("action", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {row.original.action ? <>Allowed</> : <>Denied</>}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "ip",
+            header: ({ column }) => {
+                return t("ip");
+            }
+        },
+        {
+            accessorKey: "location",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("location")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.locations.map(
+                                (location) => ({
+                                    value: location,
+                                    label: location
+                                })
+                            )}
+                            selectedValue={filters.location}
+                            onValueChange={(value) =>
+                                handleFilterChange("location", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {row.original.location ? (
+                            <span className="text-muted-foreground text-xs">
+                                {row.original.location}
+                            </span>
+                        ) : (
+                            <span className="text-muted-foreground text-xs">
+                                -
+                            </span>
+                        )}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "resourceName",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("resource")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.resources.map((res) => ({
+                                value: res.id.toString(),
+                                label: res.name || "Unnamed Resource"
+                            }))}
+                            selectedValue={filters.resourceId}
+                            onValueChange={(value) =>
+                                handleFilterChange("resourceId", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <Link
+                        href={`/${row.original.orgId}/settings/resources/${row.original.resourceNiceId}`}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <Button
+                            variant="outline"
+                            size="sm"
+                            className="text-xs h-6"
+                        >
+                            {row.original.resourceName}
+                            <ArrowUpRight className="ml-2 h-3 w-3" />
+                        </Button>
+                    </Link>
+                );
+            }
+        },
+        {
+            accessorKey: "host",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("host")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.hosts.map((host) => ({
+                                value: host,
+                                label: host
+                            }))}
+                            selectedValue={filters.host}
+                            onValueChange={(value) =>
+                                handleFilterChange("host", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {row.original.tls ? (
+                            <Lock className="h-4 w-4" />
+                        ) : (
+                            <Unlock className="h-4 w-4" />
+                        )}
+                        {row.original.host}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "path",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("path")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.paths.map((path) => ({
+                                value: path,
+                                label: path
+                            }))}
+                            selectedValue={filters.path}
+                            onValueChange={(value) =>
+                                handleFilterChange("path", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            }
+        },
+
+        // {
+        //     accessorKey: "scheme",
+        //     header: ({ column }) => {
+        //         return t("scheme");
+        //     },
+        // },
+        {
+            accessorKey: "method",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("method")}</span>
+                        <ColumnFilter
+                            options={[
+                                { value: "GET", label: "GET" },
+                                { value: "POST", label: "POST" },
+                                { value: "PUT", label: "PUT" },
+                                { value: "DELETE", label: "DELETE" },
+                                { value: "PATCH", label: "PATCH" },
+                                { value: "HEAD", label: "HEAD" },
+                                { value: "OPTIONS", label: "OPTIONS" }
+                            ]}
+                            selectedValue={filters.method}
+                            onValueChange={(value) =>
+                                handleFilterChange("method", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            }
+        },
+        {
+            accessorKey: "reason",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("reason")}</span>
+                        <ColumnFilter
+                            options={[
+                                { value: "100", label: t("allowedByRule") },
+                                { value: "101", label: t("allowedNoAuth") },
+                                { value: "102", label: t("validAccessToken") },
+                                { value: "103", label: t("validHeaderAuth") },
+                                { value: "104", label: t("validPincode") },
+                                { value: "105", label: t("validPassword") },
+                                { value: "106", label: t("validEmail") },
+                                { value: "107", label: t("validSSO") },
+                                { value: "201", label: t("resourceNotFound") },
+                                { value: "202", label: t("resourceBlocked") },
+                                { value: "203", label: t("droppedByRule") },
+                                { value: "204", label: t("noSessions") },
+                                {
+                                    value: "205",
+                                    label: t("temporaryRequestToken")
+                                },
+                                { value: "299", label: t("noMoreAuthMethods") }
+                            ]}
+                            selectedValue={filters.reason}
+                            onValueChange={(value) =>
+                                handleFilterChange("reason", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {reasonMap[row.original.reason]}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "actor",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("actor")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.actors.map((actor) => ({
+                                value: actor,
+                                label: actor
+                            }))}
+                            selectedValue={filters.actor}
+                            onValueChange={(value) =>
+                                handleFilterChange("actor", value)
+                            }
+                            // placeholder=""
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="flex items-center gap-1">
+                        {row.original.actor ? (
+                            <>
+                                {row.original.actorType == "user" ? (
+                                    <User className="h-4 w-4" />
+                                ) : (
+                                    <Key className="h-4 w-4" />
+                                )}
+                                {row.original.actor}
+                            </>
+                        ) : (
+                            <>-</>
+                        )}
+                    </span>
+                );
+            }
+        }
+    ];
+
+    const renderExpandedRow = (row: any) => {
+        return (
+            <div className="space-y-4">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
+                    <div>
+                        <strong>User Agent:</strong>
+                        <p className="text-muted-foreground mt-1 break-all">
+                            {row.userAgent || "N/A"}
+                        </p>
+                    </div>
+                    <div>
+                        <strong>Original URL:</strong>
+                        <p className="text-muted-foreground mt-1 break-all">
+                            {row.originalRequestURL || "N/A"}
+                        </p>
+                    </div>
+                    <div>
+                        <strong>Scheme:</strong>
+                        <p className="text-muted-foreground mt-1">
+                            {row.scheme || "N/A"}
+                        </p>
+                    </div>
+                    <div>
+                        <strong>Metadata:</strong>
+                        <pre className="text-muted-foreground mt-1 text-xs bg-background p-2 rounded border overflow-auto">
+                            {row.metadata
+                                ? JSON.stringify(
+                                      JSON.parse(row.metadata),
+                                      null,
+                                      2
+                                  )
+                                : "N/A"}
+                        </pre>
+                    </div>
+                    {row.headers && (
+                        <div className="md:col-span-2">
+                            <strong>Headers:</strong>
+                            <pre className="text-muted-foreground mt-1 text-xs bg-background p-2 rounded border overflow-auto">
+                                {JSON.stringify(
+                                    JSON.parse(row.headers),
+                                    null,
+                                    2
+                                )}
+                            </pre>
+                        </div>
+                    )}
+                    {row.query && (
+                        <div className="md:col-span-2">
+                            <strong>Query Parameters:</strong>
+                            <pre className="text-muted-foreground mt-1 text-xs bg-background p-2 rounded border overflow-auto">
+                                {JSON.stringify(JSON.parse(row.query), null, 2)}
+                            </pre>
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t('requestLogs')}
+                description={t('requestLogsDescription')}
+            />
+
+            <LogDataTable
+                columns={columns}
+                data={rows}
+                title={t("requestLogs")}
+                searchPlaceholder={t("searchLogs")}
+                searchColumn="host"
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
+                onExport={exportData}
+                isExporting={isExporting}
+                onDateRangeChange={handleDateRangeChange}
+                dateRange={{
+                    start: dateRange.startDate,
+                    end: dateRange.endDate
+                }}
+                defaultSort={{
+                    id: "timestamp",
+                    desc: false
+                }}
+                // Server-side pagination props
+                totalCount={totalCount}
+                currentPage={currentPage}
+                onPageChange={handlePageChange}
+                onPageSizeChange={handlePageSizeChange}
+                isLoading={isLoading}
+                pageSize={pageSize}
+                // Row expansion props
+                expandable={true}
+                renderExpandedRow={renderExpandedRow}
+            />
+        </>
+    );
+}

src/app/[orgId]/settings/resources/[niceId]/general/page.tsx

@@ -56,6 +56,9 @@ import { build } from "@server/build";
 import { finalizeSubdomainSanitize } from "@app/lib/subdomain-utils";
 import { DomainRow } from "../../../../../../components/DomainsTable";
 import { toASCII, toUnicode } from "punycode";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+import { useUserContext } from "@app/hooks/useUserContext";
 
 export default function GeneralForm() {
     const [formKey, setFormKey] = useState(0);
@@ -65,6 +68,9 @@ export default function GeneralForm() {
     const router = useRouter();
     const t = useTranslations();
     const [editDomainOpen, setEditDomainOpen] = useState(false);
+    const {licenseStatus } = useLicenseStatusContext();
+    const subscriptionStatus = useSubscriptionStatusContext();
+    const {user} = useUserContext();
 
     const { env } = useEnvContext();
 

src/app/[orgId]/settings/resources/[niceId]/proxy/page.tsx

@@ -77,7 +77,8 @@ import {
     MoveRight,
     ArrowUp,
     Info,
-    ArrowDown
+    ArrowDown,
+    AlertTriangle
 } from "lucide-react";
 import { ContainersSelector } from "@app/components/ContainersSelector";
 import { useTranslations } from "next-intl";
@@ -115,6 +116,7 @@ import {
     TooltipProvider,
     TooltipTrigger
 } from "@app/components/ui/tooltip";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
 
 const addTargetSchema = z
     .object({
@@ -288,7 +290,9 @@ export default function ReverseProxyTargets(props: {
             ),
         headers: z
             .array(z.object({ name: z.string(), value: z.string() }))
-            .nullable()
+            .nullable(),
+        proxyProtocol: z.boolean().optional(),
+        proxyProtocolVersion: z.number().int().min(1).max(2).optional()
     });
 
     const tlsSettingsSchema = z.object({
@@ -325,7 +329,9 @@ export default function ReverseProxyTargets(props: {
         resolver: zodResolver(proxySettingsSchema),
         defaultValues: {
             setHostHeader: resource.setHostHeader || "",
-            headers: resource.headers
+            headers: resource.headers,
+            proxyProtocol: resource.proxyProtocol || false,
+            proxyProtocolVersion: resource.proxyProtocolVersion || 1
         }
     });
 
@@ -549,11 +555,11 @@ export default function ReverseProxyTargets(props: {
                     prev.map((t) =>
                         t.targetId === target.targetId
                             ? {
-                                  ...t,
-                                  targetId: response.data.data.targetId,
-                                  new: false,
-                                  updated: false
-                              }
+                                ...t,
+                                targetId: response.data.data.targetId,
+                                new: false,
+                                updated: false
+                            }
                             : t
                     )
                 );
@@ -673,11 +679,11 @@ export default function ReverseProxyTargets(props: {
             targets.map((target) =>
                 target.targetId === targetId
                     ? {
-                          ...target,
-                          ...data,
-                          updated: true,
-                          siteType: site ? site.type : target.siteType
-                      }
+                        ...target,
+                        ...data,
+                        updated: true,
+                        siteType: site ? site.type : target.siteType
+                    }
                     : target
             )
         );
@@ -688,10 +694,10 @@ export default function ReverseProxyTargets(props: {
             targets.map((target) =>
                 target.targetId === targetId
                     ? {
-                          ...target,
-                          ...config,
-                          updated: true
-                      }
+                        ...target,
+                        ...config,
+                        updated: true
+                    }
                     : target
             )
         );
@@ -800,6 +806,22 @@ export default function ReverseProxyTargets(props: {
                     setHostHeader: proxyData.setHostHeader || null,
                     headers: proxyData.headers || null
                 });
+            } else {
+                // For TCP/UDP resources, save proxy protocol settings
+                const proxyData = proxySettingsForm.getValues();
+
+                const payload = {
+                    proxyProtocol: proxyData.proxyProtocol || false,
+                    proxyProtocolVersion: proxyData.proxyProtocolVersion || 1
+                };
+
+                await api.post(`/resource/${resource.resourceId}`, payload);
+
+                updateResource({
+                    ...resource,
+                    proxyProtocol: proxyData.proxyProtocol || false,
+                    proxyProtocolVersion: proxyData.proxyProtocolVersion || 1
+                });
             }
 
             toast({
@@ -1064,7 +1086,7 @@ export default function ReverseProxyTargets(props: {
                                         className={cn(
                                             "w-[180px] justify-between text-sm border-r pr-4 rounded-none h-8 hover:bg-transparent",
                                             !row.original.siteId &&
-                                                "text-muted-foreground"
+                                            "text-muted-foreground"
                                         )}
                                     >
                                         <span className="truncate max-w-[150px]">
@@ -1404,12 +1426,12 @@ export default function ReverseProxyTargets(props: {
                                                                 {header.isPlaceholder
                                                                     ? null
                                                                     : flexRender(
-                                                                          header
-                                                                              .column
-                                                                              .columnDef
-                                                                              .header,
-                                                                          header.getContext()
-                                                                      )}
+                                                                        header
+                                                                            .column
+                                                                            .columnDef
+                                                                            .header,
+                                                                        header.getContext()
+                                                                    )}
                                                             </TableHead>
                                                         )
                                                     )}
@@ -1675,6 +1697,102 @@ export default function ReverseProxyTargets(props: {
                 </SettingsSection>
             )}
 
+            {!resource.http && resource.protocol && (
+                <SettingsSection>
+                    <SettingsSectionHeader>
+                        <SettingsSectionTitle>
+                            {t("proxyProtocol")}
+                        </SettingsSectionTitle>
+                        <SettingsSectionDescription>
+                            {t("proxyProtocolDescription")}
+                        </SettingsSectionDescription>
+                    </SettingsSectionHeader>
+                    <SettingsSectionBody>
+                        <SettingsSectionForm>
+                            <Form {...proxySettingsForm}>
+                                <form
+                                    onSubmit={proxySettingsForm.handleSubmit(
+                                        saveAllSettings
+                                    )}
+                                    className="space-y-4"
+                                    id="proxy-protocol-settings-form"
+                                >
+                                    <FormField
+                                        control={proxySettingsForm.control}
+                                        name="proxyProtocol"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <FormControl>
+                                                    <SwitchInput
+                                                        id="proxy-protocol-toggle"
+                                                        label={t(
+                                                            "enableProxyProtocol"
+                                                        )}
+                                                        description={t(
+                                                            "proxyProtocolInfo"
+                                                        )}
+                                                        defaultChecked={
+                                                            field.value || false
+                                                        }
+                                                        onCheckedChange={(val) => {
+                                                            field.onChange(val);
+                                                        }}
+                                                    />
+                                                </FormControl>
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    {proxySettingsForm.watch("proxyProtocol") && (
+                                        <>
+                                            <FormField
+                                                control={proxySettingsForm.control}
+                                                name="proxyProtocolVersion"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>{t("proxyProtocolVersion")}</FormLabel>
+                                                        <FormControl>
+                                                            <Select
+                                                                value={String(field.value || 1)}
+                                                                onValueChange={(value) =>
+                                                                    field.onChange(parseInt(value, 10))
+                                                                }
+                                                            >
+                                                                <SelectTrigger>
+                                                                    <SelectValue placeholder="Select version" />
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    <SelectItem value="1">
+                                                                        {t("version1")}
+                                                                    </SelectItem>
+                                                                    <SelectItem value="2">
+                                                                        {t("version2")}
+                                                                    </SelectItem>
+                                                                </SelectContent>
+                                                            </Select>
+                                                        </FormControl>
+                                                        <FormDescription>
+                                                            {t("versionDescription")}
+                                                        </FormDescription>
+                                                    </FormItem>
+                                                )}
+                                            />
+
+                                            <Alert>
+                                                <AlertTriangle className="h-4 w-4" />
+                                                <AlertDescription>
+                                                    <strong>{t("warning")}:</strong> {t("proxyProtocolWarning")}
+                                                </AlertDescription>
+                                            </Alert>
+                                        </>
+                                    )}
+                                </form>
+                            </Form>
+                        </SettingsSectionForm>
+                    </SettingsSectionBody>
+                </SettingsSection>
+            )}
+
             <div className="flex justify-end mt-6">
                 <Button
                     onClick={saveAllSettings}

src/app/[orgId]/settings/resources/[niceId]/rules/page.tsx

@@ -130,7 +130,7 @@ export default function ResourceRules(props: {
         PATH: t('path'),
         IP: "IP",
         CIDR: t('ipAddressRange'),
-        GEOIP: t('country')
+        COUNTRY: t('country')
     } as const;
 
     const addRuleForm = useForm({
@@ -212,7 +212,7 @@ export default function ResourceRules(props: {
             setLoading(false);
             return;
         }
-        if (data.match === "GEOIP" && !COUNTRIES.some(c => c.code === data.value)) {
+        if (data.match === "COUNTRY" && !COUNTRIES.some(c => c.code === data.value)) {
             toast({
                 variant: "destructive",
                 title: t('rulesErrorInvalidCountry'),
@@ -270,7 +270,7 @@ export default function ResourceRules(props: {
                 return t('rulesMatchIpAddress');
             case "PATH":
                 return t('rulesMatchUrl');
-            case "GEOIP":
+            case "COUNTRY":
                 return t('rulesMatchCountry');
         }
     }
@@ -492,8 +492,8 @@ export default function ResourceRules(props: {
             cell: ({ row }) => (
                 <Select
                     defaultValue={row.original.match}
-                    onValueChange={(value: "CIDR" | "IP" | "PATH" | "GEOIP") =>
-                        updateRule(row.original.ruleId, { match: value, value: value === "GEOIP" ? "US" : row.original.value })
+                    onValueChange={(value: "CIDR" | "IP" | "PATH" | "COUNTRY") =>
+                        updateRule(row.original.ruleId, { match: value, value: value === "COUNTRY" ? "US" : row.original.value })
                     }
                 >
                     <SelectTrigger className="min-w-[125px]">
@@ -504,7 +504,7 @@ export default function ResourceRules(props: {
                         <SelectItem value="IP">{RuleMatch.IP}</SelectItem>
                         <SelectItem value="CIDR">{RuleMatch.CIDR}</SelectItem>
                         {isMaxmindAvailable && (
-                            <SelectItem value="GEOIP">{RuleMatch.GEOIP}</SelectItem>
+                            <SelectItem value="COUNTRY">{RuleMatch.COUNTRY}</SelectItem>
                         )}
                     </SelectContent>
                 </Select>
@@ -514,7 +514,7 @@ export default function ResourceRules(props: {
             accessorKey: "value",
             header: t('value'),
             cell: ({ row }) => (
-                row.original.match === "GEOIP" ? (
+                row.original.match === "COUNTRY" ? (
                     <Popover>
                         <PopoverTrigger asChild>
                             <Button
@@ -748,8 +748,8 @@ export default function ResourceRules(props: {
                                                                 {RuleMatch.CIDR}
                                                             </SelectItem>
                                                             {isMaxmindAvailable && (
-                                                                <SelectItem value="GEOIP">
-                                                                    {RuleMatch.GEOIP}
+                                                                <SelectItem value="COUNTRY">
+                                                                    {RuleMatch.COUNTRY}
                                                                 </SelectItem>
                                                             )}
                                                         </SelectContent>
@@ -775,7 +775,7 @@ export default function ResourceRules(props: {
                                                     }
                                                 />
                                                 <FormControl>
-                                                    {addRuleForm.watch("match") === "GEOIP" ? (
+                                                    {addRuleForm.watch("match") === "COUNTRY" ? (
                                                         <Popover open={openAddRuleCountrySelect} onOpenChange={setOpenAddRuleCountrySelect}>
                                                             <PopoverTrigger asChild>
                                                                 <Button

src/app/[orgId]/settings/sites/create/page.tsx

@@ -79,9 +79,7 @@ interface RemoteExitNodeOption {
 }
 
 type Commands = {
-    mac: Record<string, string[]>;
-    linux: Record<string, string[]>;
-    freebsd: Record<string, string[]>;
+    unix: Record<string, string[]>;
     windows: Record<string, string[]>;
     docker: Record<string, string[]>;
     kubernetes: Record<string, string[]>;
@@ -90,13 +88,11 @@ type Commands = {
 };
 
 const platforms = [
-    "linux",
+    "unix",
     "docker",
     "kubernetes",
     "podman",
-    "mac",
     "windows",
-    "freebsd",
     "nixos"
 ] as const;
 
@@ -190,7 +186,7 @@ export default function Page() {
 
     const [loadingPage, setLoadingPage] = useState(true);
 
-    const [platform, setPlatform] = useState<Platform>("linux");
+    const [platform, setPlatform] = useState<Platform>("unix");
     const [architecture, setArchitecture] = useState("amd64");
     const [commands, setCommands] = useState<Commands | null>(null);
 
@@ -250,47 +246,11 @@ PersistentKeepalive = 5`;
             : "";
 
         const commands = {
-            mac: {
+            unix: {
                 All: [
                     `curl -fsSL https://pangolin.net/get-newt.sh | bash`,
                     `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
                 ]
-                // "Intel x64 (amd64)": [
-                //     `curl -fsSL https://pangolin.net/get-newt.sh | bash`,
-                //     `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                // ]
-            },
-            linux: {
-                All: [
-                    `curl -fsSL https://pangolin.net/get-newt.sh | bash`,
-                    `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                ]
-                // arm64: [
-                //     `curl -fsSL https://pangolin.net/get-newt.sh | bash`,
-                //     `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                // ],
-                // arm32: [
-                //     `curl -fsSL https://pangolin.net/get-newt.sh | bash`,
-                //     `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                // ],
-                // arm32v6: [
-                //     `curl -fsSL https://pangolin.net/get-newt.sh | bash`,
-                //     `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                // ],
-                // riscv64: [
-                //     `curl -fsSL https://pangolin.net/get-newt.sh | bash`,
-                //     `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                // ]
-            },
-            freebsd: {
-                All: [
-                    `curl -fsSL https://pangolin.net/get-newt.sh | bash`,
-                    `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                ]
-                // arm64: [
-                //     `curl -fsSL https://pangolin.net/get-newt.sh | bash`,
-                //     `newt --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                // ]
             },
             windows: {
                 x64: [
@@ -353,9 +313,6 @@ WantedBy=default.target`
                 All: [
                     `nix run 'nixpkgs#fosrl-newt' -- --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
                 ]
-                // aarch64: [
-                //     `nix run 'nixpkgs#fosrl-newt' -- --id ${id} --secret ${secret} --endpoint ${endpoint}${acceptClientsFlag}`
-                // ]
             }
         };
         setCommands(commands);
@@ -363,11 +320,7 @@ WantedBy=default.target`
 
     const getArchitectures = () => {
         switch (platform) {
-            case "linux":
-                // return ["amd64", "arm64", "arm32", "arm32v6", "riscv64"];
-                return ["All"];
-            case "mac":
-                // return ["Apple Silicon (arm64)", "Intel x64 (amd64)"];
+            case "unix":
                 return ["All"];
             case "windows":
                 return ["x64"];
@@ -377,11 +330,7 @@ WantedBy=default.target`
                 return ["Helm Chart"];
             case "podman":
                 return ["Podman Quadlet", "Podman Run"];
-            case "freebsd":
-                // return ["amd64", "arm64"];
-                return ["All"];
             case "nixos":
-                // return ["x86_64", "aarch64"];
                 return ["All"];
             default:
                 return ["x64"];
@@ -392,20 +341,18 @@ WantedBy=default.target`
         switch (platformName) {
             case "windows":
                 return "Windows";
-            case "mac":
-                return "macOS";
+            case "unix":
+                return "Unix & macOS";
             case "docker":
                 return "Docker";
             case "kubernetes":
                 return "Kubernetes";
             case "podman":
                 return "Podman";
-            case "freebsd":
-                return "FreeBSD";
             case "nixos":
                 return "NixOS";
             default:
-                return "Linux";
+                return "Unix / macOS";
         }
     };
 
@@ -440,16 +387,14 @@ WantedBy=default.target`
         switch (platformName) {
             case "windows":
                 return <FaWindows className="h-4 w-4 mr-2" />;
-            case "mac":
-                return <FaApple className="h-4 w-4 mr-2" />;
+            case "unix":
+                return <Terminal className="h-4 w-4 mr-2" />;
             case "docker":
                 return <FaDocker className="h-4 w-4 mr-2" />;
             case "kubernetes":
                 return <SiKubernetes className="h-4 w-4 mr-2" />;
             case "podman":
                 return <FaCubes className="h-4 w-4 mr-2" />;
-            case "freebsd":
-                return <FaFreebsd className="h-4 w-4 mr-2" />;
             case "nixos":
                 return <SiNixos className="h-4 w-4 mr-2" />;
             default:

src/app/auth/login/page.tsx

@@ -13,6 +13,7 @@ import { AxiosResponse } from "axios";
 import { ListIdpsResponse } from "@server/routers/idp";
 import { getTranslations } from "next-intl/server";
 import { build } from "@server/build";
+import { LoadLoginPageResponse } from "@server/routers/loginPage/types";
 
 export const dynamic = "force-dynamic";
 
@@ -33,6 +34,33 @@ export default async function Page(props: {
         redirect("/");
     }
 
+    // Check for orgId and redirect to org-specific login page if found
+    const orgId = searchParams.orgId as string | undefined;
+    let loginPageDomain: string | undefined;
+    if (orgId) {
+        try {
+            const res = await priv.get<AxiosResponse<LoadLoginPageResponse>>(
+                `/login-page?orgId=${orgId}`
+            );
+
+            if (res && res.status === 200 && res.data.data.fullDomain) {
+                loginPageDomain = res.data.data.fullDomain;
+            }
+        } catch (e) {
+            console.debug("No custom login page found for org", orgId);
+        }
+    }
+
+    if (loginPageDomain) {
+        const redirectUrl = searchParams.redirect as string | undefined;
+        
+        let url = `https://${loginPageDomain}/auth/org`;
+        if (redirectUrl) {
+            url += `?redirect=${redirectUrl}`;
+        }
+        redirect(url);
+    }
+
     let redirectUrl: string | undefined = undefined;
     if (searchParams.redirect) {
         redirectUrl = cleanRedirect(searchParams.redirect as string);

src/app/auth/resource/[resourceGuid]/page.tsx

@@ -22,6 +22,8 @@ import { headers } from "next/headers";
 import { GetLoginPageResponse } from "@server/routers/loginPage/types";
 import { GetOrgTierResponse } from "@server/routers/billing/types";
 import { TierId } from "@server/lib/billing/tiers";
+import { CheckOrgUserAccessResponse } from "@server/routers/org";
+import OrgPolicyRequired from "@app/components/OrgPolicyRequired";
 
 export const dynamic = "force-dynamic";
 
@@ -136,6 +138,34 @@ export default async function ResourceAuthPage(props: {
         );
     }
 
+    const cookie = await authCookieHeader();
+
+    // Check org policy compliance before proceeding
+    let orgPolicyCheck: CheckOrgUserAccessResponse | null = null;
+    if (user && authInfo.orgId) {
+        try {
+            const policyRes = await internal.get<
+                AxiosResponse<CheckOrgUserAccessResponse>
+            >(`/org/${authInfo.orgId}/user/${user.userId}/check`, cookie);
+
+            orgPolicyCheck = policyRes.data.data;
+        } catch (e) {
+            console.error(formatAxiosError(e));
+        }
+    }
+
+    // If user is not compliant with org policies, show policy requirements
+    if (orgPolicyCheck && !orgPolicyCheck.allowed && orgPolicyCheck.policies) {
+        return (
+            <div className="w-full max-w-md">
+                <OrgPolicyRequired
+                    orgId={authInfo.orgId}
+                    policies={orgPolicyCheck.policies}
+                />
+            </div>
+        );
+    }
+
     if (!hasAuth) {
         // no authentication so always go straight to the resource
         redirect(redirectUrl);
@@ -151,7 +181,7 @@ export default async function ResourceAuthPage(props: {
             >(
                 `/resource/${authInfo.resourceId}/get-exchange-token`,
                 {},
-                await authCookieHeader()
+                cookie
             );
 
             if (res.data.data.requestToken) {

src/app/layout.tsx

@@ -19,6 +19,7 @@ import { getLocale } from "next-intl/server";
 import { Toaster } from "@app/components/ui/toaster";
 import { build } from "@server/build";
 import { TopLoader } from "@app/components/Toploader";
+import Script from "next/script";
 
 export const metadata: Metadata = {
     title: `Dashboard - ${process.env.BRANDING_APP_NAME || "Pangolin"}`,
@@ -86,6 +87,13 @@ export default async function RootLayout({
         <html suppressHydrationWarning lang={locale}>
             <body className={`${font.className} h-screen overflow-hidden`}>
                 <TopLoader />
+                {build === "saas" && (
+                    <Script
+                        src="https://rybbit.fossorial.io/api/script.js"
+                        data-site-id="fe1ff2a33287"
+                        strategy="afterInteractive"
+                    />
+                )}
                 <NextIntlClientProvider>
                     <ThemeProvider
                         attribute="class"

src/app/navigation.tsx

@@ -17,6 +17,11 @@ import {
     Bolt,
     ScanText,
     ReceiptText
+    Zap,
+    CreditCard,
+    Logs,
+    SquareMousePointer,
+    ScanEye
 } from "lucide-react";
 
 export type SidebarNavSection = {
@@ -117,6 +122,30 @@ export const orgNavSections = (
             }
         ]
     },
+    {
+        heading: "Analytics",
+        items: [
+            {
+                title: "sidebarLogsRequest",
+                href: "/{orgId}/settings/logs/request",
+                icon: <SquareMousePointer className="h-4 w-4" />
+            },
+            ...(build != "oss"
+                ? [
+                      {
+                          title: "sidebarLogsAccess",
+                          href: "/{orgId}/settings/logs/access",
+                          icon: <ScanEye className="h-4 w-4" />
+                      },
+                      {
+                          title: "sidebarLogsAction",
+                          href: "/{orgId}/settings/logs/action",
+                          icon: <Logs className="h-4 w-4" />
+                      }
+                  ]
+                : [])
+        ]
+    },
     {
         heading: "Organization",
         items: [

src/components/ChangePasswordDialog.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import {
+    Credenza,
+    CredenzaBody,
+    CredenzaClose,
+    CredenzaContent,
+    CredenzaDescription,
+    CredenzaFooter,
+    CredenzaHeader,
+    CredenzaTitle
+} from "@app/components/Credenza";
+import ChangePasswordForm from "@app/components/ChangePasswordForm";
+import { useTranslations } from "next-intl";
+
+type ChangePasswordDialogProps = {
+    open: boolean;
+    setOpen: (val: boolean) => void;
+};
+
+export default function ChangePasswordDialog({ open, setOpen }: ChangePasswordDialogProps) {
+    const t = useTranslations();
+    const [currentStep, setCurrentStep] = useState(1);
+    const [loading, setLoading] = useState(false);
+    const formRef = useRef<{ handleSubmit: () => void }>(null);
+
+    function reset() {
+        setCurrentStep(1);
+        setLoading(false);
+    }
+
+    const handleSubmit = () => {
+        if (formRef.current) {
+            formRef.current.handleSubmit();
+        }
+    };
+
+    return (
+        <Credenza
+            open={open}
+            onOpenChange={(val) => {
+                setOpen(val);
+                reset();
+            }}
+        >
+            <CredenzaContent>
+                <CredenzaHeader>
+                    <CredenzaTitle>
+                        {t('changePassword')}
+                    </CredenzaTitle>
+                    <CredenzaDescription>
+                        {t('changePasswordDescription')}
+                    </CredenzaDescription>
+                </CredenzaHeader>
+                <CredenzaBody>
+                    <ChangePasswordForm
+                        ref={formRef}
+                        isDialog={true}
+                        submitButtonText={t('submit')}
+                        cancelButtonText="Close"
+                        showCancelButton={false}
+                        onComplete={() => setOpen(false)}
+                        onStepChange={setCurrentStep}
+                        onLoadingChange={setLoading}
+                    />
+                </CredenzaBody>
+                <CredenzaFooter>
+                    <CredenzaClose asChild>
+                        <Button variant="outline">Close</Button>
+                    </CredenzaClose>
+                    {(currentStep === 1 || currentStep === 2) && (
+                        <Button
+                            type="button"
+                            loading={loading}
+                            disabled={loading}
+                            onClick={handleSubmit}
+                        >
+                            {t('submit')}
+                        </Button>
+                    )}
+                </CredenzaFooter>
+            </CredenzaContent>
+        </Credenza>
+    );
+}

src/components/ChangePasswordForm.tsx

@@ -0,0 +1,647 @@
+"use client";
+
+import { useState, forwardRef, useImperativeHandle, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { CheckCircle2, Check, X } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
+import { createApiClient } from "@app/lib/api";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { AxiosResponse } from "axios";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { toast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/api";
+import { useTranslations } from "next-intl";
+import {
+    InputOTP,
+    InputOTPGroup,
+    InputOTPSlot
+} from "./ui/input-otp";
+import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
+import { ChangePasswordResponse } from "@server/routers/auth";
+import { cn } from "@app/lib/cn";
+
+// Password strength calculation
+const calculatePasswordStrength = (password: string) => {
+    const requirements = {
+        length: password.length >= 8,
+        uppercase: /[A-Z]/.test(password),
+        lowercase: /[a-z]/.test(password),
+        number: /[0-9]/.test(password),
+        special: /[~!`@#$%^&*()_\-+={}[\]|\\:;"'<>,.\/?]/.test(password)
+    };
+
+    const score = Object.values(requirements).filter(Boolean).length;
+    let strength: "weak" | "medium" | "strong" = "weak";
+    let color = "bg-red-500";
+    let percentage = 0;
+
+    if (score >= 5) {
+        strength = "strong";
+        color = "bg-green-500";
+        percentage = 100;
+    } else if (score >= 3) {
+        strength = "medium";
+        color = "bg-yellow-500";
+        percentage = 60;
+    } else if (score >= 1) {
+        strength = "weak";
+        color = "bg-red-500";
+        percentage = 30;
+    }
+
+    return { requirements, strength, color, percentage, score };
+};
+
+type ChangePasswordFormProps = {
+    onComplete?: () => void;
+    onCancel?: () => void;
+    isDialog?: boolean;
+    submitButtonText?: string;
+    cancelButtonText?: string;
+    showCancelButton?: boolean;
+    onStepChange?: (step: number) => void;
+    onLoadingChange?: (loading: boolean) => void;
+};
+
+const ChangePasswordForm = forwardRef<
+    { handleSubmit: () => void },
+    ChangePasswordFormProps
+>(
+    (
+        {
+            onComplete,
+            onCancel,
+            isDialog = false,
+            submitButtonText,
+            cancelButtonText,
+            showCancelButton = false,
+            onStepChange,
+            onLoadingChange
+        },
+        ref
+    ) => {
+        const [step, setStep] = useState(1);
+        const [loading, setLoading] = useState(false);
+        const [newPasswordValue, setNewPasswordValue] = useState("");
+        const [confirmPasswordValue, setConfirmPasswordValue] = useState("");
+
+        const api = createApiClient(useEnvContext());
+        const t = useTranslations();
+
+        const passwordStrength = calculatePasswordStrength(newPasswordValue);
+        const doPasswordsMatch =
+            newPasswordValue.length > 0 &&
+            confirmPasswordValue.length > 0 &&
+            newPasswordValue === confirmPasswordValue;
+
+        // Notify parent of step and loading changes
+        useEffect(() => {
+            onStepChange?.(step);
+        }, [step, onStepChange]);
+
+        useEffect(() => {
+            onLoadingChange?.(loading);
+        }, [loading, onLoadingChange]);
+
+        const passwordSchema = z.object({
+            oldPassword: z.string().min(1, { message: t("passwordRequired") }),
+            newPassword: z.string().min(8, { message: t("passwordRequirementsChars") }),
+            confirmPassword: z.string().min(1, { message: t("passwordRequired") })
+        }).refine((data) => data.newPassword === data.confirmPassword, {
+            message: t("passwordsDoNotMatch"),
+            path: ["confirmPassword"],
+        });
+
+        const mfaSchema = z.object({
+            code: z.string().length(6, { message: t("pincodeInvalid") })
+        });
+
+        const passwordForm = useForm({
+            resolver: zodResolver(passwordSchema),
+            defaultValues: {
+                oldPassword: "",
+                newPassword: "",
+                confirmPassword: ""
+            }
+        });
+
+        const mfaForm = useForm({
+            resolver: zodResolver(mfaSchema),
+            defaultValues: {
+                code: ""
+            }
+        });
+
+        const changePassword = async (values: z.infer<typeof passwordSchema>) => {
+            setLoading(true);
+
+            const endpoint = `/auth/change-password`;
+            const payload = { 
+                oldPassword: values.oldPassword,
+                newPassword: values.newPassword
+            };
+
+            const res = await api
+                .post<AxiosResponse<ChangePasswordResponse>>(endpoint, payload)
+                .catch((e) => {
+                    toast({
+                        title: t("changePasswordError"),
+                        description: formatAxiosError(
+                            e,
+                            t("changePasswordErrorDescription")
+                        ),
+                        variant: "destructive"
+                    });
+                });
+
+            if (res && res.data) {
+                if (res.data.data?.codeRequested) {
+                    setStep(2);
+                } else {
+                    setStep(3);
+                }
+            }
+
+            setLoading(false);
+        };
+
+        const confirmMfa = async (values: z.infer<typeof mfaSchema>) => {
+            setLoading(true);
+
+            const endpoint = `/auth/change-password`;
+            const passwordValues = passwordForm.getValues();
+            const payload = { 
+                oldPassword: passwordValues.oldPassword,
+                newPassword: passwordValues.newPassword,
+                code: values.code
+            };
+
+            const res = await api
+                .post<AxiosResponse<ChangePasswordResponse>>(endpoint, payload)
+                .catch((e) => {
+                    toast({
+                        title: t("changePasswordError"),
+                        description: formatAxiosError(
+                            e,
+                            t("changePasswordErrorDescription")
+                        ),
+                        variant: "destructive"
+                    });
+                });
+
+            if (res && res.data) {
+                setStep(3);
+            }
+
+            setLoading(false);
+        };
+
+        const handleSubmit = () => {
+            if (step === 1) {
+                passwordForm.handleSubmit(changePassword)();
+            } else if (step === 2) {
+                mfaForm.handleSubmit(confirmMfa)();
+            }
+        };
+
+        const handleComplete = () => {
+            if (onComplete) {
+                onComplete();
+            }
+        };
+
+        useImperativeHandle(ref, () => ({
+            handleSubmit
+        }));
+
+        return (
+            <div className="space-y-4">
+                {step === 1 && (
+                    <Form {...passwordForm}>
+                        <form
+                            onSubmit={passwordForm.handleSubmit(changePassword)}
+                            className="space-y-4"
+                            id="form"
+                        >
+                            <div className="space-y-4">
+                                <FormField
+                                    control={passwordForm.control}
+                                    name="oldPassword"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormLabel>
+                                                {t("oldPassword")}
+                                            </FormLabel>
+                                            <FormControl>
+                                                <Input
+                                                    type="password"
+                                                    {...field}
+                                                />
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+
+                                <FormField
+                                    control={passwordForm.control}
+                                    name="newPassword"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <div className="flex items-center gap-2">
+                                                <FormLabel>
+                                                    {t("newPassword")}
+                                                </FormLabel>
+                                                {passwordStrength.strength ===
+                                                    "strong" && (
+                                                    <Check className="h-4 w-4 text-green-500" />
+                                                )}
+                                            </div>
+                                            <FormControl>
+                                                <div className="relative">
+                                                    <Input
+                                                        type="password"
+                                                        {...field}
+                                                        onChange={(e) => {
+                                                            field.onChange(e);
+                                                            setNewPasswordValue(
+                                                                e.target.value
+                                                            );
+                                                        }}
+                                                        className={cn(
+                                                            passwordStrength.strength ===
+                                                                "strong" &&
+                                                                "border-green-500 focus-visible:ring-green-500",
+                                                            passwordStrength.strength ===
+                                                                "medium" &&
+                                                                "border-yellow-500 focus-visible:ring-yellow-500",
+                                                            passwordStrength.strength ===
+                                                                "weak" &&
+                                                                newPasswordValue.length >
+                                                                    0 &&
+                                                                "border-red-500 focus-visible:ring-red-500"
+                                                        )}
+                                                        autoComplete="new-password"
+                                                    />
+                                                </div>
+                                            </FormControl>
+
+                                            {newPasswordValue.length > 0 && (
+                                                <div className="space-y-3 mt-2">
+                                                    {/* Password Strength Meter */}
+                                                    <div className="space-y-2">
+                                                        <div className="flex justify-between items-center">
+                                                            <span className="text-sm font-medium text-foreground">
+                                                                {t("passwordStrength")}
+                                                            </span>
+                                                            <span
+                                                                className={cn(
+                                                                    "text-sm font-semibold",
+                                                                    passwordStrength.strength ===
+                                                                        "strong" &&
+                                                                        "text-green-600 dark:text-green-400",
+                                                                    passwordStrength.strength ===
+                                                                        "medium" &&
+                                                                        "text-yellow-600 dark:text-yellow-400",
+                                                                    passwordStrength.strength ===
+                                                                        "weak" &&
+                                                                        "text-red-600 dark:text-red-400"
+                                                                )}
+                                                            >
+                                                                {t(
+                                                                    `passwordStrength${passwordStrength.strength.charAt(0).toUpperCase() + passwordStrength.strength.slice(1)}`
+                                                                )}
+                                                            </span>
+                                                        </div>
+                                                        <Progress
+                                                            value={
+                                                                passwordStrength.percentage
+                                                            }
+                                                            className="h-2"
+                                                        />
+                                                    </div>
+
+                                                    {/* Requirements Checklist */}
+                                                    <div className="bg-muted rounded-lg p-3 space-y-2">
+                                                        <div className="text-sm font-medium text-foreground mb-2">
+                                                            {t("passwordRequirements")}
+                                                        </div>
+                                                        <div className="grid grid-cols-1 gap-1.5">
+                                                            <div className="flex items-center gap-2">
+                                                                {passwordStrength
+                                                                    .requirements
+                                                                    .length ? (
+                                                                    <Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                                                ) : (
+                                                                    <X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                                )}
+                                                                <span
+                                                                    className={cn(
+                                                                        "text-sm",
+                                                                        passwordStrength
+                                                                            .requirements
+                                                                            .length
+                                                                            ? "text-green-600 dark:text-green-400"
+                                                                            : "text-muted-foreground"
+                                                                    )}
+                                                                >
+                                                                    {t(
+                                                                        "passwordRequirementLengthText"
+                                                                    )}
+                                                                </span>
+                                                            </div>
+                                                            <div className="flex items-center gap-2">
+                                                                {passwordStrength
+                                                                    .requirements
+                                                                    .uppercase ? (
+                                                                    <Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                                                ) : (
+                                                                    <X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                                )}
+                                                                <span
+                                                                    className={cn(
+                                                                        "text-sm",
+                                                                        passwordStrength
+                                                                            .requirements
+                                                                            .uppercase
+                                                                            ? "text-green-600 dark:text-green-400"
+                                                                            : "text-muted-foreground"
+                                                                    )}
+                                                                >
+                                                                    {t(
+                                                                        "passwordRequirementUppercaseText"
+                                                                    )}
+                                                                </span>
+                                                            </div>
+                                                            <div className="flex items-center gap-2">
+                                                                {passwordStrength
+                                                                    .requirements
+                                                                    .lowercase ? (
+                                                                    <Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                                                ) : (
+                                                                    <X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                                )}
+                                                                <span
+                                                                    className={cn(
+                                                                        "text-sm",
+                                                                        passwordStrength
+                                                                            .requirements
+                                                                            .lowercase
+                                                                            ? "text-green-600 dark:text-green-400"
+                                                                            : "text-muted-foreground"
+                                                                    )}
+                                                                >
+                                                                    {t(
+                                                                        "passwordRequirementLowercaseText"
+                                                                    )}
+                                                                </span>
+                                                            </div>
+                                                            <div className="flex items-center gap-2">
+                                                                {passwordStrength
+                                                                    .requirements
+                                                                    .number ? (
+                                                                    <Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                                                ) : (
+                                                                    <X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                                )}
+                                                                <span
+                                                                    className={cn(
+                                                                        "text-sm",
+                                                                        passwordStrength
+                                                                            .requirements
+                                                                            .number
+                                                                            ? "text-green-600 dark:text-green-400"
+                                                                            : "text-muted-foreground"
+                                                                    )}
+                                                                >
+                                                                    {t(
+                                                                        "passwordRequirementNumberText"
+                                                                    )}
+                                                                </span>
+                                                            </div>
+                                                            <div className="flex items-center gap-2">
+                                                                {passwordStrength
+                                                                    .requirements
+                                                                    .special ? (
+                                                                    <Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                                                ) : (
+                                                                    <X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                                )}
+                                                                <span
+                                                                    className={cn(
+                                                                        "text-sm",
+                                                                        passwordStrength
+                                                                            .requirements
+                                                                            .special
+                                                                            ? "text-green-600 dark:text-green-400"
+                                                                            : "text-muted-foreground"
+                                                                    )}
+                                                                >
+                                                                    {t(
+                                                                        "passwordRequirementSpecialText"
+                                                                    )}
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            )}
+
+                                            {/* Only show FormMessage when not showing our custom requirements */}
+                                            {newPasswordValue.length === 0 && (
+                                                <FormMessage />
+                                            )}
+                                        </FormItem>
+                                    )}
+                                />
+
+                                <FormField
+                                    control={passwordForm.control}
+                                    name="confirmPassword"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <div className="flex items-center gap-2">
+                                                <FormLabel>
+                                                    {t("confirmNewPassword")}
+                                                </FormLabel>
+                                                {doPasswordsMatch && (
+                                                    <Check className="h-4 w-4 text-green-500" />
+                                                )}
+                                            </div>
+                                            <FormControl>
+                                                <div className="relative">
+                                                    <Input
+                                                        type="password"
+                                                        {...field}
+                                                        onChange={(e) => {
+                                                            field.onChange(e);
+                                                            setConfirmPasswordValue(
+                                                                e.target.value
+                                                            );
+                                                        }}
+                                                        className={cn(
+                                                            doPasswordsMatch &&
+                                                                "border-green-500 focus-visible:ring-green-500",
+                                                            confirmPasswordValue.length >
+                                                                0 &&
+                                                                !doPasswordsMatch &&
+                                                                "border-red-500 focus-visible:ring-red-500"
+                                                        )}
+                                                        autoComplete="new-password"
+                                                    />
+                                                </div>
+                                            </FormControl>
+                                            {confirmPasswordValue.length > 0 &&
+                                                !doPasswordsMatch && (
+                                                    <p className="text-sm text-red-600 mt-1">
+                                                        {t("passwordsDoNotMatch")}
+                                                    </p>
+                                                )}
+                                            {/* Only show FormMessage when field is empty */}
+                                            {confirmPasswordValue.length === 0 && (
+                                                <FormMessage />
+                                            )}
+                                        </FormItem>
+                                    )}
+                                />
+                            </div>
+                        </form>
+                    </Form>
+                )}
+
+                {step === 2 && (
+                    <div className="space-y-4">
+                        <div className="text-center">
+                            <h3 className="text-lg font-medium">{t("otpAuth")}</h3>
+                            <p className="text-sm text-muted-foreground">
+                                {t("otpAuthDescription")}
+                            </p>
+                        </div>
+
+                        <Form {...mfaForm}>
+                            <form
+                                onSubmit={mfaForm.handleSubmit(confirmMfa)}
+                                className="space-y-4"
+                                id="form"
+                            >
+                                <FormField
+                                    control={mfaForm.control}
+                                    name="code"
+                                    render={({ field }) => (
+                                        <FormItem>
+                                            <FormControl>
+                                                <div className="flex justify-center">
+                                                    <InputOTP
+                                                        maxLength={6}
+                                                        {...field}
+                                                        pattern={
+                                                            REGEXP_ONLY_DIGITS_AND_CHARS
+                                                        }
+                                                        onChange={(
+                                                            value: string
+                                                        ) => {
+                                                            field.onChange(value);
+                                                            if (
+                                                                value.length === 6
+                                                            ) {
+                                                                mfaForm.handleSubmit(
+                                                                    confirmMfa
+                                                                )();
+                                                            }
+                                                        }}
+                                                    >
+                                                        <InputOTPGroup>
+                                                            <InputOTPSlot
+                                                                index={0}
+                                                            />
+                                                            <InputOTPSlot
+                                                                index={1}
+                                                            />
+                                                            <InputOTPSlot
+                                                                index={2}
+                                                            />
+                                                            <InputOTPSlot
+                                                                index={3}
+                                                            />
+                                                            <InputOTPSlot
+                                                                index={4}
+                                                            />
+                                                            <InputOTPSlot
+                                                                index={5}
+                                                            />
+                                                        </InputOTPGroup>
+                                                    </InputOTP>
+                                                </div>
+                                            </FormControl>
+                                            <FormMessage />
+                                        </FormItem>
+                                    )}
+                                />
+                            </form>
+                        </Form>
+                    </div>
+                )}
+
+                {step === 3 && (
+                    <div className="space-y-4 text-center">
+                        <CheckCircle2
+                            className="mx-auto text-green-500"
+                            size={48}
+                        />
+                        <p className="font-semibold text-lg">
+                            {t("changePasswordSuccess")}
+                        </p>
+                        <p>{t("changePasswordSuccessDescription")}</p>
+                    </div>
+                )}
+
+                {/* Action buttons - only show when not in dialog */}
+                {!isDialog && (
+                    <div className="flex gap-2 justify-end">
+                        {showCancelButton && onCancel && (
+                            <Button
+                                variant="outline"
+                                onClick={onCancel}
+                                disabled={loading}
+                            >
+                                {cancelButtonText || "Cancel"}
+                            </Button>
+                        )}
+                        {(step === 1 || step === 2) && (
+                            <Button
+                                type="button"
+                                loading={loading}
+                                disabled={loading}
+                                onClick={handleSubmit}
+                                className="w-full"
+                            >
+                                {submitButtonText || t("submit")}
+                            </Button>
+                        )}
+                        {step === 3 && (
+                            <Button
+                                onClick={handleComplete}
+                                className="w-full"
+                            >
+                                {t("continueToApplication")}
+                            </Button>
+                        )}
+                    </div>
+                )}
+            </div>
+        );
+    }
+);
+
+export default ChangePasswordForm;

src/components/ClientsTable.tsx

@@ -26,6 +26,8 @@ import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useTranslations } from "next-intl";
+import { Badge } from "./ui/badge";
+import { InfoPopup } from "./ui/info-popup";
 
 export type ClientRow = {
     id: number;
@@ -36,6 +38,8 @@ export type ClientRow = {
     mbOut: string;
     orgId: string;
     online: boolean;
+    olmVersion?: string;
+    olmUpdateAvailable: boolean;
 };
 
 type ClientTableProps = {
@@ -204,6 +208,45 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
                 );
             }
         },
+        {
+            accessorKey: "client",
+            header: ({ column }) => {
+                return (
+                    <Button
+                        variant="ghost"
+                        onClick={() =>
+                            column.toggleSorting(column.getIsSorted() === "asc")
+                        }
+                    >
+                        {t("client")}
+                        <ArrowUpDown className="ml-2 h-4 w-4" />
+                    </Button>
+                );
+            },
+            cell: ({ row }) => {
+                const originalRow = row.original;
+
+                return (
+                    <div className="flex items-center space-x-1">
+                        <Badge variant="secondary">
+                            <div className="flex items-center space-x-2">
+                                <span>Olm</span>
+                                {originalRow.olmVersion && (
+                                    <span className="text-xs text-gray-500">
+                                        v{originalRow.olmVersion}
+                                    </span>
+                                )}
+                            </div>
+                        </Badge>
+                        {originalRow.olmUpdateAvailable && (
+                            <InfoPopup
+                                info={t("olmUpdateAvailableInfo")}
+                            />
+                        )}
+                    </div>
+                );
+            }
+        },
         {
             accessorKey: "subnet",
             header: ({ column }) => {
@@ -282,7 +325,7 @@ export default function ClientsTable({ clients, orgId }: ClientTableProps) {
                                 {t("deleteClientQuestion")}
                             </p>
                             <p>
-                                    {t("clientMessageRemove")}
+                                {t("clientMessageRemove")}
                             </p>
                         </div>
                     }

src/components/ColumnFilter.tsx

@@ -0,0 +1,104 @@
+import { useState } from "react";
+import { Button } from "@app/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@app/components/ui/popover";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@app/components/ui/command";
+import { CheckIcon, ChevronDownIcon, Filter } from "lucide-react";
+import { cn } from "@app/lib/cn";
+
+interface FilterOption {
+    value: string;
+    label: string;
+}
+
+interface ColumnFilterProps {
+    options: FilterOption[];
+    selectedValue?: string;
+    onValueChange: (value: string | undefined) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    emptyMessage?: string;
+    className?: string;
+}
+
+export function ColumnFilter({
+    options,
+    selectedValue,
+    onValueChange,
+    placeholder,
+    searchPlaceholder = "Search...",
+    emptyMessage = "No options found",
+    className
+}: ColumnFilterProps) {
+    const [open, setOpen] = useState(false);
+
+    const selectedOption = options.find(option => option.value === selectedValue);
+
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <Button
+                    variant="ghost"
+                    role="combobox"
+                    aria-expanded={open}
+                    className={cn(
+                        "justify-between text-sm h-8 px-2",
+                        !selectedValue && "text-muted-foreground",
+                        className
+                    )}
+                >
+                    <div className="flex items-center gap-2">
+                        <Filter className="h-4 w-4" />
+                        <span className="truncate">
+                            {selectedOption ? selectedOption.label : placeholder}
+                        </span>
+                    </div>
+                    <ChevronDownIcon className="h-4 w-4 shrink-0 opacity-50" />
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent className="p-0 w-[200px]" align="start">
+                <Command>
+                    <CommandInput placeholder={searchPlaceholder} />
+                    <CommandList>
+                        <CommandEmpty>{emptyMessage}</CommandEmpty>
+                        <CommandGroup>
+                            {/* Clear filter option */}
+                            {selectedValue && (
+                                <CommandItem
+                                    onSelect={() => {
+                                        onValueChange(undefined);
+                                        setOpen(false);
+                                    }}
+                                    className="text-muted-foreground"
+                                >
+                                    Clear filter
+                                </CommandItem>
+                            )}
+                            {options.map((option) => (
+                                <CommandItem
+                                    key={option.value}
+                                    value={option.label}
+                                    onSelect={() => {
+                                        onValueChange(
+                                            selectedValue === option.value ? undefined : option.value
+                                        );
+                                        setOpen(false);
+                                    }}
+                                >
+                                    <CheckIcon
+                                        className={cn(
+                                            "mr-2 h-4 w-4",
+                                            selectedValue === option.value
+                                                ? "opacity-100"
+                                                : "opacity-0"
+                                        )}
+                                    />
+                                    {option.label}
+                                </CommandItem>
+                            ))}
+                        </CommandGroup>
+                    </CommandList>
+                </Command>
+            </PopoverContent>
+        </Popover>
+    );
+}

src/components/ConfirmDeleteDialog.tsx

@@ -54,6 +54,7 @@ type InviteUserFormProps = {
     dialog: React.ReactNode;
     buttonText: string;
     onConfirm: () => Promise<void>;
+    warningText?: string;
 };
 
 export default function InviteUserForm({
@@ -63,7 +64,8 @@ export default function InviteUserForm({
     title,
     onConfirm,
     buttonText,
-    dialog
+    dialog,
+    warningText
 }: InviteUserFormProps) {
     const [loading, setLoading] = useState(false);
 
@@ -86,13 +88,20 @@ export default function InviteUserForm({
 
     function reset() {
         form.reset();
-        setLoading(false);
     }
 
     async function onSubmit(values: z.infer<typeof formSchema>) {
         setLoading(true);
-        await onConfirm();
-        reset();
+        try {
+            await onConfirm();
+            setOpen(false);
+            reset();
+        } catch (error) {
+            // Handle error if needed
+            console.error("Confirmation failed:", error);
+        } finally {
+            setLoading(false);
+        }
     }
 
     return (
@@ -111,8 +120,8 @@ export default function InviteUserForm({
                     <CredenzaBody>
                         <div className="mb-4 break-all overflow-hidden">
                             {dialog}
-                            <div className="mt-2 mb-6 font-bold text-red-700">
-                                {t("cannotbeUndone")}
+                            <div className="mt-2 mb-6 font-bold text-destructive">
+                                {warningText || t("cannotbeUndone")}
                             </div>
 
                             <div>

src/components/CreateDomainForm.tsx

@@ -11,6 +11,7 @@ import {
     FormDescription
 } from "@app/components/ui/form";
 import { Input } from "@app/components/ui/input";
+import { Checkbox, CheckboxWithLabel } from "@app/components/ui/checkbox";
 import { useToast } from "@app/hooks/useToast";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useState, useMemo } from "react";
@@ -45,6 +46,8 @@ import {
 import { useOrgContext } from "@app/hooks/useOrgContext";
 import { build } from "@server/build";
 import { toASCII, toUnicode } from 'punycode';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+import { useRouter } from "next/navigation";
 
 
 // Helper functions for Unicode domain handling
@@ -96,7 +99,9 @@ const formSchema = z.object({
         .min(1, "Domain is required")
         .refine((val) => isValidDomainFormat(val), "Invalid domain format")
         .transform((val) => toPunycode(val)),
-    type: z.enum(["ns", "cname", "wildcard"])
+    type: z.enum(["ns", "cname", "wildcard"]),
+    certResolver: z.string().nullable().optional(),
+    preferWildcardCert: z.boolean().optional()
 });
 
 type FormValues = z.infer<typeof formSchema>;
@@ -107,6 +112,12 @@ type CreateDomainFormProps = {
     onCreated?: (domain: CreateDomainResponse) => void;
 };
 
+// Example cert resolver options (replace with real API/fetch if needed)
+const certResolverOptions = [
+    { id: "default", title: "Default" },
+    { id: "custom", title: "Custom Resolver" }
+];
+
 export default function CreateDomainForm({
     open,
     setOpen,
@@ -120,20 +131,32 @@ export default function CreateDomainForm({
     const { toast } = useToast();
     const { org } = useOrgContext();
     const { env } = useEnvContext();
+    const router = useRouter();
 
     const form = useForm<FormValues>({
         resolver: zodResolver(formSchema),
         defaultValues: {
             baseDomain: "",
-            type: build == "oss" || !env.flags.usePangolinDns ? "wildcard" : "ns"
+            type: build == "oss" || !env.flags.usePangolinDns ? "wildcard" : "ns",
+            certResolver: null,
+            preferWildcardCert: false
         }
     });
 
-    function reset() {
+    const baseDomain = form.watch("baseDomain");
+    const domainType = form.watch("type");
+
+    const punycodePreview = useMemo(() => {
+        if (!baseDomain) return "";
+        const punycode = toPunycode(baseDomain);
+        return punycode !== baseDomain.toLowerCase() ? punycode : "";
+    }, [baseDomain]);
+
+    const reset = () => {
         form.reset();
         setLoading(false);
         setCreatedDomain(null);
-    }
+    };
 
     async function onSubmit(values: FormValues) {
         setLoading(true);
@@ -149,6 +172,7 @@ export default function CreateDomainForm({
                 description: t("domainCreatedDescription")
             });
             onCreated?.(domainData);
+            router.push(`/${org.org.orgId}/settings/domains/${domainData.domainId}`);
         } catch (e) {
             toast({
                 title: t("error"),
@@ -158,17 +182,9 @@ export default function CreateDomainForm({
         } finally {
             setLoading(false);
         }
-    }
-
-    const baseDomain = form.watch("baseDomain");
-    const domainInputValue = form.watch("baseDomain") || "";
-
-    const punycodePreview = useMemo(() => {
-        if (!domainInputValue) return "";
-        const punycode = toPunycode(domainInputValue);
-        return punycode !== domainInputValue.toLowerCase() ? punycode : "";
-    }, [domainInputValue]);
+    };
 
+    // Domain type options
     let domainOptions: any = [];
     if (build != "oss" && env.flags.usePangolinDns) {
         domainOptions = [
@@ -209,7 +225,6 @@ export default function CreateDomainForm({
                     </CredenzaDescription>
                 </CredenzaHeader>
                 <CredenzaBody>
-                    {!createdDomain ? (
                         <Form {...form}>
                             <form
                                 onSubmit={form.handleSubmit(onSubmit)}
@@ -260,331 +275,95 @@ export default function CreateDomainForm({
                                         </FormItem>
                                     )}
                                 />
+                                {domainType === "wildcard" && (
+                                    <>
+                                        <FormField
+                                            control={form.control}
+                                            name="certResolver"
+                                            render={({ field }) => (
+                                                <FormItem>
+                                                    <FormLabel>{t("certResolver")}</FormLabel>
+                                                    <FormControl>
+                                                        <Select
+                                                            value={
+                                                                field.value === null ? "default" :
+                                                                    (field.value === "" || (field.value && field.value !== "default")) ? "custom" :
+                                                                        "default"
+                                                            }
+                                                            onValueChange={(val) => {
+                                                                if (val === "default") {
+                                                                    field.onChange(null);
+                                                                } else if (val === "custom") {
+                                                                    field.onChange("");
+                                                                } else {
+                                                                    field.onChange(val);
+                                                                }
+                                                            }}
+                                                        >
+                                                            <SelectTrigger>
+                                                                <SelectValue placeholder={t("selectCertResolver")} />
+                                                            </SelectTrigger>
+                                                            <SelectContent>
+                                                                {certResolverOptions.map((opt) => (
+                                                                    <SelectItem key={opt.id} value={opt.id}>
+                                                                        {opt.title}
+                                                                    </SelectItem>
+                                                                ))}
+                                                            </SelectContent>
+                                                        </Select>
+                                                    </FormControl>
+                                                    <FormMessage />
+                                                </FormItem>
+                                            )}
+                                        />
+                                        {form.watch("certResolver") !== null &&
+                                            form.watch("certResolver") !== "default" && (
+                                                <FormField
+                                                    control={form.control}
+                                                    name="certResolver"
+                                                    render={({ field }) => (
+                                                        <FormItem>
+                                                            <FormControl>
+                                                                <Input
+                                                                    placeholder={t("enterCustomResolver")}
+                                                                    value={field.value || ""}
+                                                                    onChange={(e) => field.onChange(e.target.value)}
+                                                                />
+                                                            </FormControl>
+                                                            <FormMessage />
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            )}
+
+                                        {form.watch("certResolver") !== null &&
+                                            form.watch("certResolver") !== "default" && (
+                                                <FormField
+                                                    control={form.control}
+                                                    name="preferWildcardCert"
+                                                    render={({ field: checkboxField }) => (
+                                                        <FormItem className="flex flex-row items-center space-x-3 space-y-0">
+                                                            <FormControl>
+                                                                <CheckboxWithLabel
+                                                                    label={t("preferWildcardCert")}
+                                                                    checked={checkboxField.value}
+                                                                    onCheckedChange={checkboxField.onChange}
+                                                                />
+                                                            </FormControl>
+                                                                    {/* <div className="space-y-1 leading-none">
+                                                                        <FormLabel>
+                                                                            {t("preferWildcardCert")}
+                                                                        </FormLabel>
+                                                                    </div> */}
+                                                        </FormItem>
+                                                    )}
+                                                />
+                                            )}
+                                    </>
+                                )}
                             </form>
                         </Form>
-                    ) : (
-                        <div className="space-y-6">
-                            <Alert variant="default">
-                                <InfoIcon className="h-4 w-4" />
-                                <AlertTitle className="font-semibold">
-                                    {t("createDomainAddDnsRecords")}
-                                </AlertTitle>
-                                <AlertDescription>
-                                    {t("createDomainAddDnsRecordsDescription")}
-                                </AlertDescription>
-                            </Alert>
 
-                            <div className="space-y-4">
-                                {createdDomain.nsRecords &&
-                                    createdDomain.nsRecords.length > 0 && (
-                                        <div>
-                                            <h3 className="font-medium mb-3">
-                                                {t("createDomainNsRecords")}
-                                            </h3>
-                                            <InfoSections cols={1}>
-                                                <InfoSection>
-                                                    <InfoSectionTitle>
-                                                        {t("createDomainRecord")}
-                                                    </InfoSectionTitle>
-                                                    <InfoSectionContent>
-                                                        <div className="space-y-2">
-                                                            <div className="flex justify-between items-center">
-                                                                <span className="text-sm font-medium">
-                                                                    {t(
-                                                                        "createDomainType"
-                                                                    )}
-                                                                </span>
-                                                                <span className="text-sm font-mono">
-                                                                    NS
-                                                                </span>
-                                                            </div>
-                                                            <div className="flex justify-between items-center">
-                                                                <span className="text-sm font-medium">
-                                                                    {t(
-                                                                        "createDomainName"
-                                                                    )}
-                                                                </span>
-                                                                <div className="text-right">
-                                                                    <span className="text-sm font-mono block">
-                                                                        {fromPunycode(baseDomain)}
-                                                                    </span>
-                                                                    {fromPunycode(baseDomain) !== baseDomain && (
-                                                                        <span className="text-xs text-muted-foreground font-mono">
-                                                                            ({baseDomain})
-                                                                        </span>
-                                                                    )}
-                                                                </div>
-                                                            </div>
-                                                            <span className="text-sm font-medium">
-                                                                {t(
-                                                                    "createDomainValue"
-                                                                )}
-                                                            </span>
-                                                            {createdDomain.nsRecords.map(
-                                                                (
-                                                                    nsRecord,
-                                                                    index
-                                                                ) => (
-                                                                    <div
-                                                                        className="flex justify-between items-center"
-                                                                        key={index}
-                                                                    >
-                                                                        <CopyToClipboard
-                                                                            text={
-                                                                                nsRecord
-                                                                            }
-                                                                        />
-                                                                    </div>
-                                                                )
-                                                            )}
-                                                        </div>
-                                                    </InfoSectionContent>
-                                                </InfoSection>
-                                            </InfoSections>
-                                        </div>
-                                    )}
-
-                                {createdDomain.cnameRecords &&
-                                    createdDomain.cnameRecords.length > 0 && (
-                                        <div>
-                                            <h3 className="font-medium mb-3">
-                                                {t("createDomainCnameRecords")}
-                                            </h3>
-                                            <InfoSections cols={1}>
-                                                {createdDomain.cnameRecords.map(
-                                                    (cnameRecord, index) => (
-                                                        <InfoSection
-                                                            key={index}
-                                                        >
-                                                            <InfoSectionTitle>
-                                                                {t(
-                                                                    "createDomainRecordNumber",
-                                                                    {
-                                                                        number:
-                                                                            index +
-                                                                            1
-                                                                    }
-                                                                )}
-                                                            </InfoSectionTitle>
-                                                            <InfoSectionContent>
-                                                                <div className="space-y-2">
-                                                                    <div className="flex justify-between items-center">
-                                                                        <span className="text-sm font-medium">
-                                                                            {t(
-                                                                                "createDomainType"
-                                                                            )}
-                                                                        </span>
-                                                                        <span className="text-sm font-mono">
-                                                                            CNAME
-                                                                        </span>
-                                                                    </div>
-                                                                    <div className="flex justify-between items-center">
-                                                                        <span className="text-sm font-medium">
-                                                                            {t(
-                                                                                "createDomainName"
-                                                                            )}
-                                                                        </span>
-                                                                        <div className="text-right">
-                                                                            <span className="text-sm font-mono block">
-                                                                                {fromPunycode(cnameRecord.baseDomain)}
-                                                                            </span>
-                                                                            {fromPunycode(cnameRecord.baseDomain) !== cnameRecord.baseDomain && (
-                                                                                <span className="text-xs text-muted-foreground font-mono">
-                                                                                    ({cnameRecord.baseDomain})
-                                                                                </span>
-                                                                            )}
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="flex justify-between items-center">
-                                                                        <span className="text-sm font-medium">
-                                                                            {t(
-                                                                                "createDomainValue"
-                                                                            )}
-                                                                        </span>
-                                                                        <CopyToClipboard
-                                                                            text={
-                                                                                cnameRecord.value
-                                                                            }
-                                                                        />
-                                                                    </div>
-                                                                </div>
-                                                            </InfoSectionContent>
-                                                        </InfoSection>
-                                                    )
-                                                )}
-                                            </InfoSections>
-                                        </div>
-                                    )}
-
-                                {createdDomain.aRecords &&
-                                    createdDomain.aRecords.length > 0 && (
-                                        <div>
-                                            <h3 className="font-medium mb-3">
-                                                {t("createDomainARecords")}
-                                            </h3>
-                                            <InfoSections cols={1}>
-                                                {createdDomain.aRecords.map(
-                                                    (aRecord, index) => (
-                                                        <InfoSection
-                                                            key={index}
-                                                        >
-                                                            <InfoSectionTitle>
-                                                                {t(
-                                                                    "createDomainRecordNumber",
-                                                                    {
-                                                                        number:
-                                                                            index +
-                                                                            1
-                                                                    }
-                                                                )}
-                                                            </InfoSectionTitle>
-                                                            <InfoSectionContent>
-                                                                <div className="space-y-2">
-                                                                    <div className="flex justify-between items-center">
-                                                                        <span className="text-sm font-medium">
-                                                                            {t(
-                                                                                "createDomainType"
-                                                                            )}
-                                                                        </span>
-                                                                        <span className="text-sm font-mono">
-                                                                            A
-                                                                        </span>
-                                                                    </div>
-                                                                    <div className="flex justify-between items-center">
-                                                                        <span className="text-sm font-medium">
-                                                                            {t(
-                                                                                "createDomainName"
-                                                                            )}
-                                                                        </span>
-                                                                        <div className="text-right">
-                                                                            <span className="text-sm font-mono block">
-                                                                                {fromPunycode(aRecord.baseDomain)}
-                                                                            </span>
-                                                                            {fromPunycode(aRecord.baseDomain) !== aRecord.baseDomain && (
-                                                                                <span className="text-xs text-muted-foreground font-mono">
-                                                                                    ({aRecord.baseDomain})
-                                                                                </span>
-                                                                            )}
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="flex justify-between items-center">
-                                                                        <span className="text-sm font-medium">
-                                                                            {t(
-                                                                                "createDomainValue"
-                                                                            )}
-                                                                        </span>
-                                                                        <span className="text-sm font-mono">
-                                                                            {
-                                                                                aRecord.value
-                                                                            }
-                                                                        </span>
-                                                                    </div>
-                                                                </div>
-                                                            </InfoSectionContent>
-                                                        </InfoSection>
-                                                    )
-                                                )}
-                                            </InfoSections>
-                                        </div>
-                                    )}
-                                {createdDomain.txtRecords &&
-                                    createdDomain.txtRecords.length > 0 && (
-                                        <div>
-                                            <h3 className="font-medium mb-3">
-                                                {t("createDomainTxtRecords")}
-                                            </h3>
-                                            <InfoSections cols={1}>
-                                                {createdDomain.txtRecords.map(
-                                                    (txtRecord, index) => (
-                                                        <InfoSection
-                                                            key={index}
-                                                        >
-                                                            <InfoSectionTitle>
-                                                                {t(
-                                                                    "createDomainRecordNumber",
-                                                                    {
-                                                                        number:
-                                                                            index +
-                                                                            1
-                                                                    }
-                                                                )}
-                                                            </InfoSectionTitle>
-                                                            <InfoSectionContent>
-                                                                <div className="space-y-2">
-                                                                    <div className="flex justify-between items-center">
-                                                                        <span className="text-sm font-medium">
-                                                                            {t(
-                                                                                "createDomainType"
-                                                                            )}
-                                                                        </span>
-                                                                        <span className="text-sm font-mono">
-                                                                            TXT
-                                                                        </span>
-                                                                    </div>
-                                                                    <div className="flex justify-between items-center">
-                                                                        <span className="text-sm font-medium">
-                                                                            {t(
-                                                                                "createDomainName"
-                                                                            )}
-                                                                        </span>
-                                                                        <div className="text-right">
-                                                                            <span className="text-sm font-mono block">
-                                                                                {fromPunycode(txtRecord.baseDomain)}
-                                                                            </span>
-                                                                            {fromPunycode(txtRecord.baseDomain) !== txtRecord.baseDomain && (
-                                                                                <span className="text-xs text-muted-foreground font-mono">
-                                                                                    ({txtRecord.baseDomain})
-                                                                                </span>
-                                                                            )}
-                                                                        </div>
-                                                                    </div>
-                                                                    <div className="flex justify-between items-center">
-                                                                        <span className="text-sm font-medium">
-                                                                            {t(
-                                                                                "createDomainValue"
-                                                                            )}
-                                                                        </span>
-                                                                        <CopyToClipboard
-                                                                            text={
-                                                                                txtRecord.value
-                                                                            }
-                                                                        />
-                                                                    </div>
-                                                                </div>
-                                                            </InfoSectionContent>
-                                                        </InfoSection>
-                                                    )
-                                                )}
-                                            </InfoSections>
-                                        </div>
-                                    )}
-                            </div>
-
-                            {build != "oss" && env.flags.usePangolinDns && (
-                                    <Alert variant="destructive">
-                                        <AlertTriangle className="h-4 w-4" />
-                                        <AlertTitle className="font-semibold">
-                                            {t("createDomainSaveTheseRecords")}
-                                        </AlertTitle>
-                                        <AlertDescription>
-                                            {t(
-                                                "createDomainSaveTheseRecordsDescription"
-                                            )}
-                                        </AlertDescription>
-                                    </Alert>
-                                )}
-
-                            <Alert variant="info">
-                                <AlertTriangle className="h-4 w-4" />
-                                <AlertTitle className="font-semibold">
-                                    {t("createDomainDnsPropagation")}
-                                </AlertTitle>
-                                <AlertDescription>
-                                    {t("createDomainDnsPropagationDescription")}
-                                </AlertDescription>
-                            </Alert>
-                        </div>
-                    )}
                 </CredenzaBody>
                 <CredenzaFooter>
                     <CredenzaClose asChild>

src/components/CreateShareLinkForm.tsx

@@ -98,6 +98,7 @@ export default function CreateShareLinkForm({
         {
             resourceId: number;
             name: string;
+            niceId: string;
             resourceUrl: string;
         }[]
     >([]);
@@ -160,6 +161,7 @@ export default function CreateShareLinkForm({
                         .map((r) => ({
                             resourceId: r.resourceId,
                             name: r.name,
+                            niceId: r.niceId,
                             resourceUrl: `${r.ssl ? "https://" : "http://"}${toUnicode(r.fullDomain || "")}/`
                         }))
                 );
@@ -233,6 +235,7 @@ export default function CreateShareLinkForm({
                 accessTokenId: token.accessTokenId,
                 resourceId: token.resourceId,
                 resourceName: values.resourceName,
+                resourceNiceId: resource ? resource.niceId : "",
                 title: token.title,
                 createdAt: token.createdAt,
                 expiresAt: token.expiresAt

src/components/DNSRecordTable.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { useTranslations } from "next-intl";
+import { Badge } from "@app/components/ui/badge";
+import { DNSRecordsDataTable } from "./DNSRecordsDataTable";
+
+export type DNSRecordRow = {
+    id: string;
+    domainId: string;
+    recordType: string; // "NS" | "CNAME" | "A" | "TXT"
+    baseDomain: string | null;
+    value: string;
+    verified?: boolean;
+};
+
+type Props = {
+    records: DNSRecordRow[];
+    domainId: string;
+    isRefreshing?: boolean;
+    type: string | null;
+};
+
+export default function DNSRecordsTable({
+    records,
+    domainId,
+    isRefreshing,
+    type
+}: Props) {
+    const t = useTranslations();
+
+    const columns: ColumnDef<DNSRecordRow>[] = [
+        {
+            accessorKey: "baseDomain",
+            header: ({ column }) => {
+                return (
+                    <div>{t("recordName", { fallback: "Record name" })}</div>
+                );
+            },
+            cell: ({ row }) => {
+                const baseDomain = row.original.baseDomain;
+                return <div>{baseDomain || "-"}</div>;
+            }
+        },
+        {
+            accessorKey: "recordType",
+            header: ({ column }) => {
+                return <div>{t("type")}</div>;
+            },
+            cell: ({ row }) => {
+                const type = row.original.recordType;
+                return <div className="">{type}</div>;
+            }
+        },
+        {
+            accessorKey: "ttl",
+            header: ({ column }) => {
+                return <div>{t("TTL")}</div>;
+            },
+            cell: ({ row }) => {
+                return <div>{t("auto")}</div>;
+            }
+        },
+        {
+            accessorKey: "value",
+            header: () => {
+                return <div>{t("value")}</div>;
+            },
+            cell: ({ row }) => {
+                const value = row.original.value;
+                return <div>{value}</div>;
+            }
+        },
+        {
+            accessorKey: "verified",
+            header: ({ column }) => {
+                return <div>{t("status")}</div>;
+            },
+            cell: ({ row }) => {
+                const verified = row.original.verified;
+                return verified ? (
+                    type === "wildcard" ? (
+                        <Badge variant="outlinePrimary">
+                            {t("manual", { fallback: "Manual" })}
+                        </Badge>
+                    ) : (
+                        <Badge variant="green">{t("verified")}</Badge>
+                    )
+                ) : (
+                    <Badge variant="yellow">
+                        {t("pending", { fallback: "Pending" })}
+                    </Badge>
+                );
+            }
+        }
+    ];
+
+    return (
+        <DNSRecordsDataTable
+            columns={columns}
+            data={records}
+            isRefreshing={isRefreshing}
+            type={type}
+        />
+    );
+}

src/components/DNSRecordsDataTable.tsx

@@ -0,0 +1,179 @@
+"use client";
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+    getSortedRowModel,
+    getFilteredRowModel
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from "@/components/ui/table";
+import { Button } from "@app/components/ui/button";
+import { useMemo, useState } from "react";
+import { ExternalLink, Plus, RefreshCw } from "lucide-react";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle
+} from "@app/components/ui/card";
+import { Tabs, TabsList, TabsTrigger } from "@app/components/ui/tabs";
+import { useTranslations } from "next-intl";
+import { Badge } from "./ui/badge";
+import Link from "next/link";
+import { build } from "@server/build";
+
+type TabFilter = {
+    id: string;
+    label: string;
+    filterFn: (row: any) => boolean;
+};
+
+type DNSRecordsDataTableProps<TData, TValue> = {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    title?: string;
+    addButtonText?: string;
+    onAdd?: () => void;
+    onRefresh?: () => void;
+    isRefreshing?: boolean;
+    searchPlaceholder?: string;
+    searchColumn?: string;
+    defaultSort?: {
+        id: string;
+        desc: boolean;
+    };
+    tabs?: TabFilter[];
+    defaultTab?: string;
+    persistPageSize?: boolean | string;
+    defaultPageSize?: number;
+    type?: string | null;
+};
+
+export function DNSRecordsDataTable<TData, TValue>({
+    columns,
+    data,
+    title,
+    addButtonText,
+    onAdd,
+    onRefresh,
+    isRefreshing,
+    defaultSort,
+    tabs,
+    defaultTab,
+    type
+}: DNSRecordsDataTableProps<TData, TValue>) {
+    const t = useTranslations();
+
+    const [activeTab, setActiveTab] = useState<string>(
+        defaultTab || tabs?.[0]?.id || ""
+    );
+
+    // Apply tab filter to data
+    const filteredData = useMemo(() => {
+        if (!tabs || activeTab === "") {
+            return data;
+        }
+
+        const activeTabFilter = tabs.find((tab) => tab.id === activeTab);
+        if (!activeTabFilter) {
+            return data;
+        }
+
+        return data.filter(activeTabFilter.filterFn);
+    }, [data, tabs, activeTab]);
+
+    const table = useReactTable({
+        data: filteredData,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel()
+    });
+
+    return (
+        <div className="container mx-auto max-w-12xl">
+            <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-4 items-center">
+                            <h1 className="font-bold">{t("dnsRecord")}</h1>
+                            <Badge variant="secondary">{t("required")}</Badge>
+                        </div>
+                        <Link href="https://docs.pangolin.net/manage/domains">
+                            <Button variant="outline">
+                                <ExternalLink className="h-4 w-4 mr-1" />
+                                {t("howToAddRecords")}
+                            </Button>
+                        </Link>
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <Table>
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow
+                                    key={headerGroup.id}
+                                    className="bg-secondary dark:bg-transparent"
+                                >
+                                    {headerGroup.headers.map((header) => (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext()
+                                                  )}
+                                        </TableHead>
+                                    ))}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row) => (
+                                    <TableRow
+                                        key={row.id}
+                                        data-state={
+                                            row.getIsSelected() && "selected"
+                                        }
+                                    >
+                                        {row.getVisibleCells().map((cell) => (
+                                            <TableCell key={cell.id}>
+                                                {flexRender(
+                                                    cell.column.columnDef.cell,
+                                                    cell.getContext()
+                                                )}
+                                            </TableCell>
+                                        ))}
+                                    </TableRow>
+                                ))
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={columns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        {t("noResults")}
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

src/components/DataTablePagination.tsx

@@ -19,11 +19,21 @@ import { useTranslations } from "next-intl";
 interface DataTablePaginationProps<TData> {
     table: Table<TData>;
     onPageSizeChange?: (pageSize: number) => void;
+    onPageChange?: (pageIndex: number) => void;
+    totalCount?: number;
+    isServerPagination?: boolean;
+    isLoading?: boolean;
+    disabled?: boolean;
 }
 
 export function DataTablePagination<TData>({
     table,
-    onPageSizeChange
+    onPageSizeChange,
+    onPageChange,
+    totalCount,
+    isServerPagination = false,
+    isLoading = false,
+    disabled = false
 }: DataTablePaginationProps<TData>) {
     const t = useTranslations();
 
@@ -37,14 +47,60 @@ export function DataTablePagination<TData>({
         }
     };
 
+    const handlePageNavigation = (action: 'first' | 'previous' | 'next' | 'last') => {
+        if (isServerPagination && onPageChange) {
+            const currentPage = table.getState().pagination.pageIndex;
+            const pageCount = table.getPageCount();
+            
+            let newPage: number;
+            switch (action) {
+                case 'first':
+                    newPage = 0;
+                    break;
+                case 'previous':
+                    newPage = Math.max(0, currentPage - 1);
+                    break;
+                case 'next':
+                    newPage = Math.min(pageCount - 1, currentPage + 1);
+                    break;
+                case 'last':
+                    newPage = pageCount - 1;
+                    break;
+                default:
+                    return;
+            }
+            
+            if (newPage !== currentPage) {
+                onPageChange(newPage);
+            }
+        } else {
+            // Use table's built-in navigation for client-side pagination
+            switch (action) {
+                case 'first':
+                    table.setPageIndex(0);
+                    break;
+                case 'previous':
+                    table.previousPage();
+                    break;
+                case 'next':
+                    table.nextPage();
+                    break;
+                case 'last':
+                    table.setPageIndex(table.getPageCount() - 1);
+                    break;
+            }
+        }
+    };
+
     return (
         <div className="flex items-center justify-between text-muted-foreground">
             <div className="flex items-center space-x-2">
                 <Select
                     value={`${table.getState().pagination.pageSize}`}
                     onValueChange={handlePageSizeChange}
+                    disabled={disabled}
                 >
-                    <SelectTrigger className="h-8 w-[70px]">
+                    <SelectTrigger className="h-8 w-[73px]" disabled={disabled}>
                         <SelectValue
                             placeholder={table.getState().pagination.pageSize}
                         />
@@ -61,14 +117,21 @@ export function DataTablePagination<TData>({
 
             <div className="flex items-center space-x-3 lg:space-x-8">
                 <div className="flex items-center justify-center text-sm font-medium">
-                    {t('paginator', {current: table.getState().pagination.pageIndex + 1, last: table.getPageCount()})}
+                    {isServerPagination && totalCount !== undefined ? (
+                        t('paginator', {
+                            current: table.getState().pagination.pageIndex + 1, 
+                            last: Math.ceil(totalCount / table.getState().pagination.pageSize)
+                        })
+                    ) : (
+                        t('paginator', {current: table.getState().pagination.pageIndex + 1, last: table.getPageCount()})
+                    )}
                 </div>
                 <div className="flex items-center space-x-2">
                     <Button
                         variant="outline"
                         className="hidden h-8 w-8 p-0 lg:flex"
-                        onClick={() => table.setPageIndex(0)}
-                        disabled={!table.getCanPreviousPage()}
+                        onClick={() => handlePageNavigation('first')}
+                        disabled={!table.getCanPreviousPage() || isLoading || disabled}
                     >
                         <span className="sr-only">{t('paginatorToFirst')}</span>
                         <DoubleArrowLeftIcon className="h-4 w-4" />
@@ -76,8 +139,8 @@ export function DataTablePagination<TData>({
                     <Button
                         variant="outline"
                         className="h-8 w-8 p-0"
-                        onClick={() => table.previousPage()}
-                        disabled={!table.getCanPreviousPage()}
+                        onClick={() => handlePageNavigation('previous')}
+                        disabled={!table.getCanPreviousPage() || isLoading || disabled}
                     >
                         <span className="sr-only">{t('paginatorToPrevious')}</span>
                         <ChevronLeftIcon className="h-4 w-4" />
@@ -85,8 +148,8 @@ export function DataTablePagination<TData>({
                     <Button
                         variant="outline"
                         className="h-8 w-8 p-0"
-                        onClick={() => table.nextPage()}
-                        disabled={!table.getCanNextPage()}
+                        onClick={() => handlePageNavigation('next')}
+                        disabled={!table.getCanNextPage() || isLoading || disabled}
                     >
                         <span className="sr-only">{t('paginatorToNext')}</span>
                         <ChevronRightIcon className="h-4 w-4" />
@@ -94,10 +157,8 @@ export function DataTablePagination<TData>({
                     <Button
                         variant="outline"
                         className="hidden h-8 w-8 p-0 lg:flex"
-                        onClick={() =>
-                            table.setPageIndex(table.getPageCount() - 1)
-                        }
-                        disabled={!table.getCanNextPage()}
+                        onClick={() => handlePageNavigation('last')}
+                        disabled={!table.getCanNextPage() || isLoading || disabled}
                     >
                         <span className="sr-only">{t('paginatorToLast')}</span>
                         <DoubleArrowRightIcon className="h-4 w-4" />

src/components/DateTimePicker.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { ChevronDownIcon, CalendarIcon } from "lucide-react";
+
+import { Button } from "@app/components/ui/button";
+import { Calendar } from "@app/components/ui/calendar";
+import { Input } from "@app/components/ui/input";
+import { Label } from "@app/components/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@app/components/ui/popover";
+import { cn } from "@app/lib/cn";
+import { ChangeEvent, useEffect, useState } from "react";
+
+export interface DateTimeValue {
+  date?: Date;
+  time?: string;
+}
+
+export interface DateTimePickerProps {
+  label?: string;
+  value?: DateTimeValue;
+  onChange?: (value: DateTimeValue) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+  showTime?: boolean;
+}
+
+export function DateTimePicker({
+  label,
+  value,
+  onChange,
+  placeholder = "Select date & time",
+  className,
+  disabled = false,
+  showTime = true,
+}: DateTimePickerProps) {
+  const [open, setOpen] = useState(false);
+  const [internalDate, setInternalDate] = useState<Date | undefined>(value?.date);
+  const [internalTime, setInternalTime] = useState<string>(value?.time || "");
+
+  // Sync internal state with external value prop
+  useEffect(() => {
+    setInternalDate(value?.date);
+    setInternalTime(value?.time || "");
+  }, [value?.date, value?.time]);
+
+  const handleDateChange = (date: Date | undefined) => {
+    setInternalDate(date);
+    const newValue = { date, time: internalTime };
+    onChange?.(newValue);
+  };
+
+  const handleTimeChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const time = event.target.value;
+    setInternalTime(time);
+    const newValue = { date: internalDate, time };
+    onChange?.(newValue);
+  };
+
+const getDisplayText = () => {
+    if (!internalDate) return placeholder;
+    
+    const dateStr = internalDate.toLocaleDateString();
+    if (!showTime || !internalTime) return dateStr;
+    
+    // Parse time and format in local timezone
+    const [hours, minutes, seconds] = internalTime.split(':');
+    const timeDate = new Date();
+    timeDate.setHours(parseInt(hours, 10), parseInt(minutes, 10), parseInt(seconds || '0', 10));
+    const timeStr = timeDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    
+    return `${dateStr} ${timeStr}`;
+};
+
+  const hasValue = internalDate || (showTime && internalTime);
+
+  return (
+    <div className={cn("flex gap-4", className)}>
+      <div className="flex flex-col gap-2">
+        {label && (
+          <Label htmlFor="date-picker">
+            {label}
+          </Label>
+        )}
+        <div className="flex gap-2">
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                variant="outline"
+                id="date-picker"
+                disabled={disabled}
+                className={cn(
+                  "justify-between font-normal",
+                  showTime ? "w-48" : "w-32",
+                  !hasValue && "text-muted-foreground"
+                )}
+              >
+                {getDisplayText()}
+                <ChevronDownIcon className="h-4 w-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent className="w-auto overflow-hidden p-0" align="start">
+              {showTime ? (
+                <div className="flex">
+                  <Calendar
+                    mode="single"
+                    selected={internalDate}
+                    captionLayout="dropdown"
+                    onSelect={(date) => {
+                      handleDateChange(date);
+                      if (!showTime) {
+                        setOpen(false);
+                      }
+                    }}
+                    className="flex-grow w-[250px]"
+                  />
+                  <div className="p-3 border-l">
+                    <div className="flex flex-col gap-3">
+                      <Label htmlFor="time-input" className="text-sm font-medium">
+                        Time
+                      </Label>
+                      <Input
+                        id="time-input"
+                        type="time"
+                        step="1"
+                        value={internalTime}
+                        onChange={handleTimeChange}
+                        className="bg-background appearance-none [&::-webkit-calendar-picker-indicator]:hidden [&::-webkit-calendar-picker-indicator]:appearance-none"
+                      />
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <Calendar
+                  mode="single"
+                  selected={internalDate}
+                  captionLayout="dropdown"
+                  onSelect={(date) => {
+                    handleDateChange(date);
+                    setOpen(false);
+                  }}
+                />
+              )}
+            </PopoverContent>
+          </Popover>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export interface DateRangePickerProps {
+  startLabel?: string;
+  endLabel?: string;
+  startValue?: DateTimeValue;
+  endValue?: DateTimeValue;
+  onStartChange?: (value: DateTimeValue) => void;
+  onEndChange?: (value: DateTimeValue) => void;
+  onRangeChange?: (start: DateTimeValue, end: DateTimeValue) => void;
+  className?: string;
+  disabled?: boolean;
+  showTime?: boolean;
+}
+
+export function DateRangePicker({
+//   startLabel = "From",
+//   endLabel = "To", 
+  startValue,
+  endValue,
+  onStartChange,
+  onEndChange,
+  onRangeChange,
+  className,
+  disabled = false,
+  showTime = true,
+}: DateRangePickerProps) {
+  const handleStartChange = (value: DateTimeValue) => {
+    onStartChange?.(value);
+    if (onRangeChange && endValue) {
+      onRangeChange(value, endValue);
+    }
+  };
+
+  const handleEndChange = (value: DateTimeValue) => {
+    onEndChange?.(value);
+    if (onRangeChange && startValue) {
+      onRangeChange(startValue, value);
+    }
+  };
+
+  return (
+    <div className={cn("flex gap-4 items-center", className)}>
+      <DateTimePicker
+        label="Start"
+        value={startValue}
+        onChange={handleStartChange}
+        placeholder="Start date & time"
+        disabled={disabled}
+        showTime={showTime}
+      />
+      <DateTimePicker
+        label="End"
+        value={endValue}
+        onChange={handleEndChange}
+        placeholder="End date & time"
+        disabled={disabled}
+        showTime={showTime}
+      />
+    </div>
+  );
+}

src/components/DomainInfoCard.tsx

@@ -0,0 +1,492 @@
+"use client";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+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";
+import {
+    SettingsContainer,
+    SettingsSection,
+    SettingsSectionBody,
+    SettingsSectionDescription,
+    SettingsSectionFooter,
+    SettingsSectionForm,
+    SettingsSectionHeader,
+    SettingsSectionTitle
+} from "./Settings";
+import { Button } from "./ui/button";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage,
+    FormDescription
+} from "@app/components/ui/form";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue
+} from "./ui/select";
+import { Input } from "./ui/input";
+import { useForm } from "react-hook-form";
+import z from "zod";
+import { toASCII } from "punycode";
+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 { createApiClient } from "@app/lib/api";
+import { useToast } from "@app/hooks/useToast";
+import { formatAxiosError } from "@app/lib/api";
+import { Badge } from "./ui/badge";
+
+type DomainInfoCardProps = {
+    orgId?: string;
+    domainId?: string;
+};
+
+// Helper functions for Unicode domain handling
+function toPunycode(domain: string): string {
+    try {
+        const parts = toASCII(domain);
+        return parts;
+    } catch (error) {
+        return domain.toLowerCase();
+    }
+}
+
+function isValidDomainFormat(domain: string): boolean {
+    const unicodeRegex = /^(?!:\/\/)([^\s.]+\.)*[^\s.]+$/;
+
+    if (!unicodeRegex.test(domain)) {
+        return false;
+    }
+
+    const parts = domain.split(".");
+    for (const part of parts) {
+        if (part.length === 0 || part.startsWith("-") || part.endsWith("-")) {
+            return false;
+        }
+        if (part.length > 63) {
+            return false;
+        }
+    }
+
+    if (domain.length > 253) {
+        return false;
+    }
+
+    return true;
+}
+
+const formSchema = z.object({
+    baseDomain: z
+        .string()
+        .min(1, "Domain is required")
+        .refine((val) => isValidDomainFormat(val), "Invalid domain format")
+        .transform((val) => toPunycode(val)),
+    type: z.enum(["ns", "cname", "wildcard"]),
+    certResolver: z.string().nullable().optional(),
+    preferWildcardCert: z.boolean().optional()
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+const certResolverOptions = [
+    { id: "default", title: "Default" },
+    { id: "custom", title: "Custom Resolver" }
+];
+
+export default function DomainInfoCard({
+    orgId,
+    domainId
+}: DomainInfoCardProps) {
+    const { domain, updateDomain } = useDomainContext();
+    const t = useTranslations();
+    const { env } = useEnvContext();
+    const api = createApiClient(useEnvContext());
+    const { toast } = useToast();
+
+    const [dnsRecords, setDnsRecords] = useState<DNSRecordRow[]>([]);
+    const [loadingRecords, setLoadingRecords] = useState(true);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [saveLoading, setSaveLoading] = useState(false);
+
+    const form = useForm<FormValues>({
+        resolver: zodResolver(formSchema),
+        defaultValues: {
+            baseDomain: "",
+            type:
+                build == "oss" || !env.flags.usePangolinDns ? "wildcard" : "ns",
+            certResolver: domain.certResolver,
+            preferWildcardCert: false
+        }
+    });
+
+    useEffect(() => {
+        if (domain.domainId) {
+            const certResolverValue =
+                domain.certResolver && domain.certResolver.trim() !== ""
+                    ? domain.certResolver
+                    : null;
+
+            form.reset({
+                baseDomain: domain.baseDomain || "",
+                type:
+                    (domain.type as "ns" | "cname" | "wildcard") || "wildcard",
+                certResolver: certResolverValue,
+                preferWildcardCert: domain.preferWildcardCert || false
+            });
+        }
+    }, [domain]);
+
+    const fetchDNSRecords = async (showRefreshing = false) => {
+        if (showRefreshing) {
+            setIsRefreshing(true);
+        } else {
+            setLoadingRecords(true);
+        }
+
+        try {
+            const response = await api.get<{ data: DNSRecordRow[] }>(
+                `/org/${orgId}/domain/${domainId}/dns-records`
+            );
+            setDnsRecords(response.data.data);
+        } catch (error) {
+            // Only show error if records exist (not a 404)
+            const err = error as any;
+            if (err?.response?.status !== 404) {
+                toast({
+                    title: t("error"),
+                    description: formatAxiosError(error),
+                    variant: "destructive"
+                });
+            }
+        } finally {
+            setLoadingRecords(false);
+            setIsRefreshing(false);
+        }
+    };
+
+    useEffect(() => {
+        if (domain.domainId) {
+            fetchDNSRecords();
+        }
+    }, [domain.domainId]);
+
+    const onSubmit = async (values: FormValues) => {
+        if (!orgId || !domainId) {
+            toast({
+                title: t("error"),
+                description: t("orgOrDomainIdMissing", {
+                    fallback: "Organization or Domain ID is missing"
+                }),
+                variant: "destructive"
+            });
+            return;
+        }
+
+        setSaveLoading(true);
+
+        try {
+            if (!values.certResolver) {
+                values.certResolver = null;
+            }
+
+            await api.patch(
+                `/org/${orgId}/domain/${domainId}`,
+                {
+                    certResolver: values.certResolver,
+                    preferWildcardCert: values.preferWildcardCert
+                }
+            );
+
+            updateDomain({
+                ...domain,
+                certResolver: values.certResolver || null,
+                preferWildcardCert: values.preferWildcardCert || false
+            });
+
+            toast({
+                title: t("success"),
+                description: t("domainSettingsUpdated", {
+                    fallback: "Domain settings updated successfully"
+                }),
+                variant: "default"
+            });
+        } catch (error) {
+            toast({
+                title: t("error"),
+                description: formatAxiosError(error),
+                variant: "destructive"
+            });
+        } finally {
+            setSaveLoading(false);
+        }
+    };
+
+    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={3}>
+                        <InfoSection>
+                            <InfoSectionTitle>{t("type")}</InfoSectionTitle>
+                            <InfoSectionContent>
+                                <span>
+                                    {getTypeDisplay(
+                                        domain.type ? domain.type : ""
+                                    )}
+                                </span>
+                            </InfoSectionContent>
+                        </InfoSection>
+                        <InfoSection>
+                            <InfoSectionTitle>{t("status")}</InfoSectionTitle>
+                            <InfoSectionContent>
+                                {domain.verified ? (
+                                    domain.type === "wildcard" ? (
+                                        <Badge variant="outlinePrimary">
+                                            {t("manual", {
+                                                fallback: "Manual"
+                                            })}
+                                        </Badge>
+                                    ) : (
+                                        <Badge variant="green">
+                                            {t("verified")}
+                                        </Badge>
+                                    )
+                                ) : (
+                                    <Badge variant="yellow">
+                                        {t("pending", { fallback: "Pending" })}
+                                    </Badge>
+                                )}
+                            </InfoSectionContent>
+                        </InfoSection>
+                    </InfoSections>
+                </AlertDescription>
+            </Alert>
+
+            <DNSRecordsTable
+                domainId={domain.domainId}
+                records={dnsRecords}
+                isRefreshing={isRefreshing}
+                type={domain.type}
+            />
+
+            {domain.type === "wildcard" && (
+                <SettingsContainer>
+                    <SettingsSection>
+                        <SettingsSectionHeader>
+                            <SettingsSectionTitle>
+                                {t("domainSetting")}
+                            </SettingsSectionTitle>
+                        </SettingsSectionHeader>
+
+                        <SettingsSectionBody>
+                            <SettingsSectionForm>
+                                <Form {...form}>
+                                    <form
+                                        onSubmit={form.handleSubmit(onSubmit)}
+                                        className="space-y-4"
+                                        id="domain-settings-form"
+                                    >
+                                        <>
+                                            <FormField
+                                                control={form.control}
+                                                name="certResolver"
+                                                render={({ field }) => (
+                                                    <FormItem>
+                                                        <FormLabel>
+                                                            {t("certResolver")}
+                                                        </FormLabel>
+                                                        <FormControl>
+                                                            <Select
+                                                                value={
+                                                                    field.value ===
+                                                                    null
+                                                                        ? "default"
+                                                                        : field.value ===
+                                                                                "" ||
+                                                                            (field.value &&
+                                                                                field.value !==
+                                                                                    "default")
+                                                                          ? "custom"
+                                                                          : "default"
+                                                                }
+                                                                onValueChange={(
+                                                                    val
+                                                                ) => {
+                                                                    if (
+                                                                        val ===
+                                                                        "default"
+                                                                    ) {
+                                                                        field.onChange(
+                                                                            null
+                                                                        );
+                                                                    } else if (
+                                                                        val ===
+                                                                        "custom"
+                                                                    ) {
+                                                                        field.onChange(
+                                                                            ""
+                                                                        );
+                                                                    } else {
+                                                                        field.onChange(
+                                                                            val
+                                                                        );
+                                                                    }
+                                                                }}
+                                                            >
+                                                                <SelectTrigger>
+                                                                    <SelectValue
+                                                                        placeholder={t(
+                                                                            "selectCertResolver"
+                                                                        )}
+                                                                    />
+                                                                </SelectTrigger>
+                                                                <SelectContent>
+                                                                    {certResolverOptions.map(
+                                                                        (
+                                                                            opt
+                                                                        ) => (
+                                                                            <SelectItem
+                                                                                key={
+                                                                                    opt.id
+                                                                                }
+                                                                                value={
+                                                                                    opt.id
+                                                                                }
+                                                                            >
+                                                                                {
+                                                                                    opt.title
+                                                                                }
+                                                                            </SelectItem>
+                                                                        )
+                                                                    )}
+                                                                </SelectContent>
+                                                            </Select>
+                                                        </FormControl>
+                                                        <FormMessage />
+                                                    </FormItem>
+                                                )}
+                                            />
+                                            {form.watch("certResolver") !==
+                                                null &&
+                                                form.watch("certResolver") !==
+                                                    "default" && (
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="certResolver"
+                                                        render={({ field }) => (
+                                                            <FormItem>
+                                                                <FormControl>
+                                                                    <Input
+                                                                        placeholder={t(
+                                                                            "enterCustomResolver"
+                                                                        )}
+                                                                        value={
+                                                                            field.value ||
+                                                                            ""
+                                                                        }
+                                                                        onChange={(
+                                                                            e
+                                                                        ) =>
+                                                                            field.onChange(
+                                                                                e
+                                                                                    .target
+                                                                                    .value
+                                                                            )
+                                                                        }
+                                                                    />
+                                                                </FormControl>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                )}
+
+                                            {form.watch("certResolver") !==
+                                                null &&
+                                                form.watch("certResolver") !==
+                                                    "default" && (
+                                                    <FormField
+                                                        control={form.control}
+                                                        name="preferWildcardCert"
+                                                        render={({
+                                                            field: switchField
+                                                        }) => (
+                                                            <FormItem className="items-center space-y-2 mt-4">
+                                                                <FormControl>
+                                                                    <div className="flex items-center space-x-2">
+                                                                        <Switch
+                                                                            checked={
+                                                                                switchField.value
+                                                                            }
+                                                                            onCheckedChange={
+                                                                                switchField.onChange
+                                                                            }
+                                                                        />
+                                                                        <FormLabel>
+                                                                            {t(
+                                                                                "preferWildcardCert"
+                                                                            )}
+                                                                        </FormLabel>
+                                                                    </div>
+                                                                </FormControl>
+
+                                                                <FormDescription>
+                                                                    {t(
+                                                                        "preferWildcardCertDescription"
+                                                                    )}
+                                                                </FormDescription>
+                                                                <FormMessage />
+                                                            </FormItem>
+                                                        )}
+                                                    />
+                                                )}
+                                        </>
+                                    </form>
+                                </Form>
+                            </SettingsSectionForm>
+                        </SettingsSectionBody>
+
+                        <SettingsSectionFooter>
+                            <Button
+                                type="submit"
+                                loading={saveLoading}
+                                disabled={saveLoading}
+                                form="domain-settings-form"
+                            >
+                                {t("saveSettings")}
+                            </Button>
+                        </SettingsSectionFooter>
+                    </SettingsSection>
+                </SettingsContainer>
+            )}
+        </>
+    );
+}

src/components/DomainsTable.tsx

@@ -3,7 +3,7 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { DomainsDataTable } from "@app/components/DomainsDataTable";
 import { Button } from "@app/components/ui/button";
-import { ArrowUpDown } from "lucide-react";
+import { ArrowRight, ArrowUpDown, MoreHorizontal } from "lucide-react";
 import { useState } from "react";
 import ConfirmDeleteDialog from "@app/components/ConfirmDeleteDialog";
 import { formatAxiosError } from "@app/lib/api";
@@ -15,6 +15,13 @@ import { useTranslations } from "next-intl";
 import CreateDomainForm from "@app/components/CreateDomainForm";
 import { useToast } from "@app/hooks/useToast";
 import { useOrgContext } from "@app/hooks/useOrgContext";
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger
+} from "./ui/dropdown-menu";
+import Link from "next/link";
 
 export type DomainRow = {
     domainId: string;
@@ -24,13 +31,16 @@ export type DomainRow = {
     failed: boolean;
     tries: number;
     configManaged: boolean;
+    certResolver: string;
+    preferWildcardCert: boolean;
 };
 
 type Props = {
     domains: DomainRow[];
+    orgId: string;
 };
 
-export default function DomainsTable({ domains }: Props) {
+export default function DomainsTable({ domains, orgId }: Props) {
     const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
     const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
     const [selectedDomain, setSelectedDomain] = useState<DomainRow | null>(
@@ -174,9 +184,15 @@ export default function DomainsTable({ domains }: Props) {
                 );
             },
             cell: ({ row }) => {
-                const { verified, failed } = row.original;
+                const { verified, failed, type } = row.original;
                 if (verified) {
-                    return <Badge variant="green">{t("verified")}</Badge>;
+                    type === "wildcard" ? (
+                        <Badge variant="outlinePrimary">
+                            {t("manual", { fallback: "Manual" })}
+                        </Badge>
+                    ) : (
+                        <Badge variant="green">{t("verified")}</Badge>
+                    );
                 } else if (failed) {
                     return (
                         <Badge variant="destructive">
@@ -210,7 +226,51 @@ export default function DomainsTable({ domains }: Props) {
                                     : t("restart", { fallback: "Restart" })}
                             </Button>
                         )}
-                        <Button
+                        <div className="flex items-center justify-end gap-2">
+                            <DropdownMenu>
+                                <DropdownMenuTrigger asChild>
+                                    <Button
+                                        variant="ghost"
+                                        className="h-8 w-8 p-0"
+                                    >
+                                        <span className="sr-only">
+                                            Open menu
+                                        </span>
+                                        <MoreHorizontal className="h-4 w-4" />
+                                    </Button>
+                                </DropdownMenuTrigger>
+                                <DropdownMenuContent align="end">
+                                    <Link
+                                        className="block w-full"
+                                        href={`/${orgId}/settings/domains/${domain.domainId}`}
+                                    >
+                                        <DropdownMenuItem>
+                                            {t("viewSettings")}
+                                        </DropdownMenuItem>
+                                    </Link>
+                                    <DropdownMenuItem
+                                        onClick={() => {
+                                            setSelectedDomain(domain);
+                                            setIsDeleteModalOpen(true);
+                                        }}
+                                    >
+                                        <span className="text-red-500">
+                                            {t("delete")}
+                                        </span>
+                                    </DropdownMenuItem>
+                                </DropdownMenuContent>
+                            </DropdownMenu>
+
+                            <Link
+                                href={`/${orgId}/settings/domains/${domain.domainId}`}
+                            >
+                                <Button variant={"secondary"} size="sm">
+                                    {t("edit")}
+                                    <ArrowRight className="ml-2 w-4 h-4" />
+                                </Button>
+                            </Link>
+                        </div>
+                        {/* <Button
                             variant="secondary"
                             size="sm"
                             disabled={domain.configManaged}
@@ -220,7 +280,7 @@ export default function DomainsTable({ domains }: Props) {
                             }}
                         >
                             {t("delete")}
-                        </Button>
+                        </Button> */}
                     </div>
                 );
             }
@@ -238,12 +298,8 @@ export default function DomainsTable({ domains }: Props) {
                     }}
                     dialog={
                         <div>
-                            <p>
-                                {t("domainQuestionRemove")}
-                            </p>
-                            <p>
-                                {t("domainMessageRemove")}
-                            </p>
+                            <p>{t("domainQuestionRemove")}</p>
+                            <p>{t("domainMessageRemove")}</p>
                         </div>
                     }
                     buttonText={t("domainConfirmDelete")}

src/components/HorizontalTabs.tsx

@@ -4,10 +4,10 @@ import React from "react";
 import Link from "next/link";
 import { useParams, usePathname } from "next/navigation";
 import { cn } from "@app/lib/cn";
-import { buttonVariants } from "@/components/ui/button";
 import { Badge } from "@app/components/ui/badge";
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 import { useTranslations } from "next-intl";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
 
 export type HorizontalTabs = Array<{
     title: string;
@@ -30,6 +30,7 @@ export function HorizontalTabs({
     const pathname = usePathname();
     const params = useParams();
     const { licenseStatus, isUnlocked } = useLicenseStatusContext();
+    const subscription = useSubscriptionStatusContext();
     const t = useTranslations();
 
     function hydrateHref(href: string) {

src/components/LayoutSidebar.tsx

@@ -31,6 +31,7 @@ import {
 } from "@app/components/ui/tooltip";
 import { build } from "@server/build";
 import SidebarLicenseButton from "./SidebarLicenseButton";
+import { SidebarSupportButton } from "./SidebarSupportButton";
 
 interface LayoutSidebarProps {
     orgId?: string;
@@ -145,6 +146,11 @@ export function LayoutSidebar({
                         <SupporterStatus isCollapsed={isSidebarCollapsed} />
                     </div>
                 )}
+                {build === "saas" && (
+                    <div className="mb-3">
+                        <SidebarSupportButton isCollapsed={isSidebarCollapsed} />
+                    </div>
+                )}
                 {!isSidebarCollapsed && (
                     <div className="space-y-2">
                         {loadFooterLinks() ? (

src/components/LogDataTable.tsx

@@ -0,0 +1,529 @@
+"use client";
+
+import {
+    ColumnDef,
+    flexRender,
+    getCoreRowModel,
+    useReactTable,
+    getPaginationRowModel,
+    SortingState,
+    getSortedRowModel,
+    ColumnFiltersState,
+    getFilteredRowModel
+} from "@tanstack/react-table";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableHead,
+    TableHeader,
+    TableRow
+} from "@/components/ui/table";
+import { Button } from "@app/components/ui/button";
+import { useEffect, useMemo, useState } from "react";
+import { Input } from "@app/components/ui/input";
+import { DataTablePagination } from "@app/components/DataTablePagination";
+import {
+    Plus,
+    Search,
+    RefreshCw,
+    Filter,
+    X,
+    Download,
+    ChevronRight,
+    ChevronDown
+} from "lucide-react";
+import {
+    Card,
+    CardContent,
+    CardHeader,
+    CardTitle
+} from "@app/components/ui/card";
+import { Tabs, TabsList, TabsTrigger } from "@app/components/ui/tabs";
+import { useTranslations } from "next-intl";
+import { DateRangePicker, DateTimeValue } from "@app/components/DateTimePicker";
+
+const STORAGE_KEYS = {
+    PAGE_SIZE: "datatable-page-size",
+    getTablePageSize: (tableId?: string) =>
+        tableId ? `${tableId}-size` : STORAGE_KEYS.PAGE_SIZE
+};
+
+export const getStoredPageSize = (tableId?: string, defaultSize = 20): number => {
+    if (typeof window === "undefined") return defaultSize;
+
+    try {
+        const key = STORAGE_KEYS.getTablePageSize(tableId);
+        const stored = localStorage.getItem(key);
+        if (stored) {
+            const parsed = parseInt(stored, 10);
+            // Validate that it's a reasonable page size
+            if (parsed > 0 && parsed <= 1000) {
+                return parsed;
+            }
+        }
+    } catch (error) {
+        console.warn("Failed to read page size from localStorage:", error);
+    }
+    return defaultSize;
+};
+
+export const setStoredPageSize = (pageSize: number, tableId?: string): void => {
+    if (typeof window === "undefined") return;
+
+    try {
+        const key = STORAGE_KEYS.getTablePageSize(tableId);
+        localStorage.setItem(key, pageSize.toString());
+    } catch (error) {
+        console.warn("Failed to save page size to localStorage:", error);
+    }
+};
+
+type TabFilter = {
+    id: string;
+    label: string;
+    filterFn: (row: any) => boolean;
+};
+
+type DataTableProps<TData, TValue> = {
+    columns: ColumnDef<TData, TValue>[];
+    data: TData[];
+    title?: string;
+    addButtonText?: string;
+    onRefresh?: () => void;
+    onExport?: () => void;
+    isExporting?: boolean;
+    isRefreshing?: boolean;
+    searchPlaceholder?: string;
+    searchColumn?: string;
+    defaultSort?: {
+        id: string;
+        desc: boolean;
+    };
+    tabs?: TabFilter[];
+    defaultTab?: string;
+    disabled?: boolean;
+    onDateRangeChange?: (
+        startDate: DateTimeValue,
+        endDate: DateTimeValue
+    ) => void;
+    dateRange?: {
+        start: DateTimeValue;
+        end: DateTimeValue;
+    };
+    // Server-side pagination props
+    totalCount?: number;
+    pageSize: number;
+    currentPage?: number;
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+    isLoading?: boolean;
+    // Row expansion props
+    expandable?: boolean;
+    renderExpandedRow?: (row: TData) => React.ReactNode;
+};
+
+export function LogDataTable<TData, TValue>({
+    columns,
+    data,
+    title,
+    onRefresh,
+    isRefreshing,
+    onExport,
+    isExporting,
+    // searchPlaceholder = "Search...",
+    // searchColumn = "name",
+    defaultSort,
+    tabs,
+    defaultTab,
+    onDateRangeChange,
+    pageSize,
+    dateRange,
+    totalCount,
+    currentPage = 0,
+    onPageChange,
+    onPageSizeChange: onPageSizeChangeProp,
+    isLoading = false,
+    expandable = false,
+    disabled=false,
+    renderExpandedRow
+}: DataTableProps<TData, TValue>) {
+    const t = useTranslations();
+
+    const [sorting, setSorting] = useState<SortingState>(
+        defaultSort ? [defaultSort] : []
+    );
+    const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+    const [globalFilter, setGlobalFilter] = useState<any>([]);
+    const [activeTab, setActiveTab] = useState<string>(
+        defaultTab || tabs?.[0]?.id || ""
+    );
+
+    const [startDate, setStartDate] = useState<DateTimeValue>(
+        dateRange?.start || {}
+    );
+    const [endDate, setEndDate] = useState<DateTimeValue>(dateRange?.end || {});
+    const [expandedRows, setExpandedRows] = useState<Set<string>>(new Set());
+
+    // Sync internal date state with external dateRange prop
+    useEffect(() => {
+        if (dateRange?.start) {
+            setStartDate(dateRange.start);
+        }
+        if (dateRange?.end) {
+            setEndDate(dateRange.end);
+        }
+    }, [dateRange?.start, dateRange?.end]);
+
+    // Apply tab filter to data
+    const filteredData = useMemo(() => {
+        // If disabled, return empty array to prevent data loading
+        if (disabled) {
+            return [];
+        }
+
+        if (!tabs || activeTab === "") {
+            return data;
+        }
+
+        const activeTabFilter = tabs.find((tab) => tab.id === activeTab);
+        if (!activeTabFilter) {
+            return data;
+        }
+
+        return data.filter(activeTabFilter.filterFn);
+    }, [data, tabs, activeTab, disabled]);
+
+    // Toggle row expansion
+    const toggleRowExpansion = (rowId: string) => {
+        setExpandedRows((prev) => {
+            const newSet = new Set(prev);
+            if (newSet.has(rowId)) {
+                newSet.delete(rowId);
+            } else {
+                newSet.add(rowId);
+            }
+            return newSet;
+        });
+    };
+
+    // Determine if using server-side pagination
+    const isServerPagination = totalCount !== undefined;
+
+    // Create columns with expansion column if expandable
+    const enhancedColumns = useMemo(() => {
+        if (!expandable) {
+            return columns;
+        }
+
+        const expansionColumn: ColumnDef<TData, TValue> = {
+            id: "expand",
+            header: () => null,
+            cell: ({ row }) => {
+                const isExpanded = expandedRows.has(row.id);
+                return (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-6 w-6 p-0"
+                        disabled={disabled}
+                        onClick={(e) => {
+                            if (!disabled) {
+                                toggleRowExpansion(row.id);
+                                e.stopPropagation();
+                            }
+                        }}
+                    >
+                        {isExpanded ? (
+                            <ChevronDown className="h-4 w-4" />
+                        ) : (
+                            <ChevronRight className="h-4 w-4" />
+                        )}
+                    </Button>
+                );
+            },
+            size: 40
+        };
+
+        return [expansionColumn, ...columns];
+    }, [columns, expandable, expandedRows, toggleRowExpansion, disabled]);
+
+    const table = useReactTable({
+        data: filteredData,
+        columns: enhancedColumns,
+        getCoreRowModel: getCoreRowModel(),
+        // Only use client-side pagination if totalCount is not provided
+        ...(isServerPagination
+            ? {}
+            : { getPaginationRowModel: getPaginationRowModel() }),
+        onSortingChange: setSorting,
+        getSortedRowModel: getSortedRowModel(),
+        onColumnFiltersChange: setColumnFilters,
+        getFilteredRowModel: getFilteredRowModel(),
+        onGlobalFilterChange: setGlobalFilter,
+        // Configure pagination state
+        ...(isServerPagination
+            ? {
+                  manualPagination: true,
+                  pageCount: totalCount ? Math.ceil(totalCount / pageSize) : 0
+              }
+            : {}),
+        initialState: {
+            pagination: {
+                pageSize: pageSize,
+                pageIndex: currentPage
+            }
+        },
+        state: {
+            sorting,
+            columnFilters,
+            globalFilter,
+            pagination: {
+                pageSize: pageSize,
+                pageIndex: currentPage
+            }
+        }
+    });
+
+    // useEffect(() => {
+    //     const currentPageSize = table.getState().pagination.pageSize;
+    //     if (currentPageSize !== pageSize) {
+    //         table.setPageSize(pageSize);
+
+    //         // Persist to localStorage if enabled
+    //         if (persistPageSize) {
+    //             setStoredPageSize(pageSize, tableId);
+    //         }
+    //     }
+    // }, [pageSize, table, persistPageSize, tableId]);
+
+    // Update table page index when currentPage prop changes (server pagination)
+    useEffect(() => {
+        if (isServerPagination) {
+            const currentPageIndex = table.getState().pagination.pageIndex;
+            if (currentPageIndex !== currentPage) {
+                table.setPageIndex(currentPage);
+            }
+        }
+    }, [currentPage, table, isServerPagination]);
+
+    const handleTabChange = (value: string) => {
+        if (disabled) return;
+        
+        setActiveTab(value);
+        // Reset to first page when changing tabs
+        table.setPageIndex(0);
+    };
+
+    // Enhanced pagination component that updates our local state
+    const handlePageSizeChange = (newPageSize: number) => {
+        if (disabled) return;
+        
+        // setPageSize(newPageSize);
+        table.setPageSize(newPageSize);
+
+        // Persist immediately when changed
+        // if (persistPageSize) {
+        //     setStoredPageSize(newPageSize, tableId);
+        // }
+
+        // For server pagination, notify parent component
+        if (isServerPagination && onPageSizeChangeProp) {
+            onPageSizeChangeProp(newPageSize);
+        }
+    };
+
+    // Handle page changes for server pagination
+    const handlePageChange = (newPageIndex: number) => {
+        if (disabled) return;
+        
+        if (isServerPagination && onPageChange) {
+            onPageChange(newPageIndex);
+        }
+    };
+
+    const handleDateRangeChange = (
+        start: DateTimeValue,
+        end: DateTimeValue
+    ) => {
+        if (disabled) return;
+        
+        setStartDate(start);
+        setEndDate(end);
+        onDateRangeChange?.(start, end);
+    };
+
+    return (
+        <div className="container mx-auto max-w-12xl">
+            <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 items-start w-full sm:mr-2 gap-2">
+                        {/* <div className="relative w-full sm:max-w-sm">
+                            <Input
+                                placeholder={searchPlaceholder}
+                                value={globalFilter ?? ""}
+                                onChange={(e) =>
+                                    table.setGlobalFilter(
+                                        String(e.target.value)
+                                    )
+                                }
+                                className="w-full pl-8 m-0"
+                            />
+                            <Search className="h-4 w-4 absolute left-2 top-1/2 transform -translate-y-1/2 text-muted-foreground" />
+                        </div> */}
+                        <DateRangePicker
+                            startValue={startDate}
+                            endValue={endDate}
+                            onRangeChange={handleDateRangeChange}
+                            className="flex-wrap gap-2"
+                            disabled={disabled}
+                        />
+                    </div>
+                    <div className="flex items-start gap-2 sm:justify-end">
+                        {onRefresh && (
+                            <Button
+                                variant="outline"
+                                onClick={() => !disabled && onRefresh()}
+                                disabled={isRefreshing || disabled}
+                            >
+                                <RefreshCw
+                                    className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
+                                />
+                                {t("refresh")}
+                            </Button>
+                        )}
+                        {onExport && (
+                            <Button onClick={() => !disabled && onExport()} disabled={isExporting || disabled}>
+                                <Download
+                                    className={`mr-2 h-4 w-4 ${isExporting ? "animate-spin" : ""}`}
+                                />
+                                {t("exportCsv")}
+                            </Button>
+                        )}
+                    </div>
+                </CardHeader>
+                <CardContent>
+                    <Table>
+                        <TableHeader>
+                            {table.getHeaderGroups().map((headerGroup) => (
+                                <TableRow key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => (
+                                        <TableHead key={header.id}>
+                                            {header.isPlaceholder
+                                                ? null
+                                                : flexRender(
+                                                      header.column.columnDef
+                                                          .header,
+                                                      header.getContext()
+                                                  )}
+                                        </TableHead>
+                                    ))}
+                                </TableRow>
+                            ))}
+                        </TableHeader>
+                        <TableBody>
+                            {table.getRowModel().rows?.length ? (
+                                table.getRowModel().rows.map((row) => {
+                                    const isExpanded =
+                                        expandable && expandedRows.has(row.id);
+                                    return [
+                                        <TableRow
+                                            key={row.id}
+                                            data-state={
+                                                row.getIsSelected() &&
+                                                "selected"
+                                            }
+                                            onClick={() =>
+                                                expandable && !disabled
+                                                    ? toggleRowExpansion(
+                                                          row.id
+                                                      )
+                                                    : undefined
+                                            }
+                                            className="text-xs" // made smaller
+                                        >
+                                            {row
+                                                .getVisibleCells()
+                                                .map((cell) => {
+                                                    const originalRow =
+                                                        row.original as any;
+                                                    const actionValue =
+                                                        originalRow?.action;
+                                                    let className = "";
+
+                                                    if (
+                                                        typeof actionValue ===
+                                                        "boolean"
+                                                    ) {
+                                                        className =
+                                                            actionValue
+                                                                ? "bg-green-100 dark:bg-green-900/50"
+                                                                : "bg-red-100 dark:bg-red-900/50";
+                                                    }
+
+                                                    return (
+                                                        <TableCell
+                                                            key={cell.id}
+                                                            className={`${className} py-2`} // made smaller
+                                                        >
+                                                            {flexRender(
+                                                                cell.column
+                                                                    .columnDef
+                                                                    .cell,
+                                                                cell.getContext()
+                                                            )}
+                                                        </TableCell>
+                                                    );
+                                                })}
+                                        </TableRow>,
+                                        isExpanded &&
+                                            renderExpandedRow && (
+                                                <TableRow
+                                                    key={`${row.id}-expanded`}
+                                                >
+                                                    <TableCell
+                                                        colSpan={
+                                                            enhancedColumns.length
+                                                        }
+                                                        className="p-4 bg-muted/50"
+                                                    >
+                                                        {renderExpandedRow(
+                                                            row.original
+                                                        )}
+                                                    </TableCell>
+                                                </TableRow>
+                                            )
+                                    ].filter(Boolean);
+                                }).flat()
+                            ) : (
+                                <TableRow>
+                                    <TableCell
+                                        colSpan={enhancedColumns.length}
+                                        className="h-24 text-center"
+                                    >
+                                        No results found.
+                                    </TableCell>
+                                </TableRow>
+                            )}
+                        </TableBody>
+                    </Table>
+                    <div className="mt-4">
+                        <DataTablePagination
+                            table={table}
+                            onPageSizeChange={handlePageSizeChange}
+                            onPageChange={
+                                isServerPagination
+                                    ? handlePageChange
+                                    : undefined
+                            }
+                            totalCount={totalCount}
+                            isServerPagination={isServerPagination}
+                            isLoading={isLoading}
+                            disabled={disabled}
+                        />
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    );
+}

src/components/LoginForm.tsx

@@ -22,7 +22,7 @@ import {
     CardTitle
 } from "@app/components/ui/card";
 import { Alert, AlertDescription } from "@app/components/ui/alert";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { LockIcon, FingerprintIcon } from "lucide-react";
 import { createApiClient } from "@app/lib/api";
 import {
@@ -74,6 +74,8 @@ export default function LoginForm({
     const { env } = useEnvContext();
     const api = createApiClient({ env });
 
+    const { resourceGuid } = useParams();
+
     const [error, setError] = useState<string | null>(null);
     const [loading, setLoading] = useState(false);
     const hasIdp = idps && idps.length > 0;
@@ -235,7 +237,8 @@ export default function LoginForm({
             const response = await loginProxy({
                 email,
                 password,
-                code
+                code,
+                resourceGuid: resourceGuid as string
             });
 
             try {

src/components/OrgPolicyRequired.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { Button } from "@app/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle
+} from "@app/components/ui/card";
+import { Shield, ArrowRight } from "lucide-react";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+
+type OrgPolicyRequiredProps = {
+    orgId: string;
+    policies: {
+        requiredTwoFactor?: boolean;
+    };
+};
+
+export default function OrgPolicyRequired({
+    orgId,
+    policies
+}: OrgPolicyRequiredProps) {
+    const t = useTranslations();
+
+    const policySteps = [];
+
+    if (policies?.requiredTwoFactor === false) {
+        policySteps.push(t("enableTwoFactorAuthentication"));
+    }
+
+    return (
+        <Card className="w-full max-w-md">
+            <CardHeader className="text-center">
+                <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-orange-100">
+                    <Shield className="h-6 w-6 text-orange-600" />
+                </div>
+                <CardTitle className="text-xl font-semibold">
+                    {t("additionalSecurityRequired")}
+                </CardTitle>
+                <CardDescription>
+                    {t("organizationRequiresAdditionalSteps")}
+                </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div className="pt-4">
+                    <Link href={`/${orgId}`}>
+                        <Button className="w-full">
+                            {t("completeSecuritySteps")}
+                            <ArrowRight className="ml-2 h-4 w-4" />
+                        </Button>
+                    </Link>
+                </div>
+            </CardContent>
+        </Card>
+    );
+}

src/components/OrgPolicyResult.tsx

@@ -0,0 +1,229 @@
+"use client";
+
+import { useState } from "react";
+import { CheckOrgUserAccessResponse } from "@server/routers/org";
+import { Button } from "@/components/ui/button";
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardHeader,
+    CardTitle
+} from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { CheckCircle2, XCircle, Shield } from "lucide-react";
+import Enable2FaDialog from "./Enable2FaDialog";
+import ChangePasswordDialog from "./ChangePasswordDialog";
+import { useTranslations } from "next-intl";
+import { useUserContext } from "@app/hooks/useUserContext";
+import { useRouter } from "next/navigation";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { createApiClient } from "@app/lib/api";
+
+type OrgPolicyResultProps = {
+    orgId: string;
+    userId: string;
+    accessRes: CheckOrgUserAccessResponse;
+};
+
+type PolicyItem = {
+    id: string;
+    name: string;
+    description: string;
+    compliant: boolean;
+    action?: () => void;
+    actionText?: string;
+};
+
+export default function OrgPolicyResult({
+    orgId,
+    userId,
+    accessRes
+}: OrgPolicyResultProps) {
+    const [show2FaDialog, setShow2FaDialog] = useState(false);
+    const [showChangePasswordDialog, setShowChangePasswordDialog] = useState(false);
+    const t = useTranslations();
+    const { user } = useUserContext();
+    const router = useRouter();
+    let requireedSteps = 0;
+    let completedSteps = 0;
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+
+    const policies: PolicyItem[] = [];
+    if (
+        accessRes.policies?.requiredTwoFactor === false ||
+        accessRes.policies?.requiredTwoFactor === true
+    ) {
+        const isTwoFactorCompliant =
+            accessRes.policies?.requiredTwoFactor === true;
+        policies.push({
+            id: "two-factor",
+            name: t("twoFactorAuthentication"),
+            description: t("twoFactorDescription"),
+            compliant: isTwoFactorCompliant,
+            action: !isTwoFactorCompliant
+                ? () => setShow2FaDialog(true)
+                : undefined,
+            actionText: !isTwoFactorCompliant ? t("enableTwoFactor") : undefined
+        });
+        requireedSteps += 1;
+        if (isTwoFactorCompliant) {
+            completedSteps += 1;
+        }
+    }
+
+    // Add max session length policy if the organization has it enforced
+    if (accessRes.policies?.maxSessionLength) {
+        const maxSessionPolicy = accessRes.policies?.maxSessionLength;
+        const maxHours = maxSessionPolicy.maxSessionLengthHours;
+        
+        // Use hours if less than 24, otherwise convert to days
+        const useHours = maxHours < 24;
+        const maxTime = useHours ? maxHours : Math.round(maxHours / 24);
+        
+        const descriptionKey = useHours 
+            ? "reauthenticationDescriptionHours"
+            : "reauthenticationDescription";
+        
+        const description = useHours
+            ? t(descriptionKey, { maxHours })
+            : t(descriptionKey, { maxDays: maxTime });
+
+        policies.push({
+            id: "max-session-length",
+            name: t("reauthenticationRequired"),
+            description,
+            compliant: maxSessionPolicy.compliant,
+            action: !maxSessionPolicy.compliant
+                ? async () => {
+                      try {
+                          await api.post("/auth/logout", undefined);
+                          router.push(`/auth/login?orgId=${orgId}`);
+                      } catch (error) {
+                          console.error("Error during logout:", error);
+                          router.push(`/auth/login?orgId=${orgId}`);
+                      }
+                  }
+                : undefined,
+            actionText: !maxSessionPolicy.compliant
+                ? t("reauthenticateNow")
+                : undefined
+        });
+        requireedSteps += 1;
+        if (maxSessionPolicy.compliant) {
+            completedSteps += 1;
+        }
+    }
+
+    // Add password age policy if the organization has it enforced
+    if (accessRes.policies?.passwordAge) {
+        const passwordAgePolicy = accessRes.policies.passwordAge;
+        const maxDays = passwordAgePolicy.maxPasswordAgeDays;
+        const daysAgo = Math.round(passwordAgePolicy.passwordAgeDays);
+
+        policies.push({
+            id: "password-age",
+            name: t("passwordExpiryRequired"),
+            description: t("passwordExpiryDescription", {
+                maxDays,
+                daysAgo
+            }),
+            compliant: passwordAgePolicy.compliant,
+            action: !passwordAgePolicy.compliant
+                ? () => setShowChangePasswordDialog(true)
+                : undefined,
+            actionText: !passwordAgePolicy.compliant
+                ? t("changePasswordNow")
+                : undefined
+        });
+        requireedSteps += 1;
+        if (passwordAgePolicy.compliant) {
+            completedSteps += 1;
+        }
+    }
+
+    const progressPercentage =
+        requireedSteps === 0 ? 100 : (completedSteps / requireedSteps) * 100;
+
+    const allCompliant = completedSteps === requireedSteps;
+
+    return (
+        <>
+            <Card>
+                <CardHeader>
+                    <CardTitle className="flex items-center gap-2">
+                        {t("securityRequirements")}
+                    </CardTitle>
+                    <CardDescription>
+                        {allCompliant
+                            ? t("allRequirementsMet")
+                            : t("completeRequirementsToContinue")}
+                    </CardDescription>
+                </CardHeader>
+
+                <div className="px-6 pb-4">
+                    <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
+                        <span>
+                            {completedSteps} of {requireedSteps} steps completed
+                        </span>
+                        <span>{Math.round(progressPercentage)}%</span>
+                    </div>
+                    <Progress value={progressPercentage} className="h-2" />
+                </div>
+
+                <CardContent className="space-y-4">
+                    {policies.map((policy) => (
+                        <div
+                            key={policy.id}
+                            className="flex items-start gap-3 p-4 border rounded-lg"
+                        >
+                            <div className="flex-shrink-0 mt-0.5">
+                                {policy.compliant ? (
+                                    <CheckCircle2 className="h-5 w-5 text-green-500" />
+                                ) : (
+                                    <XCircle className="h-5 w-5 text-red-500" />
+                                )}
+                            </div>
+                            <div className="flex-1 min-w-0">
+                                <h3 className="text-sm font-medium">
+                                    {policy.name}
+                                </h3>
+                                <p className="text-sm text-muted-foreground mt-1">
+                                    {policy.description}
+                                </p>
+                                {policy.action && policy.actionText && (
+                                    <div className="mt-3">
+                                        <Button
+                                            size="sm"
+                                            onClick={policy.action}
+                                            className="w-full sm:w-auto"
+                                        >
+                                            {policy.actionText}
+                                        </Button>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                    ))}
+                </CardContent>
+            </Card>
+
+            <Enable2FaDialog
+                open={show2FaDialog}
+                setOpen={(val) => {
+                    setShow2FaDialog(val);
+                    router.refresh();
+                }}
+            />
+
+            <ChangePasswordDialog
+                open={showChangePasswordDialog}
+                setOpen={(val) => {
+                    setShowChangePasswordDialog(val);
+                    router.refresh();
+                }}
+            />
+        </>
+    );
+}

src/components/ProfileIcon.tsx

@@ -22,6 +22,7 @@ import { useUserContext } from "@app/hooks/useUserContext";
 import Disable2FaForm from "./Disable2FaForm";
 import SecurityKeyForm from "./SecurityKeyForm";
 import Enable2FaDialog from "./Enable2FaDialog";
+import ChangePasswordDialog from "./ChangePasswordDialog";
 import SupporterStatus from "./SupporterStatus";
 import { UserType } from "@server/types/UserTypes";
 import LocaleSwitcher from "@app/components/LocaleSwitcher";
@@ -41,6 +42,7 @@ export default function ProfileIcon() {
     const [openEnable2fa, setOpenEnable2fa] = useState(false);
     const [openDisable2fa, setOpenDisable2fa] = useState(false);
     const [openSecurityKey, setOpenSecurityKey] = useState(false);
+    const [openChangePassword, setOpenChangePassword] = useState(false);
 
     const t = useTranslations();
 
@@ -78,6 +80,10 @@ export default function ProfileIcon() {
                 open={openSecurityKey}
                 setOpen={setOpenSecurityKey}
             />
+            <ChangePasswordDialog 
+                open={openChangePassword} 
+                setOpen={setOpenChangePassword} 
+            />
 
             <DropdownMenu>
                 <DropdownMenuTrigger asChild>
@@ -132,6 +138,11 @@ export default function ProfileIcon() {
                             >
                                 <span>{t("securityKeyManage")}</span>
                             </DropdownMenuItem>
+                            <DropdownMenuItem
+                                onClick={() => setOpenChangePassword(true)}
+                            >
+                                <span>{t("changePassword")}</span>
+                            </DropdownMenuItem>
                             <DropdownMenuSeparator />
                         </>
                     )}

src/components/SecurityFeaturesAlert.tsx

@@ -0,0 +1,33 @@
+"use client";
+import { Alert, AlertDescription } from "@app/components/ui/alert";
+import { build } from "@server/build";
+import { useTranslations } from "next-intl";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+
+export function SecurityFeaturesAlert() {
+    const t = useTranslations();
+    const { isUnlocked } = useLicenseStatusContext();
+    const subscriptionStatus = useSubscriptionStatusContext();
+
+    return (
+        <>
+            {build === "saas" && !subscriptionStatus?.isSubscribed() ? (
+                <Alert variant="info" className="mb-6">
+                    <AlertDescription>
+                        {t("subscriptionRequiredToUse")}
+                    </AlertDescription>
+                </Alert>
+            ) : null}
+
+            {build === "enterprise" && !isUnlocked() ? (
+                <Alert variant="info" className="mb-6">
+                    <AlertDescription>
+                        {t("licenseRequiredToUse")}
+                    </AlertDescription>
+                </Alert>
+            ) : null}
+        </>
+    );
+}
+

src/components/ShareLinksTable.tsx

@@ -39,6 +39,7 @@ export type ShareLinkRow = {
     accessTokenId: string;
     resourceId: number;
     resourceName: string;
+    resourceNiceId: string;
     title: string | null;
     createdAt: number;
     expiresAt: number | null;
@@ -120,7 +121,7 @@ export default function ShareLinksTable({
             cell: ({ row }) => {
                 const r = row.original;
                 return (
-                    <Link href={`/${orgId}/settings/resources/${r.resourceId}`}>
+                    <Link href={`/${orgId}/settings/resources/${r.resourceNiceId}`}>
                         <Button variant="outline" size="sm">
                             {r.resourceName}
                             <ArrowUpRight className="ml-2 h-4 w-4" />

src/components/SidebarSupportButton.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import React, { useState } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { MessageCircle, CheckCircle2 } from "lucide-react";
+import { useUserContext } from "@app/hooks/useUserContext";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { cn } from "@app/lib/cn";
+import { useToast } from "@app/hooks/useToast";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger
+} from "@app/components/ui/popover";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from "@app/components/ui/tooltip";
+import { Button } from "@app/components/ui/button";
+import { Input } from "@app/components/ui/input";
+import { Textarea } from "@app/components/ui/textarea";
+import {
+    Form,
+    FormControl,
+    FormField,
+    FormItem,
+    FormLabel,
+    FormMessage
+} from "@app/components/ui/form";
+import { useTranslations } from "next-intl";
+
+type SupportFormValues = {
+    subject: string;
+    body: string;
+};
+
+type SidebarSupportButtonProps = {
+    isCollapsed: boolean;
+};
+
+export function SidebarSupportButton({
+    isCollapsed
+}: SidebarSupportButtonProps) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [isSuccess, setIsSuccess] = useState(false);
+    const { user } = useUserContext();
+    const { env } = useEnvContext();
+    const api = createApiClient({ env });
+    const { toast } = useToast();
+    const t = useTranslations();
+
+    const form = useForm<SupportFormValues>({
+        resolver: zodResolver(z.object({
+            subject: z
+                .string()
+                .min(1, t("supportSubjectRequired"))
+                .max(255, t("supportSubjectMaxLength")),
+            body: z.string().min(1, t("supportMessageRequired"))
+        })),
+        defaultValues: {
+            subject: "",
+            body: ""
+        }
+    });
+
+    const onSubmit = async (data: SupportFormValues) => {
+        if (!user?.email) {
+            toast({
+                variant: "destructive",
+                title: t("supportNotAvailableTitle"),
+                description: t("supportNotAvailableDescription")
+            });
+            return;
+        }
+
+        setIsSubmitting(true);
+        try {
+            await api.post("/send-support-request", {
+                subject: data.subject,
+                body: data.body
+            });
+
+            setIsSuccess(true);
+
+            toast({
+                title: t("supportRequestSentTitle"),
+                description: t("supportRequestSentDescription")
+            });
+
+            form.reset();
+        } catch (error) {
+            toast({
+                variant: "destructive",
+                title: t("supportRequestFailedTitle"),
+                description: formatAxiosError(
+                    error,
+                    t("supportRequestFailedDescription")
+                )
+            });
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    if (!user?.email) {
+        // Show message that support is not available
+        return (
+            <Popover open={isOpen} onOpenChange={setIsOpen}>
+                {isCollapsed ? (
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <PopoverTrigger asChild>
+                                    <Button
+                                        size="icon"
+                                        className="w-8 h-8"
+                                        variant="ghost"
+                                    >
+                                        <MessageCircle className="h-4 w-4" />
+                                    </Button>
+                                </PopoverTrigger>
+                            </TooltipTrigger>
+                            <TooltipContent side="right" sideOffset={8}>
+                                <p>{t("support", { defaultValue: "Support" })}</p>
+                            </TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
+                ) : (
+                    <PopoverTrigger asChild>
+                        <Button
+                            variant="ghost"
+                            className="w-full justify-center gap-2"
+                        >
+                            <MessageCircle className="h-4 w-4" />
+                            {t("support", { defaultValue: "Support" })}
+                        </Button>
+                    </PopoverTrigger>
+                )}
+                <PopoverContent className="w-80" align="start">
+                    <p className="text-sm text-muted-foreground">
+                        {t("supportNotAvailableDescription")}
+                    </p>
+                </PopoverContent>
+            </Popover>
+        );
+    }
+
+    return (
+        <Popover
+            open={isOpen}
+            onOpenChange={(open) => {
+                setIsOpen(open);
+                if (!open) {
+                    setIsSuccess(false);
+                }
+            }}
+        >
+            {isCollapsed ? (
+                <TooltipProvider>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <PopoverTrigger asChild>
+                                <Button
+                                    size="icon"
+                                    className="w-8 h-8"
+                                    variant="outline"
+                                >
+                                    <MessageCircle className="h-4 w-4" />
+                                </Button>
+                            </PopoverTrigger>
+                        </TooltipTrigger>
+                        <TooltipContent side="right" sideOffset={8}>
+                            <p>{t("messageSupport")}</p>
+                        </TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
+            ) : (
+                <PopoverTrigger asChild>
+                    <Button
+                        variant="outline"
+                        className="w-full justify-center gap-2"
+                    >
+                        <MessageCircle className="h-4 w-4" />
+                        {t("messageSupport")}
+                    </Button>
+                </PopoverTrigger>
+            )}
+            <PopoverContent className="w-96" align="start">
+                {isSuccess ? (
+                    <div className="flex flex-col items-center justify-center py-8 space-y-4">
+                        <CheckCircle2 className="h-16 w-16 text-green-500" />
+                        <h3 className="text-lg font-semibold">{t("supportMessageSent")}</h3>
+                        <p className="text-sm text-muted-foreground text-center">
+                            {t("supportWillContact")}
+                        </p>
+                    </div>
+                ) : (
+                    <Form {...form}>
+                        <form
+                            onSubmit={form.handleSubmit(onSubmit)}
+                            className="space-y-4"
+                        >
+                        <FormItem>
+                            <FormLabel>{t("supportReplyTo")}</FormLabel>
+                            <FormControl>
+                                <Input
+                                    value={user?.email || ""}
+                                    disabled
+                                />
+                            </FormControl>
+                        </FormItem>
+
+                        <FormField
+                            control={form.control}
+                            name="subject"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{t("supportSubject")}</FormLabel>
+                                    <FormControl>
+                                        <Input
+                                            placeholder={t("supportSubjectPlaceholder")}
+                                            disabled={isSubmitting}
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <FormField
+                            control={form.control}
+                            name="body"
+                            render={({ field }) => (
+                                <FormItem>
+                                    <FormLabel>{t("supportMessage")}</FormLabel>
+                                    <FormControl>
+                                        <Textarea
+                                            placeholder={t("supportMessagePlaceholder")}
+                                            rows={5}
+                                            disabled={isSubmitting}
+                                            {...field}
+                                        />
+                                    </FormControl>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+
+                        <div className="flex justify-end gap-2">
+                            <Button
+                                type="button"
+                                variant="outline"
+                                onClick={() => setIsOpen(false)}
+                                disabled={isSubmitting}
+                            >
+                                {t("cancel")}
+                            </Button>
+                            <Button type="submit" disabled={isSubmitting} loading={isSubmitting}>
+                                {t("supportSend")}
+                            </Button>
+                        </div>
+                    </form>
+                </Form>
+                )}
+            </PopoverContent>
+        </Popover>
+    );
+}

src/components/ui/calendar.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import * as React from "react";
+import {
+  ChevronDownIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+} from "lucide-react";
+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
+
+import { Button, buttonVariants } from "@/components/ui/button";
+import { cn } from "@app/lib/cn";
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = "label",
+  buttonVariant = "ghost",
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>["variant"]
+}) {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString("default", { month: "short" }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn("w-fit", defaultClassNames.root),
+        months: cn(
+          "relative flex flex-col gap-4 md:flex-row",
+          defaultClassNames.months
+        ),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
+        nav: cn(
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
+          defaultClassNames.nav
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_previous
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
+          defaultClassNames.button_next
+        ),
+        month_caption: cn(
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
+          defaultClassNames.month_caption
+        ),
+        dropdowns: cn(
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
+          defaultClassNames.dropdowns
+        ),
+        dropdown_root: cn(
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
+          defaultClassNames.dropdown_root
+        ),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
+        caption_label: cn(
+          "select-none font-medium",
+          captionLayout === "label"
+            ? "text-sm"
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
+          defaultClassNames.caption_label
+        ),
+        table: "w-full border-collapse",
+        weekdays: cn("flex", defaultClassNames.weekdays),
+        weekday: cn(
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
+          defaultClassNames.weekday
+        ),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
+        week_number_header: cn(
+          "w-[--cell-size] select-none",
+          defaultClassNames.week_number_header
+        ),
+        week_number: cn(
+          "text-muted-foreground select-none text-[0.8rem]",
+          defaultClassNames.week_number
+        ),
+        day: cn(
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
+          defaultClassNames.day
+        ),
+        range_start: cn(
+          "bg-accent rounded-l-md",
+          defaultClassNames.range_start
+        ),
+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
+        today: cn(
+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
+          defaultClassNames.today
+        ),
+        outside: cn(
+          "text-muted-foreground aria-selected:text-muted-foreground",
+          defaultClassNames.outside
+        ),
+        disabled: cn(
+          "text-muted-foreground opacity-50",
+          defaultClassNames.disabled
+        ),
+        hidden: cn("invisible", defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => {
+          return (
+            <div
+              data-slot="calendar"
+              ref={rootRef}
+              className={cn(className)}
+              {...props}
+            />
+          );
+        },
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === "left") {
+            return (
+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
+            );
+          }
+
+          if (orientation === "right") {
+            return (
+              <ChevronRightIcon
+                className={cn("size-4", className)}
+                {...props}
+              />
+            );
+          }
+
+          return (
+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => {
+          return (
+            <td {...props}>
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
+                {children}
+              </div>
+            </td>
+          );
+        },
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
+        defaultClassNames.day,
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

src/contexts/domainContext.ts

@@ -0,0 +1,19 @@
+import { GetDomainResponse } from "@server/routers/domain/getDomain";
+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/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,45 @@
+"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;
+    orgId: string;
+}
+
+export function DomainProvider({
+    children,
+    domain: serverDomain,
+    orgId
+}: 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, orgId }}>
+            {children}
+        </DomainContext.Provider>
+    );
+}
+
+export default DomainProvider;