Build KendoReact App with 10 Components

   npx create-react-app productivity-dashboard
   cd productivity-dashboard

   npm install @progress/kendo-react-buttons @progress/kendo-react-dropdowns @progress/kendo-react-inputs @progress/kendo-react-dateinputs @progress/kendo-react-grid @progress/kendo-react-charts @progress/kendo-react-dialogs @progress/kendo-react-layout @progress/kendo-react-notification @progress/kendo-react-progressbars

import React, { useState } from 'react';
import { Button } from '@progress/kendo-react-buttons';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { Input } from '@progress/kendo-react-inputs';
import { DatePicker } from '@progress/kendo-react-dateinputs';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { Chart, ChartSeries, ChartSeriesItem, ChartCategoryAxis, ChartCategoryAxisItem, ChartValueAxis, ChartValueAxisItem } from '@progress/kendo-react-charts';
import { Dialog } from '@progress/kendo-react-dialogs';
import { Notification } from '@progress/kendo-react-notification';
import { ProgressBar } from '@progress/kendo-react-progressbars';
import { Drawer, DrawerContent, DrawerNavigation } from '@progress/kendo-react-layout';

const App = () => {
  const [tasks, setTasks] = useState([
    { id: 1, task: 'Complete KendoReact Challenge', dueDate: '2023-10-15', status: 'In Progress' },
    { id: 2, task: 'Prepare Presentation', dueDate: '2023-10-20', status: 'Not Started' },
  ]);
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [newTask, setNewTask] = useState({ task: '', dueDate: '', status: 'Not Started' });
  const [notifications, setNotifications] = useState([]);

  const statusOptions = ['Not Started', 'In Progress', 'Completed'];

  const handleAddTask = () => {
    setTasks([...tasks, { ...newTask, id: tasks.length + 1 }]);
    setIsDialogOpen(false);
    setNotifications([...notifications, 'Task added successfully!']);
    setNewTask({ task: '', dueDate: '', status: 'Not Started' });
  };

  return (
    <div>
      {/* Header */}
      <header style={{ padding: '10px', backgroundColor: '#f0f0f0', display: 'flex', justifyContent: 'space-between' }}>
        <h1>Productivity Dashboard</h1>
        <DropDownList data={['Profile', 'Settings', 'Logout']} defaultValue="Profile" />
      </header>

      {/* Sidebar */}
      <Drawer>
        <DrawerNavigation>
          <ul>
            <li>Tasks</li>
            <li>Calendar</li>
            <li>Progress</li>
          </ul>
        </DrawerNavigation>
        <DrawerContent>
          {/* Main Content */}
          <div style={{ padding: '20px' }}>
            <Button onClick={() => setIsDialogOpen(true)}>Add Task</Button>

            {/* Task Grid */}
            <Grid data={tasks}>
              <GridColumn field="task" title="Task" />
              <GridColumn field="dueDate" title="Due Date" />
              <GridColumn field="status" title="Status" />
            </Grid>

            {/* Progress Bar */}
            <ProgressBar value={tasks.filter(task => task.status === 'Completed').length / tasks.length * 100} />

            {/* Calendar */}
            <DatePicker value={selectedDate} onChange={(e) => setSelectedDate(e.value)} />

            {/* Chart */}
            <Chart>
              <ChartCategoryAxis>
                <ChartCategoryAxisItem categories={tasks.map(task => task.task)} />
              </ChartCategoryAxis>
              <ChartValueAxis>
                <ChartValueAxisItem />
              </ChartValueAxis>
              <ChartSeries>
                <ChartSeriesItem type="bar" data={tasks.map(task => task.status === 'Completed' ? 1 : 0)} />
              </ChartSeries>
            </Chart>
          </div>
        </DrawerContent>
      </Drawer>

      {/* Add Task Dialog */}
      {isDialogOpen && (
        <Dialog title="Add Task" onClose={() => setIsDialogOpen(false)}>
          <Input
            value={newTask.task}
            onChange={(e) => setNewTask({ ...newTask, task: e.value })}
            placeholder="Task Name"
          />
          <DatePicker
            value={newTask.dueDate}
            onChange={(e) => setNewTask({ ...newTask, dueDate: e.value })}
            placeholder="Due Date"
          />
          <DropDownList
            data={statusOptions}
            value={newTask.status}
            onChange={(e) => setNewTask({ ...newTask, status: e.value })}
          />
          <Button onClick={handleAddTask}>Add</Button>
        </Dialog>
      )}

      {/* Notifications */}
      {notifications.map((message, index) => (
        <Notification key={index} type={{ style: 'success' }}>
          {message}
        </Notification>
      ))}
    </div>
  );
};

export default App;

   npm start