fix(frontend): remove unused default React imports and use typed FC/FormEvent where needed

frontend/src/components/NotificationCenter.tsx

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import { useState, type FC } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Bell, X, Info, AlertTriangle, AlertCircle, CheckCircle, ExternalLink } from 'lucide-react';
 import { getNotifications, markNotificationRead, markAllNotificationsRead, checkUpdates } from '../api/system';
 
-const NotificationCenter: React.FC = () => {
+const NotificationCenter: FC = () => {
   const [isOpen, setIsOpen] = useState(false);
   const queryClient = useQueryClient();
 

frontend/src/context/AuthContext.tsx

@@ -1,8 +1,8 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect, type ReactNode, type FC } from 'react';
 import client from '../api/client';
 import { AuthContext, User } from './AuthContextValue';
 
-export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+export const AuthProvider: FC<{ children: ReactNode }> = ({ children }) => {
   const [user, setUser] = useState<User | null>(null);
   const [isLoading, setIsLoading] = useState(true);
 

frontend/src/pages/Logs.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState, useEffect, type FC } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
 import { getLogs, getLogContent, downloadLog, LogFilter } from '../api/logs';
@@ -27,7 +27,7 @@ const Logs: React.FC = () => {
   });
 
   // Select first log by default if none selected
-  React.useEffect(() => {
+  useEffect(() => {
     if (!selectedLog && logs && logs.length > 0) {
       setSelectedLog(logs[0].name);
     }
@@ -54,7 +54,7 @@ const Logs: React.FC = () => {
       downloadLog(selectedLog);
     }
   };
-
+  const Logs: FC = () => {
   const totalPages = logData ? Math.ceil(logData.total / limit) : 0;
 
   return (

frontend/src/pages/Notifications.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState, type FC } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { getProviders, createProvider, updateProvider, deleteProvider, testProvider, getTemplates, previewProvider, NotificationProvider, getExternalTemplates, previewExternalTemplate, ExternalTemplate, createExternalTemplate, updateExternalTemplate, deleteExternalTemplate } from '../api/notifications';
 import { Card } from '../components/ui/Card';
@@ -6,7 +6,7 @@ import { Button } from '../components/ui/Button';
 import { Bell, Plus, Trash2, Edit2, Send, Check, X, Loader2 } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 
-const ProviderForm: React.FC<{
+const ProviderForm: FC<{
   initialData?: Partial<NotificationProvider>;
   onClose: () => void;
   onSubmit: (data: Partial<NotificationProvider>) => void;
@@ -225,7 +225,7 @@ const ProviderForm: React.FC<{
   );
 };
 
-const TemplateForm: React.FC<{
+const TemplateForm: FC<{
   initialData?: Partial<ExternalTemplate>;
   onClose: () => void;
   onSubmit: (data: Partial<ExternalTemplate>) => void;
@@ -287,7 +287,7 @@ const TemplateForm: React.FC<{
   );
 };
 
-const Notifications: React.FC = () => {
+const Notifications: FC = () => {
   const queryClient = useQueryClient();
   const [isAdding, setIsAdding] = useState(false);
   const [editingId, setEditingId] = useState<string | null>(null);

frontend/src/pages/Setup.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect, type FormEvent, type FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { getSetupStatus, performSetup, SetupRequest } from '../api/setup';
@@ -9,7 +9,7 @@ import { Button } from '../components/ui/Button';
 import { PasswordStrengthMeter } from '../components/PasswordStrengthMeter';
 import { isValidEmail } from '../utils/validation';
 
-const Setup: React.FC = () => {
+const Setup: FC = () => {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
   const { login, isAuthenticated } = useAuth();
@@ -70,7 +70,7 @@ const Setup: React.FC = () => {
     },
   });
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = (e: FormEvent) => {
     e.preventDefault();
     setError(null);
     mutation.mutate(formData);

frontend/src/pages/Uptime.tsx

@@ -1,10 +1,10 @@
-import React, { useMemo, useState } from 'react';
+import { useMemo, useState, useEffect, type FC, type FormEvent } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { getMonitors, getMonitorHistory, updateMonitor, UptimeMonitor } from '../api/uptime';
 import { Activity, ArrowUp, ArrowDown, Settings, X } from 'lucide-react';
 import { formatDistanceToNow } from 'date-fns';
 
-const MonitorCard: React.FC<{ monitor: UptimeMonitor; onEdit: (monitor: UptimeMonitor) => void }> = ({ monitor, onEdit }) => {
+const MonitorCard: FC<{ monitor: UptimeMonitor; onEdit: (monitor: UptimeMonitor) => void }> = ({ monitor, onEdit }) => {
   const { data: history } = useQuery({
     queryKey: ['uptimeHistory', monitor.id],
     queryFn: () => getMonitorHistory(monitor.id, 60),
@@ -90,7 +90,7 @@ Message: ${beat.message}`}
   );
 };
 
-const EditMonitorModal: React.FC<{ monitor: UptimeMonitor; onClose: () => void }> = ({ monitor, onClose }) => {
+const EditMonitorModal: FC<{ monitor: UptimeMonitor; onClose: () => void }> = ({ monitor, onClose }) => {
     const queryClient = useQueryClient();
     const [maxRetries, setMaxRetries] = useState(monitor.max_retries || 3);
     const [interval, setInterval] = useState(monitor.interval || 60);
@@ -103,7 +103,7 @@ const EditMonitorModal: React.FC<{ monitor: UptimeMonitor; onClose: () => void }
         },
     });
 
-    const handleSubmit = (e: React.FormEvent) => {
+    const handleSubmit = (e: FormEvent) => {
         e.preventDefault();
         mutation.mutate({ max_retries: maxRetries, interval });
     };
@@ -172,7 +172,7 @@ const EditMonitorModal: React.FC<{ monitor: UptimeMonitor; onClose: () => void }
     );
 };
 
-const Uptime: React.FC = () => {
+const Uptime: FC = () => {
   const { data: monitors, isLoading } = useQuery({
     queryKey: ['monitors'],
     queryFn: getMonitors,