Point out the bugs
SubtaskModal.jsx:51 Uncaught ReferenceError: subtaskTitle is not defined
    at SubtaskModal (SubtaskModal.jsx:51:14)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
SubtaskModal @ SubtaskModal.jsx:51
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performSyncWorkOnRoot @ react-dom.development.js:26085
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
SubtaskModal.jsx:51 Uncaught ReferenceError: subtaskTitle is not defined
    at SubtaskModal (SubtaskModal.jsx:51:14)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at HTMLUnknownElement.callCallback2 (react-dom.development.js:4164:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:16)
    at invokeGuardedCallback (react-dom.development.js:4277:31)
    at beginWork$1 (react-dom.development.js:27451:7)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
SubtaskModal @ SubtaskModal.jsx:51
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback2 @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performSyncWorkOnRoot @ react-dom.development.js:26096
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
react_devtools_backend.js:2655 The above error occurred in the <SubtaskModal> component:

    at SubtaskModal (http://localhost:5173/src/components/SubtaskModal.jsx?t=1681359029397:15:25)
    at div
    at TaskContainer (http://localhost:5173/src/components/TaskContainer.jsx?t=1681363520683:19:60)
    at div
    at TaskProvider (http://localhost:5173/src/TaskContext.jsx:13:25)
    at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend.js:2655
logCapturedError @ react-dom.development.js:18687
update.callback @ react-dom.development.js:18720
callCallback @ react-dom.development.js:13923
commitUpdateQueue @ react-dom.development.js:13944
commitLayoutEffectOnFiber @ react-dom.development.js:23391
commitLayoutMountEffects_complete @ react-dom.development.js:24688
commitLayoutEffects_begin @ react-dom.development.js:24674
commitLayoutEffects @ react-dom.development.js:24612
commitRootImpl @ react-dom.development.js:26823
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651
react-dom.development.js:12056 Uncaught ReferenceError: subtaskTitle is not defined
    at SubtaskModal (SubtaskModal.jsx:51:14)
    at renderWithHooks (react-dom.development.js:16305:18)
    at mountIndeterminateComponent (react-dom.development.js:20074:13)
    at beginWork (react-dom.development.js:21587:16)
    at beginWork$1 (react-dom.development.js:27426:14)
    at performUnitOfWork (react-dom.development.js:26557:12)
    at workLoopSync (react-dom.development.js:26466:5)
    at renderRootSync (react-dom.development.js:26434:7)
    at recoverFromConcurrentError (react-dom.development.js:25850:20)
    at performSyncWorkOnRoot (react-dom.development.js:26096:20)

```
// App
import React from 'react';
import TaskContainer from './components/TaskContainer';
import { TaskProvider } from './TaskContext';

function App() {
  return (
    <TaskProvider>
      <div className="container mx-auto p-6">
        <h1 className="mb-6 text-3xl font-bold">Task Logger</h1>
        <TaskContainer />
      </div>
    </TaskProvider>
  );
}

export default App;

//TaskContext

import React, { createContext, useEffect, useState } from 'react';

const TaskContext = createContext();

const TaskProvider = ({ children }) => {
  const [tasks, setTasks] = useState([]);

  useEffect(() => {
    const storedTasks = JSON.parse(localStorage.getItem('tasks'));
    if (storedTasks) {
      setTasks(storedTasks);
    }
  }, []);

  useEffect(() => {
   localStorage.setItem('tasks', JSON.stringify(tasks));
  }, [tasks]);

  const addTask = (task) => {
    setTasks([...tasks, task]);
  };

  const deleteTask = (taskId) => {
    setTasks(tasks.filter((task) => task.id !== taskId));
  };

  const addSubtask = (taskId, subtask) => {
    const updatedTasks = tasks.map((task) => {
      if (task.id === taskId) {
        const updatedSubtasks = [...task.subtasks, subtask];
        return { ...task, subtasks: updatedSubtasks };
      }
      return task;
    });
    setTasks(updatedTasks);
  };

const updateSubtaskStatus = (taskId, subtaskId, status) => {
  const updatedTasks = tasks.map((task) => {
    if (task.id === taskId) {
      const updatedSubtasks = task.subtasks.map((subtask) => {
        if (subtask.id === subtaskId) {
          return { ...subtask, status };
        }
        return subtask;
      });
      return { ...task, subtasks: updatedSubtasks };
    }
    return task;
  });
  setTasks(updatedTasks);
};

  return (
    <TaskContext.Provider value={{ tasks, addTask, deleteTask, addSubtask, updateSubtaskStatus }}>
      {children}
    </TaskContext.Provider>
  );
};

export { TaskContext, TaskProvider }; 

// TaskContainer
import React, { useContext, useState } from 'react';
import TaskInput from './TaskInput';
import Task from './Task';
import SubtaskModal from './SubtaskModal';
import { TaskContext } from '../TaskContext';

function TaskContainer() {
  const { tasks, addTask, deleteTask, addSubtask } = useContext(TaskContext);
  const [showSubtaskModal, setShowSubtaskModal] = useState(false);
  const [selectedTask, setSelectedTask] = useState(null);

  const frontEndTasks = tasks.filter((task) => task.type === 'front-end');
  const backEndTasks = tasks.filter((task) => task.type === 'back-end');
  
  const handleShowSubtaskModal = (taskId) => {
    setSelectedTask(tasks.find((task) => task.id === taskId));
    setShowSubtaskModal(true);
  };

  const handleHideSubtaskModal = () => {
    setSelectedTask(null);
    setShowSubtaskModal(false);
  };

  return (
    <div>
      <TaskInput onAddTask={addTask} />
      <div className="flex justify-between">
        <div className="w-1/2 mr-4">
          <h2 className="mb-2 font-bold text-lg">Front-End Tasks</h2>
          {frontEndTasks.map((task) => (
            <Task
              key={task.id}
              task={task}
              onTaskDelete={deleteTask}
              onShowSubtaskModal={handleShowSubtaskModal}
            />
          ))}
        </div>
        <div className="w-1/2">
          <h2 className="mb-2 font-bold text-lg">Back-End Tasks</h2>
          {backEndTasks.map((task) => (
            <Task
              key={task.id}
              task={task}
              onTaskDelete={deleteTask}
              onShowSubtaskModal={handleShowSubtaskModal}
            />
          ))}
        </div>
      </div>
      {showSubtaskModal && (
        <SubtaskModal
          task={selectedTask}
          onCloseModal={handleHideSubtaskModal}
          onAddSubtask={addSubtask}
        />
      )}
    </div>
  );
}

export default TaskContainer;

//TaskInput
import React from 'react';

function Task({ task, onTaskDelete, onShowSubtaskModal }) {
  const getProgressBarColor = (averageStatus) => {
    if (averageStatus === 100) {
      return 'bg-green-500';
    } else if (averageStatus >= 50) {
      return 'bg-yellow-500';
    } else {
      return 'bg-red-500';
    }
  };

  const handleDeleteClick = (event) => {
    event.stopPropagation(); // Add this line to stop event propagation
    onTaskDelete(task.id);
  };

  // Add this event handler to handle task click
  const handleTaskClick = () => {
    onShowSubtaskModal(task.id);
  };

  const subtaskStatuses = task.subtasks.map((subtask) => subtask.status);
  const averageStatus = subtaskStatuses.length > 0 ? Math.round(subtaskStatuses.reduce((a, b) => a + b) / subtaskStatuses.length) : 0;

  return (
    <div className="flex items-center justify-between mb-4" onClick={handleTaskClick}>
      <div className="flex items-center space-x-4">
        <div className="flex-shrink-0 w-4 h-4 rounded-full">
          <div className={getProgressBarColor(averageStatus)} style={{ width: `${averageStatus}%`, height: '100%' }}></div>
        </div>
        <p className="font-bold">{task.title}</p>
      </div>
      <button onClick={handleDeleteClick} className="px-2 py-1 text-sm text-red-500 underline">
        Delete
      </button>
    </div>
  );
}

export default Task;

//Task
import React from 'react';

function Task({ task, onTaskDelete, onShowSubtaskModal }) {
  const getProgressBarColor = (averageStatus) => {
    if (averageStatus === 100) {
      return 'bg-green-500';
    } else if (averageStatus >= 50) {
      return 'bg-yellow-500';
    } else {
      return 'bg-red-500';
    }
  };

  const handleDeleteClick = () => {
    onTaskDelete(task.id);
  };

  // Add this event handler to handle task click
  const handleTaskClick = () => {
    onShowSubtaskModal(task.id);
  };

  const subtaskStatuses = task.subtasks.map((subtask) => subtask.status);
  const averageStatus = subtaskStatuses.length > 0 ? Math.round(subtaskStatuses.reduce((a, b) => a + b) / subtaskStatuses.length) : 0;

  return (
    <div className="flex items-center justify-between mb-4" onClick={handleTaskClick}>
      <div className="flex items-center space-x-4">
        <div className="flex-shrink-0 w-4 h-4 rounded-full">
          <div className={getProgressBarColor(averageStatus)} style={{ width: `${averageStatus}%`, height: '100%' }}></div>
        </div>
        <p className="font-bold">{task.title}</p>
      </div>
      <button onClick={handleDeleteClick} className="px-2 py-1 text-sm text-red-500 underline">
        Delete
      </button>
    </div>
  );
}

export default Task;

//SubtaskModal
import React, { useContext } from "react";
import Subtask from "./Subtask";
import TaskInput from "./TaskInput";
import { TaskContext } from "../TaskContext";

function SubtaskModal({ task, onCloseModal, onAddSubtask }) {
	const { addSubtask, updateSubtaskStatus } = useContext(TaskContext);

	const handleTitleChange = (event) => {
		setSubtaskTitle(event.target.value);
	};

	const handleAddSubtask = () => {
		if (subtaskTitle) {
			const newSubtask = {
				id: Date.now(),
				title: subtaskTitle,
				status: 0,
			};
			onAddSubtask(task.id, newSubtask);
			setSubtaskTitle("");
		}
	};

	return (
		<div className="fixed top-0 left-0 w-full h-full flex items-center justify-center">
			<div className="absolute top-0 left-0 w-full h-full bg-gray-900 opacity-75"></div>
			<div className="z-10 w-full max-w-md p-6 mx-auto bg-white rounded-md shadow-lg">
				<div className="flex items-center justify-between mb-4">
					<h2 className="font-bold text-lg">{task.title}</h2>
					<button
						onClick={onCloseModal}
						className="px-2 py-1 text-sm font-medium text-gray-500 hover:text-gray-800"
					>
						Close
					</button>
				</div>
				<div className="mb-4">
					{task.subtasks.map((subtask) => (
						<Subtask
							key={subtask.id}
							taskId={task.id}
							subtask={subtask}
						/>
					))}
				</div>
				<div className="flex items-center space-x-4">
					<input
						type="text"
						placeholder="Enter subtask title"
						value={subtaskTitle}
						onChange={handleTitleChange}
						className="w-2/3 px-3 py-2 border border-gray-400 rounded-md"
					/>
					<button
						onClick={handleAddSubtask}
						className="px-4 py-2 bg-blue-500 text-white rounded-md"
					>
						Add
					</button>
				</div>
			</div>
		</div>
	);
}

export default SubtaskModal;


//Subtask
import React, { useContext } from 'react';
import { TaskContext } from '../TaskContext';

function Subtask({ taskId, subtask }) {
  const { updateSubtaskStatus } = useContext(TaskContext);

  const handleStatusChange = (event) => {
    const newStatus = event.target.checked ? 100 : 0;
    updateSubtaskStatus(taskId, subtask.id, newStatus);
  };

  return (
    <div className="flex items-center justify-between mb-2">
      <div className="flex items-center space-x-2">
        <input
          type="checkbox"
          checked={subtask.status === 100}
          onChange={handleStatusChange}
          className="w-4 h-4 border border-gray-400 rounded-sm"
        />
        <p>{subtask.title}</p>
      </div>
      <div className="flex-shrink-0 w-4 h-4 rounded-full">
        <div className="bg-gray-400" style={{ width: `${subtask.status}%`, height: '100%' }}></div>
      </div>
    </div>
  );
}

export default Subtask;
```