From 31db8ff6cb93bb0affc3f57800652c18a70c6f70 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Mon, 9 Feb 2026 17:54:15 +0530 Subject: [PATCH 1/6] feat(audit-logs): move Audit Logs page --- .../src/pages/audit-logs/AuditLogsPage.tsx | 19 ++++++ .../admin/src/pages/audit-logs/list/index.ts | 1 - web/apps/admin/src/routes.tsx | 4 +- web/apps/admin/vite.config.ts | 9 +++ web/lib/admin/assets/icons/CpuChipIcon.tsx | 22 +++++++ web/lib/admin/assets/icons/JsonIcon.tsx | 27 +++++++++ web/lib/admin/assets/icons/KeyIcon.tsx | 21 +++++++ web/lib/admin/assets/icons/MapIcon.tsx | 21 +++++++ web/lib/admin/assets/images/system.jpg | Bin 0 -> 3010 bytes web/lib/admin/index.ts | 1 + web/lib/admin/utils/helper.ts | 7 +++ .../admin/views/audit-logs}/actor-cell.tsx | 6 +- .../views/audit-logs/audit-logs.module.css} | 0 .../admin/views/audit-logs}/columns.tsx | 6 +- .../admin/views/audit-logs/index.tsx} | 21 ++++--- .../admin/views/audit-logs}/navbar.tsx | 29 ++++----- .../views/audit-logs}/sidepanel-details.tsx | 10 ++-- .../views/audit-logs}/sidepanel-list-id.tsx | 2 +- .../views/audit-logs}/sidepanel-list-link.tsx | 2 +- .../audit-logs}/sidepanel-log-dialog.tsx | 6 +- .../admin/views}/audit-logs/util.ts | 0 web/lib/package.json | 8 ++- web/lib/tsup.config.ts | 10 +++- web/pnpm-lock.yaml | 55 +++++++++++++++++- 24 files changed, 236 insertions(+), 51 deletions(-) create mode 100644 web/apps/admin/src/pages/audit-logs/AuditLogsPage.tsx delete mode 100644 web/apps/admin/src/pages/audit-logs/list/index.ts create mode 100644 web/lib/admin/assets/icons/CpuChipIcon.tsx create mode 100644 web/lib/admin/assets/icons/JsonIcon.tsx create mode 100644 web/lib/admin/assets/icons/KeyIcon.tsx create mode 100644 web/lib/admin/assets/icons/MapIcon.tsx create mode 100644 web/lib/admin/assets/images/system.jpg rename web/{apps/admin/src/pages/audit-logs/list => lib/admin/views/audit-logs}/actor-cell.tsx (85%) rename web/{apps/admin/src/pages/audit-logs/list/list.module.css => lib/admin/views/audit-logs/audit-logs.module.css} (100%) rename web/{apps/admin/src/pages/audit-logs/list => lib/admin/views/audit-logs}/columns.tsx (95%) rename web/{apps/admin/src/pages/audit-logs/list/list.tsx => lib/admin/views/audit-logs/index.tsx} (89%) rename web/{apps/admin/src/pages/audit-logs/list => lib/admin/views/audit-logs}/navbar.tsx (77%) rename web/{apps/admin/src/pages/audit-logs/list => lib/admin/views/audit-logs}/sidepanel-details.tsx (95%) rename web/{apps/admin/src/pages/audit-logs/list => lib/admin/views/audit-logs}/sidepanel-list-id.tsx (91%) rename web/{apps/admin/src/pages/audit-logs/list => lib/admin/views/audit-logs}/sidepanel-list-link.tsx (95%) rename web/{apps/admin/src/pages/audit-logs/list => lib/admin/views/audit-logs}/sidepanel-log-dialog.tsx (90%) rename web/{apps/admin/src/pages => lib/admin/views}/audit-logs/util.ts (100%) diff --git a/web/apps/admin/src/pages/audit-logs/AuditLogsPage.tsx b/web/apps/admin/src/pages/audit-logs/AuditLogsPage.tsx new file mode 100644 index 000000000..3da9940ad --- /dev/null +++ b/web/apps/admin/src/pages/audit-logs/AuditLogsPage.tsx @@ -0,0 +1,19 @@ +import { AuditLogsView } from "@raystack/frontier/admin"; +import { useCallback } from "react"; +import { clients } from "~/connect/clients"; +import { exportCsvFromStream } from "~/utils/helper"; +import type { RQLExportRequest, RQLRequest } from "@raystack/proton/frontier"; + +const adminClient = clients.admin({ useBinary: true }); + +export function AuditLogsPage() { + const onExportCsv = useCallback(async (query: RQLRequest) => { + await exportCsvFromStream( + adminClient.exportAuditRecords, + { query: query as unknown as RQLExportRequest }, + "audit-logs.csv", + ); + }, []); + + return ; +} diff --git a/web/apps/admin/src/pages/audit-logs/list/index.ts b/web/apps/admin/src/pages/audit-logs/list/index.ts deleted file mode 100644 index 629e7b2eb..000000000 --- a/web/apps/admin/src/pages/audit-logs/list/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { AuditLogsList } from "./list"; diff --git a/web/apps/admin/src/routes.tsx b/web/apps/admin/src/routes.tsx index aef9ff2c0..367a9ad31 100644 --- a/web/apps/admin/src/routes.tsx +++ b/web/apps/admin/src/routes.tsx @@ -41,7 +41,7 @@ import { UserDetails } from "./pages/users/details"; import { UserDetailsSecurityPage } from "./pages/users/details/security"; import { InvoicesPage } from "./pages/invoices/InvoicesPage"; -import { AuditLogsList } from "./pages/audit-logs/list"; +import { AuditLogsPage } from "./pages/audit-logs/AuditLogsPage"; export default memo(function AppRoutes() { const { isAdmin, isLoading, user } = useContext(AppContext); @@ -82,7 +82,7 @@ export default memo(function AppRoutes() { } /> - } /> + } /> }> } /> diff --git a/web/apps/admin/vite.config.ts b/web/apps/admin/vite.config.ts index 6177c564b..96fdbc078 100644 --- a/web/apps/admin/vite.config.ts +++ b/web/apps/admin/vite.config.ts @@ -1,10 +1,14 @@ import react from "@vitejs/plugin-react-swc"; import dotenv from "dotenv"; +import path from "path"; +import { fileURLToPath } from "url"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; import svgr from "vite-plugin-svgr"; dotenv.config(); +const __dirname = path.dirname(fileURLToPath(import.meta.url)); + // https://vitejs.dev/config/ export default defineConfig(() => { return { @@ -30,6 +34,11 @@ export default defineConfig(() => { allow: [".."], }, }, + resolve: { + alias: { + "react-router-dom": path.resolve(__dirname, "node_modules/react-router-dom"), + }, + }, plugins: [react(), svgr(), tsconfigPaths()], define: { "process.env": process.env, diff --git a/web/lib/admin/assets/icons/CpuChipIcon.tsx b/web/lib/admin/assets/icons/CpuChipIcon.tsx new file mode 100644 index 000000000..dbc3346e2 --- /dev/null +++ b/web/lib/admin/assets/icons/CpuChipIcon.tsx @@ -0,0 +1,22 @@ +import type { SVGProps } from "react"; + +export function CpuChipIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/web/lib/admin/assets/icons/JsonIcon.tsx b/web/lib/admin/assets/icons/JsonIcon.tsx new file mode 100644 index 000000000..801d3f1d0 --- /dev/null +++ b/web/lib/admin/assets/icons/JsonIcon.tsx @@ -0,0 +1,27 @@ +import type { SVGProps } from "react"; + +export function JsonIcon(props: SVGProps) { + return ( + + + + + ); +} diff --git a/web/lib/admin/assets/icons/KeyIcon.tsx b/web/lib/admin/assets/icons/KeyIcon.tsx new file mode 100644 index 000000000..b9795eb90 --- /dev/null +++ b/web/lib/admin/assets/icons/KeyIcon.tsx @@ -0,0 +1,21 @@ +import type { SVGProps } from "react"; + +export function KeyIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/web/lib/admin/assets/icons/MapIcon.tsx b/web/lib/admin/assets/icons/MapIcon.tsx new file mode 100644 index 000000000..5658e9b62 --- /dev/null +++ b/web/lib/admin/assets/icons/MapIcon.tsx @@ -0,0 +1,21 @@ +import type { SVGProps } from "react"; + +export function MapIcon(props: SVGProps) { + return ( + + + + ); +} diff --git a/web/lib/admin/assets/images/system.jpg b/web/lib/admin/assets/images/system.jpg new file mode 100644 index 0000000000000000000000000000000000000000..5fa61ed51d850d3d79091ba099a1cb62790cac26 GIT binary patch literal 3010 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 literal 0 HcmV?d00001 diff --git a/web/lib/admin/index.ts b/web/lib/admin/index.ts index 672a14f2d..03793bf1d 100644 --- a/web/lib/admin/index.ts +++ b/web/lib/admin/index.ts @@ -4,6 +4,7 @@ export { default as RolesView } from "./views/roles"; export { default as InvoicesView } from "./views/invoices"; export { ProductsView, ProductPricesView } from "./views/products/exports"; +export { default as AuditLogsView } from "./views/audit-logs"; // utils exports export { diff --git a/web/lib/admin/utils/helper.ts b/web/lib/admin/utils/helper.ts index 9a1fbfe3b..337ee82f3 100644 --- a/web/lib/admin/utils/helper.ts +++ b/web/lib/admin/utils/helper.ts @@ -10,3 +10,10 @@ export function reduceByKey>( {} as Record ); } + +const ZERO_UUID = "00000000-0000-0000-0000-000000000000" as const; + +export function isZeroUUID(uuid: string) { + if (typeof uuid !== "string") return false; + return uuid.toLowerCase() === ZERO_UUID; +} diff --git a/web/apps/admin/src/pages/audit-logs/list/actor-cell.tsx b/web/lib/admin/views/audit-logs/actor-cell.tsx similarity index 85% rename from web/apps/admin/src/pages/audit-logs/list/actor-cell.tsx rename to web/lib/admin/views/audit-logs/actor-cell.tsx index 2afdfb0cf..f802b2953 100644 --- a/web/apps/admin/src/pages/audit-logs/list/actor-cell.tsx +++ b/web/lib/admin/views/audit-logs/actor-cell.tsx @@ -1,8 +1,8 @@ import { Avatar, Flex, getAvatarColor, Text } from "@raystack/apsara"; import { AuditRecordActor } from "@raystack/proton/frontier"; -import { ACTOR_TYPES, getAuditLogActorName } from "../util"; -import systemIcon from "~/assets/images/system.jpg"; -import KeyIcon from "~/assets/icons/key.svg?react"; +import { ACTOR_TYPES, getAuditLogActorName } from "./util"; +import systemIcon from "../../assets/images/system.jpg"; +import { KeyIcon } from "../../assets/icons/KeyIcon"; type ActorCellProps = { size?: "large" | "small"; diff --git a/web/apps/admin/src/pages/audit-logs/list/list.module.css b/web/lib/admin/views/audit-logs/audit-logs.module.css similarity index 100% rename from web/apps/admin/src/pages/audit-logs/list/list.module.css rename to web/lib/admin/views/audit-logs/audit-logs.module.css diff --git a/web/apps/admin/src/pages/audit-logs/list/columns.tsx b/web/lib/admin/views/audit-logs/columns.tsx similarity index 95% rename from web/apps/admin/src/pages/audit-logs/list/columns.tsx rename to web/lib/admin/views/audit-logs/columns.tsx index db772c824..559cc1241 100644 --- a/web/apps/admin/src/pages/audit-logs/list/columns.tsx +++ b/web/lib/admin/views/audit-logs/columns.tsx @@ -1,6 +1,6 @@ import { Badge, DataTableColumnDef, Flex, Text } from "@raystack/apsara"; import dayjs from "dayjs"; -import styles from "./list.module.css"; +import styles from "./audit-logs.module.css"; import { AuditRecord, AuditRecordActor, @@ -10,8 +10,8 @@ import { isNullTimestamp, TimeStamp, timestampToDate, -} from "~/utils/connect-timestamp"; -import { ACTOR_TYPES, getActionBadgeColor } from "../util"; +} from "../../utils/connect-timestamp"; +import { ACTOR_TYPES, getActionBadgeColor } from "./util"; import { ComponentPropsWithoutRef } from "react"; import ActorCell from "./actor-cell"; diff --git a/web/apps/admin/src/pages/audit-logs/list/list.tsx b/web/lib/admin/views/audit-logs/index.tsx similarity index 89% rename from web/apps/admin/src/pages/audit-logs/list/list.tsx rename to web/lib/admin/views/audit-logs/index.tsx index 0ce68ffed..53262d8eb 100644 --- a/web/apps/admin/src/pages/audit-logs/list/list.tsx +++ b/web/lib/admin/views/audit-logs/index.tsx @@ -8,10 +8,10 @@ import { import { useDebouncedState } from "@raystack/apsara/hooks"; import { useCallback, useMemo, useState } from "react"; import Navbar from "./navbar"; -import styles from "./list.module.css"; +import styles from "./audit-logs.module.css"; import { getColumns } from "./columns"; -import PageTitle from "~/components/page-title"; -import CpuChipIcon from "~/assets/icons/cpu-chip.svg?react"; +import { PageTitle } from "../../components/PageTitle"; +import { CpuChipIcon } from "../../assets/icons/CpuChipIcon"; import { useInfiniteQuery } from "@connectrpc/connect-query"; import { AdminServiceQueries, @@ -27,7 +27,7 @@ import { import { ExclamationTriangleIcon } from "@radix-ui/react-icons"; import SidePanelDetails from "./sidepanel-details"; import { useQueryClient } from "@tanstack/react-query"; -import { AUDIT_LOG_QUERY_KEY } from "../util"; +import { AUDIT_LOG_QUERY_KEY } from "./util"; const NoAuditLogs = () => { return ( @@ -60,7 +60,12 @@ const TRANSFORM_OPTIONS = { }, }; -export const AuditLogsList = () => { +export type AuditLogsViewProps = { + appName?: string; + onExportCsv?: (query: RQLRequest) => Promise; +}; + +export default function AuditLogsView({ appName, onExportCsv }: AuditLogsViewProps = {}) { const queryClient = useQueryClient(); const [tableQuery, setTableQuery] = useDebouncedState<{ query: DataTableQuery; @@ -162,7 +167,7 @@ export const AuditLogsList = () => { console.error("ConnectRPC Error:", error); return ( <> - + } heading="Error Loading Audit Logs" @@ -180,7 +185,7 @@ export const AuditLogsList = () => { return ( <> - + { onLoadMore={handleLoadMore} onRowClick={onRowClick}> - + Promise; } -const Navbar = ({ searchQuery }: NavbarProps) => { +const Navbar = ({ searchQuery, onExportCsv }: NavbarProps) => { const [showSearch, setShowSearch] = useState(searchQuery ? true : false); const [isDownloading, setIsDownloading] = useState(false); const queryClient = useQueryClient(); @@ -32,23 +29,19 @@ const Navbar = ({ searchQuery }: NavbarProps) => { }, []); const onDownloadClick = useCallback(async () => { + if (!onExportCsv) return; try { setIsDownloading(true); const query = queryClient.getQueryData( AUDIT_LOG_QUERY_KEY, - ) as RQLExportRequest; - - await exportCsvFromStream( - adminClient.exportAuditRecords, - { query }, - "audit-logs.csv", - ); + ) as RQLRequest; + await onExportCsv(query); } catch (error) { console.error(error); } finally { setIsDownloading(false); } - }, [queryClient]); + }, [queryClient, onExportCsv]); return ( ); diff --git a/web/apps/admin/src/pages/audit-logs/list/sidepanel-details.tsx b/web/lib/admin/views/audit-logs/sidepanel-details.tsx similarity index 95% rename from web/apps/admin/src/pages/audit-logs/list/sidepanel-details.tsx rename to web/lib/admin/views/audit-logs/sidepanel-details.tsx index cabc519cf..1448913e8 100644 --- a/web/apps/admin/src/pages/audit-logs/list/sidepanel-details.tsx +++ b/web/lib/admin/views/audit-logs/sidepanel-details.tsx @@ -6,16 +6,16 @@ import { TransformIcon, } from "@radix-ui/react-icons"; import { List } from "@raystack/apsara"; -import styles from "./list.module.css"; +import styles from "./audit-logs.module.css"; import { AuditRecord } from "@raystack/proton/frontier"; -import { ACTOR_TYPES } from "../util"; -import { timestampToDate } from "~/utils/connect-timestamp"; +import { ACTOR_TYPES } from "./util"; +import { timestampToDate } from "../../utils/connect-timestamp"; import dayjs from "dayjs"; -import MapIcon from "~/assets/icons/map.svg?react"; +import { MapIcon } from "../../assets/icons/MapIcon"; import SidePanelLogDialog from "./sidepanel-log-dialog"; import ActorCell from "./actor-cell"; import SidepanelListItemLink from "./sidepanel-list-link"; -import { isZeroUUID } from "~/utils/helper"; +import { isZeroUUID } from "../../utils/helper"; import SidepanelListId from "./sidepanel-list-id"; type SidePanelDetailsProps = Partial & { diff --git a/web/apps/admin/src/pages/audit-logs/list/sidepanel-list-id.tsx b/web/lib/admin/views/audit-logs/sidepanel-list-id.tsx similarity index 91% rename from web/apps/admin/src/pages/audit-logs/list/sidepanel-list-id.tsx rename to web/lib/admin/views/audit-logs/sidepanel-list-id.tsx index b6a30ba8a..9d2f82c7f 100644 --- a/web/apps/admin/src/pages/audit-logs/list/sidepanel-list-id.tsx +++ b/web/lib/admin/views/audit-logs/sidepanel-list-id.tsx @@ -1,5 +1,5 @@ import { CopyButton, Flex, List, Text, Tooltip } from "@raystack/apsara"; -import styles from "./list.module.css"; +import styles from "./audit-logs.module.css"; export default function SidepanelListId({ id = "-" }: { id?: string }) { return ( diff --git a/web/apps/admin/src/pages/audit-logs/list/sidepanel-list-link.tsx b/web/lib/admin/views/audit-logs/sidepanel-list-link.tsx similarity index 95% rename from web/apps/admin/src/pages/audit-logs/list/sidepanel-list-link.tsx rename to web/lib/admin/views/audit-logs/sidepanel-list-link.tsx index dc6cbbff4..ce8eccebe 100644 --- a/web/apps/admin/src/pages/audit-logs/list/sidepanel-list-link.tsx +++ b/web/lib/admin/views/audit-logs/sidepanel-list-link.tsx @@ -1,7 +1,7 @@ import { Button, List } from "@raystack/apsara"; import { ReactNode } from "react"; import { Link } from "react-router-dom"; -import styles from "./list.module.css"; +import styles from "./audit-logs.module.css"; type SidepanelListItemLinkProps = { isLink: boolean; diff --git a/web/apps/admin/src/pages/audit-logs/list/sidepanel-log-dialog.tsx b/web/lib/admin/views/audit-logs/sidepanel-log-dialog.tsx similarity index 90% rename from web/apps/admin/src/pages/audit-logs/list/sidepanel-log-dialog.tsx rename to web/lib/admin/views/audit-logs/sidepanel-log-dialog.tsx index 73dd851f5..4e7f8ed63 100644 --- a/web/apps/admin/src/pages/audit-logs/list/sidepanel-log-dialog.tsx +++ b/web/lib/admin/views/audit-logs/sidepanel-log-dialog.tsx @@ -1,8 +1,8 @@ import { Dialog, IconButton, CodeBlock } from "@raystack/apsara"; -import styles from "./list.module.css"; +import styles from "./audit-logs.module.css"; import { AuditRecord } from "@raystack/proton/frontier"; -import { auditLogToJson } from "../util"; -import JsonIcon from "~/assets/icons/json.svg?react"; +import { auditLogToJson } from "./util"; +import { JsonIcon } from "../../assets/icons/JsonIcon"; export default function SidePanelLogDialog(props: Partial) { return ( diff --git a/web/apps/admin/src/pages/audit-logs/util.ts b/web/lib/admin/views/audit-logs/util.ts similarity index 100% rename from web/apps/admin/src/pages/audit-logs/util.ts rename to web/lib/admin/views/audit-logs/util.ts diff --git a/web/lib/package.json b/web/lib/package.json index bb4027793..9707ebc26 100644 --- a/web/lib/package.json +++ b/web/lib/package.json @@ -67,7 +67,7 @@ "devDependencies": { "@jest/globals": "^29.7.0", "@radix-ui/react-icons": "^1.3.2", - "@raystack/apsara": "^0.52.0", + "@raystack/apsara": "^0.56.0", "@raystack/eslint-config": "workspace:^", "@raystack/frontier-tsconfig": "workspace:^", "@size-limit/preset-small-lib": "^8.2.6", @@ -115,12 +115,16 @@ }, "peerDependencies": { "@raystack/apsara": ">=0.30.0", - "react": "^18.2.0" + "react": "^18.2.0", + "react-router-dom": ">=6.0.0" }, "peerDependenciesMeta": { "react": { "optional": true }, + "react-router-dom": { + "optional": true + }, "svelte": { "optional": true }, diff --git a/web/lib/tsup.config.ts b/web/lib/tsup.config.ts index 2250bdb01..15176735b 100644 --- a/web/lib/tsup.config.ts +++ b/web/lib/tsup.config.ts @@ -22,7 +22,7 @@ export default defineConfig(() => [ '.svg': 'dataurl', '.png': 'dataurl' }, - esbuildPlugins: [cssModulesPlugin()] + esbuildPlugins: [cssModulesPlugin({ localsConvention: 'camelCase' })] }, // Hooks APIs { @@ -43,8 +43,12 @@ export default defineConfig(() => [ js: "'use client'" }, format: ['cjs', 'esm'], - external: ['react'], + external: ['react', 'react-router-dom'], dts: true, - esbuildPlugins: [cssModulesPlugin()] + loader: { + '.jpg': 'dataurl', + '.png': 'dataurl' + }, + esbuildPlugins: [cssModulesPlugin({ localsConvention: 'camelCase' })] } ]); diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index cb2336407..20e86f049 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -277,8 +277,8 @@ importers: specifier: ^1.3.2 version: 1.3.2(react@18.3.1) '@raystack/apsara': - specifier: ^0.52.0 - version: 0.52.0(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^0.56.0 + version: 0.56.2(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@raystack/eslint-config': specifier: workspace:^ version: link:../tools/eslint-config @@ -2264,6 +2264,17 @@ packages: '@types/react': optional: true + '@raystack/apsara@0.56.2': + resolution: {integrity: sha512-kAZh+ir2TdXH1s3a/smWFz8Ebhl3kXPzQp8YEKbxUDipw0//jO6QC1R2reZF5FWKZefLmLW0INMw373W9I6cjg==} + engines: {node: '>=22'} + peerDependencies: + '@types/react': ^18 || ^19 + react: ^18 || ^19 + react-dom: ^18 || ^19 + peerDependenciesMeta: + '@types/react': + optional: true + '@raystack/proton@0.1.0-b1687af73f994fa9612a023c850aa97c35735af8': resolution: {integrity: sha512-kKaLa9tESbGQ8cFnB3gfSaPKyOJHqXXIaFGPLKwD9eknwLm4Uu7Uj+3mhY79wDvvTFxSidTl0YkzhzvSPuQphw==} peerDependencies: @@ -2685,6 +2696,12 @@ packages: react: '>=16.8' react-dom: '>=16.8' + '@tanstack/react-virtual@3.13.18': + resolution: {integrity: sha512-dZkhyfahpvlaV0rIKnvQiVoWPyURppl6w4m9IwMDpuIjcJ1sD9YGWrt0wISvgU7ewACXx2Ct46WPgI6qAD4v6A==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + '@tanstack/store@0.5.5': resolution: {integrity: sha512-EOSrgdDAJExbvRZEQ/Xhh9iZchXpMN+ga1Bnk8Nmygzs8TfiE6hbzThF+Pr2G19uHL6+DTDTHhJ8VQiOd7l4tA==} @@ -2692,6 +2709,9 @@ packages: resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==} engines: {node: '>=12'} + '@tanstack/virtual-core@3.13.18': + resolution: {integrity: sha512-Mx86Hqu1k39icq2Zusq+Ey2J6dDWTjDvEv43PJtRCoEYTLyfaPnxIQ6iy7YAOK0NV/qOEmZQ/uCufrppZxTgcg==} + '@tootallnate/quickjs-emscripten@0.23.0': resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==} @@ -9611,6 +9631,29 @@ snapshots: transitivePeerDependencies: - '@types/react-dom' + '@raystack/apsara@0.56.2(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@ariakit/react': 0.4.21(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-icons': 1.3.2(react@18.3.1) + '@tanstack/match-sorter-utils': 8.19.4 + '@tanstack/react-table': 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@tanstack/react-virtual': 3.13.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@tanstack/table-core': 8.21.3 + class-variance-authority: 0.7.1 + cmdk: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + color: 5.0.3 + dayjs: 1.11.19 + prism-react-renderer: 2.4.1(react@18.3.1) + radix-ui: 1.4.3(@types/react-dom@18.3.7(@types/react@18.3.27))(@types/react@18.3.27)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-day-picker: 9.13.0(react@18.3.1) + react-dom: 18.3.1(react@18.3.1) + sonner: 2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.27 + transitivePeerDependencies: + - '@types/react-dom' + '@raystack/proton@0.1.0-b1687af73f994fa9612a023c850aa97c35735af8(@tanstack/query-core@5.90.20)(@tanstack/react-query@5.90.20(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@bufbuild/protobuf': 2.11.0 @@ -9944,10 +9987,18 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) + '@tanstack/react-virtual@3.13.18(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@tanstack/virtual-core': 3.13.18 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + '@tanstack/store@0.5.5': {} '@tanstack/table-core@8.21.3': {} + '@tanstack/virtual-core@3.13.18': {} + '@tootallnate/quickjs-emscripten@0.23.0': {} '@tsconfig/node10@1.0.12': {} From 502898830ec6c43cef3fbdb08f622b5e9ce2cee6 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Mon, 9 Feb 2026 18:28:45 +0530 Subject: [PATCH 2/6] feat(dependencies): add react-router-dom version 7.13.0 to pnpm-lock.yaml --- web/pnpm-lock.yaml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 20e86f049..577f23d0f 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -257,6 +257,9 @@ importers: react-image-crop: specifier: ^10.1.8 version: 10.1.8(react@18.3.1) + react-router-dom: + specifier: '>=6.0.0' + version: 7.13.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) slugify: specifier: ^1.6.6 version: 1.6.6 From 0d7bd2bfae541baadefbfbbf58d30f8dbda397db Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Mon, 9 Feb 2026 18:38:48 +0530 Subject: [PATCH 3/6] refactor(audit-logs): reorganize imports for better structure and clarity --- web/lib/admin/views/audit-logs/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/lib/admin/views/audit-logs/index.tsx b/web/lib/admin/views/audit-logs/index.tsx index 53262d8eb..17a7dff9c 100644 --- a/web/lib/admin/views/audit-logs/index.tsx +++ b/web/lib/admin/views/audit-logs/index.tsx @@ -22,8 +22,8 @@ import { getConnectNextPageParam, getGroupCountMapFromFirstPage, DEFAULT_PAGE_SIZE, - transformDataTableQueryToRQLRequest, -} from "@raystack/frontier/admin"; +} from "../../utils/connect-pagination"; +import { transformDataTableQueryToRQLRequest } from "../../utils/transform-query"; import { ExclamationTriangleIcon } from "@radix-ui/react-icons"; import SidePanelDetails from "./sidepanel-details"; import { useQueryClient } from "@tanstack/react-query"; From da9dd18af8b6d6d68521d44993523d4f33dee102 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Mon, 9 Feb 2026 18:42:50 +0530 Subject: [PATCH 4/6] fix(audit-logs): correct closing brace in AuditLogsView component --- web/lib/admin/views/audit-logs/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/lib/admin/views/audit-logs/index.tsx b/web/lib/admin/views/audit-logs/index.tsx index 17a7dff9c..05aca0561 100644 --- a/web/lib/admin/views/audit-logs/index.tsx +++ b/web/lib/admin/views/audit-logs/index.tsx @@ -219,4 +219,4 @@ export default function AuditLogsView({ appName, onExportCsv }: AuditLogsViewPro ); -}; +} From df523652bc6fa94dc409916ea798371bfb7e0515 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Tue, 10 Feb 2026 12:08:47 +0530 Subject: [PATCH 5/6] fix: add curly braces for the json code vie icon --- web/lib/admin/assets/icons/JsonIcon.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/web/lib/admin/assets/icons/JsonIcon.tsx b/web/lib/admin/assets/icons/JsonIcon.tsx index 801d3f1d0..9f7ab6fff 100644 --- a/web/lib/admin/assets/icons/JsonIcon.tsx +++ b/web/lib/admin/assets/icons/JsonIcon.tsx @@ -22,6 +22,18 @@ export function JsonIcon(props: SVGProps) { strokeLinecap="round" strokeLinejoin="round" /> + + ); } From 1957ac84cba524a77393d348870115d057407d68 Mon Sep 17 00:00:00 2001 From: paanSinghCoder Date: Mon, 16 Feb 2026 11:28:33 +0530 Subject: [PATCH 6/6] refactor(vite.config): remove unused path and alias configurations --- web/apps/admin/vite.config.ts | 9 --------- 1 file changed, 9 deletions(-) diff --git a/web/apps/admin/vite.config.ts b/web/apps/admin/vite.config.ts index 96fdbc078..6177c564b 100644 --- a/web/apps/admin/vite.config.ts +++ b/web/apps/admin/vite.config.ts @@ -1,14 +1,10 @@ import react from "@vitejs/plugin-react-swc"; import dotenv from "dotenv"; -import path from "path"; -import { fileURLToPath } from "url"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; import svgr from "vite-plugin-svgr"; dotenv.config(); -const __dirname = path.dirname(fileURLToPath(import.meta.url)); - // https://vitejs.dev/config/ export default defineConfig(() => { return { @@ -34,11 +30,6 @@ export default defineConfig(() => { allow: [".."], }, }, - resolve: { - alias: { - "react-router-dom": path.resolve(__dirname, "node_modules/react-router-dom"), - }, - }, plugins: [react(), svgr(), tsconfigPaths()], define: { "process.env": process.env,