@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/DataTable/components/DataTableErrorBoundary.tsx

@@ -9,7 +9,7 @@
 
 import React, { Component, ErrorInfo, ReactNode } from 'react';
 import { Alert, AlertDescription, AlertTitle } from '../../Alert/Alert';
-import { Button } from '../../Button/Button';
+import { Button, ButtonGroup } from '../../Button/Button';
 import { createLogger } from '../../../utils/core/logger';
 // Icons removed to avoid test mocking issues
 
@@ -142,8 +142,7 @@ export class DataTableErrorBoundary extends Component<
 
       // Default error UI
       return (
-        <div className="flex items-center justify-center p-8">
-          <Alert variant="destructive" className="max-w-md">
+          <Alert variant="destructive">
             <AlertTitle>DataTable Error</AlertTitle>
             <AlertDescription className="mt-2">
               <span>Something went wrong</span>
@@ -164,17 +163,16 @@ export class DataTableErrorBoundary extends Component<
                 </pre>
               </details>
             ) : (
-              <div className="mt-2">
-                <span>An unexpected error occurred</span>
-              </div>
+              <Alert variant="destructive">
+                <AlertDescription>An unexpected error occurred</AlertDescription>
+              </Alert>
             )}
-            <div className="mt-4 flex gap-2">
+            <ButtonGroup>
               {showRetryButton && retryCount < maxRetries && (
                  <Button
                    variant="outline"
                    size="sm"
-                   onClick={this.handleRetry}
-                   className="flex items-center gap-2"
+                   onClick={this.handleRetry}    
                  >
                    Retry ({retryCount + 1}/{maxRetries})
                  </Button>
@@ -186,9 +184,9 @@ export class DataTableErrorBoundary extends Component<
               >
                 Reset
               </Button>
-            </div>
+              </ButtonGroup>
           </Alert>
-        </div>
+
       );
     }
 

package/src/components/DataTable/components/DataTableLayout.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Edit, Trash, ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
+import { Edit, Trash } from 'lucide-react';
+import { SortIndicator } from './SortIndicator';
 import type { Table } from '@tanstack/react-table';
 import { cn } from '../../../utils/core/cn';
 import { Button } from '../../Button/Button';
@@ -7,12 +8,13 @@ import { DataTableToolbar } from './DataTableToolbar';
 import { UnifiedTableBody } from './UnifiedTableBody';
 import { PaginationControls, EnhancedPaginationControls } from './PaginationControls';
 import { DataTableModals } from './DataTableModals';
-import { announceSortChange } from '../utils/a11yUtils';
+import { announceSortChange, getAriaSortState } from '../utils/a11yUtils';
 import { exportToCSVWithTableRows } from '../utils/exportUtils';
 import { getTableClasses } from '../styles';
 import { toast } from '../../../hooks/useToast';
 import type {
   AggregateConfig,
+  CellValue,
   DataRecord,
   DataTableAction,
   DataTableColumn,
@@ -130,6 +132,12 @@ export function DataTableLayout<TData extends DataRecord>({
   keyboardNavigation,
   lastFocusedElementRef,
 }: DataTableLayoutProps<TData>) {
+  // CRITICAL FIX: Use a ref to track the latest editingData to avoid stale closure issues
+  // The ref is always kept in sync with state.editingData via useEffect
+  const editingDataRef = React.useRef(state.editingData);
+  React.useEffect(() => {
+    editingDataRef.current = state.editingData;
+  }, [state.editingData]);
   const handleExport = async () => {
     try {
       const tableRows = table.getFilteredRowModel().rows;
@@ -282,6 +290,8 @@ export function DataTableLayout<TData extends DataRecord>({
                       if (result !== undefined && result !== null && typeof result === 'object' && typeof result.then === 'function') {
                         await result;
                       }
+                      // Clear selection after successful deletion
+                      stateActions.clearRowSelection();
                       toast({
                         title: 'Delete Successful',
                         description: `Successfully deleted ${selectedCount} ${selectedCount === 1 ? 'row' : 'rows'}`,
@@ -325,13 +335,7 @@ export function DataTableLayout<TData extends DataRecord>({
                   const isFirst = index === 0;
                   const isLast = index === visibleHeaders.length - 1;
                   const isSortable = header.column.getCanSort();
-                  const ariaSort = isSortable
-                    ? header.column.getIsSorted() === 'asc'
-                      ? 'ascending'
-                      : header.column.getIsSorted() === 'desc'
-                      ? 'descending'
-                      : 'none'
-                    : undefined;
+                  const ariaSort = getAriaSortState(header.column);
                   const isRightAligned = header.column.columnDef.meta?.align === 'right';
 
                   const handleSortClick = (event: React.MouseEvent) => {
@@ -397,13 +401,7 @@ export function DataTableLayout<TData extends DataRecord>({
                           {typeof header.column.columnDef.header === 'function'
                             ? header.column.columnDef.header(header.getContext())
                             : header.column.columnDef.header}
-                          {header.column.getIsSorted() === 'asc' ? (
-                            <ChevronUp className="size-4" />
-                          ) : header.column.getIsSorted() === 'desc' ? (
-                            <ChevronDown className="size-4" />
-                          ) : (
-                            <ChevronsUpDown className="size-4" />
-                          )}
+                          <SortIndicator sortState={header.column.getIsSorted() || false} />
                         </Button>
                       ) : typeof header.column.columnDef.header === 'function' ? (
                         header.column.columnDef.header(header.getContext())
@@ -424,8 +422,18 @@ export function DataTableLayout<TData extends DataRecord>({
           creationData={state.creationData}
           onCreationDataChange={stateActions.setCreationData}
           onSaveCreation={() => {
+            const creationDataToUse = state.creationData;
+            // CRITICAL FIX: Ensure status field is included with default value "active" if not already set
+            // This ensures new rows are created with the correct status
+            const finalCreationData = {
+              ...creationDataToUse,
+              // Only set status to "active" if it's not already set and if status is a column in the table
+              ...(creationDataToUse.status === undefined && table.getAllColumns().some(col => col.id === 'status')
+                ? { status: 'active' as CellValue }
+                : {}),
+            };
             if (onCreateRow) {
-              onCreateRow(state.creationData as Partial<TData>);
+              onCreateRow(finalCreationData as Partial<TData>);
               stateActions.clearCreationData();
               stateActions.setCreating(false);
             }
@@ -442,17 +450,23 @@ export function DataTableLayout<TData extends DataRecord>({
             }
           }}
           onSaveEditing={() => {
+            // CRITICAL FIX: Use ref to get the latest editingData to avoid stale closure issues
+            // The ref is always kept in sync with state.editingData, so it should always have the correct value
+            const latestEditingData = editingDataRef.current;
             if (onEditRow && state.editingRowId) {
-              const originalRow = data.find((row) => {
+              // CRITICAL FIX: Use findIndex to get the actual index, then use that index for getRowId
+              const originalRowIndex = data.findIndex((row, index) => {
                 try {
-                  const rowId = resolvedGetRowId(row, 0);
+                  const rowId = resolvedGetRowId(row, index);
                   return rowId === state.editingRowId;
                 } catch {
                   return false;
                 }
               });
-              if (originalRow) {
-                onEditRow(originalRow, state.editingData as Partial<TData>);
+              
+              if (originalRowIndex >= 0) {
+                const originalRow = data[originalRowIndex];
+                onEditRow(originalRow, latestEditingData as Partial<TData>);
               }
             }
             stateActions.clearEditing();

package/src/components/DataTable/components/EditFields.tsx

@@ -33,7 +33,7 @@ export function SelectEditField<TData extends DataRecord>({
   const logger = createLogger('SelectEditField');
   const isSearchable = columnDef.selectSearchable !== false;
   const isCreatable = columnDef.creatable === true;
-  const selectRef = React.useRef<HTMLFormElement>(null);
+  const selectRef = React.useRef<HTMLFieldSetElement>(null);
   const [searchTerm, setSearchTerm] = React.useState('');
   const [isOpen, setIsOpen] = React.useState(false);
   const [showCreateOption, setShowCreateOption] = React.useState(false);
@@ -258,7 +258,27 @@ export const renderEditField = <TData extends DataRecord>(
 
   if (columnDef.fieldType === 'select' && columnDef.fieldOptions) {
     const accessorKey = columnDef.editAccessorKey || column.id;
-    const currentValue = editingData[accessorKey] ?? value ?? '';
+    // CRITICAL FIX: Ensure we use the value from editingData first, then fall back to the passed value
+    // Convert to string to match Select component's string-based value system
+    // Always prioritize editingData[accessorKey] to ensure we use the most recent value
+    const rawValue = editingData[accessorKey] !== undefined && editingData[accessorKey] !== null
+      ? editingData[accessorKey]
+      : (value !== undefined && value !== null ? value : '');
+    const currentValue = rawValue !== null && rawValue !== undefined ? String(rawValue) : '';
+
+    // Create onChange handler that immediately updates state
+    const handleValueChange = (newValue: CellValue) => {
+      // Store the new value - preserve original type if option values are numbers
+      // Check if any option has a numeric value to determine if we should convert
+      const hasNumericValues = columnDef.fieldOptions?.some((opt: any) => 
+        'value' in opt && !('type' in opt) && typeof opt.value === 'number'
+      );
+      const finalValue = hasNumericValues && !isNaN(Number(newValue)) && newValue !== ''
+        ? Number(newValue) 
+        : newValue;
+      // Immediately update state - this happens synchronously
+      onChange({ [accessorKey]: finalValue });
+    };
 
     return (
       <SelectEditField
@@ -266,7 +286,7 @@ export const renderEditField = <TData extends DataRecord>(
         accessorKey={accessorKey}
         currentValue={currentValue}
         placeholder={placeholder}
-        onChange={(newValue) => onChange({ [accessorKey]: newValue })}
+        onChange={handleValueChange}
       />
     );
   }

package/src/components/DataTable/components/EditableRow.tsx

@@ -51,7 +51,7 @@ function SelectEditField<TData extends DataRecord>({
   // When selectSearchable is false, hide the search input (type-to-search still works via SelectContent internals)
   const isSearchable = columnDef.selectSearchable !== false;
   const isCreatable = columnDef.creatable === true;
-  const selectRef = React.useRef<HTMLFormElement>(null);
+  const selectRef = React.useRef<HTMLFieldSetElement>(null);
   const [searchTerm, setSearchTerm] = React.useState('');
   const [isOpen, setIsOpen] = React.useState(false);
   const [showCreateOption, setShowCreateOption] = React.useState(false);
@@ -379,19 +379,18 @@ export function EditableRow<TData extends DataRecord>({
         const isSystemColumn = cell.column.id === 'select' || cell.column.id === 'actions';
         
         return (
-          <td key={cell.id} role="cell">
-            <div className={cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}>
-              {isSystemColumn ? (
+          <td key={cell.id} role="cell" className={cell.column.columnDef.meta?.align === 'right' ? 'text-right' : ''}>
+            {isSystemColumn ? (
                 // System columns: render their normal cell content (checkbox for select, buttons for actions)
                 cell.column.id === 'actions' ? (
-                  <div className="flex gap-1">
-                    <Button onClick={onSave} size="sm" variant="default" aria-label="Save changes">
+                  <>
+                    <Button onClick={onSave} size="sm" variant="default" aria-label="Save changes" className="mr-1">
                       <Check className="size-4" />
                     </Button>
                     <Button onClick={onCancel} size="sm" variant="outline" aria-label="Cancel editing">
                       <X className="size-4" />
                     </Button>
-                  </div>
+                    </>
                 ) : (
                   // Select column: render the checkbox normally
                   flexRender(cell.column.columnDef.cell, cell.getContext())
@@ -434,9 +433,14 @@ export function EditableRow<TData extends DataRecord>({
                     hasAssignedRef.current = true;
                   }
                   
+                  // CRITICAL FIX: Use the correct accessor key (editAccessorKey or column.id) to get the value
+                  // This ensures that when editAccessorKey is different from column.id, we use the correct key
+                  const accessorKey = columnDef.editAccessorKey || cell.column.id;
+                  const currentValue = editingData[accessorKey] ?? (cell.getValue() as CellValue);
+                  
                   return renderEditField(
                     cell.column, 
-                    editingData[cell.column.id] ?? (cell.getValue() as CellValue), 
+                    currentValue, 
                     (value) => {
                       if (typeof value === 'object' && value !== null && !Array.isArray(value) && !(value instanceof Date)) {
                         onEditingDataChange({ ...editingData, ...(value as Record<string, CellValue>) });
@@ -450,7 +454,6 @@ export function EditableRow<TData extends DataRecord>({
                   );
                 })()
               )}
-            </div>
           </td>
         );
       })}

package/src/components/DataTable/components/EmptyState.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Database, Search, Plus, User } from 'lucide-react';
 import { Button } from '../../Button/Button';
+import { Alert, AlertTitle, AlertDescription } from '../../Alert/Alert';
 
 /**
  * Props for the EmptyState component.
@@ -38,10 +39,10 @@ export function EmptyState({
     : "Get started by adding your first entry";
 
   return (
-    <div 
+    <Alert 
       role="status" 
       aria-live="polite"
-      className="flex flex-col items-center justify-center p-8 text-center"
+      className="grid place-items-center text-center max-w-lg mx-auto"
     >
       <Icon 
         role="img" 
@@ -49,15 +50,15 @@ export function EmptyState({
         className="size-12 text-muted-foreground mb-4"
         data-testid={Icon === Database ? 'lucide-database' : Icon === User ? 'lucide-user' : 'custom-icon'}
       />
-      <h3 className="text-lg font-semibold mb-2">
+      <AlertTitle className="text-lg font-semibold mb-2">
         {title || defaultTitle}
-      </h3>
-      <p className="text-sm text-muted-foreground mb-4 max-w-sm">
+      </AlertTitle>
+      <AlertDescription className="text-sm text-muted-foreground mb-4 max-w-sm">
         {description || defaultDescription}
-      </p>
+      </AlertDescription>
       
       {(isFiltered && onClearFilters) || action ? (
-        <div className="flex gap-2">
+        <>
           {isFiltered && onClearFilters && (
             <Button variant="outline" onClick={onClearFilters}>
               <Search className="size-4 mr-2" />
@@ -71,8 +72,8 @@ export function EmptyState({
               {action.label}
             </Button>
           )}
-        </div>
+        </>
       ) : null}
-    </div>
+    </Alert>
   );
 }

package/src/components/DataTable/components/FilterRow.tsx

@@ -121,7 +121,7 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
         return (
           <td
             key={header.id}
-            className="px-4 py-2"
+            className="p-1"
           >
             {canFilter ? (
               <ColumnFilter
@@ -131,9 +131,7 @@ export function FilterRow<TData>({ table, visibleColumns }: FilterRowProps<TData
                 placeholder={`Filter ${getColumnHeaderText(column as unknown as Column<DataRecord, unknown>)}...`}
               />
             ) : (
-              <div className="h-8 flex items-center text-sec-400 text-sm">
-                No filter
-              </div>
+              <>&nbsp;</>
             )}
           </td>
         );

package/src/components/DataTable/components/ImportModal.tsx

@@ -36,10 +36,12 @@
  * - Customizable text content
  */
 import React, { useState, useRef, useEffect } from 'react';
-import { Dialog, DialogContent, DialogHeader } from '../../Dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../../Dialog';
 import { Button } from '../../Button/Button';
 import { Input } from '../../Input/Input';
 import { Progress } from '../../Progress';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../Table/Table';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../../Card/Card';
 import { Upload, FileText, AlertCircle } from 'lucide-react';
 import { createLogger } from '../../../utils/core/logger';
 
@@ -372,150 +374,146 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-2xl bg-main-50" title={title} description={description}>
+      <DialogContent 
+        maxWidthPercent={95} 
+        className="w-auto" 
+        title={title} 
+        description={description}
+      >
         <DialogHeader>
-          <h2>{title}</h2>
-          <p>{description}</p>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
         </DialogHeader>
 
-        <div className="space-y-4">
-          <div className="border-2 border-dashed border-sec-200 rounded-lg p-6 text-center">
-            <FileText className="size-8 mx-auto text-sec-400 mb-2" />
-            <p className="text-sec-600 mb-2">
+          <Card className="text-center">
+            <CardHeader>
+              <FileText className="size-8 mx-auto text-sec-400 mb-2" />
+            </CardHeader>
+            <CardDescription>
               {file ? `Selected: ${file.name}` : uploadText}
-            </p>
-            {file && (
-              <p className="text-xs text-sec-500">
-                File selected, processing preview...
-              </p>
-            )}
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => fileInputRef.current?.click()}
-            >
-              <Upload className="size-4 mr-2" />
-              {selectFileButtonText}
-            </Button>
-            <Input
-              ref={fileInputRef}
-              type="file"
-              accept=".csv"
-              onChange={handleFileSelect}
-              className="hidden"
-            />
-          </div>
-
-          {error && (
-            <div className="flex items-center gap-2 p-3 bg-acc-50 border border-acc-200 rounded text-acc-700">
-              <AlertCircle className="size-4" />
-              <span className="text-sm">{error}</span>
-            </div>
-          )}
-          
-          {validationErrors.length > 0 && (
-            <div className="space-y-2">
-              <div className="flex items-center gap-2 p-3 bg-acc-50 border border-acc-200 rounded text-acc-700">
-                <AlertCircle className="size-4" />
-                <span className="text-sm font-medium">
-                  {validationErrors.length} validation error{validationErrors.length !== 1 ? 's' : ''} found
+              {file && (
+                <span className="block text-xs text-sec-500 mt-1">
+                  File selected, processing preview...
                 </span>
-              </div>
-              <div className="max-h-32 overflow-y-auto space-y-1">
-                {validationErrors.slice(0, 10).map((err, idx) => (
-                  <div key={idx} className="text-xs text-acc-600 p-2 bg-acc-50 border border-acc-200 rounded">
-                    <span className="font-medium">Row {err.row}</span> • {err.field}: {err.message}
-                  </div>
-                ))}
-                {validationErrors.length > 10 && (
-                  <div className="text-xs text-sec-500 italic">
-                    ... and {validationErrors.length - 10} more errors
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-
+              )}
+            </CardDescription>
+            <CardContent className="text-center">
+              {error && (
+                <>
+                  <AlertCircle className="inline-block size-4 mr-2" />
+                  <span className="text-sm">{error}</span>
+                </>
+              )}
+              
+              {validationErrors.length > 0 && (
+                <>
+                  <AlertCircle className="size-4" />
+                  <span className="text-sm font-medium">
+                    {validationErrors.length} validation error{validationErrors.length !== 1 ? 's' : ''} found
+                  </span>
+                  {validationErrors.slice(0, 10).map((err, idx) => (
+                    <p key={idx} className="text-xs text-acc-600 p-2 bg-acc-50 border border-acc-200 rounded">
+                      <span className="font-medium">Row {err.row}</span> • {err.field}: {err.message}
+                    </p>
+                  ))}
+                  {validationErrors.length > 10 && (
+                    <p className="text-xs text-sec-500 italic">
+                      ... and {validationErrors.length - 10} more errors
+                    </p>
+                  )}
+                </>
+              )}
 
-          {importProgress && isProcessing && (
-            <div className="space-y-2 p-4 bg-sec-50 rounded-lg border border-sec-200">
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-medium text-sec-900">
-                  {importProgress.stage === 'parsing' ? 'Parsing CSV file...' : 'Importing data...'}
-                </span>
-                <span className="text-sm text-sec-600">
-                  {importProgress.current.toLocaleString()} / {importProgress.total.toLocaleString()} rows
-                </span>
-              </div>
-              <Progress 
-                value={importProgress.total > 0 ? (importProgress.current / importProgress.total) * 100 : 0} 
-                className="h-2 bg-sec-200"
+              {importProgress && isProcessing && (
+                <>
+                  <span className="text-sm font-medium text-sec-900">
+                    {importProgress.stage === 'parsing' ? 'Parsing CSV file...' : 'Importing data...'}
+                  </span>
+                  <span className="text-sm text-sec-600">
+                    {importProgress.current.toLocaleString()} / {importProgress.total.toLocaleString()} rows
+                  </span>
+                  <Progress 
+                    value={importProgress.total > 0 ? (importProgress.current / importProgress.total) * 100 : 0} 
+                    className="h-2 bg-sec-200"
+                  />
+                  <p className="text-xs text-sec-500">
+                    {importProgress.total > 0 && importProgress.current < importProgress.total
+                      ? `${Math.round((importProgress.current / importProgress.total) * 100)}% complete`
+                      : importProgress.stage === 'importing' && importProgress.current === 0
+                      ? 'Processing your data...'
+                      : importProgress.current === importProgress.total
+                      ? 'Complete!'
+                      : 'Processing...'}
+                  </p>
+                </>
+              )}
+            </CardContent>
+            <CardFooter>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <Upload className="size-4 mr-2" />
+                {selectFileButtonText}
+              </Button>
+              <Input
+                ref={fileInputRef}
+                type="file"
+                accept=".csv"
+                onChange={handleFileSelect}
+                className="hidden"
               />
-              <p className="text-xs text-sec-500">
-                {importProgress.total > 0 && importProgress.current < importProgress.total
-                  ? `${Math.round((importProgress.current / importProgress.total) * 100)}% complete`
-                  : importProgress.stage === 'importing' && importProgress.current === 0
-                  ? 'Processing your data...'
-                  : importProgress.current === importProgress.total
-                  ? 'Complete!'
-                  : 'Processing...'}
-              </p>
-            </div>
-          )}
+            </CardFooter>
+          </Card>
 
           {file && previewData && previewData.length > 0 && !isProcessing ? (
-            <div className="space-y-3">
-              <h4 className="text-sec-900">{previewHeaderText}</h4>
-              <div className="border rounded-lg overflow-hidden">
-                <div className="overflow-x-auto max-h-48">
-                  <table className="min-w-full text-xs">
-                    <thead className="bg-sec-50">
-                      <tr>
+            <Card>
+              <CardHeader>
+                <CardTitle>{previewHeaderText}</CardTitle>
+              </CardHeader>
+              <CardContent className="overflow-x-auto">
+                  <Table className="text-xs min-w-full">
+                    <TableHeader>
+                      <TableRow>
                         {Object.keys(previewData[0]).map((header) => (
-                          <th key={header} className="px-2 py-1 text-left font-medium text-sec-900 border-b">
+                          <TableHead key={header} >
                             {header}
-                          </th>
+                          </TableHead>
                         ))}
-                      </tr>
-                    </thead>
-                    <tbody>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
                       {previewData.map((row, index) => (
-                        <tr key={index} className={index % 2 === 0 ? 'bg-app-main-50' : 'bg-sec-50'}>
+                        <TableRow key={index} >
                           {Object.values(row).map((value, cellIndex) => (
-                            <td key={cellIndex} className="px-2 py-1 text-sec-700 border-b">
+                            <TableCell key={cellIndex} >
                               {String(value)}
-                            </td>
+                            </TableCell>
                           ))}
-                        </tr>
+                        </TableRow>
                       ))}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <p className="text-sec-500">
-                {totalRowsText.replace('{count}', totalCount.toString())}
-              </p>
-            </div>
-          ) : !file ? (
-            <div className="border rounded-lg p-6 text-center bg-sec-50">
-              <p className="text-sec-500">
-                Select a CSV file to preview
-              </p>
-            </div>
+                    </TableBody>
+                  </Table>
+              </CardContent>
+              <CardFooter>
+                  {totalRowsText.replace('{count}', totalCount.toString())}     
+              </CardFooter>
+            </Card>
           ) : null}
 
-          <div className="flex justify-end gap-2">
-            <Button variant="outline" onClick={handleClose}>
-              {cancelButtonText}
-            </Button>
-            <Button 
-              onClick={handleImport} 
-              disabled={!file || isProcessing}
-            >
-              {isProcessing ? importButtonProcessingText : importButtonText}
-            </Button>
-          </div>
-        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            {cancelButtonText}
+          </Button>
+          <Button 
+            onClick={handleImport} 
+            disabled={!file || isProcessing}
+          >
+            {isProcessing ? importButtonProcessingText : importButtonText}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );