Build React App with KendoReact Components

--

App.js

import React, { useState } from 'react';
import { Button } from '@progress/kendo-react-buttons';
import { Input } from '@progress/kendo-react-inputs';
import { DropDownList } from '@progress/kendo-react-dropdowns';
import { DatePicker } from '@progress/kendo-react-dateinputs';
import { Grid, GridColumn } from '@progress/kendo-react-grid';
import { Dialog } from '@progress/kendo-react-dialogs';
import { Notification } from '@progress/kendo-react-notification';
import { ProgressBar } from '@progress/kendo-react-progressbars';
import { Card, CardTitle, CardBody } from '@progress/kendo-react-layout';
import './App.css'; // Add custom CSS for styling

const App = () => {
  const [tasks, setTasks] = useState([
    { id: 1, title: 'Task 1', priority: 'High', dueDate: '2023-12-01', status: 'In Progress' },
    { id: 2, title: 'Task 2', priority: 'Medium', dueDate: '2023-11-15', status: 'Completed' },
  ]);
  const [newTask, setNewTask] = useState({ title: '', priority: 'Low', dueDate: '', status: 'Pending' });
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [notification, setNotification] = useState(null);

  const priorities = ['Low', 'Medium', 'High'];

  const handleInputChange = (e) => {
    setNewTask({ ...newTask, [e.target.name]: e.target.value });
  };

  const handleDateChange = (e) => {
    setNewTask({ ...newTask, dueDate: e.value });
  };

  const handlePriorityChange = (e) => {
    setNewTask({ ...newTask, priority: e.value });
  };

  const addTask = () => {
    if (!newTask.title || !newTask.dueDate) {
      setNotification({ type: 'error', message: 'Please fill all fields!' });
      return;
    }
    setTasks([...tasks, { ...newTask, id: tasks.length + 1 }]);
    setNewTask({ title: '', priority: 'Low', dueDate: '', status: 'Pending' });
    setIsDialogOpen(false);
    setNotification({ type: 'success', message: 'Task added successfully!' });
  };

  const closeNotification = () => {
    setNotification(null);
  };

  return (
    <div className="App">
      {/* Title Section */}
      <div className="title-section">
        <h1>Task Management Dashboard</h1>
        <p>Manage your tasks efficiently with this dashboard.</p>
      </div>

      {/* Button to Open Dialog */}
      <div className="button-section">
        <Button primary={true} onClick={() => setIsDialogOpen(true)}>
          Add New Task
        </Button>
      </div>

      {/* Dialog for Adding New Task */}
      {isDialogOpen && (
        <Dialog title="Add New Task" onClose={() => setIsDialogOpen(false)}>
          <div className="dialog-content">
            <Input
              name="title"
              label="Task Title"
              value={newTask.title}
              onChange={handleInputChange}
              style={{ width: '100%' }}
            />
            <DropDownList
              data={priorities}
              value={newTask.priority}
              onChange={handlePriorityChange}
              label="Priority"
              style={{ width: '100%' }}
            />
            <DatePicker
              value={newTask.dueDate}
              onChange={handleDateChange}
              label="Due Date"
              style={{ width: '100%' }}
            />
            <Button primary={true} onClick={addTask} style={{ marginTop: '10px' }}>
              Add Task
            </Button>
          </div>
        </Dialog>
      )}

      {/* Notification */}
      {notification && (
        <Notification
          type={notification.type}
          style={{ margin: '10px', position: 'fixed', top: '20px', right: '20px' }}
          onClose={closeNotification}
        >
          {notification.message}
        </Notification>
      )}

      {/* Task Grid */}
      <div className="grid-section">
        <Grid data={tasks} style={{ width: '100%' }}>
          <GridColumn field="id" title="ID" width="80px" />
          <GridColumn field="title" title="Title" />
          <GridColumn field="priority" title="Priority" width="120px" />
          <GridColumn field="dueDate" title="Due Date" width="150px" />
          <GridColumn field="status" title="Status" width="150px" />
        </Grid>
      </div>

      {/* Progress Bar */}
      <div className="progress-section">
        <Card>
          <CardTitle>Task Progress</CardTitle>
          <CardBody>
            <ProgressBar value={tasks.filter(task => task.status === 'Completed').length / tasks.length * 100} />
          </CardBody>
        </Card>
      </div>
    </div>
  );
};

export default App;

---

App.css

Add the following CSS to make the app wider and style it properly:

.App {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.title-section {
  text-align: center;
  margin-bottom: 30px;
}

.title-section h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.title-section p {
  font-size: 1.2rem;
  color: #666;
}

.button-section {
  text-align: right;
  margin-bottom: 20px;
}

.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.grid-section {
  margin-top: 20px;
}

.progress-section {
  margin-top: 30px;
}

.k-card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.k-card-title {
  font-size: 1.5rem;
  font-weight: bold;
}

.k-card-body {
  padding: 20px;
}

---

Key Changes

1. Wider Layout: The app now has a max-width of 1200px and is centered on the page.
2. Title Section: Added a title and subtitle at the top of the app.
3. Improved Styling: Added padding, margins, and shadows to make the app more visually appealing.
4. Full-Width Components: Adjusted the width of inputs, dropdowns, and the grid to take up the full available space.

---

How It Looks

1. Title Section: A centered title and subtitle at the top.
2. Add Task Button: Positioned at the top-right corner.
3. Dialog: A modal form for adding new tasks.
4. Grid: Displays all tasks in a wide, responsive table.
5. Progress Bar: Shows the percentage of completed tasks in a card.

---