Build a dashboard of daily actions

Here’s a clean, functional React dashboard for daily actions. It includes a task list, completion toggle, date picker, and basic layout using Tailwind CSS and shadcn/ui components for a polished UI.

Let me know if you’d like to add authentication, API integration, or persistent storage.

tsx
CopyEdit
// Dashboard.tsx

import React, { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Calendar } from "@/components/ui/calendar";
import { format } from "date-fns";
import { motion } from "framer-motion";

interface Task {
  id: number;
  text: string;
  completed: boolean;
}

export default function Dashboard() {
  const [tasks, setTasks] = useState<Task[]>([]);
  const [input, setInput] = useState("");
  const [date, setDate] = useState<Date | undefined>(new Date());

  const addTask = () => {
    if (input.trim()) {
      setTasks((prev) => [
        ...prev,
        { id: Date.now(), text: input.trim(), completed: false },
      ]);
      setInput("");
    }
  };

  const toggleTask = (id: number) => {
    setTasks((prev) =>
      prev.map((task) =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  const removeTask = (id: number) => {
    setTasks((prev) => prev.filter((task) => task.id !== id));
  };

  return (
    <div className="max-w-4xl mx-auto p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.4 }}
      >
        <Card className="rounded-2xl shadow-md p-4">
          <CardContent>
            <h2 className="text-xl font-bold mb-4">Select Day</h2>
            <Calendar mode="single" selected={date} onSelect={setDate} />
            {date && (
              <p className="text-sm mt-4 text-muted-foreground">
                Selected: {format(date, "PPP")}
              </p>
            )}
          </CardContent>
        </Card>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.1, duration: 0.4 }}
      >
        <Card className="rounded-2xl shadow-md p-4">
          <CardContent>
            <h2 className="text-xl font-bold mb-4">Daily Tasks</h2>
            <div className="flex gap-2 mb-4">
              <Input
                placeholder="Add a new task"
                value={input}
                onChange={(e) => setInput(e.target.value)}
              />
              <Button onClick={addTask}>Add</Button>
            </div>
            <div className="space-y-2 max-h-64 overflow-y-auto">
              {tasks.length === 0 && (
                <p className="text-sm text-muted-foreground">No tasks yet.</p>
              )}
              {tasks.map((task) => (
                <div
                  key={task.id}
                  className="flex items-center justify-between bg-muted rounded-lg p-2"
                >
                  <div className="flex items-center gap-2">
                    <Checkbox
                      checked={task.completed}
                      onCheckedChange={() => toggleTask(task.id)}
                    />
                    <span
                      className={`text-sm ${
                        task.completed ? "line-through text-muted-foreground" : ""
                      }`}
                    >
                      {task.text}
                    </span>
                  </div>
                  <Button
                    variant="ghost"
                    size="sm"
                    onClick={() => removeTask(task.id)}
                  >
                    ✕
                  </Button>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>
      </motion.div>
    </div>
  );
}

Key Features:

• Date Selection: For choosing a day for task planning.

• Task Management: Add, mark complete, delete.

• Modern UI: Tailwind and ShadCN for responsive, aesthetic design.

• Animation: Framer Motion for entry transitions.

Let me know if you want a weekly/monthly view, charts, dark mode, or persistence (localStorage or database).