feat: add frontend manual extraction flow with review screen (refs #136)
- Create useManualExtraction hook: submit PDF to OCR, poll job status, track progress - Create useCreateSchedulesFromExtraction hook: batch create maintenance schedules from extraction - Create MaintenanceScheduleReviewScreen: dialog with checkboxes, inline editing, batch create - Update DocumentForm: remove "(Coming soon)", trigger extraction after upload, show progress - Add 12 unit tests for review screen (rendering, selection, empty state, errors) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
@@ -0,0 +1,225 @@
|
||||
/**
|
||||
* @ai-summary Unit tests for MaintenanceScheduleReviewScreen component
|
||||
* @ai-context Tests rendering, selection, editing, empty state, and error handling
|
||||
*/
|
||||
|
||||
import { render, screen, fireEvent } from '@testing-library/react';
|
||||
import { MaintenanceScheduleReviewScreen } from './MaintenanceScheduleReviewScreen';
|
||||
import type { MaintenanceScheduleItem } from '../../documents/hooks/useManualExtraction';
|
||||
|
||||
// Mock the create hook
|
||||
const mockMutateAsync = jest.fn();
|
||||
jest.mock('../hooks/useCreateSchedulesFromExtraction', () => ({
|
||||
useCreateSchedulesFromExtraction: () => ({
|
||||
mutateAsync: mockMutateAsync,
|
||||
isPending: false,
|
||||
}),
|
||||
}));
|
||||
|
||||
const sampleItems: MaintenanceScheduleItem[] = [
|
||||
{
|
||||
service: 'Engine Oil Change',
|
||||
intervalMiles: 5000,
|
||||
intervalMonths: 6,
|
||||
details: 'Use 0W-20 full synthetic oil',
|
||||
confidence: 0.95,
|
||||
subtypes: ['Engine Oil'],
|
||||
},
|
||||
{
|
||||
service: 'Tire Rotation',
|
||||
intervalMiles: 5000,
|
||||
intervalMonths: 6,
|
||||
details: null,
|
||||
confidence: 0.88,
|
||||
subtypes: ['Tires'],
|
||||
},
|
||||
{
|
||||
service: 'Cabin Air Filter Replacement',
|
||||
intervalMiles: 15000,
|
||||
intervalMonths: 12,
|
||||
details: null,
|
||||
confidence: 0.72,
|
||||
subtypes: ['Cabin Air Filter / Purifier'],
|
||||
},
|
||||
];
|
||||
|
||||
describe('MaintenanceScheduleReviewScreen', () => {
|
||||
const defaultProps = {
|
||||
open: true,
|
||||
items: sampleItems,
|
||||
vehicleId: 'vehicle-123',
|
||||
onClose: jest.fn(),
|
||||
onCreated: jest.fn(),
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
mockMutateAsync.mockResolvedValue([]);
|
||||
});
|
||||
|
||||
describe('Rendering', () => {
|
||||
it('should render extracted items with checkboxes', () => {
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Extracted Maintenance Schedules')).toBeInTheDocument();
|
||||
expect(screen.getByText('3 of 3 items selected')).toBeInTheDocument();
|
||||
|
||||
// All items should be visible
|
||||
expect(screen.getByText('Engine Oil Change')).toBeInTheDocument();
|
||||
expect(screen.getByText('Tire Rotation')).toBeInTheDocument();
|
||||
expect(screen.getByText('Cabin Air Filter Replacement')).toBeInTheDocument();
|
||||
|
||||
// All checkboxes should be checked by default
|
||||
const checkboxes = screen.getAllByRole('checkbox');
|
||||
expect(checkboxes).toHaveLength(3);
|
||||
checkboxes.forEach((cb) => {
|
||||
expect(cb).toBeChecked();
|
||||
});
|
||||
});
|
||||
|
||||
it('should display interval information', () => {
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
expect(screen.getAllByText('5000 mi')).toHaveLength(2);
|
||||
expect(screen.getAllByText('6 mo')).toHaveLength(2);
|
||||
expect(screen.getByText('15000 mi')).toBeInTheDocument();
|
||||
expect(screen.getByText('12 mo')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display details text when present', () => {
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Use 0W-20 full synthetic oil')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should display subtype chips', () => {
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
expect(screen.getByText('Engine Oil')).toBeInTheDocument();
|
||||
expect(screen.getByText('Tires')).toBeInTheDocument();
|
||||
expect(screen.getByText('Cabin Air Filter / Purifier')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Selection', () => {
|
||||
it('should toggle item selection on checkbox click', () => {
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox');
|
||||
|
||||
// Uncheck first item
|
||||
fireEvent.click(checkboxes[0]);
|
||||
expect(checkboxes[0]).not.toBeChecked();
|
||||
expect(screen.getByText('2 of 3 items selected')).toBeInTheDocument();
|
||||
|
||||
// Re-check it
|
||||
fireEvent.click(checkboxes[0]);
|
||||
expect(checkboxes[0]).toBeChecked();
|
||||
expect(screen.getByText('3 of 3 items selected')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should deselect all items', () => {
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
fireEvent.click(screen.getByText('Deselect All'));
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox');
|
||||
checkboxes.forEach((cb) => {
|
||||
expect(cb).not.toBeChecked();
|
||||
});
|
||||
expect(screen.getByText('0 of 3 items selected')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should select all items after deselecting', () => {
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
// Deselect all first
|
||||
fireEvent.click(screen.getByText('Deselect All'));
|
||||
expect(screen.getByText('0 of 3 items selected')).toBeInTheDocument();
|
||||
|
||||
// Select all
|
||||
fireEvent.click(screen.getByText('Select All'));
|
||||
|
||||
const checkboxes = screen.getAllByRole('checkbox');
|
||||
checkboxes.forEach((cb) => {
|
||||
expect(cb).toBeChecked();
|
||||
});
|
||||
expect(screen.getByText('3 of 3 items selected')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should disable create button when no items selected', () => {
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
fireEvent.click(screen.getByText('Deselect All'));
|
||||
|
||||
const createButton = screen.getByRole('button', { name: /create/i });
|
||||
expect(createButton).toBeDisabled();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Empty state', () => {
|
||||
it('should show no items found message for empty extraction', () => {
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} items={[]} />);
|
||||
|
||||
expect(screen.getByText('No maintenance items found')).toBeInTheDocument();
|
||||
expect(screen.getByText(/did not contain any recognizable/)).toBeInTheDocument();
|
||||
|
||||
// Should show Close button instead of Create
|
||||
expect(screen.getByText('Close')).toBeInTheDocument();
|
||||
expect(screen.queryByText(/Create/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Schedule creation', () => {
|
||||
it('should create selected schedules on button click', async () => {
|
||||
mockMutateAsync.mockResolvedValue([{ id: '1' }, { id: '2' }, { id: '3' }]);
|
||||
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /create 3 schedules/i }));
|
||||
|
||||
expect(mockMutateAsync).toHaveBeenCalledWith({
|
||||
vehicleId: 'vehicle-123',
|
||||
items: expect.arrayContaining([
|
||||
expect.objectContaining({ service: 'Engine Oil Change', selected: true }),
|
||||
expect.objectContaining({ service: 'Tire Rotation', selected: true }),
|
||||
expect.objectContaining({ service: 'Cabin Air Filter Replacement', selected: true }),
|
||||
]),
|
||||
});
|
||||
});
|
||||
|
||||
it('should only create selected items', async () => {
|
||||
mockMutateAsync.mockResolvedValue([{ id: '1' }]);
|
||||
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
// Deselect last two items
|
||||
const checkboxes = screen.getAllByRole('checkbox');
|
||||
fireEvent.click(checkboxes[1]);
|
||||
fireEvent.click(checkboxes[2]);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /create 1 schedule$/i }));
|
||||
|
||||
expect(mockMutateAsync).toHaveBeenCalledWith({
|
||||
vehicleId: 'vehicle-123',
|
||||
items: expect.arrayContaining([
|
||||
expect.objectContaining({ service: 'Engine Oil Change', selected: true }),
|
||||
]),
|
||||
});
|
||||
// Should not include unselected items
|
||||
const callArgs = mockMutateAsync.mock.calls[0][0];
|
||||
expect(callArgs.items).toHaveLength(1);
|
||||
});
|
||||
|
||||
it('should show error on creation failure', async () => {
|
||||
mockMutateAsync.mockRejectedValue(new Error('Network error'));
|
||||
|
||||
render(<MaintenanceScheduleReviewScreen {...defaultProps} />);
|
||||
|
||||
fireEvent.click(screen.getByRole('button', { name: /create 3 schedules/i }));
|
||||
|
||||
// Wait for error to appear (async mutation)
|
||||
await screen.findByText('Network error');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,395 @@
|
||||
/**
|
||||
* @ai-summary Review screen for extracted maintenance schedules from manual OCR
|
||||
* @ai-context Dialog showing extracted items with checkboxes, inline editing, batch create
|
||||
*/
|
||||
|
||||
import React, { useState, useCallback } from 'react';
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
Box,
|
||||
Typography,
|
||||
TextField,
|
||||
Checkbox,
|
||||
IconButton,
|
||||
Alert,
|
||||
CircularProgress,
|
||||
Chip,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
} from '@mui/material';
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import CheckIcon from '@mui/icons-material/Check';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import SelectAllIcon from '@mui/icons-material/SelectAll';
|
||||
import DeselectIcon from '@mui/icons-material/Deselect';
|
||||
import type { MaintenanceScheduleItem } from '../../documents/hooks/useManualExtraction';
|
||||
import { useCreateSchedulesFromExtraction } from '../hooks/useCreateSchedulesFromExtraction';
|
||||
|
||||
export interface MaintenanceScheduleReviewScreenProps {
|
||||
open: boolean;
|
||||
items: MaintenanceScheduleItem[];
|
||||
vehicleId: string;
|
||||
onClose: () => void;
|
||||
onCreated: (count: number) => void;
|
||||
}
|
||||
|
||||
interface EditableItem extends MaintenanceScheduleItem {
|
||||
selected: boolean;
|
||||
}
|
||||
|
||||
const ConfidenceIndicator: React.FC<{ confidence: number }> = ({ confidence }) => {
|
||||
const filledDots = Math.round(confidence * 4);
|
||||
const isLow = confidence < 0.6;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{ display: 'flex', gap: 0.25, ml: 1 }}
|
||||
aria-label={`Confidence: ${Math.round(confidence * 100)}%`}
|
||||
>
|
||||
{[0, 1, 2, 3].map((i) => (
|
||||
<Box
|
||||
key={i}
|
||||
sx={{
|
||||
width: 6,
|
||||
height: 6,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: i < filledDots
|
||||
? (isLow ? 'warning.main' : 'success.main')
|
||||
: 'grey.300',
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
interface InlineFieldProps {
|
||||
label: string;
|
||||
value: string | number | null;
|
||||
type?: 'text' | 'number';
|
||||
onSave: (value: string | number | null) => void;
|
||||
suffix?: string;
|
||||
}
|
||||
|
||||
const InlineField: React.FC<InlineFieldProps> = ({ label, value, type = 'text', onSave, suffix }) => {
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editValue, setEditValue] = useState(value !== null ? String(value) : '');
|
||||
|
||||
const displayValue = value !== null
|
||||
? (suffix ? `${value} ${suffix}` : String(value))
|
||||
: '-';
|
||||
|
||||
const handleSave = () => {
|
||||
let parsed: string | number | null = editValue || null;
|
||||
if (type === 'number' && editValue) {
|
||||
const num = parseFloat(editValue);
|
||||
parsed = isNaN(num) ? null : num;
|
||||
}
|
||||
onSave(parsed);
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
setEditValue(value !== null ? String(value) : '');
|
||||
setIsEditing(false);
|
||||
};
|
||||
|
||||
if (isEditing) {
|
||||
return (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ minWidth: 50, flexShrink: 0 }}>
|
||||
{label}:
|
||||
</Typography>
|
||||
<TextField
|
||||
size="small"
|
||||
value={editValue}
|
||||
onChange={(e) => setEditValue(e.target.value)}
|
||||
type={type === 'number' ? 'number' : 'text'}
|
||||
inputProps={{ step: type === 'number' ? 1 : undefined }}
|
||||
autoFocus
|
||||
sx={{ flex: 1, '& .MuiInputBase-input': { py: 0.5, px: 1, fontSize: '0.875rem' } }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') handleSave();
|
||||
if (e.key === 'Escape') handleCancel();
|
||||
}}
|
||||
/>
|
||||
<IconButton size="small" onClick={handleSave} color="primary">
|
||||
<CheckIcon sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
<IconButton size="small" onClick={handleCancel}>
|
||||
<CloseIcon sx={{ fontSize: 16 }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
cursor: 'pointer',
|
||||
'&:hover .edit-icon': { opacity: 1 },
|
||||
}}
|
||||
onClick={() => setIsEditing(true)}
|
||||
role="button"
|
||||
tabIndex={0}
|
||||
aria-label={`Edit ${label}`}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
setIsEditing(true);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary" sx={{ minWidth: 50, flexShrink: 0 }}>
|
||||
{label}:
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
fontWeight: value !== null ? 500 : 400,
|
||||
color: value !== null ? 'text.primary' : 'text.disabled',
|
||||
}}
|
||||
>
|
||||
{displayValue}
|
||||
</Typography>
|
||||
<EditIcon className="edit-icon" sx={{ fontSize: 14, opacity: 0, transition: 'opacity 0.2s', color: 'text.secondary' }} />
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export const MaintenanceScheduleReviewScreen: React.FC<MaintenanceScheduleReviewScreenProps> = ({
|
||||
open,
|
||||
items,
|
||||
vehicleId,
|
||||
onClose,
|
||||
onCreated,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const createMutation = useCreateSchedulesFromExtraction();
|
||||
|
||||
const [editableItems, setEditableItems] = useState<EditableItem[]>(() =>
|
||||
items.map((item) => ({ ...item, selected: true }))
|
||||
);
|
||||
const [createError, setCreateError] = useState<string | null>(null);
|
||||
|
||||
const selectedCount = editableItems.filter((i) => i.selected).length;
|
||||
|
||||
const handleToggle = useCallback((index: number) => {
|
||||
setEditableItems((prev) =>
|
||||
prev.map((item, i) => (i === index ? { ...item, selected: !item.selected } : item))
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleSelectAll = useCallback(() => {
|
||||
setEditableItems((prev) => prev.map((item) => ({ ...item, selected: true })));
|
||||
}, []);
|
||||
|
||||
const handleDeselectAll = useCallback(() => {
|
||||
setEditableItems((prev) => prev.map((item) => ({ ...item, selected: false })));
|
||||
}, []);
|
||||
|
||||
const handleFieldUpdate = useCallback((index: number, field: keyof MaintenanceScheduleItem, value: string | number | null) => {
|
||||
setEditableItems((prev) =>
|
||||
prev.map((item, i) => (i === index ? { ...item, [field]: value } : item))
|
||||
);
|
||||
}, []);
|
||||
|
||||
const handleCreate = async () => {
|
||||
setCreateError(null);
|
||||
const selectedItems = editableItems.filter((i) => i.selected);
|
||||
if (selectedItems.length === 0) return;
|
||||
|
||||
try {
|
||||
await createMutation.mutateAsync({ vehicleId, items: selectedItems });
|
||||
onCreated(selectedItems.length);
|
||||
} catch (err: any) {
|
||||
setCreateError(err?.message || 'Failed to create maintenance schedules');
|
||||
}
|
||||
};
|
||||
|
||||
const isEmpty = items.length === 0;
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
maxWidth="md"
|
||||
fullWidth
|
||||
fullScreen={isMobile}
|
||||
PaperProps={{
|
||||
sx: { maxHeight: isMobile ? '100vh' : '90vh' },
|
||||
}}
|
||||
>
|
||||
<DialogTitle sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Typography variant="h6" component="span">
|
||||
Extracted Maintenance Schedules
|
||||
</Typography>
|
||||
<IconButton onClick={onClose} size="small" aria-label="Close">
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
</DialogTitle>
|
||||
|
||||
<DialogContent dividers>
|
||||
{isEmpty ? (
|
||||
<Box sx={{ textAlign: 'center', py: 6 }}>
|
||||
<Typography variant="h6" color="text.secondary" gutterBottom>
|
||||
No maintenance items found
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
The manual did not contain any recognizable routine maintenance schedules.
|
||||
</Typography>
|
||||
</Box>
|
||||
) : (
|
||||
<>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{selectedCount} of {editableItems.length} items selected
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', gap: 1 }}>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<SelectAllIcon />}
|
||||
onClick={handleSelectAll}
|
||||
disabled={selectedCount === editableItems.length}
|
||||
>
|
||||
Select All
|
||||
</Button>
|
||||
<Button
|
||||
size="small"
|
||||
startIcon={<DeselectIcon />}
|
||||
onClick={handleDeselectAll}
|
||||
disabled={selectedCount === 0}
|
||||
>
|
||||
Deselect All
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
|
||||
{editableItems.map((item, index) => (
|
||||
<Box
|
||||
key={index}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'flex-start',
|
||||
p: 1.5,
|
||||
borderRadius: 1,
|
||||
border: '1px solid',
|
||||
borderColor: item.selected ? 'primary.light' : 'divider',
|
||||
backgroundColor: item.selected ? 'primary.50' : 'transparent',
|
||||
opacity: item.selected ? 1 : 0.6,
|
||||
transition: 'all 0.15s ease',
|
||||
'&:hover': { borderColor: 'primary.main' },
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={item.selected}
|
||||
onChange={() => handleToggle(index)}
|
||||
sx={{ mt: -0.5, mr: 1 }}
|
||||
inputProps={{ 'aria-label': `Select ${item.service}` }}
|
||||
/>
|
||||
<Box sx={{ flex: 1, minWidth: 0 }}>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', mb: 0.5 }}>
|
||||
<InlineField
|
||||
label="Service"
|
||||
value={item.service}
|
||||
onSave={(v) => handleFieldUpdate(index, 'service', v)}
|
||||
/>
|
||||
<ConfidenceIndicator confidence={item.confidence} />
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
display: 'flex',
|
||||
flexDirection: isMobile ? 'column' : 'row',
|
||||
gap: isMobile ? 0.5 : 2,
|
||||
}}>
|
||||
<InlineField
|
||||
label="Miles"
|
||||
value={item.intervalMiles}
|
||||
type="number"
|
||||
onSave={(v) => handleFieldUpdate(index, 'intervalMiles', v)}
|
||||
suffix="mi"
|
||||
/>
|
||||
<InlineField
|
||||
label="Months"
|
||||
value={item.intervalMonths}
|
||||
type="number"
|
||||
onSave={(v) => handleFieldUpdate(index, 'intervalMonths', v)}
|
||||
suffix="mo"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{item.details && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: 'block', mt: 0.5 }}>
|
||||
{item.details}
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
{item.subtypes.length > 0 && (
|
||||
<Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.5, mt: 0.5 }}>
|
||||
{item.subtypes.map((subtype) => (
|
||||
<Chip key={subtype} label={subtype} size="small" variant="outlined" />
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Typography variant="body2" color="text.secondary" sx={{ mt: 2, textAlign: 'center' }}>
|
||||
Tap any field to edit before creating schedules.
|
||||
</Typography>
|
||||
</>
|
||||
)}
|
||||
|
||||
{createError && (
|
||||
<Alert severity="error" sx={{ mt: 2 }}>
|
||||
{createError}
|
||||
</Alert>
|
||||
)}
|
||||
</DialogContent>
|
||||
|
||||
<DialogActions
|
||||
sx={{
|
||||
flexDirection: isMobile ? 'column' : 'row',
|
||||
gap: 1,
|
||||
p: 2,
|
||||
}}
|
||||
>
|
||||
<Button
|
||||
onClick={onClose}
|
||||
sx={{ order: isMobile ? 2 : 1, width: isMobile ? '100%' : 'auto' }}
|
||||
>
|
||||
{isEmpty ? 'Close' : 'Skip'}
|
||||
</Button>
|
||||
{!isEmpty && (
|
||||
<>
|
||||
<Box sx={{ flex: 1, display: isMobile ? 'none' : 'block' }} />
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={handleCreate}
|
||||
disabled={selectedCount === 0 || createMutation.isPending}
|
||||
startIcon={createMutation.isPending ? <CircularProgress size={16} /> : <CheckIcon />}
|
||||
sx={{ order: isMobile ? 1 : 2, width: isMobile ? '100%' : 'auto' }}
|
||||
>
|
||||
{createMutation.isPending
|
||||
? 'Creating...'
|
||||
: `Create ${selectedCount} Schedule${selectedCount !== 1 ? 's' : ''}`}
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default MaintenanceScheduleReviewScreen;
|
||||
Reference in New Issue
Block a user