feat: Implement comprehensive error handling and production deployment pipeline

## Error Handling System
- Add centralized error handling utilities (errorHandler.ts)
- Create reusable error components (ErrorMessage, ErrorToast)
- Implement multilingual error support (preserves backend error messages in 5 languages)
- Update 15+ forms and components with consistent error handling
  - Auth forms: login, register, forgot-password
  - Family management: family page, join family dialog
  - Child management: child dialog
  - All tracking forms: feeding, sleep, diaper, medicine, growth, activity

## Production Build Fixes
- Fix backend TypeScript errors: InviteCode.uses → InviteCode.useCount (5 instances)
- Remove non-existent savedFamily variable from registration response
- Fix admin panel TypeScript errors: SimpleMDE toolbar type, PieChart label type

## User Experience Improvements
- Auto-uppercase invite code and share code inputs
- Visual feedback for case conversion with helper text
- Improved form validation with error codes

## CI/CD Pipeline
- Create comprehensive production deployment checklist (PRODUCTION_DEPLOYMENT_CHECKLIST.md)
- Add automated pre-deployment check script (pre-deploy-check.sh)
  - Validates frontend, backend, and admin panel builds
  - Checks git status, branch, and sync state
  - Verifies environment files and migrations
- Add quick start deployment guide (DEPLOYMENT_QUICK_START.md)
- Add production deployment automation template (deploy-production.sh)

## Cleanup
- Remove outdated push notifications documentation files
- Remove outdated PWA implementation plan

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/components/children/ChildDialog.tsx

@@ -15,6 +15,8 @@ import {
 import { Child, CreateChildData } from '@/lib/api/children';
 import { useTranslation } from '@/hooks/useTranslation';
 import { PhotoUpload } from '@/components/common/PhotoUpload';
+import { useErrorMessage } from '@/components/common/ErrorMessage';
+import { formatErrorMessage } from '@/lib/utils/errorHandler';
 
 interface ChildDialogProps {
   open: boolean;
@@ -33,7 +35,7 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
     photoUrl: '',
     photoAlt: '',
   });
-  const [error, setError] = useState<string>('');
+  const { error, showError, clearError, hasError } = useErrorMessage();
 
   useEffect(() => {
     if (child) {
@@ -53,8 +55,8 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
         photoAlt: '',
       });
     }
-    setError('');
-  }, [child, open]);
+    clearError();
+  }, [child, open, clearError]);
 
   const handleChange = (field: keyof CreateChildData) => (
     e: React.ChangeEvent<HTMLInputElement>
@@ -63,15 +65,15 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
   };
 
   const handleSubmit = async () => {
-    setError('');
+    clearError();
 
     // Validation
     if (!formData.name.trim()) {
-      setError(t('dialog.validation.nameRequired'));
+      showError({ message: t('dialog.validation.nameRequired'), code: 'VALIDATION_NAME_REQUIRED' });
       return;
     }
     if (!formData.birthDate) {
-      setError(t('dialog.validation.birthDateRequired'));
+      showError({ message: t('dialog.validation.birthDateRequired'), code: 'VALIDATION_BIRTHDATE_REQUIRED' });
       return;
     }
 
@@ -80,7 +82,7 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
     const today = new Date();
     today.setHours(0, 0, 0, 0);
     if (selectedDate > today) {
-      setError(t('dialog.validation.birthDateFuture'));
+      showError({ message: t('dialog.validation.birthDateFuture'), code: 'VALIDATION_BIRTHDATE_FUTURE' });
       return;
     }
 
@@ -88,7 +90,7 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
       await onSubmit(formData);
       onClose();
     } catch (err: any) {
-      setError(err.message || t('errors.saveFailed'));
+      showError(err);
     }
   };
 
@@ -107,9 +109,9 @@ export function ChildDialog({ open, onClose, onSubmit, child, isLoading = false
           id="child-dialog-description"
           sx={{ pt: 2, display: 'flex', flexDirection: 'column', gap: 2 }}
         >
-          {error && (
-            <Alert severity="error" onClose={() => setError('')} role="alert">
-              {error}
+          {hasError && (
+            <Alert severity="error" onClose={clearError} role="alert">
+              {formatErrorMessage(error)}
             </Alert>
           )}
 

maternal-web/components/common/ErrorMessage.tsx

@@ -0,0 +1,142 @@
+'use client';
+
+import React from 'react';
+import { Alert, AlertTitle, Box } from '@mui/material';
+import { extractError } from '@/lib/utils/errorHandler';
+
+export interface ErrorMessageProps {
+  error: any;
+  showErrorCode?: boolean;
+  variant?: 'standard' | 'filled' | 'outlined';
+  severity?: 'error' | 'warning';
+  onClose?: () => void;
+  sx?: any;
+}
+
+/**
+ * ErrorMessage Component
+ * Displays error messages inline (within forms, pages, etc.)
+ * Preserves backend multilingual error messages
+ */
+export function ErrorMessage({
+  error,
+  showErrorCode = false,
+  variant = 'standard',
+  severity = 'error',
+  onClose,
+  sx,
+}: ErrorMessageProps) {
+  if (!error) {
+    return null;
+  }
+
+  const extracted = extractError(error);
+
+  return (
+    <Box sx={{ mb: 2, ...sx }}>
+      <Alert severity={severity} variant={variant} onClose={onClose}>
+        {showErrorCode && extracted.code && (
+          <AlertTitle sx={{ fontWeight: 600 }}>{extracted.code}</AlertTitle>
+        )}
+        {extracted.message}
+      </Alert>
+    </Box>
+  );
+}
+
+/**
+ * FieldError Component
+ * Displays field-specific error messages (for form fields)
+ */
+export interface FieldErrorProps {
+  error: any;
+  fieldName: string;
+  sx?: any;
+}
+
+export function FieldError({ error, fieldName, sx }: FieldErrorProps) {
+  if (!error) {
+    return null;
+  }
+
+  const extracted = extractError(error);
+
+  // Only show if this error is for the specific field
+  if (extracted.field !== fieldName) {
+    return null;
+  }
+
+  return (
+    <Box sx={{ mt: 0.5, ...sx }}>
+      <Alert severity="error" variant="outlined" sx={{ py: 0.5, px: 1 }}>
+        {extracted.message}
+      </Alert>
+    </Box>
+  );
+}
+
+/**
+ * ErrorList Component
+ * Displays multiple errors in a list
+ */
+export interface ErrorListProps {
+  errors: any[];
+  showErrorCodes?: boolean;
+  variant?: 'standard' | 'filled' | 'outlined';
+  onClose?: () => void;
+  sx?: any;
+}
+
+export function ErrorList({
+  errors,
+  showErrorCodes = false,
+  variant = 'standard',
+  onClose,
+  sx,
+}: ErrorListProps) {
+  if (!errors || errors.length === 0) {
+    return null;
+  }
+
+  const extractedErrors = errors.map((err) => extractError(err));
+
+  return (
+    <Box sx={{ mb: 2, ...sx }}>
+      <Alert severity="error" variant={variant} onClose={onClose}>
+        <AlertTitle sx={{ fontWeight: 600 }}>Multiple errors occurred:</AlertTitle>
+        <ul style={{ margin: '8px 0 0 0', paddingLeft: '20px' }}>
+          {extractedErrors.map((err, index) => (
+            <li key={index} style={{ marginBottom: '4px' }}>
+              {showErrorCodes && err.code && <strong>{err.code}: </strong>}
+              {err.message}
+            </li>
+          ))}
+        </ul>
+      </Alert>
+    </Box>
+  );
+}
+
+/**
+ * Hook to manage error message state
+ */
+export function useErrorMessage() {
+  const [error, setError] = React.useState<any>(null);
+
+  const showError = (err: any) => {
+    setError(err);
+  };
+
+  const clearError = () => {
+    setError(null);
+  };
+
+  const hasError = error !== null;
+
+  return {
+    error,
+    showError,
+    clearError,
+    hasError,
+  };
+}

maternal-web/components/common/ErrorToast.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import React from 'react';
+import { Snackbar, Alert, AlertTitle } from '@mui/material';
+import { extractError } from '@/lib/utils/errorHandler';
+
+export interface ErrorToastProps {
+  error: any;
+  open: boolean;
+  onClose: () => void;
+  autoHideDuration?: number;
+  showErrorCode?: boolean;
+}
+
+/**
+ * ErrorToast Component
+ * Displays error messages as a toast notification
+ * Preserves backend multilingual error messages
+ */
+export function ErrorToast({
+  error,
+  open,
+  onClose,
+  autoHideDuration = 6000,
+  showErrorCode = false,
+}: ErrorToastProps) {
+  if (!error) {
+    return null;
+  }
+
+  const extracted = extractError(error);
+
+  return (
+    <Snackbar
+      open={open}
+      autoHideDuration={autoHideDuration}
+      onClose={onClose}
+      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+    >
+      <Alert onClose={onClose} severity="error" variant="filled" sx={{ width: '100%' }}>
+        {showErrorCode && extracted.code && (
+          <AlertTitle>{extracted.code}</AlertTitle>
+        )}
+        {extracted.message}
+      </Alert>
+    </Snackbar>
+  );
+}
+
+/**
+ * Hook to manage error toast state
+ */
+export function useErrorToast() {
+  const [error, setError] = React.useState<any>(null);
+  const [open, setOpen] = React.useState(false);
+
+  const showError = (err: any) => {
+    setError(err);
+    setOpen(true);
+  };
+
+  const hideError = () => {
+    setOpen(false);
+  };
+
+  const handleClose = (_event?: React.SyntheticEvent | Event, reason?: string) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+    hideError();
+  };
+
+  return {
+    error,
+    open,
+    showError,
+    hideError,
+    handleClose,
+  };
+}

maternal-web/components/family/JoinFamilyDialog.tsx

@@ -79,13 +79,16 @@ export function JoinFamilyDialog({
           <TextField
             label="Share Code"
             value={shareCode}
-            onChange={(e) => setShareCode(e.target.value)}
+            onChange={(e) => setShareCode(e.target.value.toUpperCase())}
             fullWidth
             required
             autoFocus
             disabled={isLoading}
-            placeholder="Enter family share code"
-            helperText="Ask a family member for their share code"
+            placeholder="XXXX-XXXX"
+            helperText="Share codes are automatically converted to uppercase"
+            inputProps={{
+              style: { textTransform: 'uppercase' },
+            }}
           />
         </Box>
       </DialogContent>