Untitled Page

// Builds the dashboard from API data and handles add and status PATCH actions.
import { useState } from 'react';
import { useOutletContext } from 'react-router-dom';
import StatCard from './StatCard';
import DashboardTable from './DashboardTable';
import TaskFormModal from './TaskFormModal';
import { createTask, patchTask } from '../api/taskService';
import { colors, primaryButtonStyle } from './theme';

function Dashboard() {
  const { tasks = [], loading, error, refreshTasks } = useOutletContext() || {};
  const [showForm, setShowForm] = useState(false);
  const completed = tasks.filter((task) => task.simpleStatus === 'Done').length;
  const pending = tasks.length - completed;
  const addTask = async (task) => { await createTask(task); await refreshTasks(); };
  const toggle = async (task) => { await patchTask(task._id, { simpleStatus: task.simpleStatus === 'Done' ? 'Pending' : 'Done' }); await refreshTasks(); };

  return (
    <>
      <div className="d-flex align-items-start justify-content-between mb-4"><div><h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 5 }}>Good Morning, John!</h1><p style={{ color: colors.secondary, fontSize: 13, margin: 0 }}>Here's what's happening with your tasks today.</p></div><button className="btn btn-primary" style={primaryButtonStyle} onClick={() => setShowForm(true)}>Add New Task</button></div>
      {error && <div className="alert alert-danger">{error}</div>}
      <div className="row g-4 mb-4"><div className="col-4"><StatCard label="Total Tasks" value={tasks.length} helper="All tasks assigned" accent="#2563EB" /></div><div className="col-4"><StatCard label="Completed Tasks" value={completed} helper="Tasks completed" accent="#16A34A" /></div><div className="col-4"><StatCard label="Pending Tasks" value={pending} helper="Tasks pending" accent="#D97706" /></div></div>
      {loading ? <div className="text-center py-5">Loading tasks...</div> : <DashboardTable tasks={tasks} onToggle={toggle} />}
      {showForm && <TaskFormModal onClose={() => setShowForm(false)} onSubmit={addTask} />}
    </>
  );
}
export default Dashboard;