mirror of
https://github.com/pacnpal/thrilltrack-explorer.git
synced 2025-12-20 02:51:12 -05:00
feat: Implement form, moderation, and testing phases
This commit is contained in:
gpt-engineer-app[bot]
241
docs/PHASE_5_TESTING.md
Normal file
241
docs/PHASE_5_TESTING.md
Normal file
@@ -0,0 +1,241 @@
|
||||
# Phase 5: Testing & Validation Guide
|
||||
|
||||
## Completed Implementation
|
||||
|
||||
✅ **Phase 1-2**: All 26 edge functions + 29 frontend calls have request tracking
|
||||
✅ **Phase 3**: All 7 admin forms use `submissionReducer` for state management
|
||||
✅ **Phase 4**: Ready for moderation state machine integration
|
||||
|
||||
## Manual Testing Checklist
|
||||
|
||||
### Test Suite 1: Form Submission Flow (30 min)
|
||||
|
||||
#### Test Case: RideForm submission with state machine
|
||||
1. Navigate to `/admin` → Create Ride
|
||||
2. Fill out form completely
|
||||
3. **DevTools Check:**
|
||||
- React DevTools → Find `RideForm` component
|
||||
- Watch `submissionState` prop
|
||||
- Verify transitions: `draft` → `validating` → `submitting` → `complete`
|
||||
4. Click Submit
|
||||
5. **Expected Behavior:**
|
||||
- Button becomes disabled immediately
|
||||
- Text changes to "Saving..."
|
||||
- Success toast appears
|
||||
- Form redirects or resets
|
||||
|
||||
#### Test Case: Validation error handling
|
||||
1. Fill out form with missing required field (e.g., no name)
|
||||
2. Click Submit
|
||||
3. **Expected Behavior:**
|
||||
- State transitions: `draft` → `validating` → `draft` (with errors)
|
||||
- Validation error toast appears
|
||||
- Button re-enables for retry
|
||||
- Form retains entered data
|
||||
|
||||
#### Test Case: Network error handling
|
||||
1. Fill out form completely
|
||||
2. Open DevTools → Network tab → Throttle to "Offline"
|
||||
3. Click Submit
|
||||
4. **Expected Behavior:**
|
||||
- State attempts transition
|
||||
- Error caught and handled
|
||||
- State resets to `draft`
|
||||
- Error toast with retry option
|
||||
- Button re-enables
|
||||
|
||||
### Test Suite 2: Request Tracking (30 min)
|
||||
|
||||
#### Test Case: Edge function correlation
|
||||
1. Submit RideForm
|
||||
2. **Browser Check:**
|
||||
- Network tab → Find POST request to edge function
|
||||
- Response Headers → Verify `X-Request-ID` present
|
||||
- Response Body → Verify `requestId` field present
|
||||
3. Copy `requestId` value
|
||||
4. **Database Check:**
|
||||
```sql
|
||||
SELECT * FROM request_metadata
|
||||
WHERE request_id = 'PASTE_REQUEST_ID_HERE';
|
||||
```
|
||||
5. **Expected:** Single row with matching endpoint, user_id, duration
|
||||
|
||||
#### Test Case: Toast notification with requestId
|
||||
1. Trigger photo upload
|
||||
2. **Expected:** Success toast displays:
|
||||
```
|
||||
Upload Successful
|
||||
Request ID: abc12345
|
||||
```
|
||||
|
||||
### Test Suite 3: Database Validation (1 hour)
|
||||
|
||||
#### Query 1: Request Metadata Coverage
|
||||
```sql
|
||||
SELECT
|
||||
endpoint,
|
||||
COUNT(*) as request_count,
|
||||
COUNT(DISTINCT user_id) as unique_users,
|
||||
AVG(duration_ms) as avg_duration_ms,
|
||||
MAX(duration_ms) as max_duration_ms,
|
||||
MIN(duration_ms) as min_duration_ms,
|
||||
COUNT(CASE WHEN error_message IS NOT NULL THEN 1 END) as error_count,
|
||||
ROUND(100.0 * COUNT(CASE WHEN error_message IS NOT NULL THEN 1 END) / COUNT(*), 2) as error_rate_percent
|
||||
FROM request_metadata
|
||||
WHERE created_at > NOW() - INTERVAL '1 hour'
|
||||
GROUP BY endpoint
|
||||
ORDER BY request_count DESC;
|
||||
```
|
||||
**Expected:** All critical endpoints present (`process-selective-approval`, `upload-image`, etc.)
|
||||
|
||||
#### Query 2: Trace ID Correlation
|
||||
```sql
|
||||
SELECT
|
||||
trace_id,
|
||||
COUNT(*) as operation_count,
|
||||
MIN(created_at) as first_operation,
|
||||
MAX(created_at) as last_operation,
|
||||
EXTRACT(EPOCH FROM (MAX(created_at) - MIN(created_at))) as total_duration_seconds,
|
||||
STRING_AGG(DISTINCT endpoint, ', ' ORDER BY endpoint) as endpoints_hit
|
||||
FROM request_metadata
|
||||
WHERE trace_id IS NOT NULL
|
||||
AND created_at > NOW() - INTERVAL '1 day'
|
||||
GROUP BY trace_id
|
||||
HAVING COUNT(*) > 1
|
||||
ORDER BY operation_count DESC
|
||||
LIMIT 20;
|
||||
```
|
||||
**Expected:** Batch approvals show 5-50 operations with same `trace_id`
|
||||
|
||||
#### Query 3: Status Type Safety
|
||||
```sql
|
||||
SELECT
|
||||
'content_submissions' as table_name,
|
||||
status,
|
||||
COUNT(*) as count,
|
||||
CASE
|
||||
WHEN status IN ('draft', 'pending', 'locked', 'reviewing', 'partially_approved', 'approved', 'rejected', 'escalated')
|
||||
THEN 'VALID'
|
||||
ELSE 'INVALID'
|
||||
END as validity
|
||||
FROM content_submissions
|
||||
GROUP BY status
|
||||
|
||||
UNION ALL
|
||||
|
||||
SELECT
|
||||
'submission_items' as table_name,
|
||||
status,
|
||||
COUNT(*) as count,
|
||||
CASE
|
||||
WHEN status IN ('pending', 'approved', 'rejected', 'flagged', 'skipped')
|
||||
THEN 'VALID'
|
||||
ELSE 'INVALID'
|
||||
END as validity
|
||||
FROM submission_items
|
||||
GROUP BY status
|
||||
ORDER BY table_name, count DESC;
|
||||
```
|
||||
**Expected:** All rows show `VALID` in validity column
|
||||
|
||||
#### Query 4: Orphaned Data Check
|
||||
```sql
|
||||
SELECT
|
||||
cs.id,
|
||||
cs.created_at,
|
||||
cs.status,
|
||||
cs.submission_type,
|
||||
cs.submitted_by,
|
||||
COUNT(si.id) as item_count
|
||||
FROM content_submissions cs
|
||||
LEFT JOIN submission_items si ON si.submission_id = cs.id
|
||||
WHERE cs.created_at > NOW() - INTERVAL '2 hours'
|
||||
GROUP BY cs.id, cs.created_at, cs.status, cs.submission_type, cs.submitted_by
|
||||
HAVING COUNT(si.id) = 0
|
||||
ORDER BY cs.created_at DESC;
|
||||
```
|
||||
**Expected:** 0 rows (or only very recent submissions < 1 hour old)
|
||||
|
||||
#### Query 5: Lock Duration Analysis
|
||||
```sql
|
||||
SELECT
|
||||
DATE_TRUNC('hour', locked_at) as hour,
|
||||
COUNT(*) as locks_acquired,
|
||||
AVG(EXTRACT(EPOCH FROM (locked_until - locked_at))) / 60 as avg_lock_duration_minutes,
|
||||
COUNT(CASE WHEN locked_until < NOW() THEN 1 END) as expired_locks,
|
||||
COUNT(CASE WHEN status = 'locked' AND locked_until < NOW() THEN 1 END) as stuck_locks
|
||||
FROM content_submissions
|
||||
WHERE locked_at > NOW() - INTERVAL '24 hours'
|
||||
GROUP BY DATE_TRUNC('hour', locked_at)
|
||||
ORDER BY hour DESC;
|
||||
```
|
||||
**Expected:**
|
||||
- Average lock duration ~15 minutes
|
||||
- Few expired locks
|
||||
- Zero stuck locks
|
||||
|
||||
### Test Suite 4: Performance Testing (1 hour)
|
||||
|
||||
#### Test 1: State Machine Overhead
|
||||
1. Open Chrome DevTools → Performance tab
|
||||
2. Click "Record" (⚫)
|
||||
3. Fill out and submit RideForm
|
||||
4. Stop recording
|
||||
5. **Analysis:**
|
||||
- Find "Reducer" or "submissionReducer" in flame graph
|
||||
- Measure total time in reducer calls
|
||||
- **Target:** < 5ms total overhead per submission
|
||||
|
||||
#### Test 2: Request Metadata Insert Performance
|
||||
```sql
|
||||
EXPLAIN ANALYZE
|
||||
INSERT INTO request_metadata (
|
||||
request_id, user_id, endpoint, method, status_code, duration_ms
|
||||
) VALUES (
|
||||
gen_random_uuid(),
|
||||
'test-user-id',
|
||||
'/functions/test',
|
||||
'POST',
|
||||
200,
|
||||
150
|
||||
);
|
||||
```
|
||||
**Target:** Execution time < 50ms
|
||||
|
||||
#### Test 3: Memory Leak Detection
|
||||
1. Open Chrome DevTools → Memory tab
|
||||
2. Take heap snapshot (Baseline)
|
||||
3. Perform 20 form submissions (RideForm)
|
||||
4. Force garbage collection (🗑️ icon)
|
||||
5. Take second heap snapshot
|
||||
6. Compare snapshots
|
||||
7. **Expected:**
|
||||
- No significant memory retention from state machines
|
||||
- No dangling event listeners
|
||||
- No uncleaned timeouts/intervals
|
||||
|
||||
## Success Criteria
|
||||
|
||||
### Functional Requirements
|
||||
- ✅ All 26 edge functions return `requestId` and `X-Request-ID` header
|
||||
- ✅ All 29 `supabase.functions.invoke` calls use `invokeWithTracking`
|
||||
- ✅ All 7 admin forms use `submissionReducer` for submission flow
|
||||
- ⏳ `SubmissionReviewManager` uses `moderationReducer` for review flow
|
||||
- ⏳ `useModerationQueue` uses `moderationReducer` for claim/release operations
|
||||
- ⏳ Lock expiry monitoring active with warning toasts
|
||||
- ✅ Error toasts display `requestId` for debugging support
|
||||
|
||||
### Quality Requirements
|
||||
- ✅ Zero TypeScript errors in strict mode
|
||||
- ✅ No illegal state transitions possible (enforced by reducers)
|
||||
- ✅ 100% request correlation coverage for critical paths
|
||||
- ⏳ Database queries validate no orphaned data or invalid statuses
|
||||
- ⏳ Performance overhead within acceptable limits
|
||||
|
||||
## Next Steps
|
||||
|
||||
1. **Phase 4**: Integrate moderation state machine into `SubmissionReviewManager` and `useModerationQueueManager`
|
||||
2. **Complete Testing**: Run all manual test scenarios
|
||||
3. **Database Validation**: Execute all validation queries
|
||||
4. **Performance Benchmarks**: Verify all metrics meet targets
|
||||
5. **Memory Leak Testing**: Ensure no memory retention issues
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useReducer } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
||||
import { getErrorMessage } from '@/lib/errorHandler';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
@@ -60,7 +62,10 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
|
||||
const { headquarters } = useCompanyHeadquarters();
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
||||
status: 'draft' as const,
|
||||
data: initialData || {}
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
@@ -99,8 +104,16 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
if (!canSubmit(submissionState)) {
|
||||
toast.error('Cannot submit in current state');
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch({ type: 'VALIDATE', payload: data });
|
||||
|
||||
try {
|
||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
||||
|
||||
const formData = {
|
||||
...data,
|
||||
company_type: 'designer' as const,
|
||||
@@ -109,18 +122,24 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
|
||||
|
||||
await onSubmit(formData);
|
||||
|
||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
||||
|
||||
// Only show success toast and close if not editing through moderation queue
|
||||
if (!initialData?.id) {
|
||||
toast.success('Designer submitted for review');
|
||||
onCancel();
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
const errorMessage = getErrorMessage(error);
|
||||
if (errorMessage.includes('validation')) {
|
||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
||||
} else {
|
||||
dispatch({ type: 'RESET' });
|
||||
}
|
||||
handleError(error, {
|
||||
action: initialData?.id ? 'Update Designer' : 'Create Designer',
|
||||
metadata: { companyName: data.name }
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
})} className="space-y-6">
|
||||
{/* Basic Information */}
|
||||
@@ -240,13 +259,21 @@ export function DesignerForm({ onSubmit, onCancel, initialData }: DesignerFormPr
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 justify-end">
|
||||
<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{isSubmitting ? 'Submitting...' : 'Save Designer'}
|
||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Designer'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useReducer } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
||||
import { getErrorMessage } from '@/lib/errorHandler';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
@@ -61,7 +63,10 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
|
||||
const { headquarters } = useCompanyHeadquarters();
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
||||
status: 'draft' as const,
|
||||
data: initialData || {}
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
@@ -102,8 +107,16 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
if (!canSubmit(submissionState)) {
|
||||
toast.error('Cannot submit in current state');
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch({ type: 'VALIDATE', payload: data });
|
||||
|
||||
try {
|
||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
||||
|
||||
const formData = {
|
||||
...data,
|
||||
company_type: 'manufacturer' as const,
|
||||
@@ -112,18 +125,24 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
|
||||
|
||||
await onSubmit(formData);
|
||||
|
||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
||||
|
||||
// Only show success toast and close if not editing through moderation queue
|
||||
if (!initialData?.id) {
|
||||
toast.success('Manufacturer submitted for review');
|
||||
onCancel();
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
const errorMessage = getErrorMessage(error);
|
||||
if (errorMessage.includes('validation')) {
|
||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
||||
} else {
|
||||
dispatch({ type: 'RESET' });
|
||||
}
|
||||
handleError(error, {
|
||||
action: initialData?.id ? 'Update Manufacturer' : 'Create Manufacturer',
|
||||
metadata: { companyName: data.name }
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
})} className="space-y-6">
|
||||
{/* Basic Information */}
|
||||
@@ -241,13 +260,21 @@ export function ManufacturerForm({ onSubmit, onCancel, initialData }: Manufactur
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 justify-end">
|
||||
<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{isSubmitting ? 'Submitting...' : 'Save Manufacturer'}
|
||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Manufacturer'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useReducer } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
||||
import { getErrorMessage } from '@/lib/errorHandler';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
@@ -60,7 +62,10 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
|
||||
const { headquarters } = useCompanyHeadquarters();
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
||||
status: 'draft' as const,
|
||||
data: initialData || {}
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
@@ -99,8 +104,16 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
if (!canSubmit(submissionState)) {
|
||||
toast.error('Cannot submit in current state');
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch({ type: 'VALIDATE', payload: data });
|
||||
|
||||
try {
|
||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
||||
|
||||
const formData = {
|
||||
...data,
|
||||
company_type: 'operator' as const,
|
||||
@@ -109,18 +122,24 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
|
||||
|
||||
await onSubmit(formData);
|
||||
|
||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
||||
|
||||
// Only show success toast and close if not editing through moderation queue
|
||||
if (!initialData?.id) {
|
||||
toast.success('Operator submitted for review');
|
||||
onCancel();
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
const errorMessage = getErrorMessage(error);
|
||||
if (errorMessage.includes('validation')) {
|
||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
||||
} else {
|
||||
dispatch({ type: 'RESET' });
|
||||
}
|
||||
handleError(error, {
|
||||
action: initialData?.id ? 'Update Operator' : 'Create Operator',
|
||||
metadata: { companyName: data.name }
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
})} className="space-y-6">
|
||||
{/* Basic Information */}
|
||||
@@ -240,13 +259,21 @@ export function OperatorForm({ onSubmit, onCancel, initialData }: OperatorFormPr
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 justify-end">
|
||||
<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{isSubmitting ? 'Submitting...' : 'Save Operator'}
|
||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Operator'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useReducer } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||
import { validateSubmissionHandler } from '@/lib/entityFormValidation';
|
||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
||||
import { getErrorMessage } from '@/lib/errorHandler';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@@ -129,7 +131,10 @@ const STATUS_DB_TO_DISPLAY: Record<string, string> = {
|
||||
|
||||
export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }: ParkFormProps) {
|
||||
const { isModerator } = useUserRole();
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
||||
status: 'draft' as const,
|
||||
data: initialData || {}
|
||||
});
|
||||
|
||||
// Validate that onSubmit uses submission helpers (dev mode only)
|
||||
useEffect(() => {
|
||||
@@ -180,8 +185,20 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
|
||||
|
||||
const handleFormSubmit = async (data: ParkFormData) => {
|
||||
setSubmitting(true);
|
||||
if (!canSubmit(submissionState)) {
|
||||
toast({
|
||||
title: 'Cannot submit',
|
||||
description: 'Please wait for the current operation to complete',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch({ type: 'VALIDATE', payload: data });
|
||||
|
||||
try {
|
||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
||||
|
||||
// Build composite submission if new entities were created
|
||||
const submissionContent: any = {
|
||||
park: data,
|
||||
@@ -206,6 +223,8 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
_compositeSubmission: (tempNewOperator || tempNewPropertyOwner) ? submissionContent : undefined
|
||||
});
|
||||
|
||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
||||
|
||||
toast({
|
||||
title: isEditing ? "Park Updated" : "Park Created",
|
||||
description: isEditing
|
||||
@@ -213,6 +232,12 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
: "The new park has been created successfully."
|
||||
});
|
||||
} catch (error: unknown) {
|
||||
const errorMessage = getErrorMessage(error);
|
||||
if (errorMessage.includes('validation') || errorMessage.includes('required')) {
|
||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
||||
} else {
|
||||
dispatch({ type: 'RESET' });
|
||||
}
|
||||
handleError(error, {
|
||||
action: isEditing ? 'Update Park' : 'Create Park',
|
||||
userId: user?.id,
|
||||
@@ -223,8 +248,6 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
hasNewOwner: !!tempNewPropertyOwner
|
||||
}
|
||||
});
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -511,9 +534,13 @@ export function ParkForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="flex gap-4 pt-6">
|
||||
<Button type="submit" disabled={submitting} className="flex-1">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
||||
className="flex-1"
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{submitting ? 'Saving...' : (isEditing ? 'Update Park' : 'Create Park')}
|
||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Saving...' : (isEditing ? 'Update Park' : 'Create Park')}
|
||||
</Button>
|
||||
|
||||
{onCancel && (
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useReducer } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
||||
import { getErrorMessage } from '@/lib/errorHandler';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
@@ -60,7 +62,10 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
|
||||
const { headquarters } = useCompanyHeadquarters();
|
||||
const { user } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
||||
status: 'draft' as const,
|
||||
data: initialData || {}
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
@@ -99,8 +104,16 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
if (!canSubmit(submissionState)) {
|
||||
toast.error('Cannot submit in current state');
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch({ type: 'VALIDATE', payload: data });
|
||||
|
||||
try {
|
||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
||||
|
||||
const formData = {
|
||||
...data,
|
||||
company_type: 'property_owner' as const,
|
||||
@@ -109,18 +122,24 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
|
||||
|
||||
await onSubmit(formData);
|
||||
|
||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
||||
|
||||
// Only show success toast and close if not editing through moderation queue
|
||||
if (!initialData?.id) {
|
||||
toast.success('Property owner submitted for review');
|
||||
onCancel();
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
const errorMessage = getErrorMessage(error);
|
||||
if (errorMessage.includes('validation')) {
|
||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
||||
} else {
|
||||
dispatch({ type: 'RESET' });
|
||||
}
|
||||
handleError(error, {
|
||||
action: initialData?.id ? 'Update Property Owner' : 'Create Property Owner',
|
||||
metadata: { companyName: data.name }
|
||||
});
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
})} className="space-y-6">
|
||||
{/* Basic Information */}
|
||||
@@ -240,13 +259,21 @@ export function PropertyOwnerForm({ onSubmit, onCancel, initialData }: PropertyO
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 justify-end">
|
||||
<Button type="button" variant="outline" onClick={onCancel} disabled={isSubmitting}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{isSubmitting ? 'Submitting...' : 'Save Property Owner'}
|
||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Submitting...' : 'Save Property Owner'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useReducer } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { validateSubmissionHandler } from '@/lib/entityFormValidation';
|
||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
||||
import { getErrorMessage } from '@/lib/errorHandler';
|
||||
import type { RideTechnicalSpec, RideCoasterStat, RideNameHistory } from '@/types/database';
|
||||
import type { TempCompanyData, TempRideModelData } from '@/types/company';
|
||||
import { entitySchemas } from '@/lib/entityValidationSchemas';
|
||||
@@ -119,7 +121,10 @@ const STATUS_DB_TO_DISPLAY: Record<string, string> = {
|
||||
|
||||
export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }: RideFormProps) {
|
||||
const { isModerator } = useUserRole();
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
||||
status: 'draft' as const,
|
||||
data: initialData || {}
|
||||
});
|
||||
const { preferences } = useUnitPreferences();
|
||||
const measurementSystem = preferences.measurement_system;
|
||||
|
||||
@@ -221,8 +226,20 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
|
||||
|
||||
const handleFormSubmit = async (data: RideFormData) => {
|
||||
setSubmitting(true);
|
||||
if (!canSubmit(submissionState)) {
|
||||
toast({
|
||||
title: 'Cannot submit',
|
||||
description: 'Please wait for the current operation to complete',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch({ type: 'VALIDATE', payload: data });
|
||||
|
||||
try {
|
||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
||||
|
||||
// Convert form values back to metric for storage
|
||||
const metricData = {
|
||||
...data,
|
||||
@@ -253,6 +270,8 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
// Pass clean data to parent with extended fields
|
||||
await onSubmit(metricData);
|
||||
|
||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
||||
|
||||
toast({
|
||||
title: isEditing ? "Ride Updated" : "Submission Sent",
|
||||
description: isEditing
|
||||
@@ -262,6 +281,12 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
: "Ride submitted for review"
|
||||
});
|
||||
} catch (error: unknown) {
|
||||
const errorMessage = getErrorMessage(error);
|
||||
if (errorMessage.includes('validation') || errorMessage.includes('required')) {
|
||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
||||
} else {
|
||||
dispatch({ type: 'RESET' });
|
||||
}
|
||||
handleError(error, {
|
||||
action: isEditing ? 'Update Ride' : 'Create Ride',
|
||||
metadata: {
|
||||
@@ -270,8 +295,6 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
hasNewModel: !!tempNewRideModel
|
||||
}
|
||||
});
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -782,9 +805,13 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
|
||||
|
||||
{/* Form Actions */}
|
||||
<div className="flex gap-4 pt-6">
|
||||
<Button type="submit" disabled={submitting} className="flex-1">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
||||
className="flex-1"
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
{submitting ? 'Saving...' : (isEditing ? 'Update Ride' : 'Create Ride')}
|
||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Saving...' : (isEditing ? 'Update Ride' : 'Create Ride')}
|
||||
</Button>
|
||||
|
||||
{onCancel && (
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { useState } from 'react';
|
||||
import { useState, useReducer } from 'react';
|
||||
import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import * as z from 'zod';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import type { RideModelTechnicalSpec } from '@/types/database';
|
||||
import { submissionReducer, canSubmit } from '@/lib/submissionStateMachine';
|
||||
import { getErrorMessage } from '@/lib/errorHandler';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -75,6 +77,10 @@ export function RideModelForm({
|
||||
unit?: string;
|
||||
display_order: number;
|
||||
}[]>([]);
|
||||
const [submissionState, dispatch] = useReducer(submissionReducer, {
|
||||
status: 'draft' as const,
|
||||
data: initialData || {}
|
||||
});
|
||||
|
||||
const {
|
||||
register,
|
||||
@@ -96,11 +102,30 @@ export function RideModelForm({
|
||||
|
||||
|
||||
const handleFormSubmit = (data: RideModelFormData) => {
|
||||
// Include relational technical specs with extended type
|
||||
onSubmit({
|
||||
...data,
|
||||
_technical_specifications: technicalSpecs
|
||||
});
|
||||
if (!canSubmit(submissionState)) {
|
||||
return;
|
||||
}
|
||||
|
||||
dispatch({ type: 'VALIDATE', payload: data });
|
||||
|
||||
try {
|
||||
dispatch({ type: 'SUBMIT', payload: { submissionId: crypto.randomUUID() } });
|
||||
|
||||
// Include relational technical specs with extended type
|
||||
onSubmit({
|
||||
...data,
|
||||
_technical_specifications: technicalSpecs
|
||||
});
|
||||
|
||||
dispatch({ type: 'SUBMISSION_COMPLETE' });
|
||||
} catch (error: unknown) {
|
||||
const errorMessage = getErrorMessage(error);
|
||||
if (errorMessage.includes('validation')) {
|
||||
dispatch({ type: 'VALIDATION_ERROR', payload: [{ field: 'general', message: errorMessage }] });
|
||||
} else {
|
||||
dispatch({ type: 'RESET' });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -219,13 +244,21 @@ export function RideModelForm({
|
||||
|
||||
{/* Actions */}
|
||||
<div className="flex gap-3 justify-end">
|
||||
<Button type="button" variant="outline" onClick={onCancel}>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onCancel}
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting'}
|
||||
>
|
||||
<X className="w-4 h-4 mr-2" />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={submissionState.status === 'validating' || submissionState.status === 'submitting' || !canSubmit(submissionState)}
|
||||
>
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
Save Model
|
||||
{(submissionState.status === 'validating' || submissionState.status === 'submitting') ? 'Saving...' : 'Save Model'}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user