diff --git a/apps/web/src/global.css b/apps/web/src/global.css index d9e2c140..ac7fa1ee 100644 --- a/apps/web/src/global.css +++ b/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; - } - } \ No newline at end of file diff --git a/modules/invoices/package.json b/modules/invoices/package.json index af7c5f00..34cf8345 100644 --- a/modules/invoices/package.json +++ b/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-react": "^33.2.4", + "ag-grid-community": "^33.3.0", + "ag-grid-react": "^33.3.0", "i18next": "^25.1.1", "lucide-react": "^0.503.0", "react": "^19.1.0", diff --git a/modules/invoices/src/web/components/invoices-grid.tsx b/modules/invoices/src/web/components/invoices-grid.tsx index b46ad755..847e3534 100644 --- a/modules/invoices/src/web/components/invoices-grid.tsx +++ b/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 ( -
- {/* The AG Grid component, with Row Data & Column Definition props */} +