Merge pull request #3117 from Fredkiss3/refactor/loading-animation-on-request-logs

feat: Show a loading animation on http request logs table

messages/en-US.json

@@ -1601,17 +1601,7 @@
     "contents": "Contents",
     "parsedContents": "Parsed Contents (Read Only)",
     "enableDockerSocket": "Enable Docker Blueprint",
-    "enableDockerSocketDescription": "Enable Docker Socket label scraping for blueprint labels. Socket path must be provided to the site connector. Read about how this works in <docsLink>the documentation</docsLink>.",
+    "enableDockerSocketDescription": "Enable Docker Socket label scraping for blueprint labels. Socket path must be provided to Newt. Read about how this works in <docsLink>the documentation</docsLink>.",
-    "newtAutoUpdate": "Enable Site Auto-Update",
-    "newtAutoUpdateDescription": "When enabled, site connectors will automatically update to the latest version when a new release is available.",
-    "siteAutoUpdate": "Site Auto-Update",
-    "siteAutoUpdateLabel": "Enable Auto-Update",
-    "siteAutoUpdateDescription": "Control whether this site's connector automatically downloads the latest version.",
-    "siteAutoUpdateOrgDefault": "Organization default: {state}",
-    "siteAutoUpdateOverriding": "Overriding organization setting",
-    "siteAutoUpdateResetToOrg": "Reset to Organization Default",
-    "siteAutoUpdateEnabled": "enabled",
-    "siteAutoUpdateDisabled": "disabled",
     "viewDockerContainers": "View Docker Containers",
     "containersIn": "Containers in {siteName}",
     "selectContainerDescription": "Select any container to use as a hostname for this target. Click a port to use a port.",
@@ -1656,6 +1646,7 @@
     "certificateStatus": "Certificate",
     "certificateStatusAutoRefreshHint": "Status refreshes automatically.",
     "loading": "Loading",
+    "loadingEllipsis": "Loading...",
     "loadingAnalytics": "Loading Analytics",
     "restart": "Restart",
     "domains": "Domains",

server/db/pg/schema/schema.ts

@@ -65,12 +65,7 @@ export const orgs = pgTable("orgs", {
     sshCaPrivateKey: text("sshCaPrivateKey"), // Encrypted SSH CA private key (PEM format)
     sshCaPublicKey: text("sshCaPublicKey"), // SSH CA public key (OpenSSH format)
     isBillingOrg: boolean("isBillingOrg"),
-    billingOrgId: varchar("billingOrgId"),
+    billingOrgId: varchar("billingOrgId")
-    settingsEnableGlobalNewtAutoUpdate: boolean(
-        "settingsEnableGlobalNewtAutoUpdate"
-    )
-        .notNull()
-        .default(false)
 });
 
 export const orgDomains = pgTable("orgDomains", {
@@ -108,10 +103,6 @@ export const sites = pgTable("sites", {
     lastHolePunch: bigint("lastHolePunch", { mode: "number" }),
     listenPort: integer("listenPort"),
     dockerSocketEnabled: boolean("dockerSocketEnabled").notNull().default(true),
-    autoUpdateEnabled: boolean("autoUpdateEnabled").notNull().default(false),
-    autoUpdateOverrideOrg: boolean("autoUpdateOverrideOrg")
-        .notNull()
-        .default(false),
     status: varchar("status")
         .$type<"pending" | "approved">()
         .default("approved")

server/db/sqlite/schema/schema.ts

@@ -62,13 +62,7 @@ export const orgs = sqliteTable("orgs", {
     sshCaPrivateKey: text("sshCaPrivateKey"), // Encrypted SSH CA private key (PEM format)
     sshCaPublicKey: text("sshCaPublicKey"), // SSH CA public key (OpenSSH format)
     isBillingOrg: integer("isBillingOrg", { mode: "boolean" }),
-    billingOrgId: text("billingOrgId"),
+    billingOrgId: text("billingOrgId")
-    settingsEnableGlobalNewtAutoUpdate: integer(
-        "settingsEnableGlobalNewtAutoUpdate",
-        { mode: "boolean" }
-    )
-        .notNull()
-        .default(false)
 });
 
 export const userDomains = sqliteTable("userDomains", {
@@ -122,14 +116,6 @@ export const sites = sqliteTable("sites", {
     dockerSocketEnabled: integer("dockerSocketEnabled", { mode: "boolean" })
         .notNull()
         .default(true),
-    autoUpdateEnabled: integer("autoUpdateEnabled", { mode: "boolean" })
-        .notNull()
-        .default(false),
-    autoUpdateOverrideOrg: integer("autoUpdateOverrideOrg", {
-        mode: "boolean"
-    })
-        .notNull()
-        .default(false),
     status: text("status").$type<"pending" | "approved">().default("approved")
 });
 

server/lib/billing/tierMatrix.ts

@@ -25,8 +25,7 @@ export enum TierFeature {
     StandaloneHealthChecks = "standaloneHealthChecks",
     AlertingRules = "alertingRules",
     WildcardSubdomain = "wildcardSubdomain",
-    Labels = "labels",
+    Labels = "labels"
-    NewtAutoUpdate = "newtAutoUpdate"
 }
 
 export const tierMatrix: Record<TierFeature, Tier[]> = {
@@ -69,6 +68,5 @@ export const tierMatrix: Record<TierFeature, Tier[]> = {
     [TierFeature.DomainNamespaces]: ["tier1", "tier2", "tier3", "enterprise"],
     [TierFeature.StandaloneHealthChecks]: ["tier3", "enterprise"],
     [TierFeature.AlertingRules]: ["tier3", "enterprise"],
-    [TierFeature.WildcardSubdomain]: ["tier1", "tier2", "tier3", "enterprise"],
+    [TierFeature.WildcardSubdomain]: ["tier1", "tier2", "tier3", "enterprise"]
-    [TierFeature.NewtAutoUpdate]: ["tier1", "tier2", "tier3", "enterprise"]
 };

server/lib/cache.ts

@@ -154,8 +154,19 @@ class AdaptiveCache {
     keys(): string[] {
         return localCache.keys();
     }
+
+    /**
+     * Get keys with a specific prefix
+     * @param prefix - Key prefix to match
+     * @returns Array of matching keys
+     */
+    async keysWithPrefix(prefix: string): Promise<string[]> {
+        const allKeys = localCache.keys();
+        return allKeys.filter((key) => key.startsWith(prefix));
+    }
 }
 
 // Export singleton instance
 export const cache = new AdaptiveCache();
+export const regionalCache = cache; // Alias for compatability with the private version
 export default cache;

server/lib/statusHistory.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { db, logsDb, statusHistory } from "@server/db";
 import { and, eq, gte, asc } from "drizzle-orm";
-import { regionalCache as cache } from "@server/private/lib/cache";
+import { regionalCache as cache } from "#dynamic/lib/cache";
 
 const STATUS_HISTORY_CACHE_TTL = 60; // seconds
 

server/private/routers/ws/ws.ts

@@ -522,13 +522,13 @@ const sendToClientLocal = async (
 
     const messageString = JSON.stringify(messageWithVersion);
     if (options.compress) {
-        // logger.debug(
+        logger.debug(
-        //     `Message size before compression: ${messageString.length} bytes`
+            `Message size before compression: ${messageString.length} bytes`
-        // );
+        );
         const compressed = zlib.gzipSync(Buffer.from(messageString, "utf8"));
-        // logger.debug(
+        logger.debug(
-        //     `Message size after compression: ${compressed.length} bytes`
+            `Message size after compression: ${compressed.length} bytes`
-        // );
+        );
         clients.forEach((client) => {
             if (client.readyState === WebSocket.OPEN) {
                 client.send(compressed);

server/routers/external.ts

@@ -1231,22 +1231,6 @@ authRouter.post(
     newt.getNewtToken
 );
 
-authRouter.post(
-    "/newt/version",
-    rateLimit({
-        windowMs: 15 * 60 * 1000,
-        max: 60,
-        keyGenerator: (req) =>
-            `newtVersion:${req.body.newtId || ipKeyGenerator(req.ip || "")}`,
-        handler: (req, res, next) => {
-            const message = `You can only check the Newt version ${60} times every ${15} minutes. Please try again later.`;
-            return next(createHttpError(HttpCode.TOO_MANY_REQUESTS, message));
-        },
-        store: createStore()
-    }),
-    newt.getNewtVersion
-);
-
 authRouter.post(
     "/newt/register",
     rateLimit({

server/routers/newt/getNewtVersion.ts

@@ -1,317 +0,0 @@
-import { db, orgs, sites } from "@server/db";
-import { newts } from "@server/db";
-import { eq } from "drizzle-orm";
-import { NextFunction, Request, Response } from "express";
-import createHttpError from "http-errors";
-import { z } from "zod";
-import { fromError } from "zod-validation-error";
-import semver from "semver";
-import { verifyPassword } from "@server/auth/password";
-import response from "@server/lib/response";
-import HttpCode from "@server/types/HttpCode";
-import logger from "@server/logger";
-import cache from "#dynamic/lib/cache";
-import config from "@server/lib/config";
-
-// Stale-while-revalidate in-memory fallback for the releases API.
-type ReleaseInfo = {
-    version: string;
-    // binary filename -> sha256 hex (sourced from asset `digest` field in GitHub API)
-    assetDigests: Record<string, string>;
-};
-let staleReleaseInfo: ReleaseInfo | null = null;
-
-/**
- * Fetches the latest stable newt release from GitHub and returns the version
- * tag together with a map of asset-name → sha256 hex digest.
- * Results are cached for one hour; stale data is returned on failure.
- */
-async function getLatestReleaseInfo(): Promise<ReleaseInfo | null> {
-    try {
-        const cached = await cache.get<ReleaseInfo>("cache:newtReleaseInfo");
-        if (cached) {
-            return cached;
-        }
-
-        const controller = new AbortController();
-        const timeoutId = setTimeout(() => controller.abort(), 5000);
-
-        const fetchResponse = await fetch(
-            "https://api.github.com/repos/fosrl/newt/releases",
-            { signal: controller.signal }
-        );
-
-        clearTimeout(timeoutId);
-
-        if (!fetchResponse.ok) {
-            logger.warn(
-                `Failed to fetch Newt releases from GitHub: ${fetchResponse.status} ${fetchResponse.statusText}`
-            );
-            return staleReleaseInfo;
-        }
-
-        let releases: any[] = await fetchResponse.json();
-        if (!Array.isArray(releases) || releases.length === 0) {
-            logger.warn("No releases found for Newt repository");
-            return staleReleaseInfo;
-        }
-
-        // Drop drafts, pre-releases, and anything with "rc" in the tag name.
-        releases = releases.filter(
-            (r: any) =>
-                !r.draft &&
-                !r.prerelease &&
-                !r.tag_name.includes("rc") &&
-                !r.tag_name.includes("v")
-        );
-
-        // Sort descending by semver to find the true latest stable release.
-        releases.sort((a: any, b: any) => {
-            const va = semver.coerce(a.tag_name);
-            const vb = semver.coerce(b.tag_name);
-            if (!va && !vb) return 0;
-            if (!va) return 1;
-            if (!vb) return -1;
-            return semver.rcompare(va, vb);
-        });
-
-        if (releases.length === 0) {
-            logger.warn("No stable releases found for Newt repository");
-            return staleReleaseInfo;
-        }
-
-        const latest = releases[0];
-        const version: string = latest.tag_name;
-
-        // Build a map of binary filename → sha256 hex from the asset `digest`
-        // field returned by the GitHub API (format: "sha256:<hex>").
-        const assetDigests: Record<string, string> = {};
-        if (Array.isArray(latest.assets)) {
-            for (const asset of latest.assets) {
-                if (
-                    typeof asset.name === "string" &&
-                    typeof asset.digest === "string" &&
-                    asset.digest.startsWith("sha256:")
-                ) {
-                    assetDigests[asset.name] = asset.digest.slice(
-                        "sha256:".length
-                    );
-                }
-            }
-        }
-
-        const info: ReleaseInfo = { version, assetDigests };
-        staleReleaseInfo = info;
-        await cache.set("cache:newtReleaseInfo", info, 3600);
-        return info;
-    } catch (error: any) {
-        if (error.name === "AbortError") {
-            logger.warn("Request to fetch Newt releases timed out (5s)");
-        } else {
-            logger.warn(
-                "Error fetching Newt releases:",
-                error.message || error
-            );
-        }
-        return staleReleaseInfo;
-    }
-}
-
-const bodySchema = z.object({
-    newtId: z.string(),
-    secret: z.string(),
-    platform: z.string() // e.g. "linux_amd64", "darwin_arm64"
-});
-
-export type GetNewtVersionBody = z.infer<typeof bodySchema>;
-
-export type GetNewtVersionResponse = {
-    latestVersion: string;
-    currentIsLatest: boolean;
-    downloadUrl: string;
-    sha256: string;
-};
-
-export async function getNewtVersion(
-    req: Request,
-    res: Response,
-    next: NextFunction
-): Promise<any> {
-    const parsedBody = bodySchema.safeParse(req.body);
-
-    if (!parsedBody.success) {
-        return next(
-            createHttpError(
-                HttpCode.BAD_REQUEST,
-                fromError(parsedBody.error).toString()
-            )
-        );
-    }
-
-    const { newtId, secret, platform } = parsedBody.data;
-
-    try {
-        // Verify newt credentials
-        const [existingNewt] = await db
-            .select()
-            .from(newts)
-            .where(eq(newts.newtId, newtId))
-            .limit(1);
-
-        if (!existingNewt) {
-            if (config.getRawConfig().app.log_failed_attempts) {
-                logger.info(
-                    `Newt version check: no newt found with ID ${newtId}. IP: ${req.ip}.`
-                );
-            }
-            return next(
-                createHttpError(HttpCode.UNAUTHORIZED, "Invalid credentials")
-            );
-        }
-
-        if (!existingNewt.siteId) {
-            logger.warn(`Newt ${newtId} has no associated site`);
-            return next(
-                createHttpError(
-                    HttpCode.UNAUTHORIZED,
-                    "Not associated with a site"
-                )
-            );
-        }
-
-        const validSecret = await verifyPassword(
-            secret,
-            existingNewt.secretHash
-        );
-        if (!validSecret) {
-            if (config.getRawConfig().app.log_failed_attempts) {
-                logger.info(
-                    `Newt version check: invalid secret for newt ID ${newtId}. IP: ${req.ip}.`
-                );
-            }
-            return next(
-                createHttpError(HttpCode.UNAUTHORIZED, "Invalid credentials")
-            );
-        }
-
-        // check if udpates are enabled for the org or the site
-        const [site] = await db
-            .select()
-            .from(sites)
-            .where(eq(sites.siteId, existingNewt.siteId))
-            .limit(1);
-
-        if (!site) {
-            logger.warn(`Site with ID ${existingNewt.siteId} not found`);
-            return next(
-                createHttpError(
-                    HttpCode.INTERNAL_SERVER_ERROR,
-                    "Associated site not found"
-                )
-            );
-        }
-
-        const [org] = await db
-            .select()
-            .from(orgs)
-            .where(eq(orgs.orgId, site.orgId))
-            .limit(1);
-
-        if (!org) {
-            logger.warn(`Org with ID ${site.orgId} not found`);
-            return next(
-                createHttpError(
-                    HttpCode.INTERNAL_SERVER_ERROR,
-                    "Associated organization not found"
-                )
-            );
-        }
-
-        let doUpdate = false;
-
-        if (site.autoUpdateOverrideOrg) {
-            doUpdate = site.autoUpdateEnabled;
-        } else {
-            doUpdate = org.settingsEnableGlobalNewtAutoUpdate;
-        }
-
-        if (!doUpdate) {
-            // return no content http code
-            return response(res, {
-                data: {
-                    latestVersion: existingNewt.version ?? "",
-                    currentIsLatest: true,
-                    downloadUrl: "",
-                    sha256: ""
-                },
-                success: true,
-                error: false,
-                message:
-                    "Auto-updates are disabled for this site and organization",
-                status: HttpCode.NO_CONTENT
-            });
-        }
-
-        // Fetch latest release info (version + asset digests) in one API call.
-        const releaseInfo = await getLatestReleaseInfo();
-
-        if (!releaseInfo) {
-            return next(
-                createHttpError(
-                    HttpCode.INTERNAL_SERVER_ERROR,
-                    "Unable to determine latest Newt version"
-                )
-            );
-        }
-
-        const latestVersion = releaseInfo.version;
-
-        // Binary name follows the get-newt.sh convention: newt_<platform>[.exe]
-        const binaryName = platform.includes("windows")
-            ? `newt_${platform}.exe`
-            : `newt_${platform}`;
-
-        const downloadUrl = `https://github.com/fosrl/newt/releases/download/${latestVersion}/${binaryName}`;
-
-        // Look up the SHA256 digest for this specific binary from the GitHub
-        // release asset metadata (the `digest` field, format "sha256:<hex>").
-        const sha256 = releaseInfo.assetDigests[binaryName] ?? "";
-
-        // Determine whether the newt that's asking is already up to date.
-        // We store the current version on the newt row when it registers.
-        const currentVersion = existingNewt.version ?? null;
-        let currentIsLatest = false;
-        if (currentVersion) {
-            try {
-                const latest = semver.coerce(latestVersion);
-                const current = semver.coerce(currentVersion);
-                if (latest && current) {
-                    currentIsLatest = !semver.lt(current, latest);
-                }
-            } catch {
-                // If we can't compare, assume not latest
-            }
-        }
-
-        return response<GetNewtVersionResponse>(res, {
-            data: {
-                latestVersion,
-                currentIsLatest,
-                downloadUrl,
-                sha256
-            },
-            success: true,
-            error: false,
-            message: "Version info retrieved successfully",
-            status: HttpCode.OK
-        });
-    } catch (e) {
-        logger.error(e);
-        return next(
-            createHttpError(
-                HttpCode.INTERNAL_SERVER_ERROR,
-                "Failed to retrieve version info"
-            )
-        );
-    }
-}

server/routers/newt/index.ts

@@ -1,6 +1,5 @@
 export * from "./createNewt";
 export * from "./getNewtToken";
-export * from "./getNewtVersion";
 export * from "./handleNewtRegisterMessage";
 export * from "./handleReceiveBandwidthMessage";
 export * from "./handleNewtGetConfigMessage";

server/routers/org/updateOrg.ts

@@ -40,8 +40,7 @@ const updateOrgBodySchema = z
         settingsLogRetentionDaysConnection: z
             .number()
             .min(build === "saas" ? 0 : -1)
-            .optional(),
+            .optional()
-        settingsEnableGlobalNewtAutoUpdate: z.boolean().optional()
     })
     .refine((data) => Object.keys(data).length > 0, {
         error: "At least one field must be provided for update"
@@ -119,15 +118,6 @@ export async function updateOrg(
         if (!hasPasswordExpirationFeature) {
             parsedBody.data.passwordExpiryDays = undefined;
         }
-
-        const hasNewtAutoUpdateFeature = await isLicensedOrSubscribed(
-            orgId,
-            tierMatrix[TierFeature.NewtAutoUpdate]
-        );
-        if (!hasNewtAutoUpdateFeature) {
-            parsedBody.data.settingsEnableGlobalNewtAutoUpdate = false; // force it off
-        }
-
         if (build == "saas") {
             const { tier } = await getOrgTierData(orgId);
 
@@ -146,10 +136,8 @@ export async function updateOrg(
 
             if (maxRetentionDays !== null) {
                 if (
-                    parsedBody.data.settingsLogRetentionDaysRequest !==
+                    parsedBody.data.settingsLogRetentionDaysRequest !== undefined &&
-                        undefined &&
+                    parsedBody.data.settingsLogRetentionDaysRequest > maxRetentionDays
-                    parsedBody.data.settingsLogRetentionDaysRequest >
-                        maxRetentionDays
                 ) {
                     return next(
                         createHttpError(
@@ -159,10 +147,8 @@ export async function updateOrg(
                     );
                 }
                 if (
-                    parsedBody.data.settingsLogRetentionDaysAccess !==
+                    parsedBody.data.settingsLogRetentionDaysAccess !== undefined &&
-                        undefined &&
+                    parsedBody.data.settingsLogRetentionDaysAccess > maxRetentionDays
-                    parsedBody.data.settingsLogRetentionDaysAccess >
-                        maxRetentionDays
                 ) {
                     return next(
                         createHttpError(
@@ -172,10 +158,8 @@ export async function updateOrg(
                     );
                 }
                 if (
-                    parsedBody.data.settingsLogRetentionDaysAction !==
+                    parsedBody.data.settingsLogRetentionDaysAction !== undefined &&
-                        undefined &&
+                    parsedBody.data.settingsLogRetentionDaysAction > maxRetentionDays
-                    parsedBody.data.settingsLogRetentionDaysAction >
-                        maxRetentionDays
                 ) {
                     return next(
                         createHttpError(
@@ -185,10 +169,8 @@ export async function updateOrg(
                     );
                 }
                 if (
-                    parsedBody.data.settingsLogRetentionDaysConnection !==
+                    parsedBody.data.settingsLogRetentionDaysConnection !== undefined &&
-                        undefined &&
+                    parsedBody.data.settingsLogRetentionDaysConnection > maxRetentionDays
-                    parsedBody.data.settingsLogRetentionDaysConnection >
-                        maxRetentionDays
                 ) {
                     return next(
                         createHttpError(
@@ -214,9 +196,7 @@ export async function updateOrg(
                 settingsLogRetentionDaysAction:
                     parsedBody.data.settingsLogRetentionDaysAction,
                 settingsLogRetentionDaysConnection:
-                    parsedBody.data.settingsLogRetentionDaysConnection,
+                    parsedBody.data.settingsLogRetentionDaysConnection
-                settingsEnableGlobalNewtAutoUpdate:
-                    parsedBody.data.settingsEnableGlobalNewtAutoUpdate
             })
             .where(eq(orgs.orgId, orgId))
             .returning();

server/routers/site/updateSite.ts

@@ -1,6 +1,6 @@
 import { Request, Response, NextFunction } from "express";
 import { z } from "zod";
-import { db, Site } from "@server/db";
+import { db } from "@server/db";
 import { sites } from "@server/db";
 import { eq, and, ne } from "drizzle-orm";
 import response from "@server/lib/response";
@@ -9,8 +9,7 @@ import createHttpError from "http-errors";
 import logger from "@server/logger";
 import { fromError } from "zod-validation-error";
 import { OpenAPITags, registry } from "@server/openApi";
-import { isLicensedOrSubscribed } from "#dynamic/lib/isLicencedOrSubscribed";
+import { isValidCIDR } from "@server/lib/validators";
-import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
 
 const updateSiteParamsSchema = z.strictObject({
     siteId: z.string().transform(Number).pipe(z.int().positive())
@@ -22,8 +21,18 @@ const updateSiteBodySchema = z
         niceId: z.string().min(1).max(255).optional(),
         dockerSocketEnabled: z.boolean().optional(),
         status: z.enum(["pending", "approved"]).optional(),
-        autoUpdateEnabled: z.boolean().optional(),
+        // remoteSubnets: z.string().optional()
-        autoUpdateOverrideOrg: z.boolean().optional()
+        // subdomain: z
+        //     .string()
+        //     .min(1)
+        //     .max(255)
+        //     .transform((val) => val.toLowerCase())
+        //     .optional()
+        // pubKey: z.string().optional(),
+        // subnet: z.string().optional(),
+        // exitNode: z.number().int().positive().optional(),
+        // megabytesIn: z.number().int().nonnegative().optional(),
+        // megabytesOut: z.number().int().nonnegative().optional(),
     })
     .refine((data) => Object.keys(data).length > 0, {
         error: "At least one field must be provided for update"
@@ -76,24 +85,9 @@ export async function updateSite(
         const { siteId } = parsedParams.data;
         const updateData = parsedBody.data;
 
-        const [existingSite] = await db
-            .select()
-            .from(sites)
-            .where(eq(sites.siteId, siteId))
-            .limit(1);
-
-        if (!existingSite) {
-            return next(
-                createHttpError(
-                    HttpCode.NOT_FOUND,
-                    `Site with ID ${siteId} not found`
-                )
-            );
-        }
-
         // if niceId is provided, check if it's already in use by another site
         if (updateData.niceId) {
-            const [existingSiteNiceIdOverlap] = await db
+            const [existingSite] = await db
                 .select()
                 .from(sites)
                 .where(
@@ -105,7 +99,7 @@ export async function updateSite(
                 )
                 .limit(1);
 
-            if (existingSiteNiceIdOverlap) {
+            if (existingSite) {
                 return next(
                     createHttpError(
                         HttpCode.CONFLICT,
@@ -115,15 +109,6 @@ export async function updateSite(
             }
         }
 
-        const hasNewtAutoUpdateFeature = await isLicensedOrSubscribed(
-            existingSite.orgId,
-            tierMatrix[TierFeature.NewtAutoUpdate]
-        );
-        if (!hasNewtAutoUpdateFeature) {
-            parsedBody.data.autoUpdateEnabled = false; // force it off
-            parsedBody.data.autoUpdateOverrideOrg = false; // force it off
-        }
-
         // // if remoteSubnets is provided, ensure it's a valid comma-separated list of cidrs
         // if (updateData.remoteSubnets) {
         //     const subnets = updateData.remoteSubnets

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

@@ -38,16 +38,11 @@ import { useUserContext } from "@app/hooks/useUserContext";
 import { useTranslations } from "next-intl";
 import { build } from "@server/build";
 import type { OrgContextType } from "@app/contexts/orgContext";
-import { SwitchInput } from "@app/components/SwitchInput";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
-import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 
 // Schema for general organization settings
 const GeneralFormSchema = z.object({
     name: z.string(),
-    subnet: z.string().optional(),
+    subnet: z.string().optional()
-    settingsEnableGlobalNewtAutoUpdate: z.boolean().optional()
 });
 
 export default function GeneralPage() {
@@ -168,24 +163,17 @@ function GeneralSectionForm({ org }: SectionFormProps) {
         resolver: zodResolver(
             GeneralFormSchema.pick({
                 name: true,
-                subnet: true,
+                subnet: true
-                settingsEnableGlobalNewtAutoUpdate: true
             })
         ),
         defaultValues: {
             name: org.name,
-            subnet: org.subnet || "",
+            subnet: org.subnet || "" // Add default value for subnet
-            settingsEnableGlobalNewtAutoUpdate:
-                org.settingsEnableGlobalNewtAutoUpdate ?? false
         },
         mode: "onChange"
     });
     const t = useTranslations();
     const router = useRouter();
-    const { isPaidUser } = usePaidStatus();
-    const hasAutoUpdateFeature = isPaidUser(
-        tierMatrix[TierFeature.NewtAutoUpdate]
-    );
 
     const [, formAction, loadingSave] = useActionState(performSave, null);
     const api = createApiClient(useEnvContext());
@@ -198,9 +186,7 @@ function GeneralSectionForm({ org }: SectionFormProps) {
 
         try {
             const reqData = {
-                name: data.name,
+                name: data.name
-                settingsEnableGlobalNewtAutoUpdate:
-                    data.settingsEnableGlobalNewtAutoUpdate
             } as any;
 
             // Update organization
@@ -208,16 +194,13 @@ function GeneralSectionForm({ org }: SectionFormProps) {
 
             // Update the org context to reflect the change in the info card
             updateOrg({
-                name: data.name,
+                name: data.name
-                settingsEnableGlobalNewtAutoUpdate:
-                    data.settingsEnableGlobalNewtAutoUpdate
             });
 
             toast({
                 title: t("orgUpdated"),
                 description: t("orgUpdatedDescription")
             });
-
             router.refresh();
         } catch (e) {
             toast({
@@ -260,31 +243,6 @@ function GeneralSectionForm({ org }: SectionFormProps) {
                                     </FormItem>
                                 )}
                             />
-
-                            <PaidFeaturesAlert
-                                tiers={tierMatrix.newtAutoUpdate}
-                            />
-                            <FormField
-                                control={form.control}
-                                name="settingsEnableGlobalNewtAutoUpdate"
-                                render={({ field }) => (
-                                    <FormItem>
-                                        <FormControl>
-                                            <SwitchInput
-                                                id="settings-enable-global-newt-auto-update"
-                                                label={t("newtAutoUpdate")}
-                                                checked={field.value}
-                                                onCheckedChange={field.onChange}
-                                                disabled={!hasAutoUpdateFeature}
-                                            />
-                                        </FormControl>
-                                        <FormDescription>
-                                            {t("newtAutoUpdateDescription")}
-                                        </FormDescription>
-                                        <FormMessage />
-                                    </FormItem>
-                                )}
-                            />
                         </form>
                     </Form>
                 </SettingsSectionForm>

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

@@ -1,7 +1,7 @@
 "use client";
 import { Button } from "@app/components/ui/button";
 import { toast } from "@app/hooks/useToast";
-import { useState, useRef, useEffect, useTransition } from "react";
+import { useState, useTransition, useMemo } from "react";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
@@ -20,6 +20,9 @@ import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { logQueries } from "@app/lib/queries";
+import { useQuery } from "@tanstack/react-query";
+import type { QueryAccessAuditLogResponse } from "@server/routers/auditLogs/types";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -30,23 +33,8 @@ export default function GeneralPage() {
 
     const { isPaidUser } = usePaidStatus();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
-    const [filterAttributes, setFilterAttributes] = useState<{
-        actors: string[];
-        resources: {
-            id: number;
-            name: string | null;
-        }[];
-        locations: string[];
-    }>({
-        actors: [],
-        resources: [],
-        locations: []
-    });
 
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         action?: string;
         type?: string;
@@ -61,40 +49,21 @@ export default function GeneralPage() {
         actor: searchParams.get("actor") || undefined
     });
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize("access-audit-logs", 20);
 
-    // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
+                startDate: { date: new Date(startParam) },
-                    date: new Date(startParam)
+                endDate: { date: new Date(endParam) }
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
+            startDate: { date: getSevenDaysAgo() },
-                date: lastWeek
+            endDate: { date: new Date() }
-            },
-            endDate: {
-                date: now
-            }
         };
     };
 
@@ -103,75 +72,95 @@ export default function GeneralPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
+    const queryFilters = useMemo(() => {
-    useEffect(() => {
+        let timeStart: string | undefined;
-        const defaultRange = getDefaultDateRange();
+        let timeEnd: string | undefined;
-        queryDateTime(
+
-            defaultRange.startDate,
+        if (dateRange.startDate?.date) {
-            defaultRange.endDate,
+            const dt = new Date(dateRange.startDate.date);
-            0,
+            if (dateRange.startDate.time) {
-            pageSize
+                const [h, m, s] = dateRange.startDate.time
-        );
+                    .split(":")
-    }, [orgId]); // Re-run if orgId changes
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
+        }
+
+        if (dateRange.endDate?.date) {
+            const dt = new Date(dateRange.endDate.date);
+            if (dateRange.endDate.time) {
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
+                dt.setHours(h, m, s || 0);
+            } else {
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters,
+            resourceId: filters.resourceId
+                ? Number(filters.resourceId)
+                : undefined
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.access({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: isPaidUser(tierMatrix.accessLogs) && build !== "oss"
+    });
+
+    const rows = isLoading ? generateSampleAccessLogs() : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = data?.filterAttributes ?? {
+        actors: [],
+        resources: [],
+        locations: []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
+        setCurrentPage(0);
-        // put the search params in the url for the time
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
+        setCurrentPage(0);
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        // Create new filters object with updated value
+        const newFilters = { ...filters, [filterType]: value };
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
+        setCurrentPage(0);
-
-        // Update URL params
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -193,114 +182,8 @@ export default function GeneralPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: {
-            action?: string;
-            type?: string;
-            resourceId?: string;
-            location?: string;
-            actor?: string;
-        }
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        if (!isPaidUser(tierMatrix.accessLogs) || build === "oss") {
-            console.log(
-                "Access denied: subscription inactive or license locked"
-            );
-            return;
-        }
-
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/access`, { params });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                dateRange.endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
-            // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -316,7 +199,6 @@ export default function GeneralPage() {
                 params
             });
 
-            // Create a URL for the blob and trigger a download
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement("a");
             link.href = url;
@@ -334,7 +216,6 @@ export default function GeneralPage() {
                 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;
@@ -351,7 +232,7 @@ export default function GeneralPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "timestamp",
-            header: ({ column }) => {
+            header: () => {
                 return t("timestamp");
             },
             cell: ({ row }) => {
@@ -366,7 +247,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "action",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("action")}</span>
@@ -379,7 +260,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -396,13 +276,11 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "ip",
-            header: ({ column }) => {
+            header: () => t("ip")
-                return t("ip");
-            }
         },
         {
             accessorKey: "location",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("location")}</span>
@@ -417,7 +295,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("location", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -442,7 +319,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "resourceName",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("resource")}</span>
@@ -455,7 +332,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("resourceId", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -481,7 +357,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "type",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("type")}</span>
@@ -500,7 +376,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("type", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -518,7 +393,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actor",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("actor")}</span>
@@ -531,7 +406,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -559,16 +433,12 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actorId",
-            header: ({ column }) => {
+            header: () => t("actorId"),
-                return t("actorId");
+            cell: ({ row }) => (
-            },
+                <span className="flex items-center gap-1">
-            cell: ({ row }) => {
+                    {row.original.actorId || "-"}
-                return (
+                </span>
-                    <span className="flex items-center gap-1">
+            )
-                        {row.original.actorId || "-"}
-                    </span>
-                );
-            }
         }
     ];
 
@@ -614,13 +484,10 @@ export default function GeneralPage() {
                 columns={columns}
                 data={rows}
                 title={t("accessLogs")}
-                onRefresh={refreshData}
+                onRefresh={() => refetch()}
-                isRefreshing={isRefreshing}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
-                // isExportDisabled={ // not disabling this because the user should be able to click the button and get the feedback about needing to upgrade the plan
-                //     !isPaidUser(tierMatrix.accessLogs) || build === "oss"
-                // }
                 onDateRangeChange={handleDateRangeChange}
                 dateRange={{
                     start: dateRange.startDate,
@@ -630,14 +497,12 @@ export default function GeneralPage() {
                     id: "timestamp",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 pageSize={pageSize}
                 onPageChange={handlePageChange}
                 onPageSizeChange={handlePageSizeChange}
                 isLoading={isLoading}
-                // Row expansion props
                 expandable={true}
                 renderExpandedRow={renderExpandedRow}
                 disabled={!isPaidUser(tierMatrix.accessLogs) || build === "oss"}
@@ -645,3 +510,41 @@ export default function GeneralPage() {
         </>
     );
 }
+
+function generateSampleAccessLogs(): QueryAccessAuditLogResponse["log"] {
+    const locations = ["US", "DE", "GB", "FR", "JP", "CA", "AU"];
+    const types = ["password", "pincode", "login", "whitelistedEmail", "ssh"];
+    const actors = [
+        "alice@example.com",
+        "bob@example.com",
+        "carol@example.com",
+        null
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const action = Math.random() > 0.3;
+        const actor = actors[Math.floor(Math.random() * actors.length)];
+
+        return {
+            timestamp: Math.floor(
+                sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+            ),
+            action,
+            orgId: "sample-org",
+            actorType: actor ? "user" : null,
+            actor,
+            actorId: actor ? `user-${i}` : null,
+            resourceId: Math.floor(Math.random() * 5) + 1,
+            resourceNiceId: `resource-${(i % 3) + 1}`,
+            resourceName: `Resource ${(i % 3) + 1}`,
+            ip: `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
+            location: locations[Math.floor(Math.random() * locations.length)],
+            userAgent: "Mozilla/5.0",
+            metadata: null,
+            type: types[Math.floor(Math.random() * types.length)]
+        };
+    });
+}

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

@@ -10,14 +10,17 @@ import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { logQueries } from "@app/lib/queries";
 import { build } from "@server/build";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { QueryActionAuditLogResponse } from "@server/routers/auditLogs/types";
+import { useQuery } from "@tanstack/react-query";
 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";
+import { useMemo, useState, useTransition } from "react";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -28,18 +31,8 @@ export default function GeneralPage() {
 
     const { isPaidUser } = usePaidStatus();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
-    const [filterAttributes, setFilterAttributes] = useState<{
-        actors: string[];
-        actions: string[];
-    }>({
-        actors: [],
-        actions: []
-    });
 
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         action?: string;
         actor?: string;
@@ -48,40 +41,21 @@ export default function GeneralPage() {
         actor: searchParams.get("actor") || undefined
     });
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize("action-audit-logs", 20);
 
-    // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
+                startDate: { date: new Date(startParam) },
-                    date: new Date(startParam)
+                endDate: { date: new Date(endParam) }
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
+            startDate: { date: getSevenDaysAgo() },
-                date: lastWeek
+            endDate: { date: new Date() }
-            },
-            endDate: {
-                date: now
-            }
         };
     };
 
@@ -90,78 +64,90 @@ export default function GeneralPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
+    const queryFilters = useMemo(() => {
-    useEffect(() => {
+        let timeStart: string | undefined;
-        if (build === "oss") {
+        let timeEnd: string | undefined;
-            return;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
         }
-        const defaultRange = getDefaultDateRange();
+
-        queryDateTime(
+        if (dateRange.endDate?.date) {
-            defaultRange.startDate,
+            const dt = new Date(dateRange.endDate.date);
-            defaultRange.endDate,
+            if (dateRange.endDate.time) {
-            0,
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
-            pageSize
+                dt.setHours(h, m, s || 0);
-        );
+            } else {
-    }, [orgId]); // Re-run if orgId changes
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.action({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: isPaidUser(tierMatrix.actionLogs) && build !== "oss"
+    });
+
+    const rows = isLoading ? generateSampleActionLogs() : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = {
+        actors: data?.filterAttributes?.actors ?? []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
+        setCurrentPage(0);
-        // put the search params in the url for the time
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
+        setCurrentPage(0);
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        // Create new filters object with updated value
+        const newFilters = { ...filters, [filterType]: value };
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
+        setCurrentPage(0);
-
-        // Update URL params
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -183,110 +169,8 @@ export default function GeneralPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: {
-            action?: string;
-            actor?: string;
-        }
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        if (!isPaidUser(tierMatrix.actionLogs)) {
-            console.log(
-                "Access denied: subscription inactive or license locked"
-            );
-            return;
-        }
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/action`, { params });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                dateRange.endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
-            // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -302,7 +186,6 @@ export default function GeneralPage() {
                 params
             });
 
-            // Create a URL for the blob and trigger a download
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement("a");
             link.href = url;
@@ -320,7 +203,6 @@ export default function GeneralPage() {
                 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;
@@ -337,7 +219,7 @@ export default function GeneralPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "timestamp",
-            header: ({ column }) => {
+            header: () => {
                 return t("timestamp");
             },
             cell: ({ row }) => {
@@ -352,22 +234,16 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "action",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("action")}</span>
                         <ColumnFilter
-                            options={filterAttributes.actions.map((action) => ({
+                            options={[]}
-                                label:
-                                    action.charAt(0).toUpperCase() +
-                                    action.slice(1),
-                                value: action
-                            }))}
                             selectedValue={filters.action}
                             onValueChange={(value) =>
                                 handleFilterChange("action", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -385,7 +261,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actor",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("actor")}</span>
@@ -398,7 +274,6 @@ export default function GeneralPage() {
                             onValueChange={(value) =>
                                 handleFilterChange("actor", value)
                             }
-                            // placeholder=""
                             searchPlaceholder="Search..."
                             emptyMessage="None found"
                         />
@@ -420,7 +295,7 @@ export default function GeneralPage() {
         },
         {
             accessorKey: "actorId",
-            header: ({ column }) => {
+            header: () => {
                 return t("actorId");
             },
             cell: ({ row }) => {
@@ -469,12 +344,9 @@ export default function GeneralPage() {
                 title={t("actionLogs")}
                 searchPlaceholder={t("searchLogs")}
                 searchColumn="action"
-                onRefresh={refreshData}
+                onRefresh={() => refetch()}
-                isRefreshing={isRefreshing}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
-                // isExportDisabled={ // not disabling this because the user should be able to click the button and get the feedback about needing to upgrade the plan
-                //     !isPaidUser(tierMatrix.logExport) || build === "oss"
-                // }
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
                 dateRange={{
@@ -485,14 +357,12 @@ export default function GeneralPage() {
                     id: "timestamp",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 pageSize={pageSize}
                 onPageChange={handlePageChange}
                 onPageSizeChange={handlePageSizeChange}
                 isLoading={isLoading}
-                // Row expansion props
                 expandable={true}
                 renderExpandedRow={renderExpandedRow}
                 disabled={!isPaidUser(tierMatrix.actionLogs) || build === "oss"}
@@ -500,3 +370,39 @@ export default function GeneralPage() {
         </>
     );
 }
+
+function generateSampleActionLogs(): QueryActionAuditLogResponse["log"] {
+    const actions = [
+        "createResource",
+        "deleteResource",
+        "updateResource",
+        "createSite",
+        "deleteSite",
+        "inviteUser",
+        "removeUser"
+    ];
+    const actors = [
+        "alice@example.com",
+        "bob@example.com",
+        "carol@example.com"
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const actor = actors[Math.floor(Math.random() * actors.length)];
+
+        return {
+            timestamp: Math.floor(
+                sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+            ),
+            action: actions[Math.floor(Math.random() * actions.length)],
+            orgId: "sample-org",
+            actorType: "user",
+            actor,
+            actorId: `user-${i}`,
+            metadata: null
+        };
+    });
+}

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

@@ -9,26 +9,20 @@ import { useEnvContext } from "@app/hooks/useEnvContext";
 import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { toast } from "@app/hooks/useToast";
-import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { createApiClient } from "@app/lib/api";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { logQueries } from "@app/lib/queries";
 import { build } from "@server/build";
 import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import type { QueryConnectionAuditLogResponse } from "@server/routers/auditLogs/types";
+import { useQuery } from "@tanstack/react-query";
 import { ColumnDef } from "@tanstack/react-table";
 import axios from "axios";
 import { ArrowUpRight, Laptop, User } from "lucide-react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { useParams, useRouter, useSearchParams } from "next/navigation";
-import { useEffect, useState, useTransition } from "react";
+import { useMemo, useState, useTransition } from "react";
-
-function formatBytes(bytes: number | null): string {
-    if (bytes === null || bytes === undefined) return "-";
-    if (bytes === 0) return "0 B";
-    const units = ["B", "KB", "MB", "GB", "TB"];
-    const i = Math.floor(Math.log(bytes) / Math.log(1024));
-    const value = bytes / Math.pow(1024, i);
-    return `${value.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
-}
 
 function formatDuration(startedAt: number, endedAt: number | null): string {
     if (endedAt === null || endedAt === undefined) return "Active";
@@ -54,24 +48,8 @@ export default function ConnectionLogsPage() {
 
     const { isPaidUser } = usePaidStatus();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
-    const [filterAttributes, setFilterAttributes] = useState<{
-        protocols: string[];
-        destAddrs: string[];
-        clients: { id: number; name: string }[];
-        resources: { id: number; name: string | null }[];
-        users: { id: string; email: string | null }[];
-    }>({
-        protocols: [],
-        destAddrs: [],
-        clients: [],
-        resources: [],
-        users: []
-    });
 
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         protocol?: string;
         destAddr?: string;
@@ -86,43 +64,24 @@ export default function ConnectionLogsPage() {
         userId: searchParams.get("userId") || undefined
     });
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize(
         "connection-audit-logs",
         20
     );
 
-    // Set default date range to last 7 days
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
+                startDate: { date: new Date(startParam) },
-                    date: new Date(startParam)
+                endDate: { date: new Date(endParam) }
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
+            startDate: { date: getSevenDaysAgo() },
-                date: lastWeek
+            endDate: { date: new Date() }
-            },
-            endDate: {
-                date: now
-            }
         };
     };
 
@@ -131,78 +90,100 @@ export default function ConnectionLogsPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
+    const queryFilters = useMemo(() => {
-    useEffect(() => {
+        let timeStart: string | undefined;
-        if (build === "oss") {
+        let timeEnd: string | undefined;
-            return;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
         }
-        const defaultRange = getDefaultDateRange();
+
-        queryDateTime(
+        if (dateRange.endDate?.date) {
-            defaultRange.startDate,
+            const dt = new Date(dateRange.endDate.date);
-            defaultRange.endDate,
+            if (dateRange.endDate.time) {
-            0,
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
-            pageSize
+                dt.setHours(h, m, s || 0);
-        );
+            } else {
-    }, [orgId]); // Re-run if orgId changes
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters,
+            clientId: filters.clientId ? Number(filters.clientId) : undefined,
+            siteResourceId: filters.siteResourceId
+                ? Number(filters.siteResourceId)
+                : undefined
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.connection({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: isPaidUser(tierMatrix.connectionLogs) && build !== "oss"
+    });
+
+    const rows = isLoading
+        ? generateSampleConnectionLogs()
+        : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = data?.filterAttributes ?? {
+        protocols: [],
+        destAddrs: [],
+        clients: [],
+        resources: [],
+        users: []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
+        setCurrentPage(0);
-        // put the search params in the url for the time
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
+        setCurrentPage(0);
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        // Create new filters object with updated value
+        const newFilters = { ...filters, [filterType]: value };
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
+        setCurrentPage(0);
-
-        // Update URL params
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -224,109 +205,8 @@ export default function ConnectionLogsPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: typeof filters
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        if (!isPaidUser(tierMatrix.connectionLogs)) {
-            console.log(
-                "Access denied: subscription inactive or license locked"
-            );
-            return;
-        }
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/connection`, {
-                params
-            });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched connection logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: formatAxiosError(error),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                dateRange.endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
-            // Prepare query params for export
             const params: any = {
                 timeStart: dateRange.startDate?.date
                     ? new Date(dateRange.startDate.date).toISOString()
@@ -345,7 +225,6 @@ export default function ConnectionLogsPage() {
                 }
             );
 
-            // Create a URL for the blob and trigger a download
             const url = window.URL.createObjectURL(new Blob([response.data]));
             const link = document.createElement("a");
             link.href = url;
@@ -363,7 +242,6 @@ export default function ConnectionLogsPage() {
                 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;
@@ -380,7 +258,7 @@ export default function ConnectionLogsPage() {
     const columns: ColumnDef<any>[] = [
         {
             accessorKey: "startedAt",
-            header: ({ column }) => {
+            header: () => {
                 return t("timestamp");
             },
             cell: ({ row }) => {
@@ -395,7 +273,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "protocol",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("protocol")}</span>
@@ -426,7 +304,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "resourceName",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("resource")}</span>
@@ -467,7 +345,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "clientName",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("client")}</span>
@@ -510,7 +388,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "userEmail",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("user")}</span>
@@ -543,7 +421,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "sourceAddr",
-            header: ({ column }) => {
+            header: () => {
                 return t("sourceAddress");
             },
             cell: ({ row }) => {
@@ -556,7 +434,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "destAddr",
-            header: ({ column }) => {
+            header: () => {
                 return (
                     <div className="flex items-center gap-2">
                         <span>{t("destinationAddress")}</span>
@@ -585,7 +463,7 @@ export default function ConnectionLogsPage() {
         },
         {
             accessorKey: "duration",
-            header: ({ column }) => {
+            header: () => {
                 return t("duration");
             },
             cell: ({ row }) => {
@@ -606,9 +484,6 @@ export default function ConnectionLogsPage() {
             <div className="space-y-4">
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-xs">
                     <div className="space-y-2">
-                        {/*<div className="flex items-center gap-1 font-semibold text-sm mb-1">
-                            Connection Details
-                        </div>*/}
                         <div>
                             <strong>Session ID:</strong>{" "}
                             <span className="font-mono">
@@ -633,18 +508,6 @@ export default function ConnectionLogsPage() {
                         </div>
                     </div>
                     <div className="space-y-2">
-                        {/*<div className="flex items-center gap-1 font-semibold text-sm mb-1">
-                            Resource & Site
-                        </div>*/}
-                        {/*<div>
-                            <strong>Resource:</strong>{" "}
-                            {row.resourceName ?? "-"}
-                            {row.resourceNiceId && (
-                                <span className="text-muted-foreground ml-1">
-                                    ({row.resourceNiceId})
-                                </span>
-                            )}
-                        </div>*/}
                         <div>
                             <strong>Client Endpoint:</strong>{" "}
                             <span className="font-mono">
@@ -680,30 +543,8 @@ export default function ConnectionLogsPage() {
                             <strong>Duration:</strong>{" "}
                             {formatDuration(row.startedAt, row.endedAt)}
                         </div>
-                        {/*<div>
-                            <strong>Resource ID:</strong>{" "}
-                            {row.siteResourceId ?? "-"}
-                        </div>*/}
-                    </div>
-                    <div className="space-y-2">
-                        {/*<div className="flex items-center gap-1 font-semibold text-sm mb-1">
-                            Client & Transfer
-                        </div>*/}
-                        {/*<div>
-                            <strong>Bytes Sent (TX):</strong>{" "}
-                            {formatBytes(row.bytesTx)}
-                        </div>*/}
-                        {/*<div>
-                            <strong>Bytes Received (RX):</strong>{" "}
-                            {formatBytes(row.bytesRx)}
-                        </div>*/}
-                        {/*<div>
-                            <strong>Total Transfer:</strong>{" "}
-                            {formatBytes(
-                                (row.bytesTx ?? 0) + (row.bytesRx ?? 0)
-                            )}
-                        </div>*/}
                     </div>
+                    <div className="space-y-2" />
                 </div>
             </div>
         );
@@ -724,8 +565,8 @@ export default function ConnectionLogsPage() {
                 title={t("connectionLogs")}
                 searchPlaceholder={t("searchLogs")}
                 searchColumn="protocol"
-                onRefresh={refreshData}
+                onRefresh={() => refetch()}
-                isRefreshing={isRefreshing}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
@@ -737,14 +578,12 @@ export default function ConnectionLogsPage() {
                     id: "startedAt",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 pageSize={pageSize}
                 onPageChange={handlePageChange}
                 onPageSizeChange={handlePageSizeChange}
                 isLoading={isLoading}
-                // Row expansion props
                 expandable={true}
                 renderExpandedRow={renderExpandedRow}
                 disabled={
@@ -754,3 +593,49 @@ export default function ConnectionLogsPage() {
         </>
     );
 }
+
+function generateSampleConnectionLogs(): QueryConnectionAuditLogResponse["log"] {
+    const protocols = ["tcp", "udp", "icmp"];
+    const destAddrs = [
+        "10.0.0.1:22",
+        "10.0.0.2:80",
+        "10.0.0.3:443",
+        "192.168.1.10:3306"
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const startedAt = Math.floor(
+            sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+        );
+        const active = Math.random() > 0.3;
+
+        return {
+            sessionId: `session-${i}`,
+            siteResourceId: (i % 3) + 1,
+            orgId: "sample-org",
+            siteId: 1,
+            clientId: (i % 4) + 1,
+            clientEndpoint: `10.0.0.${i + 1}:51820`,
+            userId: i % 2 === 0 ? `user-${i}` : null,
+            sourceAddr: `192.168.1.${i + 1}:${40000 + i}`,
+            destAddr: destAddrs[Math.floor(Math.random() * destAddrs.length)],
+            protocol:
+                protocols[Math.floor(Math.random() * protocols.length)],
+            startedAt,
+            endedAt: active ? null : startedAt + Math.floor(Math.random() * 3600),
+            bytesTx: active ? null : Math.floor(Math.random() * 1024 * 1024),
+            bytesRx: active ? null : Math.floor(Math.random() * 1024 * 1024),
+            resourceName: `Resource ${(i % 3) + 1}`,
+            resourceNiceId: `resource-${(i % 3) + 1}`,
+            siteName: "Sample Site",
+            siteNiceId: "sample-site",
+            clientName: `Client ${(i % 4) + 1}`,
+            clientNiceId: `client-${(i % 4) + 1}`,
+            clientType: i % 2 === 0 ? "user" : "machine",
+            userEmail: i % 2 === 0 ? `user${i}@example.com` : null
+        };
+    });
+}

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

@@ -9,14 +9,17 @@ import { toast } from "@app/hooks/useToast";
 import { createApiClient } from "@app/lib/api";
 import { useTranslations } from "next-intl";
 import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { logQueries } from "@app/lib/queries";
 import { ColumnDef } from "@tanstack/react-table";
+import { useQuery } from "@tanstack/react-query";
 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 { useMemo, useState, useTransition } from "react";
 import { useStoredPageSize } from "@app/hooks/useStoredPageSize";
 import { build } from "@server/build";
+import type { QueryRequestAuditLogResponse } from "@server/routers/auditLogs/types";
 
 export default function GeneralPage() {
     const router = useRouter();
@@ -25,36 +28,11 @@ export default function GeneralPage() {
     const { orgId } = useParams();
     const searchParams = useSearchParams();
 
-    const [rows, setRows] = useState<any[]>([]);
-    const [isRefreshing, setIsRefreshing] = useState(false);
     const [isExporting, startTransition] = useTransition();
 
-    // Pagination state
-    const [totalCount, setTotalCount] = useState<number>(0);
     const [currentPage, setCurrentPage] = useState<number>(0);
-    const [isLoading, setIsLoading] = useState(false);
-
-    // Initialize page size from storage or default
     const [pageSize, setPageSize] = useStoredPageSize("request-audit-logs", 20);
 
-    const [filterAttributes, setFilterAttributes] = useState<{
-        actors: string[];
-        resources: {
-            id: number;
-            name: string | null;
-        }[];
-        locations: string[];
-        hosts: string[];
-        paths: string[];
-    }>({
-        actors: [],
-        resources: [],
-        locations: [],
-        hosts: [],
-        paths: []
-    });
-
-    // Filter states - unified object for all filters
     const [filters, setFilters] = useState<{
         action?: string;
         resourceId?: string;
@@ -75,32 +53,18 @@ export default function GeneralPage() {
         path: searchParams.get("path") || undefined
     });
 
-    // Set default date range to last 24 hours
     const getDefaultDateRange = () => {
-        // if the time is in the url params, use that instead
         const startParam = searchParams.get("start");
         const endParam = searchParams.get("end");
         if (startParam && endParam) {
             return {
-                startDate: {
+                startDate: { date: new Date(startParam) },
-                    date: new Date(startParam)
+                endDate: { date: new Date(endParam) }
-                },
-                endDate: {
-                    date: new Date(endParam)
-                }
             };
         }
-
-        const now = new Date();
-        const lastWeek = getSevenDaysAgo();
-
         return {
-            startDate: {
+            startDate: { date: getSevenDaysAgo() },
-                date: lastWeek
+            endDate: { date: new Date() }
-            },
-            endDate: {
-                date: now
-            }
         };
     };
 
@@ -109,80 +73,97 @@ export default function GeneralPage() {
         endDate: DateTimeValue;
     }>(getDefaultDateRange());
 
-    // Trigger search with default values on component mount
+    const queryFilters = useMemo(() => {
-    useEffect(() => {
+        let timeStart: string | undefined;
-        if (build === "oss") {
+        let timeEnd: string | undefined;
-            return;
+
+        if (dateRange.startDate?.date) {
+            const dt = new Date(dateRange.startDate.date);
+            if (dateRange.startDate.time) {
+                const [h, m, s] = dateRange.startDate.time
+                    .split(":")
+                    .map(Number);
+                dt.setHours(h, m, s || 0);
+            }
+            timeStart = dt.toISOString();
         }
-        const defaultRange = getDefaultDateRange();
+
-        queryDateTime(
+        if (dateRange.endDate?.date) {
-            defaultRange.startDate,
+            const dt = new Date(dateRange.endDate.date);
-            defaultRange.endDate,
+            if (dateRange.endDate.time) {
-            0,
+                const [h, m, s] = dateRange.endDate.time.split(":").map(Number);
-            pageSize
+                dt.setHours(h, m, s || 0);
-        );
+            } else {
-    }, [orgId]); // Re-run if orgId changes
+                const now = new Date();
+                dt.setHours(
+                    now.getHours(),
+                    now.getMinutes(),
+                    now.getSeconds(),
+                    now.getMilliseconds()
+                );
+            }
+            timeEnd = dt.toISOString();
+        }
+
+        return {
+            timeStart,
+            timeEnd,
+            page: currentPage,
+            pageSize,
+            ...filters,
+            resourceId: filters.resourceId
+                ? Number(filters.resourceId)
+                : undefined
+        };
+    }, [dateRange, currentPage, pageSize, filters]);
+
+    const { data, isFetching, isLoading, refetch } = useQuery({
+        ...logQueries.requests({
+            orgId: orgId as string,
+            filters: queryFilters
+        }),
+        enabled: build !== "oss"
+    });
+
+    const rows = isLoading ? generateSampleRequestLogs() : (data?.log ?? []);
+    const totalCount = data?.pagination?.total ?? 0;
+    const filterAttributes = data?.filterAttributes ?? {
+        actors: [],
+        resources: [],
+        locations: [],
+        hosts: [],
+        paths: []
+    };
 
     const handleDateRangeChange = (
         startDate: DateTimeValue,
         endDate: DateTimeValue
     ) => {
         setDateRange({ startDate, endDate });
-        setCurrentPage(0); // Reset to first page when filtering
+        setCurrentPage(0);
-        // put the search params in the url for the time
         updateUrlParamsForAllFilters({
             start: startDate.date?.toISOString() || "",
             end: endDate.date?.toISOString() || ""
         });
-
-        queryDateTime(startDate, endDate, 0, pageSize);
     };
 
-    // Handle page changes
     const handlePageChange = (newPage: number) => {
         setCurrentPage(newPage);
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            newPage,
-            pageSize
-        );
     };
 
-    // Handle page size changes
     const handlePageSizeChange = (newPageSize: number) => {
         setPageSize(newPageSize);
-        setCurrentPage(0); // Reset to first page when changing page size
+        setCurrentPage(0);
-        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
     };
 
-    // Handle filter changes generically
     const handleFilterChange = (
         filterType: keyof typeof filters,
         value: string | undefined
     ) => {
-        console.log(`${filterType} filter changed:`, value);
+        const newFilters = { ...filters, [filterType]: value };
-
-        // Create new filters object with updated value
-        const newFilters = {
-            ...filters,
-            [filterType]: value
-        };
-
         setFilters(newFilters);
-        setCurrentPage(0); // Reset to first page when filtering
+        setCurrentPage(0);
-
-        // Update URL params
         updateUrlParamsForAllFilters(newFilters);
-
-        // Trigger new query with updated filters (pass directly to avoid async state issues)
-        queryDateTime(
-            dateRange.startDate,
-            dateRange.endDate,
-            0,
-            pageSize,
-            newFilters
-        );
     };
 
     const updateUrlParamsForAllFilters = (
@@ -204,101 +185,6 @@ export default function GeneralPage() {
         router.replace(`?${params.toString()}`, { scroll: false });
     };
 
-    const queryDateTime = async (
-        startDate: DateTimeValue,
-        endDate: DateTimeValue,
-        page: number = currentPage,
-        size: number = pageSize,
-        filtersParam?: {
-            action?: string;
-            type?: string;
-        }
-    ) => {
-        console.log("Date range changed:", { startDate, endDate, page, size });
-        setIsLoading(true);
-
-        try {
-            // Use the provided filters or fall back to current state
-            const activeFilters = filtersParam || filters;
-
-            // Convert the date/time values to API parameters
-            const params: any = {
-                limit: size,
-                offset: page * size,
-                ...activeFilters
-            };
-
-            if (startDate?.date) {
-                const startDateTime = new Date(startDate.date);
-                if (startDate.time) {
-                    const [hours, minutes, seconds] = startDate.time
-                        .split(":")
-                        .map(Number);
-                    startDateTime.setHours(hours, minutes, seconds || 0);
-                }
-                params.timeStart = startDateTime.toISOString();
-            }
-
-            if (endDate?.date) {
-                const endDateTime = new Date(endDate.date);
-                if (endDate.time) {
-                    const [hours, minutes, seconds] = endDate.time
-                        .split(":")
-                        .map(Number);
-                    endDateTime.setHours(hours, minutes, seconds || 0);
-                } else {
-                    // If no time is specified, set to NOW
-                    const now = new Date();
-                    endDateTime.setHours(
-                        now.getHours(),
-                        now.getMinutes(),
-                        now.getSeconds(),
-                        now.getMilliseconds()
-                    );
-                }
-                params.timeEnd = endDateTime.toISOString();
-            }
-
-            const res = await api.get(`/org/${orgId}/logs/request`, { params });
-            if (res.status === 200) {
-                setRows(res.data.data.log || []);
-                setTotalCount(res.data.data.pagination?.total || 0);
-                setFilterAttributes(res.data.data.filterAttributes);
-                console.log("Fetched logs:", res.data);
-            }
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("Failed to filter logs"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsLoading(false);
-        }
-    };
-
-    const refreshData = async () => {
-        console.log("Data refreshed");
-        setIsRefreshing(true);
-        try {
-            // Refresh data with current date range and pagination
-            await queryDateTime(
-                dateRange.startDate,
-                dateRange.endDate,
-                currentPage,
-                pageSize
-            );
-        } catch (error) {
-            toast({
-                title: t("error"),
-                description: t("refreshError"),
-                variant: "destructive"
-            });
-        } finally {
-            setIsRefreshing(false);
-        }
-    };
-
     const exportData = async () => {
         try {
             // Prepare query params for export
@@ -781,8 +667,8 @@ export default function GeneralPage() {
                 title={t("requestLogs")}
                 searchPlaceholder={t("searchLogs")}
                 searchColumn="host"
-                onRefresh={refreshData}
+                onRefresh={() => refetch()}
-                isRefreshing={isRefreshing}
+                isRefreshing={isFetching}
                 onExport={() => startTransition(exportData)}
                 isExporting={isExporting}
                 onDateRangeChange={handleDateRangeChange}
@@ -794,7 +680,6 @@ export default function GeneralPage() {
                     id: "timestamp",
                     desc: true
                 }}
-                // Server-side pagination props
                 totalCount={totalCount}
                 currentPage={currentPage}
                 onPageChange={handlePageChange}
@@ -808,3 +693,63 @@ export default function GeneralPage() {
         </>
     );
 }
+
+function generateSampleRequestLogs(): QueryRequestAuditLogResponse["log"] {
+    const methods = ["GET", "POST", "PUT", "DELETE", "PATCH"];
+    const paths = [
+        "/api/v1/users",
+        "/dashboard",
+        "/settings",
+        "/health",
+        "/metrics"
+    ];
+    const hosts = ["app.example.com", "api.example.com", "admin.example.com"];
+    const locations = ["US", "DE", "GB", "FR", "JP", "CA", "AU"];
+    const allowedReasons = [100, 101, 102, 103, 104, 105, 106, 107, 108];
+    const deniedReasons = [201, 202, 203, 204, 205, 299];
+    const actors = [
+        "alice@example.com",
+        "bob@example.com",
+        "carol@example.com",
+        null
+    ];
+
+    const now = Math.floor(Date.now() / 1000);
+    const sevenDaysAgo = now - 7 * 24 * 60 * 60;
+
+    return Array.from({ length: 10 }, (_, i) => {
+        const action = Math.random() > 0.3;
+        const reason = action
+            ? allowedReasons[Math.floor(Math.random() * allowedReasons.length)]
+            : deniedReasons[Math.floor(Math.random() * deniedReasons.length)];
+        const actor = actors[Math.floor(Math.random() * actors.length)];
+
+        return {
+            timestamp: Math.floor(
+                sevenDaysAgo + Math.random() * (now - sevenDaysAgo)
+            ),
+            action,
+            reason,
+            orgId: "sample-org",
+            actorType: actor ? "user" : null,
+            actor,
+            actorId: actor ? `user-${i}` : null,
+            resourceId: Math.floor(Math.random() * 5) + 1,
+            siteResourceId: null,
+            resourceNiceId: `resource-${(i % 3) + 1}`,
+            resourceName: `Resource ${(i % 3) + 1}`,
+            ip: `${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
+            location: locations[Math.floor(Math.random() * locations.length)],
+            userAgent: "Mozilla/5.0",
+            metadata: null,
+            headers: null,
+            query: null,
+            originalRequestURL: null,
+            scheme: "https",
+            host: hosts[Math.floor(Math.random() * hosts.length)],
+            path: paths[Math.floor(Math.random() * paths.length)],
+            method: methods[Math.floor(Math.random() * methods.length)],
+            tls: true
+        };
+    });
+}

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

@@ -36,53 +36,35 @@ import { useState } from "react";
 import { SwitchInput } from "@app/components/SwitchInput";
 import { ExternalLink } from "lucide-react";
 import { useTranslations } from "next-intl";
-import { useOrgContext } from "@app/hooks/useOrgContext";
-import { usePaidStatus } from "@app/hooks/usePaidStatus";
-import { tierMatrix, TierFeature } from "@server/lib/billing/tierMatrix";
-import { Button as ButtonUI } from "@/components/ui/button";
-import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 
 const GeneralFormSchema = z.object({
     name: z.string().nonempty("Name is required"),
     niceId: z.string().min(1).max(255).optional(),
-    dockerSocketEnabled: z.boolean().optional(),
+    dockerSocketEnabled: z.boolean().optional()
-    autoUpdateEnabled: z.boolean().optional(),
-    autoUpdateOverrideOrg: z.boolean().optional()
 });
 
 type GeneralFormValues = z.infer<typeof GeneralFormSchema>;
 
 export default function GeneralPage() {
     const { site, updateSite } = useSiteContext();
-    const { org } = useOrgContext();
 
     const { env } = useEnvContext();
     const api = createApiClient(useEnvContext());
     const router = useRouter();
     const t = useTranslations();
     const { toast } = useToast();
-    const { isPaidUser } = usePaidStatus();
-    const hasAutoUpdateFeature = isPaidUser(
-        tierMatrix[TierFeature.NewtAutoUpdate]
-    );
 
     const [loading, setLoading] = useState(false);
     const [activeCidrTagIndex, setActiveCidrTagIndex] = useState<number | null>(
         null
     );
 
-    const orgAutoUpdate = org.org.settingsEnableGlobalNewtAutoUpdate ?? false;
-
     const form = useForm({
         resolver: zodResolver(GeneralFormSchema),
         defaultValues: {
             name: site?.name,
             niceId: site?.niceId || "",
-            dockerSocketEnabled: site?.dockerSocketEnabled ?? false,
+            dockerSocketEnabled: site?.dockerSocketEnabled ?? false
-            autoUpdateEnabled: site?.autoUpdateOverrideOrg
-                ? (site?.autoUpdateEnabled ?? false)
-                : orgAutoUpdate,
-            autoUpdateOverrideOrg: site?.autoUpdateOverrideOrg ?? false
         },
         mode: "onChange"
     });
@@ -94,17 +76,13 @@ export default function GeneralPage() {
             await api.post(`/site/${site?.siteId}`, {
                 name: data.name,
                 niceId: data.niceId,
-                dockerSocketEnabled: data.dockerSocketEnabled,
+                dockerSocketEnabled: data.dockerSocketEnabled
-                autoUpdateEnabled: data.autoUpdateEnabled,
-                autoUpdateOverrideOrg: data.autoUpdateOverrideOrg
             });
 
             updateSite({
                 name: data.name,
                 niceId: data.niceId,
-                dockerSocketEnabled: data.dockerSocketEnabled,
+                dockerSocketEnabled: data.dockerSocketEnabled
-                autoUpdateEnabled: data.autoUpdateEnabled,
-                autoUpdateOverrideOrg: data.autoUpdateOverrideOrg
             });
 
             if (data.niceId && data.niceId !== site?.niceId) {
@@ -221,9 +199,7 @@ export default function GeneralPage() {
                                                     {t.rich(
                                                         "enableDockerSocketDescription",
                                                         {
-                                                            docsLink: (
+                                                            docsLink: (chunks) => (
-                                                                chunks
-                                                            ) => (
                                                                 <a
                                                                     href="https://docs.pangolin.net/manage/sites/configure-site#docker-socket-integration"
                                                                     target="_blank"
@@ -241,80 +217,6 @@ export default function GeneralPage() {
                                         )}
                                     />
                                 )}
-
-                                <PaidFeaturesAlert
-                                    tiers={tierMatrix.newtAutoUpdate}
-                                />
-                                {site && site.type === "newt" && (
-                                    <FormField
-                                        control={form.control}
-                                        name="autoUpdateEnabled"
-                                        render={({ field }) => {
-                                            const isOverriding = form.watch(
-                                                "autoUpdateOverrideOrg"
-                                            );
-                                            return (
-                                                <FormItem>
-                                                    <FormControl>
-                                                        <div className="flex items-center gap-3">
-                                                            <SwitchInput
-                                                                id="auto-update-enabled"
-                                                                label={t(
-                                                                    "siteAutoUpdateLabel"
-                                                                )}
-                                                                checked={
-                                                                    field.value
-                                                                }
-                                                                onCheckedChange={(
-                                                                    checked
-                                                                ) => {
-                                                                    field.onChange(
-                                                                        checked
-                                                                    );
-                                                                    form.setValue(
-                                                                        "autoUpdateOverrideOrg",
-                                                                        true
-                                                                    );
-                                                                }}
-                                                                disabled={
-                                                                    !hasAutoUpdateFeature
-                                                                }
-                                                            />
-                                                            {isOverriding && (
-                                                                <ButtonUI
-                                                                    type="button"
-                                                                    variant="link"
-                                                                    size="sm"
-                                                                    className="h-auto p-0 pb-2 text-xs"
-                                                                    onClick={() => {
-                                                                        form.setValue(
-                                                                            "autoUpdateOverrideOrg",
-                                                                            false
-                                                                        );
-                                                                        form.setValue(
-                                                                            "autoUpdateEnabled",
-                                                                            orgAutoUpdate
-                                                                        );
-                                                                    }}
-                                                                >
-                                                                    {t(
-                                                                        "siteAutoUpdateResetToOrg"
-                                                                    )}
-                                                                </ButtonUI>
-                                                            )}
-                                                        </div>
-                                                    </FormControl>
-                                                    <FormDescription>
-                                                        {t(
-                                                            "siteAutoUpdateDescription"
-                                                        )}
-                                                    </FormDescription>
-                                                    <FormMessage />
-                                                </FormItem>
-                                            );
-                                        }}
-                                    />
-                                )}
                             </form>
                         </Form>
                     </SettingsSectionForm>

src/app/[orgId]/settings/sites/[niceId]/layout.tsx

@@ -1,8 +1,6 @@
 import SiteProvider from "@app/providers/SiteProvider";
-import OrgProvider from "@app/providers/OrgProvider";
 import { internal } from "@app/lib/api";
 import { GetSiteResponse } from "@server/routers/site";
-import { GetOrgResponse } from "@server/routers/org";
 import { AxiosResponse } from "axios";
 import { redirect } from "next/navigation";
 import { authCookieHeader } from "@app/lib/api/cookies";
@@ -37,17 +35,6 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
         redirect(`/${params.orgId}/settings/sites`);
     }
 
-    let org = null;
-    try {
-        const res = await internal.get<AxiosResponse<GetOrgResponse>>(
-            `/org/${params.orgId}`,
-            await authCookieHeader()
-        );
-        org = res.data.data;
-    } catch {
-        redirect(`/${params.orgId}/settings/sites`);
-    }
-
     const t = await getTranslations();
 
     const navItems = [
@@ -77,14 +64,10 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
             />
 
             <SiteProvider site={site}>
-                <OrgProvider org={org}>
+                <div className="space-y-4">
-                    <div className="space-y-4">
+                    <SiteInfoCard />
-                        <SiteInfoCard />
+                    <HorizontalTabs items={navItems}>{children}</HorizontalTabs>
-                        <HorizontalTabs items={navItems}>
+                </div>
-                            {children}
-                        </HorizontalTabs>
-                    </div>
-                </OrgProvider>
             </SiteProvider>
         </>
     );

src/components/LogDataTable.tsx

@@ -28,6 +28,7 @@ import {
     ChevronRight,
     Download,
     Loader,
+    LoaderIcon,
     RefreshCw
 } from "lucide-react";
 import { useTranslations } from "next-intl";
@@ -427,7 +428,7 @@ export function LogDataTable<TData, TValue>({
                         )}
                     </div>
                 </CardHeader>
-                <CardContent>
+                <CardContent className="relative">
                     <Table>
                         <TableHeader>
                             {table.getHeaderGroups().map((headerGroup) => (
@@ -535,6 +536,19 @@ export function LogDataTable<TData, TValue>({
                             )}
                         </TableBody>
                     </Table>
+
+                    {isLoading && (
+                        <>
+                            <div className="backdrop-blur-[3px] z-10 absolute inset-0 top-10"></div>
+                            <div className="absolute z-20 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 border border-border rounded-md bg-muted">
+                                <div className="flex items-center gap-2 p-6">
+                                    <LoaderIcon className="size-4 animate-spin" />
+                                    {t("loadingEllipsis")}
+                                </div>
+                            </div>
+                        </>
+                    )}
+
                     <div className="mt-4">
                         <DataTablePagination
                             table={table}

src/components/SwitchInput.tsx

@@ -45,16 +45,7 @@ export function SwitchInput({
     return (
         <div>
             <div className="flex items-center space-x-2 mb-2">
-                {label && (
+                {label && <Label htmlFor={id}>{label}</Label>}
-                    <Label
-                        htmlFor={id}
-                        className={
-                            disabled ? "opacity-50 cursor-not-allowed" : ""
-                        }
-                    >
-                        {label}
-                    </Label>
-                )}
                 <Switch
                     id={id}
                     checked={checked}

src/lib/queries.ts

@@ -1,17 +1,25 @@
 import { build } from "@server/build";
+import { StatusHistoryResponse } from "@server/lib/statusHistory";
+import type { ListAlertRulesResponse } from "@server/routers/alertRule/types";
 import type { QueryRequestAnalyticsResponse } from "@server/routers/auditLogs";
+import type {
+    QueryAccessAuditLogResponse,
+    QueryActionAuditLogResponse,
+    QueryConnectionAuditLogResponse,
+    QueryRequestAuditLogResponse
+} from "@server/routers/auditLogs/types";
 import type { ListClientsResponse } from "@server/routers/client";
 import type {
-    ListDomainsResponse,
+    GetDNSRecordsResponse,
-    GetDNSRecordsResponse
+    ListDomainsResponse
 } from "@server/routers/domain";
 import type { GetDomainResponse } from "@server/routers/domain/getDomain";
+import { ListHealthChecksResponse } from "@server/routers/healthChecks/types";
 import type {
     GetResourceWhitelistResponse,
     ListResourceNamesResponse,
     ListResourcesResponse
 } from "@server/routers/resource";
-import type { ListAlertRulesResponse } from "@server/routers/alertRule/types";
 import type { ListRolesResponse } from "@server/routers/role";
 import type { ListSitesResponse } from "@server/routers/site";
 import type {
@@ -31,8 +39,6 @@ import type { AxiosResponse } from "axios";
 import z from "zod";
 import { remote } from "./api";
 import { durationToMs } from "./durationToMs";
-import { ListHealthChecksResponse } from "@server/routers/healthChecks/types";
-import { StatusHistoryResponse } from "@server/lib/statusHistory";
 import type { ListOrgLabelsResponse } from "@server/routers/labels/types";
 
 export type ProductUpdate = {
@@ -589,7 +595,111 @@ export const logAnalyticsFiltersSchema = z.object({
     resourceId: z.coerce.number().optional().catch(undefined)
 });
 
-export type LogAnalyticsFilters = z.TypeOf<typeof logAnalyticsFiltersSchema>;
+export type LogAnalyticsFilters = z.output<typeof logAnalyticsFiltersSchema>;
+
+export const httpLogsFiltersSchema = z.object({
+    timeStart: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeStart must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    timeEnd: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeEnd must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    page: z.coerce.number().optional().catch(0).default(0),
+    pageSize: z.coerce.number().optional().catch(20).default(20),
+    resourceId: z.coerce.number().optional().catch(undefined),
+    action: z.string().optional().catch(undefined),
+    host: z.string().optional().catch(undefined),
+    location: z.string().optional().catch(undefined),
+    actor: z.string().optional().catch(undefined),
+    method: z.string().optional().catch(undefined),
+    reason: z.string().optional().catch(undefined),
+    path: z.string().optional().catch(undefined)
+});
+
+export type HttpLogFilters = z.output<typeof httpLogsFiltersSchema>;
+
+export const accessLogsFiltersSchema = z.object({
+    timeStart: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeStart must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    timeEnd: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeEnd must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    page: z.coerce.number().optional().catch(0).default(0),
+    pageSize: z.coerce.number().optional().catch(20).default(20),
+    resourceId: z.coerce.number().optional().catch(undefined),
+    action: z.string().optional().catch(undefined),
+    location: z.string().optional().catch(undefined),
+    actor: z.string().optional().catch(undefined),
+    type: z.string().optional().catch(undefined)
+});
+
+export type AccessLogFilters = z.output<typeof accessLogsFiltersSchema>;
+
+export const actionLogsFiltersSchema = z.object({
+    timeStart: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeStart must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    timeEnd: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeEnd must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    page: z.coerce.number().optional().catch(0).default(0),
+    pageSize: z.coerce.number().optional().catch(20).default(20),
+    action: z.string().optional().catch(undefined),
+    actor: z.string().optional().catch(undefined)
+});
+
+export type ActionLogFilters = z.output<typeof actionLogsFiltersSchema>;
+
+export const connectionLogsFiltersSchema = z.object({
+    timeStart: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeStart must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    timeEnd: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeEnd must be a valid ISO date string"
+        })
+        .optional()
+        .catch(undefined),
+    page: z.coerce.number().optional().catch(0).default(0),
+    pageSize: z.coerce.number().optional().catch(20).default(20),
+    protocol: z.string().optional().catch(undefined),
+    destAddr: z.string().optional().catch(undefined),
+    clientId: z.coerce.number().optional().catch(undefined),
+    siteResourceId: z.coerce.number().optional().catch(undefined),
+    userId: z.string().optional().catch(undefined)
+});
+
+export type ConnectionLogFilters = z.output<typeof connectionLogsFiltersSchema>;
 
 export const logQueries = {
     requestAnalytics: ({
@@ -600,7 +710,7 @@ export const logQueries = {
         filters: LogAnalyticsFilters;
     }) =>
         queryOptions({
-            queryKey: ["REQUEST_LOG_ANALYTICS", orgId, filters] as const,
+            queryKey: ["REQUEST_LOGS", orgId, "ANALYTICS", filters] as const,
             queryFn: async ({ signal, meta }) => {
                 const res = await meta!.api.get<
                     AxiosResponse<QueryRequestAnalyticsResponse>
@@ -616,6 +726,124 @@ export const logQueries = {
                 }
                 return false;
             }
+        }),
+
+    requests: ({
+        orgId,
+        filters
+    }: {
+        orgId: string;
+        filters: HttpLogFilters;
+    }) =>
+        queryOptions({
+            queryKey: ["REQUEST_LOGS", orgId, "ALL", filters] as const,
+            queryFn: async ({ signal, meta }) => {
+                const { page, pageSize, ...rest } = filters;
+                const res = await meta!.api.get<
+                    AxiosResponse<QueryRequestAuditLogResponse>
+                >(`/org/${orgId}/logs/request`, {
+                    params: {
+                        ...rest,
+                        limit: pageSize,
+                        offset: page * pageSize
+                    },
+                    signal
+                });
+                return res.data.data;
+            },
+            refetchInterval: (query) => {
+                if (query.state.data) {
+                    return durationToMs(30, "seconds");
+                }
+                return false;
+            }
+        }),
+
+    access: ({ orgId, filters }: { orgId: string; filters: AccessLogFilters }) =>
+        queryOptions({
+            queryKey: ["ACCESS_LOGS", orgId, "ALL", filters] as const,
+            queryFn: async ({ signal, meta }) => {
+                const { page, pageSize, ...rest } = filters;
+                const res = await meta!.api.get<
+                    AxiosResponse<QueryAccessAuditLogResponse>
+                >(`/org/${orgId}/logs/access`, {
+                    params: {
+                        ...rest,
+                        limit: pageSize,
+                        offset: page * pageSize
+                    },
+                    signal
+                });
+                return res.data.data;
+            },
+            refetchInterval: (query) => {
+                if (query.state.data) {
+                    return durationToMs(30, "seconds");
+                }
+                return false;
+            }
+        }),
+
+    action: ({
+        orgId,
+        filters
+    }: {
+        orgId: string;
+        filters: ActionLogFilters;
+    }) =>
+        queryOptions({
+            queryKey: ["ACTION_LOGS", orgId, "ALL", filters] as const,
+            queryFn: async ({ signal, meta }) => {
+                const { page, pageSize, ...rest } = filters;
+                const res = await meta!.api.get<
+                    AxiosResponse<QueryActionAuditLogResponse>
+                >(`/org/${orgId}/logs/action`, {
+                    params: {
+                        ...rest,
+                        limit: pageSize,
+                        offset: page * pageSize
+                    },
+                    signal
+                });
+                return res.data.data;
+            },
+            refetchInterval: (query) => {
+                if (query.state.data) {
+                    return durationToMs(30, "seconds");
+                }
+                return false;
+            }
+        }),
+
+    connection: ({
+        orgId,
+        filters
+    }: {
+        orgId: string;
+        filters: ConnectionLogFilters;
+    }) =>
+        queryOptions({
+            queryKey: ["CONNECTION_LOGS", orgId, "ALL", filters] as const,
+            queryFn: async ({ signal, meta }) => {
+                const { page, pageSize, ...rest } = filters;
+                const res = await meta!.api.get<
+                    AxiosResponse<QueryConnectionAuditLogResponse>
+                >(`/org/${orgId}/logs/connection`, {
+                    params: {
+                        ...rest,
+                        limit: pageSize,
+                        offset: page * pageSize
+                    },
+                    signal
+                });
+                return res.data.data;
+            },
+            refetchInterval: (query) => {
+                if (query.state.data) {
+                    return durationToMs(30, "seconds");
+                }
+                return false;
+            }
         })
 };