Merge branch 'dev' into refactor/domain-picker-default-value

src/app/[orgId]/settings/(private)/remote-exit-nodes/ExitNodesTable.tsx

@@ -304,7 +304,7 @@ export default function ExitNodesTable({
                         setSelectedNode(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("remoteExitNodeQuestionRemove")}</p>
 
                             <p>{t("remoteExitNodeMessageRemove")}</p>

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

@@ -289,7 +289,7 @@ export default function GeneralPage() {
                     setIsDeleteModalOpen(val);
                 }}
                 dialog={
-                    <div>
+                    <div className="space-y-2">
                         <p>{t("orgQuestionRemove")}</p>
                         <p>{t("orgMessageRemove")}</p>
                     </div>
@@ -303,7 +303,7 @@ export default function GeneralPage() {
                 open={isSecurityPolicyConfirmOpen}
                 setOpen={setIsSecurityPolicyConfirmOpen}
                 dialog={
-                    <div>
+                    <div className="space-y-2">
                         <p>{t("securityPolicyChangeDescription")}</p>
                     </div>
                 }

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

@@ -1,16 +1,12 @@
 "use client";
 import { Button } from "@app/components/ui/button";
 import { toast } from "@app/hooks/useToast";
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, useTransition } 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 { LogDataTable } from "@app/components/LogDataTable";
 import { ColumnDef } from "@tanstack/react-table";
 import { DateTimeValue } from "@app/components/DateTimePicker";
 import { ArrowUpRight, Key, User } from "lucide-react";
@@ -21,21 +17,22 @@ import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusCo
 import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
 import { build } from "@server/build";
 import { Alert, AlertDescription } from "@app/components/ui/alert";
+import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import axios from "axios";
+import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 
 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 [isExporting, startTransition] = useTransition();
     const [filterAttributes, setFilterAttributes] = useState<{
         actors: string[];
         resources: {
@@ -70,9 +67,7 @@ export default function GeneralPage() {
     const [isLoading, setIsLoading] = useState(false);
 
     // Initialize page size from storage or default
-    const [pageSize, setPageSize] = useState<number>(() => {
-        return getStoredPageSize("access-audit-logs", 20);
-    });
+    const [pageSize, setPageSize] = useStoredPageSize("access-audit-logs", 20);
 
     // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
@@ -91,11 +86,11 @@ export default function GeneralPage() {
         }
 
         const now = new Date();
-        const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+        const lastWeek = getSevenDaysAgo();
 
         return {
             startDate: {
-                date: yesterday
+                date: lastWeek
             },
             endDate: {
                 date: now
@@ -148,7 +143,6 @@ export default function GeneralPage() {
     // 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);
     };
@@ -309,8 +303,6 @@ export default function GeneralPage() {
 
     const exportData = async () => {
         try {
-            setIsExporting(true);
-
             // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
@@ -339,11 +331,21 @@ export default function GeneralPage() {
             document.body.appendChild(link);
             link.click();
             link.parentNode?.removeChild(link);
-            setIsExporting(false);
         } catch (error) {
+            let apiErrorMessage: string | null = null;
+            if (axios.isAxiosError(error) && error.response) {
+                const data = error.response.data;
+
+                if (data instanceof Blob && data.type === "application/json") {
+                    // Parse the Blob as JSON
+                    const text = await data.text();
+                    const errorData = JSON.parse(text);
+                    apiErrorMessage = errorData.message;
+                }
+            }
             toast({
                 title: t("error"),
-                description: t("exportError"),
+                description: apiErrorMessage ?? t("exportError"),
                 variant: "destructive"
             });
         }
@@ -631,7 +633,7 @@ export default function GeneralPage() {
                 title={t("accessLogs")}
                 onRefresh={refreshData}
                 isRefreshing={isRefreshing}
-                onExport={exportData}
+                onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
                 dateRange={{

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

@@ -1,32 +1,28 @@
 "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 { DateTimeValue } from "@app/components/DateTimePicker";
+import { LogDataTable } from "@app/components/LogDataTable";
 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";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { useLicenseStatusContext } from "@app/hooks/useLicenseStatusContext";
+import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
+import { useSubscriptionStatusContext } from "@app/hooks/useSubscriptionStatusContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient } from "@app/lib/api";
+import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { build } from "@server/build";
+import { ColumnDef } from "@tanstack/react-table";
+import axios from "axios";
+import { Key, User } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState, useTransition } from "react";
 
 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();
@@ -34,7 +30,7 @@ export default function GeneralPage() {
 
     const [rows, setRows] = useState<any[]>([]);
     const [isRefreshing, setIsRefreshing] = useState(false);
-    const [isExporting, setIsExporting] = useState(false);
+    const [isExporting, startTransition] = useTransition();
     const [filterAttributes, setFilterAttributes] = useState<{
         actors: string[];
         actions: string[];
@@ -58,9 +54,7 @@ export default function GeneralPage() {
     const [isLoading, setIsLoading] = useState(false);
 
     // Initialize page size from storage or default
-    const [pageSize, setPageSize] = useState<number>(() => {
-        return getStoredPageSize("action-audit-logs", 20);
-    });
+    const [pageSize, setPageSize] = useStoredPageSize("action-audit-logs", 20);
 
     // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
@@ -79,11 +73,11 @@ export default function GeneralPage() {
         }
 
         const now = new Date();
-        const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+        const lastWeek = getSevenDaysAgo();
 
         return {
             startDate: {
-                date: yesterday
+                date: lastWeek
             },
             endDate: {
                 date: now
@@ -136,7 +130,6 @@ export default function GeneralPage() {
     // 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);
     };
@@ -293,8 +286,6 @@ export default function GeneralPage() {
 
     const exportData = async () => {
         try {
-            setIsExporting(true);
-
             // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
@@ -323,11 +314,21 @@ export default function GeneralPage() {
             document.body.appendChild(link);
             link.click();
             link.parentNode?.removeChild(link);
-            setIsExporting(false);
         } catch (error) {
+            let apiErrorMessage: string | null = null;
+            if (axios.isAxiosError(error) && error.response) {
+                const data = error.response.data;
+
+                if (data instanceof Blob && data.type === "application/json") {
+                    // Parse the Blob as JSON
+                    const text = await data.text();
+                    const errorData = JSON.parse(text);
+                    apiErrorMessage = errorData.message;
+                }
+            }
             toast({
                 title: t("error"),
-                description: t("exportError"),
+                description: apiErrorMessage ?? t("exportError"),
                 variant: "destructive"
             });
         }
@@ -484,7 +485,7 @@ export default function GeneralPage() {
                 searchColumn="action"
                 onRefresh={refreshData}
                 isRefreshing={isRefreshing}
-                onExport={exportData}
+                onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
                 dateRange={{

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

@@ -1,34 +1,32 @@
 "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 { DateTimeValue } from "@app/components/DateTimePicker";
+import { LogDataTable } from "@app/components/LogDataTable";
 import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+import { Button } from "@app/components/ui/button";
+import { useEnvContext } from "@app/hooks/useEnvContext";
+import { toast } from "@app/hooks/useToast";
+import { createApiClient } from "@app/lib/api";
+import { useTranslations } from "next-intl";
+import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { ColumnDef } from "@tanstack/react-table";
+import axios from "axios";
+import { ArrowUpRight, Key, Lock, Unlock, User } from "lucide-react";
+import Link from "next/link";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState, useTransition } from "react";
+import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 
 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);
+    const [isExporting, startTransition] = useTransition();
 
     // Pagination state
     const [totalCount, setTotalCount] = useState<number>(0);
@@ -36,9 +34,7 @@ export default function GeneralPage() {
     const [isLoading, setIsLoading] = useState(false);
 
     // Initialize page size from storage or default
-    const [pageSize, setPageSize] = useState<number>(() => {
-        return getStoredPageSize("request-audit-logs", 20);
-    });
+    const [pageSize, setPageSize] = useStoredPageSize("request-audit-logs", 20);
 
     const [filterAttributes, setFilterAttributes] = useState<{
         actors: string[];
@@ -95,11 +91,11 @@ export default function GeneralPage() {
         }
 
         const now = new Date();
-        const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+        const lastWeek = getSevenDaysAgo();
 
         return {
             startDate: {
-                date: yesterday
+                date: lastWeek
             },
             endDate: {
                 date: now
@@ -152,7 +148,6 @@ export default function GeneralPage() {
     // 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);
     };
@@ -302,8 +297,6 @@ export default function GeneralPage() {
 
     const exportData = async () => {
         try {
-            setIsExporting(true);
-
             // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
@@ -335,11 +328,21 @@ export default function GeneralPage() {
             document.body.appendChild(link);
             link.click();
             link.parentNode?.removeChild(link);
-            setIsExporting(false);
         } catch (error) {
+            let apiErrorMessage: string | null = null;
+            if (axios.isAxiosError(error) && error.response) {
+                const data = error.response.data;
+
+                if (data instanceof Blob && data.type === "application/json") {
+                    // Parse the Blob as JSON
+                    const text = await data.text();
+                    const errorData = JSON.parse(text);
+                    apiErrorMessage = errorData.message;
+                }
+            }
             toast({
                 title: t("error"),
-                description: t("exportError"),
+                description: apiErrorMessage ?? t("exportError"),
                 variant: "destructive"
             });
         }
@@ -773,7 +776,7 @@ export default function GeneralPage() {
                 searchColumn="host"
                 onRefresh={refreshData}
                 isRefreshing={isRefreshing}
-                onExport={exportData}
+                onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
                 dateRange={{

src/app/[orgId]/settings/resources/client/page.tsx

@@ -67,7 +67,10 @@ export default async function ClientResourcesPage(
                 // destinationPort: siteResource.destinationPort,
                 alias: siteResource.alias || null,
                 siteNiceId: siteResource.siteNiceId,
-                niceId: siteResource.niceId
+                niceId: siteResource.niceId,
+                tcpPortRangeString: siteResource.tcpPortRangeString || null,
+                udpPortRangeString: siteResource.udpPortRangeString || null,
+                disableIcmp: siteResource.disableIcmp || false,
             };
         }
     );

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

@@ -225,7 +225,7 @@ export default function GeneralForm() {
                 name: data.name,
                 niceId: data.niceId,
                 subdomain: data.subdomain,
-                fullDomain: resource.fullDomain,
+                fullDomain: updated.fullDomain,
                 proxyPort: data.proxyPort
                 // ...(!resource.http && {
                 //     enableProxy: data.enableProxy

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

@@ -449,15 +449,16 @@ export default function ResourceRules(props: {
                     type="number"
                     onClick={(e) => e.currentTarget.focus()}
                     onBlur={(e) => {
-                        const parsed = z
+                        const parsed = z.coerce
+                            .number()
                             .int()
                             .optional()
                             .safeParse(e.target.value);
 
-                        if (!parsed.data) {
+                        if (!parsed.success) {
                             toast({
                                 variant: "destructive",
-                                title: t("rulesErrorInvalidIpAddress"), // correct priority or IP?
+                                title: t("rulesErrorInvalidPriority"), // correct priority or IP?
                                 description: t(
                                     "rulesErrorInvalidPriorityDescription"
                                 )

src/app/admin/license/page.tsx

@@ -315,7 +315,7 @@ export default function LicensePage() {
                         setSelectedLicenseKey(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("licenseQuestionRemove")}</p>
                             <p>
                                 <b>{t("licenseMessageRemove")}</b>
@@ -360,7 +360,8 @@ export default function LicensePage() {
                                 <div className="space-y-2 text-green-500">
                                     <div className="text-2xl flex items-center gap-2">
                                         <Check />
-                                        {t("licensed")}
+                                        {t("licensed") +
+                                            `${licenseStatus?.tier === "personal" ? ` (${t("personalUseOnly")})` : ""}`}
                                     </div>
                                 </div>
                             ) : (

src/app/admin/users/AdminUsersTable.tsx

@@ -243,7 +243,7 @@ export default function UsersTable({ users }: Props) {
                         setSelected(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("userQuestionRemove")}</p>
 
                             <p>{t("userMessageRemove")}</p>

src/app/auth/layout.tsx

@@ -23,6 +23,7 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
     const t = await getTranslations();
     let hideFooter = false;
 
+    let licenseStatus: GetLicenseStatusResponse | null = null;
     if (build == "enterprise") {
         const licenseStatusRes = await cache(
             async () =>
@@ -30,10 +31,12 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
                     "/license/status"
                 )
         )();
+        licenseStatus = licenseStatusRes.data.data;
         if (
             env.branding.hideAuthLayoutFooter &&
             licenseStatusRes.data.data.isHostLicensed &&
-            licenseStatusRes.data.data.isLicenseValid
+            licenseStatusRes.data.data.isLicenseValid &&
+            licenseStatusRes.data.data.tier !== "personal"
         ) {
             hideFooter = true;
         }
@@ -83,6 +86,23 @@ export default async function AuthLayout({ children }: AuthLayoutProps) {
                                   ? t("enterpriseEdition")
                                   : t("pangolinCloud")}
                         </span>
+                        {build === "enterprise" &&
+                        licenseStatus?.isHostLicensed &&
+                        licenseStatus?.isLicenseValid &&
+                        licenseStatus?.tier === "personal" ? (
+                            <>
+                                <Separator orientation="vertical" />
+                                <span>{t("personalUseOnly")}</span>
+                            </>
+                        ) : null}
+                        {build === "enterprise" &&
+                        (!licenseStatus?.isHostLicensed ||
+                            !licenseStatus?.isLicenseValid) ? (
+                            <>
+                                <Separator orientation="vertical" />
+                                <span>{t("unlicensed")}</span>
+                            </>
+                        ) : null}
                         {build === "saas" && (
                             <>
                                 <Separator orientation="vertical" />

src/components/AdminIdpTable.tsx

@@ -196,7 +196,7 @@ export default function IdpTable({ idps }: Props) {
                         setSelectedIdp(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>
                                 {t("idpQuestionRemove", {
                                     name: selectedIdp.name

src/components/AdminUsersTable.tsx

@@ -269,7 +269,7 @@ export default function UsersTable({ users }: Props) {
                                 </Button>
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
-                                {r.type !== "internal" && (
+                                {r.type === "internal" && (
                                     <DropdownMenuItem
                                         onClick={() => {
                                             generatePasswordResetCode(r.id);
@@ -313,7 +313,7 @@ export default function UsersTable({ users }: Props) {
                         setSelected(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>
                                 {t("userQuestionRemove", {
                                     selectedUser:

src/components/ApiKeysTable.tsx

@@ -182,7 +182,7 @@ export default function ApiKeysTable({ apiKeys }: ApiKeyTableProps) {
                         setSelected(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("apiKeysQuestionRemove")}</p>
 
                             <p>{t("apiKeysMessageRemove")}</p>

src/components/ClientResourcesTable.tsx

@@ -41,6 +41,9 @@ export type InternalResourceRow = {
     // destinationPort: number | null;
     alias: string | null;
     niceId: string;
+    tcpPortRangeString: string | null;
+    udpPortRangeString: string | null;
+    disableIcmp: boolean;
 };
 
 type ClientResourcesTableProps = {
@@ -284,7 +287,7 @@ export default function ClientResourcesTable({
                         setSelectedInternalResource(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("resourceQuestionRemove")}</p>
                             <p>{t("resourceMessageRemove")}</p>
                         </div>

src/components/CreateInternalResourceDialog.tsx

@@ -42,15 +42,14 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
+import { Switch } from "@app/components/ui/switch";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { cn } from "@app/lib/cn";
 import { orgQueries } from "@app/lib/queries";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ListClientsResponse } from "@server/routers/client/listClients";
 import { ListSitesResponse } from "@server/routers/site";
-import { ListUsersResponse } from "@server/routers/user";
 import { UserType } from "@server/types/UserTypes";
 import { useQuery } from "@tanstack/react-query";
 import { AxiosResponse } from "axios";
@@ -59,6 +58,82 @@ import { useTranslations } from "next-intl";
 import { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+// import { InfoPopup } from "@app/components/ui/info-popup";
+
+// Helper to validate port range string format
+const isValidPortRangeString = (val: string | undefined | null): boolean => {
+    if (!val || val.trim() === "" || val.trim() === "*") {
+        return true;
+    }
+
+    const parts = val.split(",").map((p) => p.trim());
+
+    for (const part of parts) {
+        if (part === "") {
+            return false;
+        }
+
+        if (part.includes("-")) {
+            const [start, end] = part.split("-").map((p) => p.trim());
+            if (!start || !end) {
+                return false;
+            }
+
+            const startPort = parseInt(start, 10);
+            const endPort = parseInt(end, 10);
+
+            if (isNaN(startPort) || isNaN(endPort)) {
+                return false;
+            }
+
+            if (startPort < 1 || startPort > 65535 || endPort < 1 || endPort > 65535) {
+                return false;
+            }
+
+            if (startPort > endPort) {
+                return false;
+            }
+        } else {
+            const port = parseInt(part, 10);
+            if (isNaN(port)) {
+                return false;
+            }
+            if (port < 1 || port > 65535) {
+                return false;
+            }
+        }
+    }
+
+    return true;
+};
+
+// Port range string schema for client-side validation
+const portRangeStringSchema = z
+    .string()
+    .optional()
+    .nullable()
+    .refine(
+        (val) => isValidPortRangeString(val),
+        {
+            message:
+                'Port range must be "*" for all ports, or a comma-separated list of ports and ranges (e.g., "80,443,8000-9000"). Ports must be between 1 and 65535.'
+        }
+    );
+
+// Helper to determine the port mode from a port range string
+type PortMode = "all" | "blocked" | "custom";
+const getPortModeFromString = (val: string | undefined | null): PortMode => {
+    if (val === "*") return "all";
+    if (!val || val.trim() === "") return "blocked";
+    return "custom";
+};
+
+// Helper to get the port string for API from mode and custom value
+const getPortStringFromMode = (mode: PortMode, customValue: string): string | undefined => {
+    if (mode === "all") return "*";
+    if (mode === "blocked") return "";
+    return customValue;
+};
 
 type Site = ListSitesResponse["sites"][0];
 
@@ -103,6 +178,9 @@ export default function CreateInternalResourceDialog({
         //     .max(65535, t("createInternalResourceDialogDestinationPortMax"))
         //     .nullish(),
         alias: z.string().nullish(),
+        tcpPortRangeString: portRangeStringSchema,
+        udpPortRangeString: portRangeStringSchema,
+        disableIcmp: z.boolean().optional(),
         roles: z
             .array(
                 z.object({
@@ -209,6 +287,12 @@ export default function CreateInternalResourceDialog({
         number | null
     >(null);
 
+    // Port restriction UI state - default to "all" (*) for new resources
+    const [tcpPortMode, setTcpPortMode] = useState<PortMode>("all");
+    const [udpPortMode, setUdpPortMode] = useState<PortMode>("all");
+    const [tcpCustomPorts, setTcpCustomPorts] = useState<string>("");
+    const [udpCustomPorts, setUdpCustomPorts] = useState<string>("");
+
     const availableSites = sites.filter(
         (site) => site.type === "newt" && site.subnet
     );
@@ -224,6 +308,9 @@ export default function CreateInternalResourceDialog({
             destination: "",
             // destinationPort: undefined,
             alias: "",
+            tcpPortRangeString: "*",
+            udpPortRangeString: "*",
+            disableIcmp: false,
             roles: [],
             users: [],
             clients: []
@@ -232,6 +319,17 @@ export default function CreateInternalResourceDialog({
 
     const mode = form.watch("mode");
 
+    // Update form values when port mode or custom ports change
+    useEffect(() => {
+        const tcpValue = getPortStringFromMode(tcpPortMode, tcpCustomPorts);
+        form.setValue("tcpPortRangeString", tcpValue);
+    }, [tcpPortMode, tcpCustomPorts, form]);
+
+    useEffect(() => {
+        const udpValue = getPortStringFromMode(udpPortMode, udpCustomPorts);
+        form.setValue("udpPortRangeString", udpValue);
+    }, [udpPortMode, udpCustomPorts, form]);
+
     // Helper function to check if destination contains letters (hostname vs IP)
     const isHostname = (destination: string): boolean => {
         return /[a-zA-Z]/.test(destination);
@@ -258,10 +356,18 @@ export default function CreateInternalResourceDialog({
                 destination: "",
                 // destinationPort: undefined,
                 alias: "",
+                tcpPortRangeString: "*",
+                udpPortRangeString: "*",
+                disableIcmp: false,
                 roles: [],
                 users: [],
                 clients: []
             });
+            // Reset port mode state
+            setTcpPortMode("all");
+            setUdpPortMode("all");
+            setTcpCustomPorts("");
+            setUdpCustomPorts("");
         }
     }, [open]);
 
@@ -304,6 +410,9 @@ export default function CreateInternalResourceDialog({
                         data.alias.trim()
                             ? data.alias
                             : undefined,
+                    tcpPortRangeString: data.tcpPortRangeString,
+                    udpPortRangeString: data.udpPortRangeString,
+                    disableIcmp: data.disableIcmp ?? false,
                     roleIds: data.roles
                         ? data.roles.map((r) => parseInt(r.id))
                         : [],
@@ -727,6 +836,163 @@ export default function CreateInternalResourceDialog({
                                 </div>
                             )}
 
+                            {/* Port Restrictions Section */}
+                            <div>
+                                <h3 className="text-lg font-semibold mb-4">
+                                    {t("portRestrictions")}
+                                </h3>
+                                <div className="space-y-4">
+                                    {/* TCP Ports */}
+                                    <FormField
+                                        control={form.control}
+                                        name="tcpPortRangeString"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <div className="flex items-center gap-2">
+                                                    <FormLabel className="min-w-10">
+                                                        TCP
+                                                    </FormLabel>
+                                                    {/*<InfoPopup
+                                                        info={t("tcpPortsDescription")}
+                                                    />*/}
+                                                    <Select
+                                                        value={tcpPortMode}
+                                                        onValueChange={(value: PortMode) => {
+                                                            setTcpPortMode(value);
+                                                        }}
+                                                    >
+                                                        <SelectTrigger className="w-[110px]">
+                                                            <SelectValue />
+                                                        </SelectTrigger>
+                                                        <SelectContent>
+                                                            <SelectItem value="all">
+                                                                {t("allPorts")}
+                                                            </SelectItem>
+                                                            <SelectItem value="blocked">
+                                                                {t("blocked")}
+                                                            </SelectItem>
+                                                            <SelectItem value="custom">
+                                                                {t("custom")}
+                                                            </SelectItem>
+                                                        </SelectContent>
+                                                    </Select>
+                                                    {tcpPortMode === "custom" ? (
+                                                        <FormControl>
+                                                            <Input
+                                                                placeholder="80,443,8000-9000"
+                                                                value={tcpCustomPorts}
+                                                                onChange={(e) =>
+                                                                    setTcpCustomPorts(e.target.value)
+                                                                }
+                                                                className="flex-1"
+                                                            />
+                                                        </FormControl>
+                                                    ) : (
+                                                        <Input
+                                                            disabled
+                                                            placeholder={
+                                                                tcpPortMode === "all"
+                                                                    ? t("allPortsAllowed")
+                                                                    : t("allPortsBlocked")
+                                                            }
+                                                            className="flex-1"
+                                                        />
+                                                    )}
+                                                </div>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    {/* UDP Ports */}
+                                    <FormField
+                                        control={form.control}
+                                        name="udpPortRangeString"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <div className="flex items-center gap-2">
+                                                    <FormLabel className="min-w-10">
+                                                        UDP
+                                                    </FormLabel>
+                                                    {/*<InfoPopup
+                                                        info={t("udpPortsDescription")}
+                                                    />*/}
+                                                    <Select
+                                                        value={udpPortMode}
+                                                        onValueChange={(value: PortMode) => {
+                                                            setUdpPortMode(value);
+                                                        }}
+                                                    >
+                                                        <SelectTrigger className="w-[110px]">
+                                                            <SelectValue />
+                                                        </SelectTrigger>
+                                                        <SelectContent>
+                                                            <SelectItem value="all">
+                                                                {t("allPorts")}
+                                                            </SelectItem>
+                                                            <SelectItem value="blocked">
+                                                                {t("blocked")}
+                                                            </SelectItem>
+                                                            <SelectItem value="custom">
+                                                                {t("custom")}
+                                                            </SelectItem>
+                                                        </SelectContent>
+                                                    </Select>
+                                                    {udpPortMode === "custom" ? (
+                                                        <FormControl>
+                                                            <Input
+                                                                placeholder="53,123,500-600"
+                                                                value={udpCustomPorts}
+                                                                onChange={(e) =>
+                                                                    setUdpCustomPorts(e.target.value)
+                                                                }
+                                                                className="flex-1"
+                                                            />
+                                                        </FormControl>
+                                                    ) : (
+                                                        <Input
+                                                            disabled
+                                                            placeholder={
+                                                                udpPortMode === "all"
+                                                                    ? t("allPortsAllowed")
+                                                                    : t("allPortsBlocked")
+                                                            }
+                                                            className="flex-1"
+                                                        />
+                                                    )}
+                                                </div>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    {/* ICMP Toggle */}
+                                    <FormField
+                                        control={form.control}
+                                        name="disableIcmp"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <div className="flex items-center gap-2">
+                                                    <FormLabel className="min-w-10">
+                                                        ICMP
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Switch
+                                                            checked={!field.value}
+                                                            onCheckedChange={(checked) => field.onChange(!checked)}
+                                                        />
+                                                    </FormControl>
+                                                    <span className="text-sm text-muted-foreground">
+                                                        {field.value ? t("blocked") : t("allowed")}
+                                                    </span>
+                                                </div>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </div>
+                            </div>
+
                             {/* Access Control Section */}
                             <div>
                                 <h3 className="text-lg font-semibold mb-4">

src/components/Credenza.tsx

@@ -131,7 +131,7 @@ const CredenzaHeader = ({ className, children, ...props }: CredenzaProps) => {
     const CredenzaHeader = isDesktop ? DialogHeader : SheetHeader;
 
     return (
-        <CredenzaHeader className={cn("-mx-6 px-6 pb-6 border-b border-border", className)} {...props}>
+        <CredenzaHeader className={cn("-mx-6 px-6", className)} {...props}>
             {children}
         </CredenzaHeader>
     );
@@ -177,7 +177,13 @@ const CredenzaFooter = ({ className, children, ...props }: CredenzaProps) => {
     const CredenzaFooter = isDesktop ? DialogFooter : SheetFooter;
 
     return (
-        <CredenzaFooter className={cn("mt-8 md:mt-0 -mx-6 px-6 pt-6 border-t border-border", className)} {...props}>
+        <CredenzaFooter
+            className={cn(
+                "mt-8 md:mt-0 -mx-6 px-6 pt-6 border-t border-border",
+                className
+            )}
+            {...props}
+        >
             {children}
         </CredenzaFooter>
     );

src/components/DataTablePagination.tsx

@@ -24,6 +24,8 @@ interface DataTablePaginationProps<TData> {
     isServerPagination?: boolean;
     isLoading?: boolean;
     disabled?: boolean;
+    pageSize?: number;
+    pageIndex?: number;
 }
 
 export function DataTablePagination<TData>({
@@ -33,10 +35,26 @@ export function DataTablePagination<TData>({
     totalCount,
     isServerPagination = false,
     isLoading = false,
-    disabled = false
+    disabled = false,
+    pageSize: controlledPageSize,
+    pageIndex: controlledPageIndex
 }: DataTablePaginationProps<TData>) {
     const t = useTranslations();
 
+    // Use controlled values if provided, otherwise fall back to table state
+    const pageSize = controlledPageSize ?? table.getState().pagination.pageSize;
+    const pageIndex =
+        controlledPageIndex ?? table.getState().pagination.pageIndex;
+
+    // Calculate page boundaries based on controlled state
+    // For server-side pagination, use totalCount if available for accurate page count
+    const pageCount =
+        isServerPagination && totalCount !== undefined
+            ? Math.ceil(totalCount / pageSize)
+            : table.getPageCount();
+    const canNextPage = pageIndex < pageCount - 1;
+    const canPreviousPage = pageIndex > 0;
+
     const handlePageSizeChange = (value: string) => {
         const newPageSize = Number(value);
         table.setPageSize(newPageSize);
@@ -51,7 +69,7 @@ export function DataTablePagination<TData>({
         action: "first" | "previous" | "next" | "last"
     ) => {
         if (isServerPagination && onPageChange) {
-            const currentPage = table.getState().pagination.pageIndex;
+            const currentPage = pageIndex;
             const pageCount = table.getPageCount();
 
             let newPage: number;
@@ -77,18 +95,24 @@ export function DataTablePagination<TData>({
             }
         } else {
             // Use table's built-in navigation for client-side pagination
+            // But add bounds checking to prevent going beyond page boundaries
+            const pageCount = table.getPageCount();
             switch (action) {
                 case "first":
                     table.setPageIndex(0);
                     break;
                 case "previous":
-                    table.previousPage();
+                    if (pageIndex > 0) {
+                        table.previousPage();
+                    }
                     break;
                 case "next":
-                    table.nextPage();
+                    if (pageIndex < pageCount - 1) {
+                        table.nextPage();
+                    }
                     break;
                 case "last":
-                    table.setPageIndex(table.getPageCount() - 1);
+                    table.setPageIndex(Math.max(0, pageCount - 1));
                     break;
             }
         }
@@ -98,14 +122,12 @@ export function DataTablePagination<TData>({
         <div className="flex items-center justify-between text-muted-foreground">
             <div className="flex items-center space-x-2">
                 <Select
-                    value={`${table.getState().pagination.pageSize}`}
+                    value={`${pageSize}`}
                     onValueChange={handlePageSizeChange}
                     disabled={disabled}
                 >
                     <SelectTrigger className="h-8 w-[73px]" disabled={disabled}>
-                        <SelectValue
-                            placeholder={table.getState().pagination.pageSize}
-                        />
+                        <SelectValue placeholder={pageSize} />
                     </SelectTrigger>
                     <SelectContent side="bottom">
                         {[10, 20, 30, 40, 50, 100].map((pageSize) => (
@@ -121,16 +143,11 @@ export function DataTablePagination<TData>({
                 <div className="flex items-center justify-center text-sm font-medium">
                     {isServerPagination && totalCount !== undefined
                         ? t("paginator", {
-                              current:
-                                  table.getState().pagination.pageIndex + 1,
-                              last: Math.ceil(
-                                  totalCount /
-                                      table.getState().pagination.pageSize
-                              )
+                              current: pageIndex + 1,
+                              last: Math.ceil(totalCount / pageSize)
                           })
                         : t("paginator", {
-                              current:
-                                  table.getState().pagination.pageIndex + 1,
+                              current: pageIndex + 1,
                               last: table.getPageCount()
                           })}
                 </div>
@@ -139,9 +156,7 @@ export function DataTablePagination<TData>({
                         variant="outline"
                         className="hidden h-8 w-8 p-0 lg:flex"
                         onClick={() => handlePageNavigation("first")}
-                        disabled={
-                            !table.getCanPreviousPage() || isLoading || disabled
-                        }
+                        disabled={!canPreviousPage || isLoading || disabled}
                     >
                         <span className="sr-only">{t("paginatorToFirst")}</span>
                         <DoubleArrowLeftIcon className="h-4 w-4" />
@@ -150,9 +165,7 @@ export function DataTablePagination<TData>({
                         variant="outline"
                         className="h-8 w-8 p-0"
                         onClick={() => handlePageNavigation("previous")}
-                        disabled={
-                            !table.getCanPreviousPage() || isLoading || disabled
-                        }
+                        disabled={!canPreviousPage || isLoading || disabled}
                     >
                         <span className="sr-only">
                             {t("paginatorToPrevious")}
@@ -163,9 +176,7 @@ export function DataTablePagination<TData>({
                         variant="outline"
                         className="h-8 w-8 p-0"
                         onClick={() => handlePageNavigation("next")}
-                        disabled={
-                            !table.getCanNextPage() || isLoading || disabled
-                        }
+                        disabled={!canNextPage || isLoading || disabled}
                     >
                         <span className="sr-only">{t("paginatorToNext")}</span>
                         <ChevronRightIcon className="h-4 w-4" />
@@ -174,9 +185,7 @@ export function DataTablePagination<TData>({
                         variant="outline"
                         className="hidden h-8 w-8 p-0 lg:flex"
                         onClick={() => handlePageNavigation("last")}
-                        disabled={
-                            !table.getCanNextPage() || isLoading || disabled
-                        }
+                        disabled={!canNextPage || isLoading || disabled}
                     >
                         <span className="sr-only">{t("paginatorToLast")}</span>
                         <DoubleArrowRightIcon className="h-4 w-4" />

src/components/DomainsTable.tsx

@@ -304,7 +304,7 @@ export default function DomainsTable({ domains, orgId }: Props) {
                         setSelectedDomain(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("domainQuestionRemove")}</p>
                             <p>{t("domainMessageRemove")}</p>
                         </div>

src/components/EditInternalResourceDialog.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Button } from "@app/components/ui/button";
 import { Input } from "@app/components/ui/input";
 import {
@@ -10,6 +10,7 @@ import {
     SelectTrigger,
     SelectValue
 } from "@app/components/ui/select";
+import { Switch } from "@app/components/ui/switch";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
@@ -36,17 +37,86 @@ import { toast } from "@app/hooks/useToast";
 import { useTranslations } from "next-intl";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
-import { ListRolesResponse } from "@server/routers/role";
-import { ListUsersResponse } from "@server/routers/user";
-import { ListSiteResourceRolesResponse } from "@server/routers/siteResource/listSiteResourceRoles";
-import { ListSiteResourceUsersResponse } from "@server/routers/siteResource/listSiteResourceUsers";
-import { ListSiteResourceClientsResponse } from "@server/routers/siteResource/listSiteResourceClients";
-import { ListClientsResponse } from "@server/routers/client/listClients";
 import { Tag, TagInput } from "@app/components/tags/tag-input";
-import { AxiosResponse } from "axios";
 import { UserType } from "@server/types/UserTypes";
 import { useQueries, useQuery, useQueryClient } from "@tanstack/react-query";
 import { orgQueries, resourceQueries } from "@app/lib/queries";
+// import { InfoPopup } from "@app/components/ui/info-popup";
+
+// Helper to validate port range string format
+const isValidPortRangeString = (val: string | undefined | null): boolean => {
+    if (!val || val.trim() === "" || val.trim() === "*") {
+        return true;
+    }
+
+    const parts = val.split(",").map((p) => p.trim());
+
+    for (const part of parts) {
+        if (part === "") {
+            return false;
+        }
+
+        if (part.includes("-")) {
+            const [start, end] = part.split("-").map((p) => p.trim());
+            if (!start || !end) {
+                return false;
+            }
+
+            const startPort = parseInt(start, 10);
+            const endPort = parseInt(end, 10);
+
+            if (isNaN(startPort) || isNaN(endPort)) {
+                return false;
+            }
+
+            if (startPort < 1 || startPort > 65535 || endPort < 1 || endPort > 65535) {
+                return false;
+            }
+
+            if (startPort > endPort) {
+                return false;
+            }
+        } else {
+            const port = parseInt(part, 10);
+            if (isNaN(port)) {
+                return false;
+            }
+            if (port < 1 || port > 65535) {
+                return false;
+            }
+        }
+    }
+
+    return true;
+};
+
+// Port range string schema for client-side validation
+const portRangeStringSchema = z
+    .string()
+    .optional()
+    .nullable()
+    .refine(
+        (val) => isValidPortRangeString(val),
+        {
+            message:
+                'Port range must be "*" for all ports, or a comma-separated list of ports and ranges (e.g., "80,443,8000-9000"). Ports must be between 1 and 65535.'
+        }
+    );
+
+// Helper to determine the port mode from a port range string
+type PortMode = "all" | "blocked" | "custom";
+const getPortModeFromString = (val: string | undefined | null): PortMode => {
+    if (val === "*") return "all";
+    if (!val || val.trim() === "") return "blocked";
+    return "custom";
+};
+
+// Helper to get the port string for API from mode and custom value
+const getPortStringFromMode = (mode: PortMode, customValue: string): string | undefined => {
+    if (mode === "all") return "*";
+    if (mode === "blocked") return "";
+    return customValue;
+};
 
 type InternalResourceData = {
     id: number;
@@ -61,6 +131,9 @@ type InternalResourceData = {
     destination: string;
     // destinationPort?: number | null;
     alias?: string | null;
+    tcpPortRangeString?: string | null;
+    udpPortRangeString?: string | null;
+    disableIcmp?: boolean;
 };
 
 type EditInternalResourceDialogProps = {
@@ -94,6 +167,9 @@ export default function EditInternalResourceDialog({
         destination: z.string().min(1),
         // destinationPort: z.int().positive().min(1, t("editInternalResourceDialogDestinationPortMin")).max(65535, t("editInternalResourceDialogDestinationPortMax")).nullish(),
         alias: z.string().nullish(),
+        tcpPortRangeString: portRangeStringSchema,
+        udpPortRangeString: portRangeStringSchema,
+        disableIcmp: z.boolean().optional(),
         roles: z
             .array(
                 z.object({
@@ -255,6 +331,24 @@ export default function EditInternalResourceDialog({
         number | null
     >(null);
 
+    // Port restriction UI state
+    const [tcpPortMode, setTcpPortMode] = useState<PortMode>(
+        getPortModeFromString(resource.tcpPortRangeString)
+    );
+    const [udpPortMode, setUdpPortMode] = useState<PortMode>(
+        getPortModeFromString(resource.udpPortRangeString)
+    );
+    const [tcpCustomPorts, setTcpCustomPorts] = useState<string>(
+        resource.tcpPortRangeString && resource.tcpPortRangeString !== "*"
+            ? resource.tcpPortRangeString
+            : ""
+    );
+    const [udpCustomPorts, setUdpCustomPorts] = useState<string>(
+        resource.udpPortRangeString && resource.udpPortRangeString !== "*"
+            ? resource.udpPortRangeString
+            : ""
+    );
+
     const form = useForm<FormData>({
         resolver: zodResolver(formSchema),
         defaultValues: {
@@ -265,6 +359,9 @@ export default function EditInternalResourceDialog({
             destination: resource.destination || "",
             // destinationPort: resource.destinationPort ?? undefined,
             alias: resource.alias ?? null,
+            tcpPortRangeString: resource.tcpPortRangeString ?? "*",
+            udpPortRangeString: resource.udpPortRangeString ?? "*",
+            disableIcmp: resource.disableIcmp ?? false,
             roles: [],
             users: [],
             clients: []
@@ -273,6 +370,17 @@ export default function EditInternalResourceDialog({
 
     const mode = form.watch("mode");
 
+    // Update form values when port mode or custom ports change
+    useEffect(() => {
+        const tcpValue = getPortStringFromMode(tcpPortMode, tcpCustomPorts);
+        form.setValue("tcpPortRangeString", tcpValue);
+    }, [tcpPortMode, tcpCustomPorts, form]);
+
+    useEffect(() => {
+        const udpValue = getPortStringFromMode(udpPortMode, udpCustomPorts);
+        form.setValue("udpPortRangeString", udpValue);
+    }, [udpPortMode, udpCustomPorts, form]);
+
     // Helper function to check if destination contains letters (hostname vs IP)
     const isHostname = (destination: string): boolean => {
         return /[a-zA-Z]/.test(destination);
@@ -327,6 +435,9 @@ export default function EditInternalResourceDialog({
                         data.alias.trim()
                             ? data.alias
                             : null,
+                    tcpPortRangeString: data.tcpPortRangeString,
+                    udpPortRangeString: data.udpPortRangeString,
+                    disableIcmp: data.disableIcmp ?? false,
                     roleIds: (data.roles || []).map((r) => parseInt(r.id)),
                     userIds: (data.users || []).map((u) => u.id),
                     clientIds: (data.clients || []).map((c) => parseInt(c.id))
@@ -396,10 +507,26 @@ export default function EditInternalResourceDialog({
                     mode: resource.mode || "host",
                     destination: resource.destination || "",
                     alias: resource.alias ?? null,
+                    tcpPortRangeString: resource.tcpPortRangeString ?? "*",
+                    udpPortRangeString: resource.udpPortRangeString ?? "*",
+                    disableIcmp: resource.disableIcmp ?? false,
                     roles: [],
                     users: [],
                     clients: []
                 });
+                // Reset port mode state
+                setTcpPortMode(getPortModeFromString(resource.tcpPortRangeString));
+                setUdpPortMode(getPortModeFromString(resource.udpPortRangeString));
+                setTcpCustomPorts(
+                    resource.tcpPortRangeString && resource.tcpPortRangeString !== "*"
+                        ? resource.tcpPortRangeString
+                        : ""
+                );
+                setUdpCustomPorts(
+                    resource.udpPortRangeString && resource.udpPortRangeString !== "*"
+                        ? resource.udpPortRangeString
+                        : ""
+                );
                 previousResourceId.current = resource.id;
             }
 
@@ -438,10 +565,26 @@ export default function EditInternalResourceDialog({
                         destination: resource.destination || "",
                         // destinationPort: resource.destinationPort ?? undefined,
                         alias: resource.alias ?? null,
+                        tcpPortRangeString: resource.tcpPortRangeString ?? "*",
+                        udpPortRangeString: resource.udpPortRangeString ?? "*",
+                        disableIcmp: resource.disableIcmp ?? false,
                         roles: [],
                         users: [],
                         clients: []
                     });
+                    // Reset port mode state
+                    setTcpPortMode(getPortModeFromString(resource.tcpPortRangeString));
+                    setUdpPortMode(getPortModeFromString(resource.udpPortRangeString));
+                    setTcpCustomPorts(
+                        resource.tcpPortRangeString && resource.tcpPortRangeString !== "*"
+                            ? resource.tcpPortRangeString
+                            : ""
+                    );
+                    setUdpCustomPorts(
+                        resource.udpPortRangeString && resource.udpPortRangeString !== "*"
+                            ? resource.udpPortRangeString
+                            : ""
+                    );
                     // Reset previous resource ID to ensure clean state on next open
                     previousResourceId.current = null;
                 }
@@ -674,6 +817,163 @@ export default function EditInternalResourceDialog({
                                 </div>
                             )}
 
+                            {/* Port Restrictions Section */}
+                            <div>
+                                <h3 className="text-lg font-semibold mb-4">
+                                    {t("portRestrictions")}
+                                </h3>
+                                <div className="space-y-4">
+                                    {/* TCP Ports */}
+                                    <FormField
+                                        control={form.control}
+                                        name="tcpPortRangeString"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <div className="flex items-center gap-2">
+                                                    <FormLabel className="min-w-10">
+                                                        TCP
+                                                    </FormLabel>
+                                                    {/*<InfoPopup
+                                                        info={t("tcpPortsDescription")}
+                                                    />*/}
+                                                    <Select
+                                                        value={tcpPortMode}
+                                                        onValueChange={(value: PortMode) => {
+                                                            setTcpPortMode(value);
+                                                        }}
+                                                    >
+                                                        <SelectTrigger className="w-[110px]">
+                                                            <SelectValue />
+                                                        </SelectTrigger>
+                                                        <SelectContent>
+                                                            <SelectItem value="all">
+                                                                {t("allPorts")}
+                                                            </SelectItem>
+                                                            <SelectItem value="blocked">
+                                                                {t("blocked")}
+                                                            </SelectItem>
+                                                            <SelectItem value="custom">
+                                                                {t("custom")}
+                                                            </SelectItem>
+                                                        </SelectContent>
+                                                    </Select>
+                                                    {tcpPortMode === "custom" ? (
+                                                        <FormControl>
+                                                            <Input
+                                                                placeholder="80,443,8000-9000"
+                                                                value={tcpCustomPorts}
+                                                                onChange={(e) =>
+                                                                    setTcpCustomPorts(e.target.value)
+                                                                }
+                                                                className="flex-1"
+                                                            />
+                                                        </FormControl>
+                                                    ) : (
+                                                        <Input
+                                                            disabled
+                                                            placeholder={
+                                                                tcpPortMode === "all"
+                                                                    ? t("allPortsAllowed")
+                                                                    : t("allPortsBlocked")
+                                                            }
+                                                            className="flex-1"
+                                                        />
+                                                    )}
+                                                </div>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    {/* UDP Ports */}
+                                    <FormField
+                                        control={form.control}
+                                        name="udpPortRangeString"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <div className="flex items-center gap-2">
+                                                    <FormLabel className="min-w-10">
+                                                        UDP
+                                                    </FormLabel>
+                                                    {/*<InfoPopup
+                                                        info={t("udpPortsDescription")}
+                                                    />*/}
+                                                    <Select
+                                                        value={udpPortMode}
+                                                        onValueChange={(value: PortMode) => {
+                                                            setUdpPortMode(value);
+                                                        }}
+                                                    >
+                                                        <SelectTrigger className="w-[110px]">
+                                                            <SelectValue />
+                                                        </SelectTrigger>
+                                                        <SelectContent>
+                                                            <SelectItem value="all">
+                                                                {t("allPorts")}
+                                                            </SelectItem>
+                                                            <SelectItem value="blocked">
+                                                                {t("blocked")}
+                                                            </SelectItem>
+                                                            <SelectItem value="custom">
+                                                                {t("custom")}
+                                                            </SelectItem>
+                                                        </SelectContent>
+                                                    </Select>
+                                                    {udpPortMode === "custom" ? (
+                                                        <FormControl>
+                                                            <Input
+                                                                placeholder="53,123,500-600"
+                                                                value={udpCustomPorts}
+                                                                onChange={(e) =>
+                                                                    setUdpCustomPorts(e.target.value)
+                                                                }
+                                                                className="flex-1"
+                                                            />
+                                                        </FormControl>
+                                                    ) : (
+                                                        <Input
+                                                            disabled
+                                                            placeholder={
+                                                                udpPortMode === "all"
+                                                                    ? t("allPortsAllowed")
+                                                                    : t("allPortsBlocked")
+                                                            }
+                                                            className="flex-1"
+                                                        />
+                                                    )}
+                                                </div>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+
+                                    {/* ICMP Toggle */}
+                                    <FormField
+                                        control={form.control}
+                                        name="disableIcmp"
+                                        render={({ field }) => (
+                                            <FormItem>
+                                                <div className="flex items-center gap-2">
+                                                    <FormLabel className="min-w-10">
+                                                        ICMP
+                                                    </FormLabel>
+                                                    <FormControl>
+                                                        <Switch
+                                                            checked={!field.value}
+                                                            onCheckedChange={(checked) => field.onChange(!checked)}
+                                                        />
+                                                    </FormControl>
+                                                    <span className="text-sm text-muted-foreground">
+                                                        {field.value ? t("blocked") : t("allowed")}
+                                                    </span>
+                                                </div>
+                                                <FormMessage />
+                                            </FormItem>
+                                        )}
+                                    />
+                                </div>
+                            </div>
+
                             {/* Access Control Section */}
                             <div>
                                 <h3 className="text-lg font-semibold mb-4">

src/components/InvitationsTable.tsx

@@ -182,7 +182,7 @@ export default function InvitationsTable({
                     setSelectedInvitation(null);
                 }}
                 dialog={
-                    <div>
+                    <div className="space-y-2">
                         <p>{t("inviteQuestionRemove")}</p>
                         <p>{t("inviteMessageRemove")}</p>
                     </div>

src/components/LayoutSidebar.tsx

@@ -25,6 +25,7 @@ import { useEffect, useState } from "react";
 import { FaGithub } from "react-icons/fa";
 import SidebarLicenseButton from "./SidebarLicenseButton";
 import { SidebarSupportButton } from "./SidebarSupportButton";
+import { is } from "drizzle-orm";
 
 const ProductUpdates = dynamic(() => import("./ProductUpdates"), {
     ssr: false
@@ -52,7 +53,7 @@ export function LayoutSidebar({
     const pathname = usePathname();
     const isAdminPage = pathname?.startsWith("/admin");
     const { user } = useUserContext();
-    const { isUnlocked } = useLicenseStatusContext();
+    const { isUnlocked, licenseStatus } = useLicenseStatusContext();
     const { env } = useEnvContext();
     const t = useTranslations();
 
@@ -226,6 +227,18 @@ export function LayoutSidebar({
                                         <FaGithub size={12} />
                                     </Link>
                                 </div>
+                                {build === "enterprise" &&
+                                isUnlocked() &&
+                                licenseStatus?.tier === "personal" ? (
+                                    <div className="text-xs text-muted-foreground text-center">
+                                        {t("personalUseOnly")}
+                                    </div>
+                                ) : null}
+                                {build === "enterprise" && !isUnlocked() ? (
+                                    <div className="text-xs text-muted-foreground text-center">
+                                        {t("unlicensed")}
+                                    </div>
+                                ) : null}
                                 {env?.app?.version && (
                                     <div className="text-xs text-muted-foreground text-center">
                                         <Link

src/components/LogAnalyticsData.tsx

@@ -1,22 +1,27 @@
 "use client";
 
-import { useEnvContext } from "@app/hooks/useEnvContext";
-import { createApiClient } from "@app/lib/api";
+import { cn } from "@app/lib/cn";
 import {
     logAnalyticsFiltersSchema,
     logQueries,
     resourceQueries
 } from "@app/lib/queries";
 import { useQuery } from "@tanstack/react-query";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useState } from "react";
-import { Card, CardContent, CardHeader } from "./ui/card";
 import { LoaderIcon, RefreshCw, XIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { DateRangePicker, type DateTimeValue } from "./DateTimePicker";
 import { Button } from "./ui/button";
-import { cn } from "@app/lib/cn";
-import { useTranslations } from "next-intl";
+import { Card, CardContent, CardHeader } from "./ui/card";
 
+import { countryCodeToFlagEmoji } from "@app/lib/countryCodeToFlagEmoji";
+import {
+    InfoSection,
+    InfoSectionContent,
+    InfoSections,
+    InfoSectionTitle
+} from "./InfoSection";
+import { Label } from "./ui/label";
 import {
     Select,
     SelectContent,
@@ -24,23 +29,10 @@ import {
     SelectTrigger,
     SelectValue
 } from "./ui/select";
-import { Label } from "./ui/label";
 import { Separator } from "./ui/separator";
-import {
-    InfoSection,
-    InfoSectionContent,
-    InfoSections,
-    InfoSectionTitle
-} from "./InfoSection";
 import { WorldMap } from "./WorldMap";
-import { countryCodeToFlagEmoji } from "@app/lib/countryCodeToFlagEmoji";
 
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipProvider,
-    TooltipTrigger
-} from "./ui/tooltip";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
 import {
     ChartContainer,
     ChartLegend,
@@ -49,7 +41,13 @@ import {
     ChartTooltipContent,
     type ChartConfig
 } from "./ui/chart";
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from "./ui/tooltip";
+import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
 
 export type AnalyticsContentProps = {
     orgId: string;
@@ -67,17 +65,18 @@ export function LogAnalyticsData(props: AnalyticsContentProps) {
     const isEmptySearchParams =
         !filters.resourceId && !filters.timeStart && !filters.timeEnd;
 
-    const env = useEnvContext();
-    const [api] = useState(() => createApiClient(env));
     const router = useRouter();
 
+    console.log({ filters });
     const dateRange = {
-        startDate: filters.timeStart ? new Date(filters.timeStart) : undefined,
-        endDate: filters.timeEnd ? new Date(filters.timeEnd) : undefined
+        startDate: filters.timeStart
+            ? new Date(filters.timeStart)
+            : getSevenDaysAgo(),
+        endDate: filters.timeEnd ? new Date(filters.timeEnd) : new Date()
     };
 
     const { data: resources = [], isFetching: isFetchingResources } = useQuery(
-        resourceQueries.listNamesPerOrg(props.orgId, api)
+        resourceQueries.listNamesPerOrg(props.orgId)
     );
 
     const {
@@ -88,7 +87,6 @@ export function LogAnalyticsData(props: AnalyticsContentProps) {
     } = useQuery(
         logQueries.requestAnalytics({
             orgId: props.orgId,
-            api,
             filters
         })
     );

src/components/LogDataTable.tsx

@@ -1,16 +1,5 @@
 "use client";
 
-import {
-    ColumnDef,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-    getPaginationRowModel,
-    SortingState,
-    getSortedRowModel,
-    ColumnFiltersState,
-    getFilteredRowModel
-} from "@tanstack/react-table";
 import {
     Table,
     TableBody,
@@ -19,29 +8,36 @@ import {
     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";
+import { Button } from "@app/components/ui/button";
+import { Card, CardContent, CardHeader } from "@app/components/ui/card";
+import {
+    ColumnDef,
+    ColumnFiltersState,
+    flexRender,
+    getCoreRowModel,
+    getFilteredRowModel,
+    getPaginationRowModel,
+    getSortedRowModel,
+    SortingState,
+    useReactTable
+} from "@tanstack/react-table";
+import {
+    ChevronDown,
+    ChevronRight,
+    Download,
+    Loader,
+    RefreshCw
+} from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useState, useEffect, useMemo } from "react";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger
+} from "./ui/tooltip";
 
 const STORAGE_KEYS = {
     PAGE_SIZE: "datatable-page-size",
@@ -400,15 +396,28 @@ export function LogDataTable<TData, TValue>({
                             </Button>
                         )}
                         {onExport && (
-                            <Button
-                                onClick={() => !disabled && onExport()}
-                                disabled={isExporting || disabled}
-                            >
-                                <Download
-                                    className={`mr-2 h-4 w-4 ${isExporting ? "animate-spin" : ""}`}
-                                />
-                                {t("exportCsv")}
-                            </Button>
+                            <TooltipProvider>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Button
+                                            onClick={() =>
+                                                !disabled && onExport()
+                                            }
+                                            disabled={isExporting || disabled}
+                                        >
+                                            {isExporting ? (
+                                                <Loader className="mr-2 size-4 animate-spin" />
+                                            ) : (
+                                                <Download className="mr-2 size-4" />
+                                            )}
+                                            {t("exportCsv")}
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {t("exportCsvTooltip")}
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
                         )}
                     </div>
                 </CardHeader>
@@ -533,6 +542,8 @@ export function LogDataTable<TData, TValue>({
                             isServerPagination={isServerPagination}
                             isLoading={isLoading}
                             disabled={disabled}
+                            pageSize={pageSize}
+                            pageIndex={currentPage}
                         />
                     </div>
                 </CardContent>

src/components/MachineClientsTable.tsx

@@ -354,7 +354,7 @@ export default function MachineClientsTable({
                         setSelectedClient(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("deleteClientQuestion")}</p>
                             <p>{t("clientMessageRemove")}</p>
                         </div>

src/components/OrgApiKeysTable.tsx

@@ -189,7 +189,7 @@ export default function OrgApiKeysTable({
                         setSelected(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("apiKeysQuestionRemove")}</p>
 
                             <p>{t("apiKeysMessageRemove")}</p>

src/components/PermissionsSelectBox.tsx

@@ -27,6 +27,7 @@ function getActionsCategories(root: boolean) {
             [t("actionUpdateOrg")]: "updateOrg",
             [t("actionGetOrgUser")]: "getOrgUser",
             [t("actionInviteUser")]: "inviteUser",
+            [t("actionRemoveInvitation")]: "removeInvitation",
             [t("actionListInvitations")]: "listInvitations",
             [t("actionRemoveUser")]: "removeUser",
             [t("actionListUsers")]: "listUsers",

src/components/ProxyResourcesTable.tsx

@@ -535,7 +535,7 @@ export default function ProxyResourcesTable({
                         setSelectedResource(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("resourceQuestionRemove")}</p>
                             <p>{t("resourceMessageRemove")}</p>
                         </div>

src/components/ResourceAuthPortal.tsx

@@ -93,7 +93,7 @@ type ResourceAuthPortalProps = {
 export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
     const router = useRouter();
     const t = useTranslations();
-    const { isUnlocked } = useLicenseStatusContext();
+    const { isUnlocked, licenseStatus } = useLicenseStatusContext();
 
     const getNumMethods = () => {
         let colLength = 0;
@@ -737,6 +737,22 @@ export default function ResourceAuthPortal(props: ResourceAuthPortalProps) {
                             </span>
                         </div>
                     )}
+                    {build === "enterprise" && !isUnlocked() ? (
+                        <div className="text-center mt-2">
+                            <span className="text-sm font-medium text-muted-foreground">
+                                {t("instanceIsUnlicensed")}
+                            </span>
+                        </div>
+                    ) : null}
+                    {build === "enterprise" &&
+                    isUnlocked() &&
+                    licenseStatus?.tier === "personal" ? (
+                        <div className="text-center mt-2">
+                            <span className="text-sm font-medium text-muted-foreground">
+                                {t("loginPageLicenseWatermark")}
+                            </span>
+                        </div>
+                    ) : null}
                 </div>
             ) : (
                 <ResourceAccessDenied />

src/components/SitesTable.tsx

@@ -412,7 +412,7 @@ export default function SitesTable({ sites, orgId }: SitesTableProps) {
                         setSelectedSite(null);
                     }}
                     dialog={
-                        <div className="">
+                        <div className="space-y-2">
                             <p>{t("siteQuestionRemove")}</p>
                             <p>{t("siteMessageRemove")}</p>
                         </div>

src/components/UserDevicesTable.tsx

@@ -401,7 +401,7 @@ export default function UserDevicesTable({ userClients }: ClientTableProps) {
                         setSelectedClient(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("deleteClientQuestion")}</p>
                             <p>{t("clientMessageRemove")}</p>
                         </div>

src/components/UsersTable.tsx

@@ -258,7 +258,7 @@ export default function UsersTable({ users: u }: UsersTableProps) {
                     setSelectedUser(null);
                 }}
                 dialog={
-                    <div>
+                    <div className="space-y-2">
                         <p>{t("userQuestionOrgRemove")}</p>
                         <p>{t("userMessageOrgRemove")}</p>
                     </div>

src/components/ViewDevicesDialog.tsx

@@ -224,7 +224,7 @@ export default function ViewDevicesDialog({
                         }
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>
                                 {t("deviceQuestionRemove") ||
                                     "Are you sure you want to delete this device?"}

src/components/private/OrgIdpTable.tsx

@@ -177,7 +177,7 @@ export default function IdpTable({ idps, orgId }: Props) {
                         setSelectedIdp(null);
                     }}
                     dialog={
-                        <div>
+                        <div className="space-y-2">
                             <p>{t("idpQuestionRemove")}</p>
                             <p>{t("idpMessageRemove")}</p>
                         </div>

src/components/tags/autocomplete.tsx

@@ -308,7 +308,7 @@ export const Autocomplete: React.FC<AutocompleteProps> = ({
                                             role="option"
                                             aria-selected={isSelected}
                                             className={cn(
-                                                "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-accent",
+                                                "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 hover:bg-accent",
                                                 isSelected &&
                                                     "bg-accent text-accent-foreground",
                                                 classStyleProps?.commandItem

src/components/ui/data-table.tsx

@@ -10,7 +10,8 @@ import {
     getSortedRowModel,
     ColumnFiltersState,
     getFilteredRowModel,
-    VisibilityState
+    VisibilityState,
+    PaginationState
 } from "@tanstack/react-table";
 
 // Extended ColumnDef type that includes optional friendlyName for column visibility dropdown
@@ -227,6 +228,10 @@ export function DataTable<TData, TValue>({
     const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(
         initialColumnVisibility
     );
+    const [pagination, setPagination] = useState<PaginationState>({
+        pageIndex: 0,
+        pageSize: pageSize
+    });
     const [activeTab, setActiveTab] = useState<string>(
         defaultTab || tabs?.[0]?.id || ""
     );
@@ -256,6 +261,7 @@ export function DataTable<TData, TValue>({
         getFilteredRowModel: getFilteredRowModel(),
         onGlobalFilterChange: setGlobalFilter,
         onColumnVisibilityChange: setColumnVisibility,
+        onPaginationChange: setPagination,
         initialState: {
             pagination: {
                 pageSize: pageSize,
@@ -267,21 +273,18 @@ export function DataTable<TData, TValue>({
             sorting,
             columnFilters,
             globalFilter,
-            columnVisibility
+            columnVisibility,
+            pagination
         }
     });
 
+    // Persist pageSize to localStorage when it changes
     useEffect(() => {
-        const currentPageSize = table.getState().pagination.pageSize;
-        if (currentPageSize !== pageSize) {
-            table.setPageSize(pageSize);
-
-            // Persist to localStorage if enabled
-            if (persistPageSize) {
-                setStoredPageSize(pageSize, tableId);
-            }
+        if (persistPageSize && pagination.pageSize !== pageSize) {
+            setStoredPageSize(pagination.pageSize, tableId);
+            setPageSize(pagination.pageSize);
         }
-    }, [pageSize, table, persistPageSize, tableId]);
+    }, [pagination.pageSize, persistPageSize, tableId, pageSize]);
 
     useEffect(() => {
         // Persist column visibility to localStorage when it changes
@@ -293,13 +296,17 @@ export function DataTable<TData, TValue>({
     const handleTabChange = (value: string) => {
         setActiveTab(value);
         // Reset to first page when changing tabs
-        table.setPageIndex(0);
+        setPagination((prev) => ({ ...prev, pageIndex: 0 }));
     };
 
     // Enhanced pagination component that updates our local state
     const handlePageSizeChange = (newPageSize: number) => {
+        setPagination((prev) => ({
+            ...prev,
+            pageSize: newPageSize,
+            pageIndex: 0
+        }));
         setPageSize(newPageSize);
-        table.setPageSize(newPageSize);
 
         // Persist immediately when changed
         if (persistPageSize) {
@@ -614,6 +621,8 @@ export function DataTable<TData, TValue>({
                         <DataTablePagination
                             table={table}
                             onPageSizeChange={handlePageSizeChange}
+                            pageSize={pagination.pageSize}
+                            pageIndex={pagination.pageIndex}
                         />
                     </div>
                 </CardContent>

src/components/ui/dialog.tsx

@@ -88,7 +88,7 @@ const DialogTitle = React.forwardRef<
     <DialogPrimitive.Title
         ref={ref}
         className={cn(
-            "text-xl font-semibold leading-none tracking-tight",
+            "text-lg font-semibold leading-none tracking-tight",
             className
         )}
         {...props}

src/lib/getSevenDaysAgo.ts

@@ -0,0 +1,7 @@
+export function getSevenDaysAgo() {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0); // Set to midnight
+    const sevenDaysAgo = new Date(today);
+    sevenDaysAgo.setDate(today.getDate() - 7);
+    return sevenDaysAgo;
+}

src/lib/queries.ts

@@ -180,17 +180,15 @@ export type LogAnalyticsFilters = z.TypeOf<typeof logAnalyticsFiltersSchema>;
 export const logQueries = {
     requestAnalytics: ({
         orgId,
-        filters,
-        api
+        filters
     }: {
         orgId: string;
         filters: LogAnalyticsFilters;
-        api: AxiosInstance;
     }) =>
         queryOptions({
             queryKey: ["REQUEST_LOG_ANALYTICS", orgId, filters] as const,
-            queryFn: async ({ signal }) => {
-                const res = await api.get<
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
                     AxiosResponse<QueryRequestAnalyticsResponse>
                 >(`/org/${orgId}/logs/analytics`, {
                     params: filters,
@@ -240,11 +238,11 @@ export const resourceQueries = {
                 return res.data.data.clients;
             }
         }),
-    listNamesPerOrg: (orgId: string, api: AxiosInstance) =>
+    listNamesPerOrg: (orgId: string) =>
         queryOptions({
             queryKey: ["RESOURCES_NAMES", orgId] as const,
-            queryFn: async ({ signal }) => {
-                const res = await api.get<
+            queryFn: async ({ signal, meta }) => {
+                const res = await meta!.api.get<
                     AxiosResponse<ListResourceNamesResponse>
                 >(`/org/${orgId}/resource-names`, {
                     signal