Add ui for connection logs

messages/en-US.json

@@ -2345,6 +2345,12 @@
     "logRetentionEndOfFollowingYear": "End of following year",
     "actionLogsDescription": "View a history of actions performed in this organization",
     "accessLogsDescription": "View access auth requests for resources in this organization",
+    "connectionLogs": "Connection Logs",
+    "connectionLogsDescription": "View connection logs for tunnels in this organization",
+    "sidebarLogsConnection": "Connection Logs",
+    "sourceAddress": "Source Address",
+    "destinationAddress": "Destination Address",
+    "duration": "Duration",
     "licenseRequiredToUse": "An <enterpriseLicenseLink>Enterprise Edition</enterpriseLicenseLink> license or <pangolinCloudLink>Pangolin Cloud</pangolinCloudLink> is required to use this feature. <bookADemoLink>Book a demo or POC trial</bookADemoLink>.",
     "ossEnterpriseEditionRequired": "The <enterpriseEditionLink>Enterprise Edition</enterpriseEditionLink> is required to use this feature. This feature is also available in <pangolinCloudLink>Pangolin Cloud</pangolinCloudLink>. <bookADemoLink>Book a demo or POC trial</bookADemoLink>.",
     "certResolver": "Certificate Resolver",

server/lib/billing/tierMatrix.ts

@@ -8,6 +8,7 @@ export enum TierFeature {
     LogExport = "logExport",
     AccessLogs = "accessLogs", // set the retention period to none on downgrade
     ActionLogs = "actionLogs", // set the retention period to none on downgrade
+    ConnectionLogs = "connectionLogs",
     RotateCredentials = "rotateCredentials",
     MaintencePage = "maintencePage", // handle downgrade
     DevicePosture = "devicePosture",
@@ -26,6 +27,7 @@ export const tierMatrix: Record<TierFeature, Tier[]> = {
     [TierFeature.LogExport]: ["tier3", "enterprise"],
     [TierFeature.AccessLogs]: ["tier2", "tier3", "enterprise"],
     [TierFeature.ActionLogs]: ["tier2", "tier3", "enterprise"],
+    [TierFeature.ConnectionLogs]: ["tier2", "tier3", "enterprise"],
     [TierFeature.RotateCredentials]: ["tier1", "tier2", "tier3", "enterprise"],
     [TierFeature.MaintencePage]: ["tier1", "tier2", "tier3", "enterprise"],
     [TierFeature.DevicePosture]: ["tier2", "tier3", "enterprise"],

server/private/routers/auditLogs/exportConnectionAuditLog.ts

@@ -0,0 +1,99 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+import { registry } from "@server/openApi";
+import { NextFunction } from "express";
+import { Request, Response } from "express";
+import { OpenAPITags } from "@server/openApi";
+import createHttpError from "http-errors";
+import HttpCode from "@server/types/HttpCode";
+import { fromError } from "zod-validation-error";
+import logger from "@server/logger";
+import {
+    queryConnectionAuditLogsParams,
+    queryConnectionAuditLogsQuery,
+    queryConnection,
+    countConnectionQuery
+} from "./queryConnectionAuditLog";
+import { generateCSV } from "@server/routers/auditLogs/generateCSV";
+import { MAX_EXPORT_LIMIT } from "@server/routers/auditLogs";
+
+registry.registerPath({
+    method: "get",
+    path: "/org/{orgId}/logs/connection/export",
+    description: "Export the connection audit log for an organization as CSV",
+    tags: [OpenAPITags.Logs],
+    request: {
+        query: queryConnectionAuditLogsQuery,
+        params: queryConnectionAuditLogsParams
+    },
+    responses: {}
+});
+
+export async function exportConnectionAuditLogs(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const parsedQuery = queryConnectionAuditLogsQuery.safeParse(req.query);
+        if (!parsedQuery.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedQuery.error)
+                )
+            );
+        }
+
+        const parsedParams = queryConnectionAuditLogsParams.safeParse(req.params);
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error)
+                )
+            );
+        }
+
+        const data = { ...parsedQuery.data, ...parsedParams.data };
+        const [{ count }] = await countConnectionQuery(data);
+        if (count > MAX_EXPORT_LIMIT) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    `Export limit exceeded. Your selection contains ${count} rows, but the maximum is ${MAX_EXPORT_LIMIT} rows. Please select a shorter time range to reduce the data.`
+                )
+            );
+        }
+
+        const baseQuery = queryConnection(data);
+
+        const log = await baseQuery.limit(data.limit).offset(data.offset);
+
+        const csvData = generateCSV(log);
+
+        res.setHeader("Content-Type", "text/csv");
+        res.setHeader(
+            "Content-Disposition",
+            `attachment; filename="connection-audit-logs-${data.orgId}-${Date.now()}.csv"`
+        );
+
+        return res.send(csvData);
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/private/routers/auditLogs/index.ts

@@ -15,3 +15,5 @@ export * from "./queryActionAuditLog";
 export * from "./exportActionAuditLog";
 export * from "./queryAccessAuditLog";
 export * from "./exportAccessAuditLog";
+export * from "./queryConnectionAuditLog";
+export * from "./exportConnectionAuditLog";

server/private/routers/auditLogs/queryConnectionAuditLog.ts

@@ -0,0 +1,378 @@
+/*
+ * This file is part of a proprietary work.
+ *
+ * Copyright (c) 2025 Fossorial, Inc.
+ * All rights reserved.
+ *
+ * This file is licensed under the Fossorial Commercial License.
+ * You may not use this file except in compliance with the License.
+ * Unauthorized use, copying, modification, or distribution is strictly prohibited.
+ *
+ * This file is not licensed under the AGPLv3.
+ */
+
+import {
+    connectionAuditLog,
+    logsDb,
+    siteResources,
+    sites,
+    clients,
+    primaryDb
+} from "@server/db";
+import { registry } from "@server/openApi";
+import { NextFunction } from "express";
+import { Request, Response } from "express";
+import { eq, gt, lt, and, count, desc, inArray } from "drizzle-orm";
+import { OpenAPITags } from "@server/openApi";
+import { z } from "zod";
+import createHttpError from "http-errors";
+import HttpCode from "@server/types/HttpCode";
+import { fromError } from "zod-validation-error";
+import { QueryConnectionAuditLogResponse } from "@server/routers/auditLogs/types";
+import response from "@server/lib/response";
+import logger from "@server/logger";
+import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+
+export const queryConnectionAuditLogsQuery = z.object({
+    // iso string just validate its a parseable date
+    timeStart: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeStart must be a valid ISO date string"
+        })
+        .transform((val) => Math.floor(new Date(val).getTime() / 1000))
+        .prefault(() => getSevenDaysAgo().toISOString())
+        .openapi({
+            type: "string",
+            format: "date-time",
+            description:
+                "Start time as ISO date string (defaults to 7 days ago)"
+        }),
+    timeEnd: z
+        .string()
+        .refine((val) => !isNaN(Date.parse(val)), {
+            error: "timeEnd must be a valid ISO date string"
+        })
+        .transform((val) => Math.floor(new Date(val).getTime() / 1000))
+        .optional()
+        .prefault(() => new Date().toISOString())
+        .openapi({
+            type: "string",
+            format: "date-time",
+            description:
+                "End time as ISO date string (defaults to current time)"
+        }),
+    protocol: z.string().optional(),
+    sourceAddr: z.string().optional(),
+    destAddr: z.string().optional(),
+    clientId: z
+        .string()
+        .optional()
+        .transform(Number)
+        .pipe(z.int().positive())
+        .optional(),
+    siteId: z
+        .string()
+        .optional()
+        .transform(Number)
+        .pipe(z.int().positive())
+        .optional(),
+    siteResourceId: z
+        .string()
+        .optional()
+        .transform(Number)
+        .pipe(z.int().positive())
+        .optional(),
+    userId: z.string().optional(),
+    limit: z
+        .string()
+        .optional()
+        .default("1000")
+        .transform(Number)
+        .pipe(z.int().positive()),
+    offset: z
+        .string()
+        .optional()
+        .default("0")
+        .transform(Number)
+        .pipe(z.int().nonnegative())
+});
+
+export const queryConnectionAuditLogsParams = z.object({
+    orgId: z.string()
+});
+
+export const queryConnectionAuditLogsCombined =
+    queryConnectionAuditLogsQuery.merge(queryConnectionAuditLogsParams);
+type Q = z.infer<typeof queryConnectionAuditLogsCombined>;
+
+function getWhere(data: Q) {
+    return and(
+        gt(connectionAuditLog.startedAt, data.timeStart),
+        lt(connectionAuditLog.startedAt, data.timeEnd),
+        eq(connectionAuditLog.orgId, data.orgId),
+        data.protocol
+            ? eq(connectionAuditLog.protocol, data.protocol)
+            : undefined,
+        data.sourceAddr
+            ? eq(connectionAuditLog.sourceAddr, data.sourceAddr)
+            : undefined,
+        data.destAddr
+            ? eq(connectionAuditLog.destAddr, data.destAddr)
+            : undefined,
+        data.clientId
+            ? eq(connectionAuditLog.clientId, data.clientId)
+            : undefined,
+        data.siteId
+            ? eq(connectionAuditLog.siteId, data.siteId)
+            : undefined,
+        data.siteResourceId
+            ? eq(connectionAuditLog.siteResourceId, data.siteResourceId)
+            : undefined,
+        data.userId
+            ? eq(connectionAuditLog.userId, data.userId)
+            : undefined
+    );
+}
+
+export function queryConnection(data: Q) {
+    return logsDb
+        .select({
+            sessionId: connectionAuditLog.sessionId,
+            siteResourceId: connectionAuditLog.siteResourceId,
+            orgId: connectionAuditLog.orgId,
+            siteId: connectionAuditLog.siteId,
+            clientId: connectionAuditLog.clientId,
+            userId: connectionAuditLog.userId,
+            sourceAddr: connectionAuditLog.sourceAddr,
+            destAddr: connectionAuditLog.destAddr,
+            protocol: connectionAuditLog.protocol,
+            startedAt: connectionAuditLog.startedAt,
+            endedAt: connectionAuditLog.endedAt,
+            bytesTx: connectionAuditLog.bytesTx,
+            bytesRx: connectionAuditLog.bytesRx
+        })
+        .from(connectionAuditLog)
+        .where(getWhere(data))
+        .orderBy(
+            desc(connectionAuditLog.startedAt),
+            desc(connectionAuditLog.id)
+        );
+}
+
+export function countConnectionQuery(data: Q) {
+    const countQuery = logsDb
+        .select({ count: count() })
+        .from(connectionAuditLog)
+        .where(getWhere(data));
+    return countQuery;
+}
+
+async function enrichWithDetails(
+    logs: Awaited<ReturnType<typeof queryConnection>>
+) {
+    // Collect unique IDs from logs
+    const siteResourceIds = [
+        ...new Set(
+            logs
+                .map((log) => log.siteResourceId)
+                .filter((id): id is number => id !== null && id !== undefined)
+        )
+    ];
+    const siteIds = [
+        ...new Set(
+            logs
+                .map((log) => log.siteId)
+                .filter((id): id is number => id !== null && id !== undefined)
+        )
+    ];
+    const clientIds = [
+        ...new Set(
+            logs
+                .map((log) => log.clientId)
+                .filter((id): id is number => id !== null && id !== undefined)
+        )
+    ];
+
+    // Fetch resource details from main database
+    const resourceMap = new Map<
+        number,
+        { name: string; niceId: string }
+    >();
+    if (siteResourceIds.length > 0) {
+        const resourceDetails = await primaryDb
+            .select({
+                siteResourceId: siteResources.siteResourceId,
+                name: siteResources.name,
+                niceId: siteResources.niceId
+            })
+            .from(siteResources)
+            .where(inArray(siteResources.siteResourceId, siteResourceIds));
+
+        for (const r of resourceDetails) {
+            resourceMap.set(r.siteResourceId, {
+                name: r.name,
+                niceId: r.niceId
+            });
+        }
+    }
+
+    // Fetch site details from main database
+    const siteMap = new Map<number, { name: string; niceId: string }>();
+    if (siteIds.length > 0) {
+        const siteDetails = await primaryDb
+            .select({
+                siteId: sites.siteId,
+                name: sites.name,
+                niceId: sites.niceId
+            })
+            .from(sites)
+            .where(inArray(sites.siteId, siteIds));
+
+        for (const s of siteDetails) {
+            siteMap.set(s.siteId, { name: s.name, niceId: s.niceId });
+        }
+    }
+
+    // Fetch client details from main database
+    const clientMap = new Map<number, { name: string }>();
+    if (clientIds.length > 0) {
+        const clientDetails = await primaryDb
+            .select({
+                clientId: clients.clientId,
+                name: clients.name
+            })
+            .from(clients)
+            .where(inArray(clients.clientId, clientIds));
+
+        for (const c of clientDetails) {
+            clientMap.set(c.clientId, { name: c.name });
+        }
+    }
+
+    // Enrich logs with details
+    return logs.map((log) => ({
+        ...log,
+        resourceName: log.siteResourceId
+            ? resourceMap.get(log.siteResourceId)?.name ?? null
+            : null,
+        resourceNiceId: log.siteResourceId
+            ? resourceMap.get(log.siteResourceId)?.niceId ?? null
+            : null,
+        siteName: log.siteId
+            ? siteMap.get(log.siteId)?.name ?? null
+            : null,
+        siteNiceId: log.siteId
+            ? siteMap.get(log.siteId)?.niceId ?? null
+            : null,
+        clientName: log.clientId
+            ? clientMap.get(log.clientId)?.name ?? null
+            : null
+    }));
+}
+
+async function queryUniqueFilterAttributes(
+    timeStart: number,
+    timeEnd: number,
+    orgId: string
+) {
+    const baseConditions = and(
+        gt(connectionAuditLog.startedAt, timeStart),
+        lt(connectionAuditLog.startedAt, timeEnd),
+        eq(connectionAuditLog.orgId, orgId)
+    );
+
+    // Get unique protocols
+    const uniqueProtocols = await logsDb
+        .selectDistinct({
+            protocol: connectionAuditLog.protocol
+        })
+        .from(connectionAuditLog)
+        .where(baseConditions);
+
+    return {
+        protocols: uniqueProtocols
+            .map((row) => row.protocol)
+            .filter((protocol): protocol is string => protocol !== null)
+    };
+}
+
+registry.registerPath({
+    method: "get",
+    path: "/org/{orgId}/logs/connection",
+    description: "Query the connection audit log for an organization",
+    tags: [OpenAPITags.Logs],
+    request: {
+        query: queryConnectionAuditLogsQuery,
+        params: queryConnectionAuditLogsParams
+    },
+    responses: {}
+});
+
+export async function queryConnectionAuditLogs(
+    req: Request,
+    res: Response,
+    next: NextFunction
+): Promise<any> {
+    try {
+        const parsedQuery = queryConnectionAuditLogsQuery.safeParse(req.query);
+        if (!parsedQuery.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedQuery.error)
+                )
+            );
+        }
+        const parsedParams = queryConnectionAuditLogsParams.safeParse(
+            req.params
+        );
+        if (!parsedParams.success) {
+            return next(
+                createHttpError(
+                    HttpCode.BAD_REQUEST,
+                    fromError(parsedParams.error)
+                )
+            );
+        }
+
+        const data = { ...parsedQuery.data, ...parsedParams.data };
+
+        const baseQuery = queryConnection(data);
+
+        const logsRaw = await baseQuery.limit(data.limit).offset(data.offset);
+
+        // Enrich with resource, site, and client details
+        const log = await enrichWithDetails(logsRaw);
+
+        const totalCountResult = await countConnectionQuery(data);
+        const totalCount = totalCountResult[0].count;
+
+        const filterAttributes = await queryUniqueFilterAttributes(
+            data.timeStart,
+            data.timeEnd,
+            data.orgId
+        );
+
+        return response<QueryConnectionAuditLogResponse>(res, {
+            data: {
+                log: log,
+                pagination: {
+                    total: totalCount,
+                    limit: data.limit,
+                    offset: data.offset
+                },
+                filterAttributes
+            },
+            success: true,
+            error: false,
+            message: "Connection audit logs retrieved successfully",
+            status: HttpCode.OK
+        });
+    } catch (error) {
+        logger.error(error);
+        return next(
+            createHttpError(HttpCode.INTERNAL_SERVER_ERROR, "An error occurred")
+        );
+    }
+}

server/private/routers/external.ts

@@ -478,6 +478,25 @@ authenticated.get(
     logs.exportAccessAuditLogs
 );
 
+authenticated.get(
+    "/org/:orgId/logs/connection",
+    verifyValidLicense,
+    verifyValidSubscription(tierMatrix.connectionLogs),
+    verifyOrgAccess,
+    verifyUserHasAction(ActionsEnum.exportLogs),
+    logs.queryConnectionAuditLogs
+);
+
+authenticated.get(
+    "/org/:orgId/logs/connection/export",
+    verifyValidLicense,
+    verifyValidSubscription(tierMatrix.logExport),
+    verifyOrgAccess,
+    verifyUserHasAction(ActionsEnum.exportLogs),
+    logActionAudit(ActionsEnum.exportLogs),
+    logs.exportConnectionAuditLogs
+);
+
 authenticated.post(
     "/re-key/:clientId/regenerate-client-secret",
     verifyClientAccess, // this is first to set the org id

server/private/routers/integration.ts

@@ -91,6 +91,25 @@ authenticated.get(
     logs.exportAccessAuditLogs
 );
 
+authenticated.get(
+    "/org/:orgId/logs/connection",
+    verifyValidLicense,
+    verifyValidSubscription(tierMatrix.connectionLogs),
+    verifyApiKeyOrgAccess,
+    verifyApiKeyHasAction(ActionsEnum.exportLogs),
+    logs.queryConnectionAuditLogs
+);
+
+authenticated.get(
+    "/org/:orgId/logs/connection/export",
+    verifyValidLicense,
+    verifyValidSubscription(tierMatrix.logExport),
+    verifyApiKeyOrgAccess,
+    verifyApiKeyHasAction(ActionsEnum.exportLogs),
+    logActionAudit(ActionsEnum.exportLogs),
+    logs.exportConnectionAuditLogs
+);
+
 authenticated.put(
     "/org/:orgId/idp/oidc",
     verifyValidLicense,

server/routers/auditLogs/types.ts

@@ -91,3 +91,34 @@ export type QueryAccessAuditLogResponse = {
         locations: string[];
     };
 };
+
+export type QueryConnectionAuditLogResponse = {
+    log: {
+        sessionId: string;
+        siteResourceId: number | null;
+        orgId: string | null;
+        siteId: number | null;
+        clientId: number | null;
+        userId: string | null;
+        sourceAddr: string;
+        destAddr: string;
+        protocol: string;
+        startedAt: number;
+        endedAt: number | null;
+        bytesTx: number | null;
+        bytesRx: number | null;
+        resourceName: string | null;
+        resourceNiceId: string | null;
+        siteName: string | null;
+        siteNiceId: string | null;
+        clientName: string | null;
+    }[];
+    pagination: {
+        total: number;
+        limit: number;
+        offset: number;
+    };
+    filterAttributes: {
+        protocols: string[];
+    };
+};

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

@@ -0,0 +1,630 @@
+"use client";
+import { ColumnFilter } from "@app/components/ColumnFilter";
+import { DateTimeValue } from "@app/components/DateTimePicker";
+import { LogDataTable } from "@app/components/LogDataTable";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
+import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
+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 } from "@app/lib/api";
+import { getSevenDaysAgo } from "@app/lib/getSevenDaysAgo";
+import { build } from "@server/build";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { ColumnDef } from "@tanstack/react-table";
+import axios from "axios";
+import { Cable, Monitor, Server } from "lucide-react";
+import { useTranslations } from "next-intl";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, 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";
+    const durationSec = endedAt - startedAt;
+    if (durationSec < 0) return "—";
+    if (durationSec < 60) return `${durationSec}s`;
+    if (durationSec < 3600) {
+        const m = Math.floor(durationSec / 60);
+        const s = durationSec % 60;
+        return `${m}m ${s}s`;
+    }
+    const h = Math.floor(durationSec / 3600);
+    const m = Math.floor((durationSec % 3600) / 60);
+    return `${h}h ${m}m`;
+}
+
+export default function ConnectionLogsPage() {
+    const router = useRouter();
+    const api = createApiClient(useEnvContext());
+    const t = useTranslations();
+    const { orgId } = useParams();
+    const searchParams = useSearchParams();
+
+    const { isPaidUser } = usePaidStatus();
+
+    const [rows, setRows] = useState<any[]>([]);
+    const [isRefreshing, setIsRefreshing] = useState(false);
+    const [isExporting, startTransition] = useTransition();
+    const [filterAttributes, setFilterAttributes] = useState<{
+        protocols: string[];
+    }>({
+        protocols: []
+    });
+
+    // Filter states - unified object for all filters
+    const [filters, setFilters] = useState<{
+        protocol?: string;
+    }>({
+        protocol: searchParams.get("protocol") || 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: {
+                    date: new Date(startParam)
+                },
+                endDate: {
+                    date: new Date(endParam)
+                }
+            };
+        }
+
+        const now = new Date();
+        const lastWeek = getSevenDaysAgo();
+
+        return {
+            startDate: {
+                date: lastWeek
+            },
+            endDate: {
+                date: now
+            }
+        };
+    };
+
+    const [dateRange, setDateRange] = useState<{
+        startDate: DateTimeValue;
+        endDate: DateTimeValue;
+    }>(getDefaultDateRange());
+
+    // Trigger search with default values on component mount
+    useEffect(() => {
+        if (build === "oss") {
+            return;
+        }
+        const defaultRange = getDefaultDateRange();
+        queryDateTime(
+            defaultRange.startDate,
+            defaultRange.endDate,
+            0,
+            pageSize
+        );
+    }, [orgId]); // Re-run if orgId changes
+
+    const handleDateRangeChange = (
+        startDate: DateTimeValue,
+        endDate: DateTimeValue
+    ) => {
+        setDateRange({ startDate, endDate });
+        setCurrentPage(0); // Reset to first page when filtering
+        // put the search params in the url for the time
+        updateUrlParamsForAllFilters({
+            start: startDate.date?.toISOString() || "",
+            end: endDate.date?.toISOString() || ""
+        });
+
+        queryDateTime(startDate, endDate, 0, pageSize);
+    };
+
+    // Handle page changes
+    const handlePageChange = (newPage: number) => {
+        setCurrentPage(newPage);
+        queryDateTime(
+            dateRange.startDate,
+            dateRange.endDate,
+            newPage,
+            pageSize
+        );
+    };
+
+    // Handle page size changes
+    const handlePageSizeChange = (newPageSize: number) => {
+        setPageSize(newPageSize);
+        setCurrentPage(0); // Reset to first page when changing page size
+        queryDateTime(dateRange.startDate, dateRange.endDate, 0, newPageSize);
+    };
+
+    // Handle filter changes generically
+    const handleFilterChange = (
+        filterType: keyof typeof filters,
+        value: string | undefined
+    ) => {
+        // Create new filters object with updated value
+        const newFilters = {
+            ...filters,
+            [filterType]: value
+        };
+
+        setFilters(newFilters);
+        setCurrentPage(0); // Reset to first page when filtering
+
+        // Update URL params
+        updateUrlParamsForAllFilters(newFilters);
+
+        // Trigger new query with updated filters (pass directly to avoid async state issues)
+        queryDateTime(
+            dateRange.startDate,
+            dateRange.endDate,
+            0,
+            pageSize,
+            newFilters
+        );
+    };
+
+    const updateUrlParamsForAllFilters = (
+        newFilters:
+            | typeof filters
+            | {
+                  start: string;
+                  end: string;
+              }
+    ) => {
+        const params = new URLSearchParams(searchParams);
+        Object.entries(newFilters).forEach(([key, value]) => {
+            if (value) {
+                params.set(key, value);
+            } else {
+                params.delete(key);
+            }
+        });
+        router.replace(`?${params.toString()}`, { scroll: false });
+    };
+
+    const queryDateTime = async (
+        startDate: DateTimeValue,
+        endDate: DateTimeValue,
+        page: number = currentPage,
+        size: number = pageSize,
+        filtersParam?: {
+            protocol?: string;
+        }
+    ) => {
+        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: 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()
+                    : undefined,
+                timeEnd: dateRange.endDate?.date
+                    ? new Date(dateRange.endDate.date).toISOString()
+                    : undefined,
+                ...filters
+            };
+
+            const response = await api.get(
+                `/org/${orgId}/logs/connection/export`,
+                {
+                    responseType: "blob",
+                    params
+                }
+            );
+
+            // Create a URL for the blob and trigger a download
+            const url = window.URL.createObjectURL(new Blob([response.data]));
+            const link = document.createElement("a");
+            link.href = url;
+            const epoch = Math.floor(Date.now() / 1000);
+            link.setAttribute(
+                "download",
+                `connection-audit-logs-${orgId}-${epoch}.csv`
+            );
+            document.body.appendChild(link);
+            link.click();
+            link.parentNode?.removeChild(link);
+        } catch (error) {
+            let apiErrorMessage: string | null = null;
+            if (axios.isAxiosError(error) && error.response) {
+                const data = error.response.data;
+
+                if (data instanceof Blob && data.type === "application/json") {
+                    // Parse the Blob as JSON
+                    const text = await data.text();
+                    const errorData = JSON.parse(text);
+                    apiErrorMessage = errorData.message;
+                }
+            }
+            toast({
+                title: t("error"),
+                description: apiErrorMessage ?? t("exportError"),
+                variant: "destructive"
+            });
+        }
+    };
+
+    const columns: ColumnDef<any>[] = [
+        {
+            accessorKey: "startedAt",
+            header: ({ column }) => {
+                return t("timestamp");
+            },
+            cell: ({ row }) => {
+                return (
+                    <div className="whitespace-nowrap">
+                        {new Date(
+                            row.original.startedAt * 1000
+                        ).toLocaleString()}
+                    </div>
+                );
+            }
+        },
+        {
+            accessorKey: "protocol",
+            header: ({ column }) => {
+                return (
+                    <div className="flex items-center gap-2">
+                        <span>{t("protocol")}</span>
+                        <ColumnFilter
+                            options={filterAttributes.protocols.map(
+                                (protocol) => ({
+                                    label: protocol.toUpperCase(),
+                                    value: protocol
+                                })
+                            )}
+                            selectedValue={filters.protocol}
+                            onValueChange={(value) =>
+                                handleFilterChange("protocol", value)
+                            }
+                            searchPlaceholder="Search..."
+                            emptyMessage="None found"
+                        />
+                    </div>
+                );
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="whitespace-nowrap font-mono text-xs">
+                        {row.original.protocol?.toUpperCase()}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "resourceName",
+            header: ({ column }) => {
+                return t("resource");
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="whitespace-nowrap">
+                        {row.original.resourceName ?? "—"}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "sourceAddr",
+            header: ({ column }) => {
+                return t("sourceAddress");
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="whitespace-nowrap font-mono text-xs">
+                        {row.original.sourceAddr}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "destAddr",
+            header: ({ column }) => {
+                return t("destinationAddress");
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="whitespace-nowrap font-mono text-xs">
+                        {row.original.destAddr}
+                    </span>
+                );
+            }
+        },
+        {
+            accessorKey: "duration",
+            header: ({ column }) => {
+                return t("duration");
+            },
+            cell: ({ row }) => {
+                return (
+                    <span className="whitespace-nowrap">
+                        {formatDuration(
+                            row.original.startedAt,
+                            row.original.endedAt
+                        )}
+                    </span>
+                );
+            }
+        }
+    ];
+
+    const renderExpandedRow = (row: any) => {
+        return (
+            <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">
+                            <Cable className="h-4 w-4" />
+                            Connection Details
+                        </div>
+                        <div>
+                            <strong>Session ID:</strong>{" "}
+                            <span className="font-mono">
+                                {row.sessionId ?? "—"}
+                            </span>
+                        </div>
+                        <div>
+                            <strong>Protocol:</strong>{" "}
+                            {row.protocol?.toUpperCase() ?? "—"}
+                        </div>
+                        <div>
+                            <strong>Source:</strong>{" "}
+                            <span className="font-mono">
+                                {row.sourceAddr ?? "—"}
+                            </span>
+                        </div>
+                        <div>
+                            <strong>Destination:</strong>{" "}
+                            <span className="font-mono">
+                                {row.destAddr ?? "—"}
+                            </span>
+                        </div>
+                        <div>
+                            <strong>Started At:</strong>{" "}
+                            {row.startedAt
+                                ? new Date(
+                                      row.startedAt * 1000
+                                  ).toLocaleString()
+                                : "—"}
+                        </div>
+                        <div>
+                            <strong>Ended At:</strong>{" "}
+                            {row.endedAt
+                                ? new Date(
+                                      row.endedAt * 1000
+                                  ).toLocaleString()
+                                : "Active"}
+                        </div>
+                        <div>
+                            <strong>Duration:</strong>{" "}
+                            {formatDuration(row.startedAt, row.endedAt)}
+                        </div>
+                    </div>
+                    <div className="space-y-2">
+                        <div className="flex items-center gap-1 font-semibold text-sm mb-1">
+                            <Server className="h-4 w-4" />
+                            Resource & Site
+                        </div>
+                        <div>
+                            <strong>Resource:</strong>{" "}
+                            {row.resourceName ?? "—"}
+                            {row.resourceNiceId && (
+                                <span className="text-muted-foreground ml-1">
+                                    ({row.resourceNiceId})
+                                </span>
+                            )}
+                        </div>
+                        <div>
+                            <strong>Site:</strong> {row.siteName ?? "—"}
+                            {row.siteNiceId && (
+                                <span className="text-muted-foreground ml-1">
+                                    ({row.siteNiceId})
+                                </span>
+                            )}
+                        </div>
+                        <div>
+                            <strong>Site ID:</strong> {row.siteId ?? "—"}
+                        </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">
+                            <Monitor className="h-4 w-4" />
+                            Client & Transfer
+                        </div>
+                        <div>
+                            <strong>Client:</strong> {row.clientName ?? "—"}
+                            {row.clientId && (
+                                <span className="text-muted-foreground ml-1">
+                                    (ID: {row.clientId})
+                                </span>
+                            )}
+                        </div>
+                        <div>
+                            <strong>User ID:</strong> {row.userId ?? "—"}
+                        </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>
+            </div>
+        );
+    };
+
+    return (
+        <>
+            <SettingsSectionTitle
+                title={t("connectionLogs")}
+                description={t("connectionLogsDescription")}
+            />
+
+            <PaidFeaturesAlert tiers={tierMatrix.connectionLogs} />
+
+            <LogDataTable
+                columns={columns}
+                data={rows}
+                title={t("connectionLogs")}
+                searchPlaceholder={t("searchLogs")}
+                searchColumn="protocol"
+                onRefresh={refreshData}
+                isRefreshing={isRefreshing}
+                onExport={() => startTransition(exportData)}
+                isExporting={isExporting}
+                onDateRangeChange={handleDateRangeChange}
+                dateRange={{
+                    start: dateRange.startDate,
+                    end: dateRange.endDate
+                }}
+                defaultSort={{
+                    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={
+                    !isPaidUser(tierMatrix.connectionLogs) || build === "oss"
+                }
+            />
+        </>
+    );
+}

src/app/navigation.tsx

@@ -3,6 +3,7 @@ import { Env } from "@app/lib/types/env";
 import { build } from "@server/build";
 import {
     Building2,
+    Cable,
     ChartLine,
     Combine,
     CreditCard,
@@ -189,6 +190,11 @@ export const orgNavSections = (
                                   title: "sidebarLogsAction",
                                   href: "/{orgId}/settings/logs/action",
                                   icon: <Logs className="size-4 flex-none" />
+                              },
+                              {
+                                  title: "sidebarLogsConnection",
+                                  href: "/{orgId}/settings/logs/connection",
+                                  icon: <Cable className="size-4 flex-none" />
                               }
                           ]
                         : [])