diff --git a/src/App.tsx b/src/App.tsx
index 13c44ae..c80317c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,213 @@
-import React from 'react';
+import {
+  Box,
+  Typography,
+  Button,
+  Stack,
+  List,
+  ListItem,
+  Checkbox,
+  ToggleButton,
+  ToggleButtonGroup,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+} from "@mui/material";
+import { useState, useEffect } from "react";
+import AddTodoDialog from "./components/AddTodoDialog";
+import { Todo } from "./types/todo";
+import { api } from "./services/api";
+
+type Filter = "all" | "active" | "completed";
+type SortType = "priority";
+
 function App() {
+  const [todos, setTodos] = useState<Todo[]>([]);
+  const [open, setOpen] = useState(false);
+  const [filter, setFilter] = useState<Filter>("all");
+  const [sortBy, setSortBy] = useState<SortType>("priority");
+  const [newTodo, setNewTodo] = useState<Todo>({
+    id: 0,
+    text: "",
+    description: "",
+    completed: false,
+    createdAt: new Date().toISOString(),
+    dueDate: "",
+    priority: "medium",
+  });
+
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  const toggleTodoCompletion = (id: number) => {
+    const todo = todos.find((t) => t.id === id);
+    if (todo) {
+      const updatedTodo = { ...todo, completed: !todo.completed };
+      api
+        .updateTodo(id.toString(), updatedTodo)
+        .then(() => {
+          setTodos((prevTodos) =>
+            prevTodos.map((t) => (t.id === id ? updatedTodo : t))
+          );
+        })
+        .catch((error) => {
+          console.error("Error updating todo:", error);
+        });
+    }
+  };
+
+  const handleAddTodo = (todo: Omit<Todo, "id">) => {
+    console.log("Adding todo:", todo);
+    api
+      .createTodo(todo as Todo) // The API will assign the ID
+      .then(() => {
+        // Refetch todos to get the updated list with proper IDs
+        return api.getTodos();
+      })
+      .then((updatedTodos) => {
+        setTodos(updatedTodos);
+        setOpen(false);
+        // Reset the form
+        setNewTodo({
+          id: 0,
+          text: "",
+          description: "",
+          completed: false,
+          createdAt: new Date().toISOString(),
+          dueDate: "",
+          priority: "medium",
+        });
+      })
+      .catch((error) => {
+        console.error("Error adding todo:", error);
+      });
+  };
+
+  const handleDelete = (id: number) => {
+    api
+      .deleteTodo(id.toString())
+      .then(() => {
+        setTodos((prevTodos) => prevTodos.filter((todo) => todo.id !== id));
+      })
+      .catch((error) => {
+        console.error("Error deleting todo:", error);
+      });
+  };
+
+  const handleFilterChange = (
+    event: React.MouseEvent<HTMLElement>,
+    newFilter: Filter
+  ) => {
+    if (newFilter !== null) {
+      setFilter(newFilter);
+    }
+  };
+
+  const handleSortChange = (event: SelectChangeEvent) => {
+    setSortBy(event.target.value as SortType);
+  };
+
+  const filteredTodos = todos
+    .filter((todo) => {
+      if (filter === "active") return !todo.completed;
+      if (filter === "completed") return todo.completed;
+      return true; // "all" filter
+    })
+    .sort((a, b) => {
+      if (sortBy === "priority") {
+        const priorityOrder = { high: 0, medium: 1, low: 2 };
+        return priorityOrder[a.priority] - priorityOrder[b.priority];
+      } else if (sortBy === "dueDate") {
+        if (!a.dueDate || !b.dueDate) return 0; // If no due date, don't sort
+        const dateA = new Date(a.dueDate);
+        const dateB = new Date(b.dueDate);
+        return dateA.getTime() - dateB.getTime();
+      }
+      return 0; // Default case, no sorting
+    });
+
+  useEffect(() => {
+    const fetchTodos = async () => {
+      try {
+        const response = await api.getTodos();
+        console.log("Fetched todos:", response);
+        setTodos(response);
+      } catch (error) {
+        console.error("Error fetching todos:", error);
+      }
+    };
+
+    fetchTodos();
+  }, []);
+
   return (
-    <div className="app">
-      <h1>Welcome to my App!</h1>
-    </div>
+    <Box
+      sx={{
+        p: 2,
+        mx: "auto",
+      }}
+    >
+      <AddTodoDialog
+        open={open}
+        setOpen={setOpen}
+        handleAddTodo={handleAddTodo}
+        newTodo={newTodo}
+        setNewTodo={setNewTodo}
+      />
+      <Typography variant="h4">Todo List</Typography>
+      <Stack direction="row" spacing={3}>
+        <Button variant="contained" onClick={handleOpen}>
+          Add Todo
+        </Button>
+
+        <ToggleButtonGroup
+          value={filter}
+          exclusive
+          onChange={handleFilterChange}
+          size="small"
+          sx={{ mb: 2 }}
+        >
+          <ToggleButton value="all">All</ToggleButton>
+          <ToggleButton value="active">Active</ToggleButton>
+          <ToggleButton value="completed">Completed</ToggleButton>
+        </ToggleButtonGroup>
+        <FormControl size="small" sx={{ minWidth: 120 }}>
+          <InputLabel>Sort By</InputLabel>
+          <Select label="Sort By" onChange={handleSortChange} value={sortBy}>
+            <MenuItem value="dueDate">Due Date</MenuItem>
+            <MenuItem value="priority">Priority</MenuItem>
+            <MenuItem value="">None</MenuItem>
+          </Select>
+        </FormControl>
+      </Stack>
+      <List>
+        {filteredTodos.map((todo) => (
+          <ListItem key={todo.id}>
+            <Checkbox
+              checked={todo.completed}
+              onChange={() => toggleTodoCompletion(todo.id)}
+              sx={{
+                color: todo.completed ? "green" : "grey",
+                "&.Mui-checked": {
+                  color: "success.main",
+                },
+              }}
+            />
+            <Typography variant="body1">{todo.text}</Typography>
+            <Button
+              variant="outlined"
+              color="secondary"
+              onClick={() => handleDelete(todo.id)}
+            >
+              Delete
+            </Button>
+          </ListItem>
+        ))}
+      </List>
+    </Box>
   );
 }
 
-export default App;
\ No newline at end of file
+export default App;
diff --git a/src/components/AddTodoDialog.tsx b/src/components/AddTodoDialog.tsx
new file mode 100644
index 0000000..37117e7
--- /dev/null
+++ b/src/components/AddTodoDialog.tsx
@@ -0,0 +1,106 @@
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  TextField,
+  InputLabel,
+  Select,
+  MenuItem,
+  SelectChangeEvent,
+} from "@mui/material";
+import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers";
+import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
+import { Todo } from "../types/todo";
+
+type AddTodoDialogProps = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  handleAddTodo: (todo: Omit<Todo, "id">) => void;
+  newTodo: {
+    id?: number;
+    text: string;
+    description?: string;
+    completed?: boolean;
+    createdAt?: string;
+    dueDate?: string;
+    priority: "low" | "medium" | "high";
+  };
+  setNewTodo: (todo: any) => void;
+};
+
+function AddTodoDialog({
+  open,
+  setOpen,
+  handleAddTodo,
+  newTodo,
+  setNewTodo,
+}: AddTodoDialogProps) {
+  const handlePriorityChange = (event: SelectChangeEvent) => {
+    setNewTodo({
+      ...newTodo,
+      priority: event.target.value as Todo["priority"],
+    });
+  };
+
+  return (
+    <Dialog open={open} onClose={() => setOpen(false)}>
+      <DialogTitle>Add Todo</DialogTitle>
+      <DialogContent>
+        <TextField
+          autoFocus
+          margin="dense"
+          label="Todo Text"
+          fullWidth
+          variant="outlined"
+          onChange={(e) => setNewTodo({ ...newTodo, text: e.target.value })}
+        />
+        <TextField
+          margin="dense"
+          label="Description"
+          fullWidth
+          variant="outlined"
+          onChange={(e) =>
+            setNewTodo({ ...newTodo, description: e.target.value })
+          }
+        />
+        <InputLabel>Priority</InputLabel>
+        <Select
+          margin="dense"
+          label="Priority"
+          fullWidth
+          variant="outlined"
+          onChange={handlePriorityChange}
+          sx={{ mb: 2 }}
+        >
+          <MenuItem value="low">Low</MenuItem>
+          <MenuItem value="medium">Medium</MenuItem>
+          <MenuItem value="high">High</MenuItem>
+        </Select>
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+          <DatePicker
+            label="Due Date"
+            value={newTodo.dueDate ? new Date(newTodo.dueDate) : null}
+            onChange={(date) => {
+              setNewTodo({
+                ...newTodo,
+                dueDate: date ? date.toISOString() : "",
+              });
+            }}
+          />
+        </LocalizationProvider>
+        <Button
+          variant="contained"
+          onClick={() => {
+            handleAddTodo(newTodo as Omit<Todo, "id">);
+          }}
+          color="primary"
+        >
+          Add
+        </Button>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default AddTodoDialog;
diff --git a/src/services/api.ts b/src/services/api.ts
index 5a82863..2f33ce8 100644
--- a/src/services/api.ts
+++ b/src/services/api.ts
@@ -1,7 +1,80 @@
+import { Todo } from "../types/todo";
+
+const baseUrl = "http://localhost:3001";
+const mockTodos: Todo[] = [
+  {
+    id: 1,
+    text: "Test Todo 1",
+    description: "This is a test todo",
+    completed: false,
+    createdAt: "2025-06-09T04:00:00.000Z",
+    dueDate: "2025-06-09T04:00:00.000Z",
+    priority: "medium",
+  },
+  {
+    id: 2,
+    text: "Test Todo 2",
+    description: "This is another test todo",
+    completed: true,
+    createdAt: "2025-06-09T04:00:00.000Z",
+    dueDate: "2025-06-09T04:00:00.000Z",
+    priority: "high",
+  },
+];
 
 export const api = {
-  async createTodo() {},
-  async getTodos() {},
-  async updateTodo() {},
-  async deleteTodo() {},
-};
\ No newline at end of file
+  getTodos: async () => {
+    return new Promise<Todo[]>((resolve) => {
+      setTimeout(() => {
+        const localStorageTodos = localStorage.getItem("todos");
+        if (localStorageTodos) {
+          const todosFromStorage: Todo[] = JSON.parse(localStorageTodos);
+          resolve(todosFromStorage);
+        } else {
+          resolve(mockTodos);
+        }
+      }, 1000); // Simulate network delay
+    });
+  },
+  createTodo: async (todo: Todo) => {
+    const localStorageTodos = localStorage.getItem("todos");
+    let existingTodos: Todo[] = [];
+
+    if (localStorageTodos) {
+      existingTodos = JSON.parse(localStorageTodos);
+    } else {
+      existingTodos = [...mockTodos];
+    }
+
+    // Generate a unique ID
+    const newId =
+      existingTodos.length > 0
+        ? Math.max(...existingTodos.map((t) => t.id)) + 1
+        : 1;
+    const newTodo = { ...todo, id: newId };
+
+    const updatedTodos = [...existingTodos, newTodo];
+    localStorage.setItem("todos", JSON.stringify(updatedTodos));
+  },
+  updateTodo: async (id: string, todo: Partial<Todo>) => {
+    const localStorageTodos = localStorage.getItem("todos");
+    if (localStorageTodos) {
+      const todosFromStorage: Todo[] = JSON.parse(localStorageTodos);
+      const updatedTodos = todosFromStorage.map((t) =>
+        t.id.toString() === id ? { ...t, ...todo } : t
+      );
+      localStorage.setItem("todos", JSON.stringify(updatedTodos));
+    }
+  },
+  deleteTodo: async (id: string) => {
+    const localStorageTodos = localStorage.getItem("todos");
+    if (localStorageTodos) {
+      console.log("Deleting todo with id:", id);
+      const todosFromStorage: Todo[] = JSON.parse(localStorageTodos);
+      const updatedTodos = todosFromStorage.filter(
+        (todo) => todo.id.toString() !== id
+      );
+      localStorage.setItem("todos", JSON.stringify(updatedTodos));
+    }
+  },
+};
diff --git a/src/sol.tsx b/src/sol.tsx
index 2efb672..70cbfcc 100644
--- a/src/sol.tsx
+++ b/src/sol.tsx
@@ -1,573 +1,575 @@
-/*import React, { useState, useEffect } from 'react';
-import { Todo } from './types/todo';
-import { api } from './services/api';
-import {
-  Button,
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogActions,
-  TextField,
-  IconButton,
-  List,
-  ListItem,
-  ListItemText,
-  ListItemSecondaryAction,
-  Typography,
-  Box,
-  Paper,
-  Checkbox,
-  DialogContentText,
-  Divider,
-  Chip,
-  Stack,
-  ToggleButton,
-  ToggleButtonGroup,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  SelectChangeEvent,
-} from '@mui/material';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import AddIcon from '@mui/icons-material/Add';
-import DeleteIcon from '@mui/icons-material/Delete';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import FlagIcon from '@mui/icons-material/Flag';
-import EditIcon from '@mui/icons-material/Edit';
-import './App.css';
-
-type FilterType = 'all' | 'active' | 'completed';
-type SortType = 'date' | 'priority' | 'dueDate';
-type PriorityType = 'low' | 'medium' | 'high';
-
-function App() {
-  const [todos, setTodos] = useState<Todo[]>([]);
-  const [newTodo, setNewTodo] = useState({
-    title: '',
-    description: '',
-    dueDate: null as Date | null,
-    priority: 'medium' as PriorityType,
-  });
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [formError, setFormError] = useState<string | null>(null);
-  const [open, setOpen] = useState(false);
-  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
-  const [todoToDelete, setTodoToDelete] = useState<Todo | null>(null);
-  const [filter, setFilter] = useState<FilterType>('all');
-  const [sortBy, setSortBy] = useState<SortType>('date');
-  const [editDialogOpen, setEditDialogOpen] = useState(false);
-  const [todoToEdit, setTodoToEdit] = useState<Todo | null>(null);
-  const [editDescription, setEditDescription] = useState('');
-  const [editDueDate, setEditDueDate] = useState<Date | null>(null);
-  const [editPriority, setEditPriority] = useState<PriorityType>('medium');
-
-  useEffect(() => {
-    fetchTodos();
-  }, []);
-
-  const handleClickOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-    setNewTodo({ title: '', description: '', dueDate: null, priority: 'medium' });
-    setFormError(null);
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    setFormError(null);
-
-    if (!newTodo.title.trim()) {
-      setFormError('Title cannot be empty');
-      return;
-    }
-
-    try {
-      const todo = await api.createTodo({
-        text: newTodo.title.trim(),
-        description: newTodo.description.trim(),
-        completed: false,
-        dueDate: newTodo.dueDate?.toISOString(),
-        priority: newTodo.priority,
-      });
-      setTodos([...todos, todo]);
-      handleClose();
-      setError(null);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to create todo');
-    }
-  };
-
-  const fetchTodos = async () => {
-    try {
-      setLoading(true);
-      const data = await api.getTodos();
-      setTodos(data);
-      setError(null);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to fetch todos');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const toggleTodo = async (id: number) => {
-    const todo = todos.find(t => t.id === id);
-    if (!todo) return;
-
-    try {
-      const updatedTodo = await api.updateTodo(id.toString(), {
-        completed: !todo.completed,
-      });
-      setTodos(todos.map(t => t.id === id ? updatedTodo : t));
-      setError(null);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to update todo');
-    }
-  };
-
-  const handleDeleteClick = (todo: Todo) => {
-    setTodoToDelete(todo);
-    setDeleteDialogOpen(true);
-  };
-
-  const handleDeleteConfirm = async () => {
-    if (!todoToDelete) return;
-
-    try {
-      await api.deleteTodo(todoToDelete.id.toString());
-      setTodos(todos.filter(t => t.id !== todoToDelete.id));
-      setError(null);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to delete todo');
-    } finally {
-      setDeleteDialogOpen(false);
-      setTodoToDelete(null);
-    }
-  };
-
-  const handleDeleteCancel = () => {
-    setDeleteDialogOpen(false);
-    setTodoToDelete(null);
-  };
-
-  const handleFilterChange = (
-    event: React.MouseEvent<HTMLElement>,
-    newFilter: FilterType,
-  ) => {
-    if (newFilter !== null) {
-      setFilter(newFilter);
-    }
-  };
-
-  const handleSortChange = (event: SelectChangeEvent) => {
-    setSortBy(event.target.value as SortType);
-  };
-
-  const handlePriorityChange = (event: SelectChangeEvent) => {
-    setNewTodo({ ...newTodo, priority: event.target.value as PriorityType });
-  };
-
-  const getPriorityColor = (priority: string) => {
-    switch (priority) {
-      case 'high':
-        return 'error';
-      case 'medium':
-        return 'warning';
-      case 'low':
-        return 'success';
-      default:
-        return 'default';
-    }
-  };
-
-  const handleEditClick = (todo: Todo) => {
-    setTodoToEdit(todo);
-    setEditDescription(todo.description || '');
-    setEditDueDate(todo.dueDate ? new Date(todo.dueDate) : null);
-    setEditPriority(todo.priority);
-    setEditDialogOpen(true);
-  };
-
-  const handleEditClose = () => {
-    setEditDialogOpen(false);
-    setTodoToEdit(null);
-    setEditDescription('');
-    setEditDueDate(null);
-    setEditPriority('medium');
-  };
-
-  const handleEditSubmit = async () => {
-    if (!todoToEdit) return;
-
-    try {
-      const updatedTodo = await api.updateTodo(todoToEdit.id.toString(), {
-        description: editDescription.trim(),
-        dueDate: editDueDate?.toISOString(),
-        priority: editPriority,
-      });
-      setTodos(todos.map(t => t.id === todoToEdit.id ? updatedTodo : t));
-      setError(null);
-      handleEditClose();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to update todo');
-    }
-  };
-
-  const filteredAndSortedTodos = [...todos]
-    .filter(todo => {
-      switch (filter) {
-        case 'active':
-          return !todo.completed;
-        case 'completed':
-          return todo.completed;
-        default:
-          return true;
-      }
-    })
-    .sort((a, b) => {
-      switch (sortBy) {
-        case 'priority': {
-          const priorityOrder = { high: 0, medium: 1, low: 2 };
-          return priorityOrder[a.priority] - priorityOrder[b.priority];
-        }
-        case 'dueDate': {
-          if (!a.dueDate) return 1;
-          if (!b.dueDate) return -1;
-          return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
-        }
-        default:
-          return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
-      }
-    });
-
-  const formatDate = (dateString: string) => {
-    return new Date(dateString).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  if (loading) {
-    return <div className="App">Loading...</div>;
-  }
-
-  return (
-    <Box className="App" sx={{ maxWidth: 800, mx: 'auto', p: 3 }}>
-      <Typography variant="h4" component="h1" gutterBottom>
-        Todo List
-      </Typography>
+// import React, { useState, useEffect } from 'react';
+// import { Todo } from './types/todo';
+// import { api } from './services/api';
+// import {
+//   Button,
+//   Dialog,
+//   DialogTitle,
+//   DialogContent,
+//   DialogActions,
+//   TextField,
+//   IconButton,
+//   List,
+//   ListItem,
+//   ListItemText,
+//   ListItemSecondaryAction,
+//   Typography,
+//   Box,
+//   Paper,
+//   Checkbox,
+//   DialogContentText,
+//   Divider,
+//   Chip,
+//   Stack,
+//   ToggleButton,
+//   ToggleButtonGroup,
+//   FormControl,
+//   InputLabel,
+//   Select,
+//   MenuItem,
+//   SelectChangeEvent,
+// } from '@mui/material';
+// import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+// import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+// import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+// import AddIcon from '@mui/icons-material/Add';
+// import DeleteIcon from '@mui/icons-material/Delete';
+// import AccessTimeIcon from '@mui/icons-material/AccessTime';
+// import FlagIcon from '@mui/icons-material/Flag';
+// import EditIcon from '@mui/icons-material/Edit';
+// import './App.css';
+
+// type FilterType = 'all' | 'active' | 'completed';
+// type SortType = 'date' | 'priority' | 'dueDate';
+// type PriorityType = 'low' | 'medium' | 'high';
+
+// function App() {
+//   const [todos, setTodos] = useState<Todo[]>([]);
+//   const [newTodo, setNewTodo] = useState({
+//     title: '',
+//     description: '',
+//     dueDate: null as Date | null,
+//     priority: 'medium' as PriorityType,
+//   });
+//   const [loading, setLoading] = useState(true);
+//   const [error, setError] = useState<string | null>(null);
+//   const [formError, setFormError] = useState<string | null>(null);
+//   const [open, setOpen] = useState(false);
+//   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+//   const [todoToDelete, setTodoToDelete] = useState<Todo | null>(null);
+//   const [filter, setFilter] = useState<FilterType>('all');
+//   const [sortBy, setSortBy] = useState<SortType>('date');
+//   const [editDialogOpen, setEditDialogOpen] = useState(false);
+//   const [todoToEdit, setTodoToEdit] = useState<Todo | null>(null);
+//   const [editDescription, setEditDescription] = useState('');
+//   const [editDueDate, setEditDueDate] = useState<Date | null>(null);
+//   const [editPriority, setEditPriority] = useState<PriorityType>('medium');
+
+//   useEffect(() => {
+//     fetchTodos();
+//   }, []);
+
+//   const handleClickOpen = () => {
+//     setOpen(true);
+//   };
+
+//   const handleClose = () => {
+//     setOpen(false);
+//     setNewTodo({ title: '', description: '', dueDate: null, priority: 'medium' });
+//     setFormError(null);
+//   };
+
+//   const handleSubmit = async (e: React.FormEvent) => {
+//     e.preventDefault();
+//     setFormError(null);
+
+//     if (!newTodo.title.trim()) {
+//       setFormError('Title cannot be empty');
+//       return;
+//     }
+
+//     try {
+//       const todo = await api.createTodo({
+//         text: newTodo.title.trim(),
+//         description: newTodo.description.trim(),
+//         completed: false,
+//         dueDate: newTodo.dueDate?.toISOString(),
+//         priority: newTodo.priority,
+//       });
+//       setTodos([...todos, todo]);
+//       handleClose();
+//       setError(null);
+//     } catch (err) {
+//       setError(err instanceof Error ? err.message : 'Failed to create todo');
+//     }
+//   };
+
+//   const fetchTodos = async () => {
+//     try {
+//       setLoading(true);
+//       const data = await api.getTodos();
+//       setTodos(data);
+//       setError(null);
+//     } catch (err) {
+//       setError(err instanceof Error ? err.message : 'Failed to fetch todos');
+//     } finally {
+//       setLoading(false);
+//     }
+//   };
+
+//   const toggleTodo = async (id: number) => {
+//     const todo = todos.find(t => t.id === id);
+//     if (!todo) return;
+
+//     try {
+//       const updatedTodo = await api.updateTodo(id.toString(), {
+//         completed: !todo.completed,
+//       });
+//       setTodos(todos.map(t => t.id === id ? updatedTodo : t));
+//       setError(null);
+//     } catch (err) {
+//       setError(err instanceof Error ? err.message : 'Failed to update todo');
+//     }
+//   };
+
+//   const handleDeleteClick = (todo: Todo) => {
+//     setTodoToDelete(todo);
+//     setDeleteDialogOpen(true);
+//   };
+
+//   const handleDeleteConfirm = async () => {
+//     if (!todoToDelete) return;
+
+//     try {
+//       await api.deleteTodo(todoToDelete.id.toString());
+//       setTodos(todos.filter(t => t.id !== todoToDelete.id));
+//       setError(null);
+//     } catch (err) {
+//       setError(err instanceof Error ? err.message : 'Failed to delete todo');
+//     } finally {
+//       setDeleteDialogOpen(false);
+//       setTodoToDelete(null);
+//     }
+//   };
+
+//   const handleDeleteCancel = () => {
+//     setDeleteDialogOpen(false);
+//     setTodoToDelete(null);
+//   };
+
+//   const handleFilterChange = (
+//     event: React.MouseEvent<HTMLElement>,
+//     newFilter: FilterType,
+//   ) => {
+//     if (newFilter !== null) {
+//       setFilter(newFilter);
+//     }
+//   };
+
+//   const handleSortChange = (event: SelectChangeEvent) => {
+//     setSortBy(event.target.value as SortType);
+//   };
+
+//   const handlePriorityChange = (event: SelectChangeEvent) => {
+//     setNewTodo({ ...newTodo, priority: event.target.value as PriorityType });
+//   };
+
+//   const getPriorityColor = (priority: string) => {
+//     switch (priority) {
+//       case 'high':
+//         return 'error';
+//       case 'medium':
+//         return 'warning';
+//       case 'low':
+//         return 'success';
+//       default:
+//         return 'default';
+//     }
+//   };
+
+//   const handleEditClick = (todo: Todo) => {
+//     setTodoToEdit(todo);
+//     setEditDescription(todo.description || '');
+//     setEditDueDate(todo.dueDate ? new Date(todo.dueDate) : null);
+//     setEditPriority(todo.priority);
+//     setEditDialogOpen(true);
+//   };
+
+//   const handleEditClose = () => {
+//     setEditDialogOpen(false);
+//     setTodoToEdit(null);
+//     setEditDescription('');
+//     setEditDueDate(null);
+//     setEditPriority('medium');
+//   };
+
+//   const handleEditSubmit = async () => {
+//     if (!todoToEdit) return;
+
+//     try {
+//       const updatedTodo = await api.updateTodo(todoToEdit.id.toString(), {
+//         description: editDescription.trim(),
+//         dueDate: editDueDate?.toISOString(),
+//         priority: editPriority,
+//       });
+//       setTodos(todos.map(t => t.id === todoToEdit.id ? updatedTodo : t));
+//       setError(null);
+//       handleEditClose();
+//     } catch (err) {
+//       setError(err instanceof Error ? err.message : 'Failed to update todo');
+//     }
+//   };
+
+//   const filteredAndSortedTodos = [...todos]
+//     .filter(todo => {
+//       switch (filter) {
+//         case 'active':
+//           return !todo.completed;
+//         case 'completed':
+//           return todo.completed;
+//         default:
+//           return true;
+//       }
+//     })
+//     .sort((a, b) => {
+//       switch (sortBy) {
+//         case 'priority': {
+//           const priorityOrder = { high: 0, medium: 1, low: 2 };
+//           return priorityOrder[a.priority] - priorityOrder[b.priority];
+//         }
+//         case 'dueDate': {
+//           if (!a.dueDate) return 1;
+//           if (!b.dueDate) return -1;
+//           return new Date(a.dueDate).getTime() - new Date(b.dueDate).getTime();
+//         }
+//         default:
+//           return new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime();
+//       }
+//     });
+
+//   const formatDate = (dateString: string) => {
+//     return new Date(dateString).toLocaleDateString('en-US', {
+//       month: 'short',
+//       day: 'numeric',
+//       year: 'numeric',
+//     });
+//   };
+
+//   if (loading) {
+//     return <div className="App">Loading...</div>;
+//   }
+
+//   return (
+//     <Box className="App" sx={{ maxWidth: 800, mx: 'auto', p: 3 }}>
+//       <Typography variant="h4" component="h1" gutterBottom>
+//         Todo List
+//       </Typography>
       
-      {error && (
-        <Typography color="error" sx={{ mb: 2 }}>
-          {error}
-        </Typography>
-      )}
-
-      <Stack direction="row" spacing={2} alignItems="center" sx={{ mb: 3 }}>
-        <Button
-          variant="contained"
-          startIcon={<AddIcon />}
-          onClick={handleClickOpen}
-        >
-          Add New Todo
-        </Button>
-        <ToggleButtonGroup
-          value={filter}
-          exclusive
-          onChange={handleFilterChange}
-          size="small"
-        >
-          <ToggleButton value="all">All</ToggleButton>
-          <ToggleButton value="active">Active</ToggleButton>
-          <ToggleButton value="completed">Completed</ToggleButton>
-        </ToggleButtonGroup>
-        <FormControl size="small" sx={{ minWidth: 120 }}>
-          <InputLabel>Sort By</InputLabel>
-          <Select
-            value={sortBy}
-            label="Sort By"
-            onChange={handleSortChange}
-          >
-            <MenuItem value="date">Date Created</MenuItem>
-            <MenuItem value="priority">Priority</MenuItem>
-            <MenuItem value="dueDate">Due Date</MenuItem>
-          </Select>
-        </FormControl>
-      </Stack>
-
-      <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
-        <DialogTitle>Add New Todo</DialogTitle>
-        <form onSubmit={handleSubmit}>
-          <DialogContent>
-            <Stack spacing={2}>
-              <TextField
-                autoFocus
-                label="Title"
-                type="text"
-                fullWidth
-                value={newTodo.title}
-                onChange={(e) => setNewTodo({ ...newTodo, title: e.target.value })}
-                error={!!formError}
-                helperText={formError}
-                required
-              />
-              <TextField
-                label="Description"
-                multiline
-                rows={4}
-                fullWidth
-                value={newTodo.description}
-                onChange={(e) => setNewTodo({ ...newTodo, description: e.target.value })}
-              />
-              <LocalizationProvider dateAdapter={AdapterDateFns}>
-                <DatePicker
-                  label="Due Date"
-                  value={newTodo.dueDate}
-                  onChange={(date) => setNewTodo({ ...newTodo, dueDate: date })}
-                  slotProps={{ textField: { fullWidth: true } }}
-                />
-              </LocalizationProvider>
-              <FormControl fullWidth>
-                <InputLabel>Priority</InputLabel>
-                <Select
-                  value={newTodo.priority}
-                  label="Priority"
-                  onChange={handlePriorityChange}
-                >
-                  <MenuItem value="low">Low</MenuItem>
-                  <MenuItem value="medium">Medium</MenuItem>
-                  <MenuItem value="high">High</MenuItem>
-                </Select>
-              </FormControl>
-            </Stack>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={handleClose}>Cancel</Button>
-            <Button type="submit" variant="contained">Add Todo</Button>
-          </DialogActions>
-        </form>
-      </Dialog>
-
-      <Dialog
-        open={deleteDialogOpen}
-        onClose={handleDeleteCancel}
-        aria-labelledby="delete-dialog-title"
-      >
-        <DialogTitle id="delete-dialog-title">
-          Delete Todo
-        </DialogTitle>
-        <DialogContent>
-          <DialogContentText>
-            Are you sure you want to delete "{todoToDelete?.text}"? This action cannot be undone.
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleDeleteCancel} color="primary">
-            Cancel
-          </Button>
-          <Button 
-            onClick={handleDeleteConfirm} 
-            color="error" 
-            variant="contained"
-            autoFocus
-          >
-            Delete
-          </Button>
-        </DialogActions>
-      </Dialog>
-
-      <Dialog
-        open={editDialogOpen}
-        onClose={handleEditClose}
-        maxWidth="sm"
-        fullWidth
-      >
-        <DialogTitle>Edit Todo</DialogTitle>
-        <DialogContent>
-          <Stack spacing={3} sx={{ mt: 2 }}>
-            <TextField
-              autoFocus
-              label="Description"
-              multiline
-              rows={4}
-              fullWidth
-              value={editDescription}
-              onChange={(e) => setEditDescription(e.target.value)}
-            />
-            <LocalizationProvider dateAdapter={AdapterDateFns}>
-              <DatePicker
-                label="Due Date"
-                value={editDueDate}
-                onChange={(date) => setEditDueDate(date)}
-                slotProps={{ textField: { fullWidth: true } }}
-              />
-            </LocalizationProvider>
-            <FormControl fullWidth>
-              <InputLabel>Priority</InputLabel>
-              <Select
-                value={editPriority}
-                label="Priority"
-                onChange={(e) => setEditPriority(e.target.value as PriorityType)}
-              >
-                <MenuItem value="low">Low</MenuItem>
-                <MenuItem value="medium">Medium</MenuItem>
-                <MenuItem value="high">High</MenuItem>
-              </Select>
-            </FormControl>
-          </Stack>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={handleEditClose}>Cancel</Button>
-          <Button onClick={handleEditSubmit} variant="contained" color="primary">
-            Save Changes
-          </Button>
-        </DialogActions>
-      </Dialog>
-
-      <Paper elevation={2}>
-        <List>
-          {filteredAndSortedTodos.map((todo, index) => (
-            <React.Fragment key={todo.id}>
-              {index > 0 && <Divider />}
-              <ListItem
-                sx={{
-                  opacity: todo.completed ? 0.7 : 1,
-                  bgcolor: todo.completed ? 'action.hover' : 'background.paper',
-                  transition: 'all 0.2s ease-in-out',
-                  '&:hover': {
-                    bgcolor: 'action.hover',
-                  },
-                  py: 2,
-                }}
-              >
-                <Checkbox
-                  checked={todo.completed}
-                  onChange={() => toggleTodo(todo.id)}
-                  sx={{
-                    '&.Mui-checked': {
-                      color: 'success.main',
-                    },
-                  }}
-                />
-                <ListItemText
-                  primary={
-                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
-                      <Typography
-                        variant="body1"
-                        sx={{
-                          textDecoration: todo.completed ? 'line-through' : 'none',
-                          color: todo.completed ? 'text.secondary' : 'text.primary',
-                          transition: 'all 0.2s ease-in-out',
-                          fontWeight: todo.completed ? 'normal' : 500,
-                        }}
-                      >
-                        {todo.text}
-                      </Typography>
-                      <Chip
-                        size="small"
-                        icon={<FlagIcon />}
-                        label={todo.priority}
-                        color={getPriorityColor(todo.priority)}
-                        variant="outlined"
-                      />
-                      {todo.dueDate && (
-                        <Chip
-                          size="small"
-                          icon={<AccessTimeIcon />}
-                          label={formatDate(todo.dueDate)}
-                          variant="outlined"
-                          color={new Date(todo.dueDate) < new Date() ? 'error' : 'default'}
-                        />
-                      )}
-                    </Box>
-                  }
-                  secondary={
-                    <Typography
-                      variant="body2"
-                      component="span"
-                      sx={{
-                        color: todo.completed ? 'text.disabled' : 'text.secondary',
-                        textDecoration: todo.completed ? 'line-through' : 'none',
-                        transition: 'all 0.2s ease-in-out',
-                        mt: 0.5,
-                        display: 'block',
-                      }}
-                    >
-                      {todo.description}
-                    </Typography>
-                  }
-                  onClick={() => toggleTodo(todo.id)}
-                  sx={{
-                    cursor: 'pointer',
-                    '&:hover': {
-                      '& .MuiTypography-root': {
-                        color: todo.completed ? 'text.secondary' : 'primary.main',
-                      },
-                    },
-                  }}
-                />
-                <ListItemSecondaryAction>
-                  <IconButton
-                    edge="end"
-                    aria-label="edit"
-                    onClick={() => handleEditClick(todo)}
-                    sx={{
-                      color: 'primary.main',
-                      mr: 1,
-                      '&:hover': {
-                        bgcolor: 'primary.light',
-                        color: 'primary.contrastText',
-                      },
-                    }}
-                  >
-                    <EditIcon />
-                  </IconButton>
-                  <IconButton
-                    edge="end"
-                    aria-label="delete"
-                    onClick={() => handleDeleteClick(todo)}
-                    sx={{
-                      color: 'error.main',
-                      '&:hover': {
-                        bgcolor: 'error.light',
-                        color: 'error.contrastText',
-                      },
-                    }}
-                  >
-                    <DeleteIcon />
-                  </IconButton>
-                </ListItemSecondaryAction>
-              </ListItem>
-            </React.Fragment>
-          ))}
-          {todos.length === 0 && (
-            <ListItem>
-              <ListItemText
-                primary={
-                  <Typography
-                    variant="body1"
-                    color="text.secondary"
-                    align="center"
-                    sx={{ py: 4 }}
-                  >
-                    No todos yet. Add one to get started!
-                  </Typography>
-                }
-              />
-            </ListItem>
-          )}
-        </List>
-      </Paper>
-    </Box>
-  );
-}
-*/
-export default () => {};
+//       {error && (
+//         <Typography color="error" sx={{ mb: 2 }}>
+//           {error}
+//         </Typography>
+//       )}
+
+//       <Stack direction="row" spacing={2} alignItems="center" sx={{ mb: 3 }}>
+//         <Button
+//           variant="contained"
+//           startIcon={<AddIcon />}
+//           onClick={handleClickOpen}
+//         >
+//           Add New Todo
+//         </Button>
+//         <ToggleButtonGroup
+//           value={filter}
+//           exclusive
+//           onChange={handleFilterChange}
+//           size="small"
+//         >
+//           <ToggleButton value="all">All</ToggleButton>
+//           <ToggleButton value="active">Active</ToggleButton>
+//           <ToggleButton value="completed">Completed</ToggleButton>
+//         </ToggleButtonGroup>
+//         <FormControl size="small" sx={{ minWidth: 120 }}>
+//           <InputLabel>Sort By</InputLabel>
+//           <Select
+//             value={sortBy}
+//             label="Sort By"
+//             onChange={handleSortChange}
+//           >
+//             <MenuItem value="date">Date Created</MenuItem>
+//             <MenuItem value="priority">Priority</MenuItem>
+//             <MenuItem value="dueDate">Due Date</MenuItem>
+//           </Select>
+//         </FormControl>
+//       </Stack>
+
+//       <Dialog open={open} onClose={handleClose} maxWidth="sm" fullWidth>
+//         <DialogTitle>Add New Todo</DialogTitle>
+//         <form onSubmit={handleSubmit}>
+//           <DialogContent>
+//             <Stack spacing={2}>
+//               <TextField
+//                 autoFocus
+//                 label="Title"
+//                 type="text"
+//                 fullWidth
+//                 value={newTodo.title}
+//                 onChange={(e) => setNewTodo({ ...newTodo, title: e.target.value })}
+//                 error={!!formError}
+//                 helperText={formError}
+//                 required
+//               />
+//               <TextField
+//                 label="Description"
+//                 multiline
+//                 rows={4}
+//                 fullWidth
+//                 value={newTodo.description}
+//                 onChange={(e) => setNewTodo({ ...newTodo, description: e.target.value })}
+//               />
+//               <LocalizationProvider dateAdapter={AdapterDateFns}>
+//                 <DatePicker
+//                   label="Due Date"
+//                   value={newTodo.dueDate}
+//                   onChange={(date) => setNewTodo({ ...newTodo, dueDate: date })}
+//                   slotProps={{ textField: { fullWidth: true } }}
+//                 />
+//               </LocalizationProvider>
+//               <FormControl fullWidth>
+//                 <InputLabel>Priority</InputLabel>
+//                 <Select
+//                   value={newTodo.priority}
+//                   label="Priority"
+//                   onChange={handlePriorityChange}
+//                 >
+//                   <MenuItem value="low">Low</MenuItem>
+//                   <MenuItem value="medium">Medium</MenuItem>
+//                   <MenuItem value="high">High</MenuItem>
+//                 </Select>
+//               </FormControl>
+//             </Stack>
+//           </DialogContent>
+//           <DialogActions>
+//             <Button onClick={handleClose}>Cancel</Button>
+//             <Button type="submit" variant="contained">Add Todo</Button>
+//           </DialogActions>
+//         </form>
+//       </Dialog>
+
+//       <Dialog
+//         open={deleteDialogOpen}
+//         onClose={handleDeleteCancel}
+//         aria-labelledby="delete-dialog-title"
+//       >
+//         <DialogTitle id="delete-dialog-title">
+//           Delete Todo
+//         </DialogTitle>
+//         <DialogContent>
+//           <DialogContentText>
+//             Are you sure you want to delete "{todoToDelete?.text}"? This action cannot be undone.
+//           </DialogContentText>
+//         </DialogContent>
+//         <DialogActions>
+//           <Button onClick={handleDeleteCancel} color="primary">
+//             Cancel
+//           </Button>
+//           <Button 
+//             onClick={handleDeleteConfirm} 
+//             color="error" 
+//             variant="contained"
+//             autoFocus
+//           >
+//             Delete
+//           </Button>
+//         </DialogActions>
+//       </Dialog>
+
+//       <Dialog
+//         open={editDialogOpen}
+//         onClose={handleEditClose}
+//         maxWidth="sm"
+//         fullWidth
+//       >
+//         <DialogTitle>Edit Todo</DialogTitle>
+//         <DialogContent>
+//           <Stack spacing={3} sx={{ mt: 2 }}>
+//             <TextField
+//               autoFocus
+//               label="Description"
+//               multiline
+//               rows={4}
+//               fullWidth
+//               value={editDescription}
+//               onChange={(e) => setEditDescription(e.target.value)}
+//             />
+//             <LocalizationProvider dateAdapter={AdapterDateFns}>
+//               <DatePicker
+//                 label="Due Date"
+//                 value={editDueDate}
+//                 onChange={(date) => setEditDueDate(date)}
+//                 slotProps={{ textField: { fullWidth: true } }}
+//               />
+//             </LocalizationProvider>
+//             <FormControl fullWidth>
+//               <InputLabel>Priority</InputLabel>
+//               <Select
+//                 value={editPriority}
+//                 label="Priority"
+//                 onChange={(e) => setEditPriority(e.target.value as PriorityType)}
+//               >
+//                 <MenuItem value="low">Low</MenuItem>
+//                 <MenuItem value="medium">Medium</MenuItem>
+//                 <MenuItem value="high">High</MenuItem>
+//               </Select>
+//             </FormControl>
+//           </Stack>
+//         </DialogContent>
+//         <DialogActions>
+//           <Button onClick={handleEditClose}>Cancel</Button>
+//           <Button onClick={handleEditSubmit} variant="contained" color="primary">
+//             Save Changes
+//           </Button>
+//         </DialogActions>
+//       </Dialog>
+
+//       <Paper elevation={2}>
+//         <List>
+//           {filteredAndSortedTodos.map((todo, index) => (
+//             <React.Fragment key={todo.id}>
+//               {index > 0 && <Divider />}
+//               <ListItem
+//                 sx={{
+//                   opacity: todo.completed ? 0.7 : 1,
+//                   bgcolor: todo.completed ? 'action.hover' : 'background.paper',
+//                   transition: 'all 0.2s ease-in-out',
+//                   '&:hover': {
+//                     bgcolor: 'action.hover',
+//                   },
+//                   py: 2,
+//                 }}
+//               >
+//                 <Checkbox
+//                   checked={todo.completed}
+//                   onChange={() => toggleTodo(todo.id)}
+//                   sx={{
+//                     '&.Mui-checked': {
+//                       color: 'success.main',
+//                     },
+//                   }}
+//                 />
+//                 <ListItemText
+//                   primary={
+//                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
+//                       <Typography
+//                         variant="body1"
+//                         sx={{
+//                           textDecoration: todo.completed ? 'line-through' : 'none',
+//                           color: todo.completed ? 'text.secondary' : 'text.primary',
+//                           transition: 'all 0.2s ease-in-out',
+//                           fontWeight: todo.completed ? 'normal' : 500,
+//                         }}
+//                       >
+//                         {todo.text}
+//                       </Typography>
+//                       <Chip
+//                         size="small"
+//                         icon={<FlagIcon />}
+//                         label={todo.priority}
+//                         color={getPriorityColor(todo.priority)}
+//                         variant="outlined"
+//                       />
+//                       {todo.dueDate && (
+//                         <Chip
+//                           size="small"
+//                           icon={<AccessTimeIcon />}
+//                           label={formatDate(todo.dueDate)}
+//                           variant="outlined"
+//                           color={new Date(todo.dueDate) < new Date() ? 'error' : 'default'}
+//                         />
+//                       )}
+//                     </Box>
+//                   }
+//                   secondary={
+//                     <Typography
+//                       variant="body2"
+//                       component="span"
+//                       sx={{
+//                         color: todo.completed ? 'text.disabled' : 'text.secondary',
+//                         textDecoration: todo.completed ? 'line-through' : 'none',
+//                         transition: 'all 0.2s ease-in-out',
+//                         mt: 0.5,
+//                         display: 'block',
+//                       }}
+//                     >
+//                       {todo.description}
+//                     </Typography>
+//                   }
+//                   onClick={() => toggleTodo(todo.id)}
+//                   sx={{
+//                     cursor: 'pointer',
+//                     '&:hover': {
+//                       '& .MuiTypography-root': {
+//                         color: todo.completed ? 'text.secondary' : 'primary.main',
+//                       },
+//                     },
+//                   }}
+//                 />
+//                 <ListItemSecondaryAction>
+//                   <IconButton
+//                     edge="end"
+//                     aria-label="edit"
+//                     onClick={() => handleEditClick(todo)}
+//                     sx={{
+//                       color: 'primary.main',
+//                       mr: 1,
+//                       '&:hover': {
+//                         bgcolor: 'primary.light',
+//                         color: 'primary.contrastText',
+//                       },
+//                     }}
+//                   >
+//                     <EditIcon />
+//                   </IconButton>
+//                   <IconButton
+//                     edge="end"
+//                     aria-label="delete"
+//                     onClick={() => handleDeleteClick(todo)}
+//                     sx={{
+//                       color: 'error.main',
+//                       '&:hover': {
+//                         bgcolor: 'error.light',
+//                         color: 'error.contrastText',
+//                       },
+//                     }}
+//                   >
+//                     <DeleteIcon />
+//                   </IconButton>
+//                 </ListItemSecondaryAction>
+//               </ListItem>
+//             </React.Fragment>
+//           ))}
+//           {todos.length === 0 && (
+//             <ListItem>
+//               <ListItemText
+//                 primary={
+//                   <Typography
+//                     variant="body1"
+//                     color="text.secondary"
+//                     align="center"
+//                     sx={{ py: 4 }}
+//                   >
+//                     No todos yet. Add one to get started!
+//                   </Typography>
+//                 }
+//               />
+//             </ListItem>
+//           )}
+//         </List>
+//       </Paper>
+//     </Box>
+//   );
+// }
+
+// export default App;
+
+export { };