@object-ui/plugin-aggrid 0.4.1 → 2.0.0

package/dist/src/AgGridImpl.d.ts

@@ -1,5 +1,5 @@
 import { ColDef, GridOptions } from 'ag-grid-community';
-import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig, TreeDataConfig, RowGroupingConfig, ExcelExportConfig } from './types';
 export interface AgGridImplProps {
     rowData?: any[];
     columnDefs?: ColDef[];
@@ -23,9 +23,12 @@ export interface AgGridImplProps {
     enableRangeSelection?: boolean;
     enableCharts?: boolean;
     contextMenu?: ContextMenuConfig;
+    treeData?: TreeDataConfig;
+    rowGrouping?: RowGroupingConfig;
+    excelExport?: ExcelExportConfig;
 }
 /**
  * AgGridImpl - The heavy implementation that imports AG Grid
  * This component is lazy-loaded to avoid including AG Grid in the initial bundle
  */
-export default function AgGridImpl({ rowData, columnDefs, gridOptions, pagination, paginationPageSize, domLayout, animateRows, rowSelection, theme, height, className, editable, editType, singleClickEdit, stopEditingWhenCellsLoseFocus, exportConfig, statusBar, callbacks, columnConfig, enableRangeSelection, enableCharts, contextMenu, }: AgGridImplProps): import("react/jsx-runtime").JSX.Element;
+export default function AgGridImpl({ rowData, columnDefs, gridOptions, pagination, paginationPageSize, domLayout, animateRows, rowSelection, theme, height, className, editable, editType, singleClickEdit, stopEditingWhenCellsLoseFocus, exportConfig, statusBar, callbacks, columnConfig, enableRangeSelection, enableCharts, contextMenu, treeData, rowGrouping, excelExport, }: AgGridImplProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/ObjectAgGridImpl.d.ts

@@ -0,0 +1,6 @@
+import { ObjectAgGridImplProps } from './object-aggrid.types';
+/**
+ * ObjectAgGridImpl - Metadata-driven AG Grid implementation
+ * Fetches object metadata and data from ObjectStack and renders the grid
+ */
+export default function ObjectAgGridImpl({ objectName, dataSource, fields: providedFields, fieldNames, filters, sort, pageSize, pagination, domLayout, animateRows, rowSelection, theme, height, className, editable, editType, singleClickEdit, stopEditingWhenCellsLoseFocus, exportConfig, statusBar, callbacks, columnConfig, enableRangeSelection, enableCharts, contextMenu, }: ObjectAgGridImplProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/VirtualScrolling.d.ts

@@ -0,0 +1,72 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * Virtual Scrolling in AG Grid
+ *
+ * AG Grid provides built-in virtual scrolling by default, which renders only
+ * the visible rows in the viewport. This is a core feature of AG Grid and
+ * requires no additional configuration.
+ *
+ * ## How It Works
+ *
+ * - AG Grid automatically virtualizes rows by rendering only visible rows
+ * - As you scroll, rows are recycled and reused for new data
+ * - This provides excellent performance even with datasets of 100,000+ rows
+ *
+ * ## Performance Tips
+ *
+ * 1. **Row Buffer**: Adjust `rowBuffer` to control how many extra rows are rendered
+ *    ```ts
+ *    gridOptions: { rowBuffer: 10 }  // Render 10 extra rows above/below viewport
+ *    ```
+ *
+ * 2. **Suppress Animations**: Disable animations for very large datasets
+ *    ```ts
+ *    animateRows: false
+ *    ```
+ *
+ * 3. **Debounce Vertical Scroll**: Add delay to vertical scroll updates
+ *    ```ts
+ *    gridOptions: { debounceVerticalScrollbar: true }
+ *    ```
+ *
+ * 4. **Row Height**: Use fixed row heights for better performance
+ *    ```ts
+ *    gridOptions: { rowHeight: 40 }
+ *    ```
+ *
+ * ## Example Usage
+ *
+ * ```tsx
+ * <AgGrid
+ *   rowData={largeDataset}  // 10,000+ items
+ *   columnDefs={columns}
+ *   gridOptions={{
+ *     rowBuffer: 10,
+ *     rowHeight: 40,
+ *     debounceVerticalScrollbar: true,
+ *   }}
+ *   animateRows={false}
+ * />
+ * ```
+ *
+ * ## References
+ *
+ * - [AG Grid Row Virtualisation](https://www.ag-grid.com/javascript-data-grid/dom-virtualisation/)
+ * - [Performance Best Practices](https://www.ag-grid.com/javascript-data-grid/performance/)
+ */
+export declare const VIRTUAL_SCROLLING_DOCS: {
+    enabled: boolean;
+    automatic: boolean;
+    recommendedSettings: {
+        rowBuffer: number;
+        rowHeight: number;
+        debounceVerticalScrollbar: boolean;
+        animateRows: boolean;
+    };
+};

package/dist/src/field-renderers.d.ts

@@ -0,0 +1,67 @@
+import { Root } from 'react-dom/client';
+import { ICellRendererParams, ICellEditorParams } from 'ag-grid-community';
+import { FieldMetadata } from '../../types/src';
+/**
+ * AG Grid Cell Renderer using Field Widgets (Read-only mode)
+ */
+export declare class FieldWidgetCellRenderer {
+    eGui: HTMLDivElement;
+    root: Root | null;
+    init(params: ICellRendererParams & {
+        field: FieldMetadata;
+    }): void;
+    getGui(): HTMLDivElement;
+    refresh(params: ICellRendererParams & {
+        field: FieldMetadata;
+    }): boolean;
+    destroy(): void;
+}
+/**
+ * AG Grid Cell Editor using Field Widgets (Edit mode)
+ */
+export declare class FieldWidgetCellEditor {
+    eGui: HTMLDivElement;
+    root: Root | null;
+    currentValue: unknown;
+    params: ICellEditorParams & {
+        field: FieldMetadata;
+    };
+    init(params: ICellEditorParams & {
+        field: FieldMetadata;
+    }): void;
+    getGui(): HTMLDivElement;
+    getValue(): unknown;
+    destroy(): void;
+    isPopup(): boolean;
+}
+/**
+ * Factory function to create cell renderer with field metadata
+ */
+export declare function createFieldCellRenderer(field: FieldMetadata): {
+    new (): {
+        init(params: ICellRendererParams): void;
+        refresh(params: ICellRendererParams): boolean;
+        eGui: HTMLDivElement;
+        root: Root | null;
+        getGui(): HTMLDivElement;
+        destroy(): void;
+    };
+};
+/**
+ * Factory function to create cell editor with field metadata
+ */
+export declare function createFieldCellEditor(field: FieldMetadata): {
+    new (): {
+        init(params: ICellEditorParams): void;
+        eGui: HTMLDivElement;
+        root: Root | null;
+        currentValue: unknown;
+        params: ICellEditorParams & {
+            field: FieldMetadata;
+        };
+        getGui(): HTMLDivElement;
+        getValue(): unknown;
+        destroy(): void;
+        isPopup(): boolean;
+    };
+};

package/dist/src/index.d.ts

@@ -1,6 +1,8 @@
 import { default as React } from 'react';
-import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
-export type { AgGridSchema, SimpleColumnDef, AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig, TreeDataConfig, RowGroupingConfig, ExcelExportConfig } from './types';
+import { DataSource } from '../../types/src';
+export type { AgGridSchema, SimpleColumnDef, AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig, TreeDataConfig, RowGroupingConfig, ExcelExportConfig } from './types';
+export type { ObjectAgGridSchema } from './object-aggrid.types';
 export interface AgGridRendererProps {
     schema: {
         type: string;
@@ -27,6 +29,9 @@ export interface AgGridRendererProps {
         enableRangeSelection?: boolean;
         enableCharts?: boolean;
         contextMenu?: ContextMenuConfig;
+        treeData?: TreeDataConfig;
+        rowGrouping?: RowGroupingConfig;
+        excelExport?: ExcelExportConfig;
     };
 }
 /**
@@ -34,6 +39,46 @@ export interface AgGridRendererProps {
  * This wrapper handles lazy loading internally using React.Suspense
  */
 export declare const AgGridRenderer: React.FC<AgGridRendererProps>;
+/**
+ * ObjectAgGridRenderer - The public API for the metadata-driven AG Grid component
+ * This wrapper handles lazy loading internally using React.Suspense
+ */
+export interface ObjectAgGridRendererProps {
+    schema: {
+        type: string;
+        id?: string;
+        className?: string;
+        objectName: string;
+        dataSource?: DataSource;
+        fields?: any[];
+        fieldNames?: string[];
+        filters?: Record<string, any>;
+        sort?: Record<string, 'asc' | 'desc'>;
+        pageSize?: number;
+        pagination?: boolean;
+        domLayout?: 'normal' | 'autoHeight' | 'print';
+        animateRows?: boolean;
+        rowSelection?: 'single' | 'multiple';
+        theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+        height?: number | string;
+        editable?: boolean;
+        editType?: 'fullRow';
+        singleClickEdit?: boolean;
+        stopEditingWhenCellsLoseFocus?: boolean;
+        exportConfig?: ExportConfig;
+        statusBar?: StatusBarConfig;
+        callbacks?: AgGridCallbacks & {
+            onDataLoaded?: (data: any[]) => void;
+            onDataError?: (error: Error) => void;
+        };
+        columnConfig?: ColumnConfig;
+        enableRangeSelection?: boolean;
+        enableCharts?: boolean;
+        contextMenu?: ContextMenuConfig;
+    };
+}
+export declare const ObjectAgGridRenderer: React.FC<ObjectAgGridRendererProps>;
 export declare const aggridComponents: {
     aggrid: React.FC<AgGridRendererProps>;
+    'object-aggrid': React.FC<ObjectAgGridRendererProps>;
 };

package/dist/src/object-aggrid.types.d.ts

@@ -0,0 +1,74 @@
+import { DataSource, FieldMetadata } from '../../types/src';
+import { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+/**
+ * Object AgGrid schema for metadata-driven grid
+ */
+export interface ObjectAgGridSchema {
+    type: 'object-aggrid';
+    id?: string;
+    className?: string;
+    objectName: string;
+    dataSource: DataSource;
+    fields?: FieldMetadata[];
+    fieldNames?: string[];
+    filters?: Record<string, any>;
+    sort?: Record<string, 'asc' | 'desc'>;
+    pageSize?: number;
+    pagination?: boolean;
+    domLayout?: 'normal' | 'autoHeight' | 'print';
+    animateRows?: boolean;
+    rowSelection?: 'single' | 'multiple';
+    editable?: boolean;
+    editType?: 'fullRow';
+    singleClickEdit?: boolean;
+    stopEditingWhenCellsLoseFocus?: boolean;
+    exportConfig?: ExportConfig;
+    statusBar?: StatusBarConfig;
+    columnConfig?: ColumnConfig;
+    enableRangeSelection?: boolean;
+    enableCharts?: boolean;
+    contextMenu?: ContextMenuConfig;
+    callbacks?: AgGridCallbacks & {
+        onDataLoaded?: (data: any[]) => void;
+        onDataError?: (error: Error) => void;
+    };
+    theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+    height?: number | string;
+}
+/**
+ * Props for ObjectAgGridImpl component
+ */
+export interface ObjectAgGridImplProps {
+    objectName: string;
+    dataSource?: DataSource;
+    fields?: FieldMetadata[];
+    fieldNames?: string[];
+    filters?: Record<string, any>;
+    sort?: Record<string, 'asc' | 'desc'>;
+    pageSize?: number;
+    pagination?: boolean;
+    domLayout?: 'normal' | 'autoHeight' | 'print';
+    animateRows?: boolean;
+    rowSelection?: 'single' | 'multiple';
+    theme?: 'alpine' | 'balham' | 'material' | 'quartz';
+    height?: number | string;
+    className?: string;
+    editable?: boolean;
+    editType?: 'fullRow';
+    singleClickEdit?: boolean;
+    stopEditingWhenCellsLoseFocus?: boolean;
+    exportConfig?: ExportConfig;
+    statusBar?: StatusBarConfig;
+    callbacks?: AgGridCallbacks & {
+        onDataLoaded?: (data: any[]) => void;
+        onDataError?: (error: Error) => void;
+    };
+    columnConfig?: ColumnConfig;
+    enableRangeSelection?: boolean;
+    enableCharts?: boolean;
+    contextMenu?: ContextMenuConfig;
+}
+/**
+ * Field type to AG Grid filter type mapping
+ */
+export declare const FIELD_TYPE_TO_FILTER_TYPE: Record<string, string | boolean>;

package/dist/src/types.d.ts

@@ -7,7 +7,7 @@ export interface AgGridCallbacks {
     onRowClicked?: (event: RowClickedEvent) => void;
     onSelectionChanged?: (event: SelectionChangedEvent) => void;
     onCellValueChanged?: (event: CellValueChangedEvent) => void;
-    onExport?: (data: any[], format: 'csv') => void;
+    onExport?: (data: any[], format: 'csv' | 'excel') => void;
     onContextMenuAction?: (action: string, rowData: any) => void;
 }
 /**
@@ -19,6 +19,50 @@ export interface ExportConfig {
     skipColumnHeaders?: boolean;
     allColumns?: boolean;
     onlySelected?: boolean;
+    format?: 'csv' | 'excel';
+}
+/**
+ * Tree data configuration
+ */
+export interface TreeDataConfig {
+    enabled?: boolean;
+    /** Field that contains the hierarchy path (array of strings) */
+    pathField?: string;
+    /** Field that contains parent ID for parent-child relationships */
+    parentIdField?: string;
+    /** Field that contains the unique ID */
+    idField?: string;
+    /** Whether to expand all rows by default */
+    expandAll?: boolean;
+    /** Depth to expand to by default */
+    expandDepth?: number;
+}
+/**
+ * Row grouping configuration
+ */
+export interface RowGroupingConfig {
+    enabled?: boolean;
+    /** Fields to group by */
+    groupByFields?: string[];
+    /** Whether to show group row count */
+    showRowCount?: boolean;
+    /** Whether to allow user to change grouping */
+    userGroupable?: boolean;
+    /** Aggregation functions for grouped columns */
+    aggregations?: Record<string, 'sum' | 'avg' | 'count' | 'min' | 'max' | 'first' | 'last'>;
+}
+/**
+ * Excel export configuration
+ */
+export interface ExcelExportConfig {
+    enabled?: boolean;
+    fileName?: string;
+    sheetName?: string;
+    includeHeaders?: boolean;
+    includeGrouping?: boolean;
+    onlySelected?: boolean;
+    /** Custom column widths */
+    columnWidths?: Record<string, number>;
 }
 /**
  * Status bar configuration
@@ -72,6 +116,9 @@ export interface AgGridSchema {
     enableRangeSelection?: boolean;
     enableCharts?: boolean;
     contextMenu?: ContextMenuConfig;
+    treeData?: TreeDataConfig;
+    rowGrouping?: RowGroupingConfig;
+    excelExport?: ExcelExportConfig;
     callbacks?: AgGridCallbacks;
     theme?: 'alpine' | 'balham' | 'material' | 'quartz';
     height?: number | string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@object-ui/plugin-aggrid",
-  "version": "0.4.1",
+  "version": "2.0.0",
   "type": "module",
   "license": "MIT",
   "description": "AG Grid data grid plugin for Object UI, powered by AG Grid Community",
@@ -25,10 +25,12 @@
     "./style.css": "./dist/index.css"
   },
   "dependencies": {
-    "@object-ui/components": "0.3.1",
-    "@object-ui/core": "0.3.1",
-    "@object-ui/react": "0.3.1",
-    "@object-ui/types": "0.3.1"
+    "@object-ui/components": "2.0.0",
+    "@object-ui/core": "2.0.0",
+    "@object-ui/fields": "2.0.0",
+    "@object-ui/react": "2.0.0",
+    "@object-ui/types": "2.0.0",
+    "@object-ui/data-objectstack": "2.0.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
@@ -37,11 +39,11 @@
     "ag-grid-react": "^32.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.9",
+    "@types/react": "^19.2.13",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^4.2.1",
-    "ag-grid-community": "^35.0.1",
-    "ag-grid-react": "^32.3.4",
+    "@vitejs/plugin-react": "^5.1.3",
+    "ag-grid-community": "^32.3.9",
+    "ag-grid-react": "^32.3.9",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"

package/src/AgGridImpl.tsx

@@ -9,7 +9,7 @@
 import React, { useMemo, useRef, useCallback } from 'react';
 import { AgGridReact } from 'ag-grid-react';
 import type { ColDef, GridOptions, GridReadyEvent, CellClickedEvent, RowClickedEvent, SelectionChangedEvent, CellValueChangedEvent, StatusPanelDef, GetContextMenuItemsParams, MenuItemDef } from 'ag-grid-community';
-import type { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig } from './types';
+import type { AgGridCallbacks, ExportConfig, StatusBarConfig, ColumnConfig, ContextMenuConfig, TreeDataConfig, RowGroupingConfig, ExcelExportConfig } from './types';
 
 export interface AgGridImplProps {
   rowData?: any[];
@@ -34,6 +34,9 @@ export interface AgGridImplProps {
   enableRangeSelection?: boolean;
   enableCharts?: boolean;
   contextMenu?: ContextMenuConfig;
+  treeData?: TreeDataConfig;
+  rowGrouping?: RowGroupingConfig;
+  excelExport?: ExcelExportConfig;
 }
 
 /**
@@ -63,6 +66,9 @@ export default function AgGridImpl({
   enableRangeSelection = false,
   enableCharts = false,
   contextMenu,
+  treeData,
+  rowGrouping,
+  excelExport,
 }: AgGridImplProps) {
   const gridRef = useRef<any>(null);
 
@@ -113,6 +119,31 @@ export default function AgGridImpl({
     }
   }, [exportConfig, callbacks, rowData]);
 
+  // Excel-compatible CSV Export handler
+  // Exports CSV format which can be opened directly in Excel
+  const handleExportExcel = useCallback(() => {
+    if (!gridRef.current?.api) return;
+    
+    const fileName = excelExport?.fileName || exportConfig?.fileName || 'export.csv';
+    const includeHeaders = excelExport?.includeHeaders !== false;
+    
+    const params = {
+      fileName,
+      skipColumnHeaders: !includeHeaders,
+      allColumns: true,
+      onlySelected: excelExport?.onlySelected || false,
+    };
+    
+    gridRef.current.api.exportDataAsCsv(params);
+    
+    if (callbacks?.onExport) {
+      const data = excelExport?.onlySelected 
+        ? gridRef.current.api.getSelectedRows()
+        : rowData;
+      callbacks.onExport(data || [], 'excel');
+    }
+  }, [excelExport, exportConfig, callbacks, rowData]);
+
   // Context Menu handler
   const getContextMenuItems = useCallback((params: GetContextMenuItemsParams): (string | MenuItemDef)[] => {
     if (!contextMenu?.enabled) return [];
@@ -127,6 +158,12 @@ export default function AgGridImpl({
           icon: '<span>📥</span>',
           action: () => handleExportCSV(),
         });
+      } else if (item === 'export-excel') {
+        items.push({
+          name: 'Export Excel (CSV)',
+          icon: '<span>📊</span>',
+          action: () => handleExportExcel(),
+        });
       } else if (item === 'autoSizeAll') {
         items.push({
           name: 'Auto-size All Columns',
@@ -170,7 +207,7 @@ export default function AgGridImpl({
     }
     
     return items;
-  }, [contextMenu, handleExportCSV, callbacks]);
+  }, [contextMenu, handleExportCSV, handleExportExcel, callbacks]);
 
   // Event handlers
   const handleCellClicked = useCallback((event: CellClickedEvent) => {
@@ -218,12 +255,23 @@ export default function AgGridImpl({
         }
       }
       
+      // Apply grouping
+      if (rowGrouping?.enabled && rowGrouping.groupByFields?.includes(col.field || '')) {
+        processed.rowGroup = true;
+        processed.hide = true;
+      }
+
+      // Apply aggregation
+      if (rowGrouping?.aggregations && col.field && rowGrouping.aggregations[col.field]) {
+        processed.aggFunc = rowGrouping.aggregations[col.field];
+      }
+      
       return processed;
     });
-  }, [columnDefs, editable, columnConfig]);
+  }, [columnDefs, editable, columnConfig, rowGrouping]);
 
   // Merge grid options with props
-  const mergedGridOptions: GridOptions = useMemo(() => ({
+  const mergedGridOptions = useMemo(() => ({
     ...gridOptions,
     pagination,
     paginationPageSize,
@@ -237,10 +285,38 @@ export default function AgGridImpl({
     enableRangeSelection,
     enableCharts,
     getContextMenuItems: contextMenu?.enabled ? getContextMenuItems : undefined,
+    // Tree data support
+    ...(treeData?.enabled ? {
+      treeData: true,
+      getDataPath: treeData.pathField 
+        ? (data: any) => data[treeData.pathField as string] 
+        : undefined,
+      autoGroupColumnDef: {
+        headerName: 'Hierarchy',
+        minWidth: 250,
+        cellRendererParams: {
+          suppressCount: false,
+        },
+      },
+      groupDefaultExpanded: treeData.expandAll ? -1 : (treeData.expandDepth ?? 0),
+    } : {}),
+    // Row grouping
+    ...(rowGrouping?.enabled ? {
+      groupDefaultExpanded: rowGrouping.groupByFields?.length ? 1 : 0,
+      autoGroupColumnDef: {
+        minWidth: 200,
+        cellRendererParams: {
+          suppressCount: !rowGrouping.showRowCount,
+        },
+      },
+    } : {}),
     // Default options for better UX
     suppressCellFocus: !editable,
     enableCellTextSelection: true,
     ensureDomOrder: true,
+    // Virtual scrolling optimizations for large datasets
+    rowBuffer: gridOptions.rowBuffer ?? 10,
+    debounceVerticalScrollbar: gridOptions.debounceVerticalScrollbar ?? (rowData.length > 1000),
     // Event handlers
     onCellClicked: handleCellClicked,
     onRowClicked: handleRowClicked,
@@ -262,7 +338,10 @@ export default function AgGridImpl({
     enableCharts,
     contextMenu,
     getContextMenuItems,
+    treeData,
+    rowGrouping,
     editable,
+    rowData.length,
     handleCellClicked,
     handleRowClicked,
     handleSelectionChanged,
@@ -290,14 +369,24 @@ export default function AgGridImpl({
 
   return (
     <div className="ag-grid-container">
-      {exportConfig?.enabled && (
+      {(exportConfig?.enabled || excelExport?.enabled) && (
         <div className="mb-2 flex gap-2">
-          <button
-            onClick={handleExportCSV}
-            className="px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
-          >
-            Export CSV
-          </button>
+          {exportConfig?.enabled && (
+            <button
+              onClick={handleExportCSV}
+              className="px-3 py-1.5 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md transition-colors"
+            >
+              Export CSV
+            </button>
+          )}
+          {excelExport?.enabled && (
+            <button
+              onClick={handleExportExcel}
+              className="px-3 py-1.5 text-sm font-medium text-white bg-green-600 hover:bg-green-700 rounded-md transition-colors"
+            >
+              Export Excel (CSV)
+            </button>
+          )}
         </div>
       )}
       <div