.

apps/web/src/global.css

@@ -26,107 +26,5 @@
      @apply flex min-h-screen min-w-[320px] flex-col;
    }
  
-
-
-   .ag-theme-quartz {
-    --border: #e5e5e5;
-    --input: 240 5.9% 90%;
-    --ring: 240 5.9% 10%;
-    --radius: 0.5rem;
-  }
-  
-  .ag-theme-quartz-dark {
-    --border: hsl(240 3.7% 15.9%);
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --radius: 0.5rem;
-  }
-  
-  .ag-theme-quartz,
-  .ag-theme-quartz-dark {
-    --ag-active-color: hsl(var(--accent-foreground));
-    --ag-data-color: hsl(var(--foreground));
-    --ag-foreground-color: hsl(var(--foreground));
-    --ag-background-color: hsl(var(--background));
-    --ag-secondary-foreground-color: hsl(var(--secondary-foreground));
-    --ag-header-background-color: hsl(var(--background));
-    --ag-header-foreground-color: hsl(var(--foreground));
-    --ag-tooltip-background-color: hsl(var(--popover));
-    --ag-disabled-foreground-color: hsl(var(--muted-foreground));
-    --ag-subheader-background-color: hsl(var(--secondary));
-    --ag-subheader-toolbar-background-color: hsl(var(--secondary));
-    --ag-control-panel-background-color: hsl(var(--secondary));
-    --ag-side-button-selected-background-color: hsl(var(--secondary));
-    --ag-header-column-resize-handle-display: none;
-    --ag-selected-row-background-color: hsl(var(--muted));
-    --ag-modal-overlay-background-color: hsl(var(--popover));
-    --ag-row-hover-color: hsl(var(--muted));
-    --ag-grid-size: 3px;
-    --ag-row-height: 32px;
-    --ag-list-item-height: 20px;
-    --ag-font-size: 12px;
-  
-    --ag-borders: none;
-    --ag-border-color: var(--border);
-    --ag-borders-critical: solid 1px;
-    --ag-borders-secondary: solid 1px;
-    --ag-row-border-style: solid;
-    --ag-row-border-color: var(--border);
-    --ag-row-border-width: 1px;
-    --ag-borders-input: none;
-    --ag-cell-horizontal-border: solid var(--border);
-    --ag-header-column-separator-display: block;
-    --ag-input-focus-box-shadow: none;
-    @apply h-full w-full ;
-  }
-  .ag-theme-quartz .ag-root-wrapper,
-  .ag-theme-quartz-dark .ag-root-wrapper {
-    @apply !rounded-none;
-  }
-  
-  .ag-theme-quartz .ag-layout-normal,
-  .ag-theme-quartz-dark .ag-layout-normal {
-    @apply h-full w-full overflow-auto;
-  }
-  
-  .ag-theme-quartz .ag-cell,
-  .ag-theme-quartz-dark .ag-cell {
-    @apply !pt-[4px] !px-1 !flex !items-center;
-  }
-  
-  /* for selection checkboxes */
-  .ag-theme-quartz .ag-column-first,
-  .ag-theme-quartz-dark .ag-column-first,
-  .ag-theme-quartz .ag-column-first.ag-cell-focus,
-  .ag-theme-quartz-dark .ag-column-first.ag-cell-focus {
-    @apply !pt-0;
-  }
-  
-  .ag-theme-quartz .ag-cell-focus,
-  .ag-theme-quartz-dark .ag-cell-focus {
-    @apply !border-2 !border-[#66afe9] !pt-[3px] !px-[3px];
-  }
-  
-  .ag-theme-quartz .ag-cell-inline-editing,
-  .ag-theme-quartz-dark .ag-cell-inline-editing {
-    @apply !border-2 !border-[#66afe9] !py-0 !px-0 !rounded-none;
-  }
-  
-  /* change the cell inline editing border to red when the input is invalid */
-  .ag-theme-quartz .ag-cell-inline-editing:has(input:invalid),
-  .ag-theme-quartz-dark .ag-cell-inline-editing:has(input:invalid) {
-    @apply !border-red-500;
-  }
-  
-  .ag-theme-quartz .ag-cell-inline-editing input,
-  .ag-theme-quartz-dark .ag-cell-inline-editing input {
-    @apply !border-none !bg-transparent !text-foreground !w-full !h-full !px-[3px] !pt-[3px] !rounded-none;
-  }
-  
-  .ag-theme-quartz .ag-header-cell-label,
-  .ag-theme-quartz-dark .ag-header-cell-label {
-    @apply justify-between;
-  }
-
   
 }

modules/invoices/package.json

@@ -14,6 +14,8 @@
     "./locales": "./src/common/locales/index.tsx"
   },
   "peerDependencies": {
+    "ag-grid-react": "^33.3.0",
+    "ag-grid-community": "^33.3.0",
     "i18next": "^25.1.1",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19"
@@ -28,8 +30,8 @@
     "@erp/core": "workspace:*",
     "@repo/rdx-ui": "workspace:*",
     "@repo/shadcn-ui": "workspace:*",
-    "ag-grid-community": "^33.2.4",
+    "ag-grid-community": "^33.3.0",
-    "ag-grid-react": "^33.2.4",
+    "ag-grid-react": "^33.3.0",
     "i18next": "^25.1.1",
     "lucide-react": "^0.503.0",
     "react": "^19.1.0",

modules/invoices/src/web/components/invoices-grid.tsx

@@ -1,15 +1,15 @@
 // React Grid Logic
 import { useEffect, useMemo, useState } from "react";
 
-// Core CSS
-import { AgGridReact } from "ag-grid-react";
-
 // Theme
 import type { ColDef, ValueFormatterParams } from "ag-grid-community";
 import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
 
 ModuleRegistry.registerModules([AllCommunityModule]);
 
+// Core CSS
+import { AgGridReact } from "ag-grid-react";
+
 /**
  * Fetch example Json data
  * Not recommended for production use!
@@ -80,8 +80,7 @@ export const InvoicesGrid = () => {
 
   // Container: Defines the grid's theme & dimensions.
   return (
-    <div className='flex w-full flex-col justify-start gap-6'>
+    <div style={{ height: 1500 }}>
-      {/* The AG Grid component, with Row Data & Column Definition props */}
       <AgGridReact
         rowData={data}
         loading={loading}

pnpm-lock.yaml

@@ -170,7 +170,7 @@ importers:
         version: 29.7.0(@types/node@22.15.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3))
       ts-jest:
         specifier: ^29.2.5
-        version: 29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(esbuild@0.25.4)(jest@29.7.0(@types/node@22.15.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3)))(typescript@5.8.3)
+        version: 29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(jest@29.7.0(@types/node@22.15.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3)))(typescript@5.8.3)
       tsconfig-paths:
         specifier: ^4.2.0
         version: 4.2.0
@@ -382,11 +382,11 @@ importers:
         specifier: workspace:*
         version: link:../../packages/shadcn-ui
       ag-grid-community:
-        specifier: ^33.2.4
+        specifier: ^33.3.0
-        version: 33.2.4
+        version: 33.3.0
       ag-grid-react:
-        specifier: ^33.2.4
+        specifier: ^33.3.0
-        version: 33.2.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+        version: 33.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       i18next:
         specifier: ^25.1.1
         version: 25.1.1(typescript@5.8.3)
@@ -2809,14 +2809,14 @@ packages:
   add@2.0.6:
     resolution: {integrity: sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q==}
 
-  ag-charts-types@11.2.4:
+  ag-charts-types@11.3.0:
-    resolution: {integrity: sha512-a1aQjtQ9ZH+J8BF3YcWAIHUt9ZLiL9IVZ8R5h7z2CkTNu2TPq5UlsCcF0/YZKc1M8CM0CdSNLSGQuWUwDNxAcA==}
+    resolution: {integrity: sha512-FXyk24PizYS4QoPTk7FVaFDgvmZYBQo6sgl5n3lkHugTNTZBtwBmN3i4JnBXgNjGDB6Q05MRkoBA2rvW8rPBag==}
 
-  ag-grid-community@33.2.4:
+  ag-grid-community@33.3.0:
-    resolution: {integrity: sha512-7XT1+wxmMlMVXB27BJOzlft9ATB0C5HOJcCGMc8dCO2W17JXbNknVEEDGTBKoSvA4Cei8sARrRDxmPgY8mWopQ==}
+    resolution: {integrity: sha512-Nr7Wd3Qc0tbR+BWZ4y8LgEwLkHTvrtJ4f4k5eb4zuoNZFM52MyLfu+m4OAplIm9nOVBdp5tg/ALWvu13jak+Nw==}
 
-  ag-grid-react@33.2.4:
+  ag-grid-react@33.3.0:
-    resolution: {integrity: sha512-rP6zwrGxRimAf6blJQZDahE0t2LM2zqqOEEeBacD6M5coWP+zOESja9vklpyzU+UfIlyqToZ2O+rboBQt3Wqxg==}
+    resolution: {integrity: sha512-AApiiHDt0oyz2qAXjZh0JCRSH0H2eOdLusxxF8vaYWbz/WcFBZcfOWi62ScfUpOESjuEVvQJJ3eI8PFrudBhrw==}
     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
@@ -8262,15 +8262,15 @@ snapshots:
 
   add@2.0.6: {}
 
-  ag-charts-types@11.2.4: {}
+  ag-charts-types@11.3.0: {}
 
-  ag-grid-community@33.2.4:
+  ag-grid-community@33.3.0:
     dependencies:
-      ag-charts-types: 11.2.4
+      ag-charts-types: 11.3.0
 
-  ag-grid-react@33.2.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+  ag-grid-react@33.3.0(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
     dependencies:
-      ag-grid-community: 33.2.4
+      ag-grid-community: 33.3.0
       prop-types: 15.8.1
       react: 19.1.0
       react-dom: 19.1.0(react@19.1.0)
@@ -11377,7 +11377,7 @@ snapshots:
 
   ts-interface-checker@0.1.13: {}
 
-  ts-jest@29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(esbuild@0.25.4)(jest@29.7.0(@types/node@22.15.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3)))(typescript@5.8.3):
+  ts-jest@29.3.2(@babel/core@7.27.1)(@jest/transform@29.7.0)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.27.1))(jest@29.7.0(@types/node@22.15.12)(babel-plugin-macros@3.1.0)(ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3)))(typescript@5.8.3):
     dependencies:
       bs-logger: 0.2.6
       ejs: 3.1.10
@@ -11396,7 +11396,6 @@ snapshots:
       '@jest/transform': 29.7.0
       '@jest/types': 29.6.3
       babel-jest: 29.7.0(@babel/core@7.27.1)
-      esbuild: 0.25.4
 
   ts-node@10.9.2(@types/node@22.15.12)(typescript@5.8.3):
     dependencies: