sample file

<!--- Navbar ---!>
<Navbar bg='light' expand='lg' className='mb-3'>
      <Container className='d-flex flex-row'>
        <Navbar.Brand href='#home' className='issue-brand me-auto'>
          Issue Tracker
        </Navbar.Brand>
        <Navbar.Toggle aria-controls='basic-navbar-nav' />
        <Navbar.Collapse id='basic-navbar-nav'>
          <Nav className='d-flex flex-row'>
            <Nav.Link href='#home'>Home</Nav.Link>
            <Nav.Link href='#addIssue'>Add Issue</Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>



<!-- Issue Bar -->
const IssueBar = ({ progressCount, total, newCount, completedCount }) => {
  return (
    <>
      <Row className='mt-4'>
        <Col>
          {' '}
          <span>Total: </span> {total}
        </Col>
        <Col>
          <span className='text-primary'>New: </span>
          {newCount}
        </Col>
        <Col>
          {' '}
          <span className='text-info'>In Progress: </span>
          {progressCount}
        </Col>
        <Col>
          {' '}
          <span className='text-success'>Completed: </span>
          {completedCount}
        </Col>
      </Row>
    </>
  )
}

export default IssueBar

!-- Add Issue -->
import { useState, useRef } from 'react'
import { v4 as uuid } from 'uuid'
import { Col, Form, Button, Row } from 'react-bootstrap'

const generateCurrentDate = () => {
  const date = new Date()
  const year = date.getFullYear()
  let month = date.getMonth() + 1
  let day = date.getUTCDate()
  if (month < 10) {
    month = '0' + month
  }

  if (day < 10) {
    day = '0' + day
  }
  console.log(year, month, day)
  return `${year}-${day}-${month}`
}

const issue = {
  title: '',
  subTitle: '',
  assignedTo: '',
  start: generateCurrentDate(),
  end: '',
  priority: 'low',
  status: 'new',
  completedPercentage: 0,
}

const AddIssue = ({ addIssue }) => {
  const [issueInfo, setIssueInfo] = useState(issue)

  const [errorInfo, setErrorInfo] = useState({
    title: '',
    subTitle: '',
    assignedTo: '',
    start: '',
    end: '',
    completedPercentage: '',
  })

  const handleChange = (evt) => {
    setIssueInfo({
      ...issueInfo,
      [evt.target.name]: evt.target.value,
    })

    setErrorInfo({
      ...errorInfo,
      [evt.target.name]: '',
    })
  }

  const handleSubmit = (evt) => {
    const { title, subTitle, assignedTo, start, end } = issueInfo
    evt.preventDefault()
    console.log(start)

    //validation part
    if (title === '') {
      setErrorInfo((prevState) => {
        return {
          ...prevState,
          title: 'Title is Required',
        }
      })
    }

    if (subTitle === '') {
      setErrorInfo((prevState) => {
        return {
          ...prevState,
          subTitle: 'SubTitle is Required',
        }
      })
    }

    if (start === '') {
      setErrorInfo((prevState) => {
        return {
          ...prevState,
          start: 'Please provide start Date',
        }
      })
    }
    if (end === '') {
      setErrorInfo((prevState) => {
        return {
          ...prevState,
          end: 'Please provide end Date',
        }
      })
    }

    if (assignedTo === '') {
      setErrorInfo((prevState) => {
        return {
          ...prevState,
          assignedTo: 'Please provide assigned user name',
        }
      })
    }

    //check every field (value) of userInfo obj , if every filed is true result will be true(valid) otherwise false(if any values is false)
    const isValid = Object.values(issueInfo).every((elm) => elm)
    console.log('There is a error')
    //incase valid is true  form will be submitted
    if (isValid) {
      // if(errorInfo.values())
      console.log('submitting')
      addIssue({
        id: uuid(),
        ...issueInfo,
      })
      //reset user Info
      setIssueInfo(issue)
    }
  }

  const {
    title,
    subTitle,
    assignedTo,
    start,
    end,
    priority,
    status,
    completedPercentage,
  } = issueInfo
  return (
    <>
      <h1 className='mb-4 mt-4'>Add Issue</h1>
      <Form onSubmit={handleSubmit} noValidate>
        <Form.Group as={Row} className='mb-3'>
          <Col xs={3}>
            <Form.Label htmlFor='title' column>
              Title{' '}
            </Form.Label>
          </Col>
          <Col xs={9}>
            <Form.Control
              type='text'
              onChange={handleChange}
              name='title'
              value={title}
              isInvalid={errorInfo.title}
              placeholder='Enter your task name'
            />
            <Form.Control.Feedback type='invalid' className='d-block'>
              {errorInfo?.title && errorInfo?.title}
            </Form.Control.Feedback>
          </Col>
        </Form.Group>
        <Form.Group className='mb-3' as={Row}>
          <Col xs={3}>
            <Form.Label htmlFor='subTitle' column>
              Sub Title{' '}
            </Form.Label>
          </Col>
          <Col xs={9}>
            <Form.Control
              as='textarea'
              rows={2}
              onChange={handleChange}
              name='subTitle'
              value={subTitle}
              isInvalid={errorInfo.subTitle}
              placeholder='Enter your Task details'
            />
            <Form.Control.Feedback type='invalid' className='d-block'>
              {errorInfo?.subTitle}
            </Form.Control.Feedback>
          </Col>
        </Form.Group>
        <Form.Group as={Row} className='mb-3'>
          <Col xs={3}>
            <Form.Label htmlFor='title' column>
              Assigned To{' '}
            </Form.Label>
          </Col>
          <Col xs={9}>
            <Form.Control
              type='text'
              onChange={handleChange}
              name='assignedTo'
              value={assignedTo}
              isInvalid={errorInfo.assignedTo}
              placeholder='Enter name whom you have assigned to'
            />
            <Form.Control.Feedback type='invalid' className='d-block'>
              {errorInfo?.assignedTo && errorInfo?.assignedTo}
            </Form.Control.Feedback>
          </Col>
        </Form.Group>
        <Form.Group as={Row} className='mb-3'>
          <Col xs={3}>
            <Form.Label htmlFor='start' column>
              Start{' '}
            </Form.Label>
          </Col>
          <Col xs={3}>
            <Form.Control
              type='date'
              onChange={handleChange}
              name='start'
              value={start}
              isInvalid={errorInfo.start}
              placeholder='Enter Start date'
            />
            <Form.Control.Feedback type='invalid' className='d-block'>
              {errorInfo?.start && errorInfo?.start}
            </Form.Control.Feedback>
          </Col>
          <Col xs={6}>
            <Row>
              <Col xs={2}>
                <Form.Label htmlFor='end' column>
                  End{' '}
                </Form.Label>
              </Col>
              <Col xs={10}>
                <Form.Control
                  type='date'
                  onChange={handleChange}
                  name='end'
                  value={end}
                  isInvalid={errorInfo.end}
                  placeholder='Enter End Date'
                />
                <Form.Control.Feedback type='invalid' className='d-block'>
                  {errorInfo?.end && errorInfo?.end}
                </Form.Control.Feedback>
              </Col>
            </Row>
          </Col>
        </Form.Group>
        <Form.Group className='mb-3'>
          <Row>
            <Col xs={3}>
              <Form.Label htmlFor='priority' column>
                priority{' '}
              </Form.Label>
            </Col>

            <Col xs='auto'>
              <Form.Check
                type='radio'
                onChange={handleChange}
                name='priority'
                value='high'
                label='High'
                checked={priority === 'high'}
              />
            </Col>
            <Col xs='auto'>
              <Form.Check
                type='radio'
                onChange={handleChange}
                name='priority'
                label='Medium'
                value='medium'
                checked={priority === 'medium'}
              />
            </Col>
            <Col xs='auto'>
              <Form.Check
                type='radio'
                onChange={handleChange}
                name='priority'
                label='Low'
                value='low'
                checked={priority === 'low'}
              />
            </Col>
            <Form.Text className='muted'></Form.Text>
          </Row>
        </Form.Group>
        <Form.Group className='mb-3'>
          <Row>
            <Col xs={3}>
              <Form.Label htmlFor='status' column>
                Status{' '}
              </Form.Label>
            </Col>

            <Col xs='auto'>
              <Form.Check
                type='radio'
                onChange={handleChange}
                name='status'
                label='New'
                value='new'
                checked={status === 'new'}
              />
            </Col>
            <Col xs='auto'>
              <Form.Check
                type='radio'
                onChange={handleChange}
                name='status'
                label='In Progress'
                value='inProgress'
                checked={status === 'inProgress'}
              />
            </Col>
            <Col xs='auto'>
              <Form.Check
                type='radio'
                onChange={handleChange}
                name='status'
                label='Completed'
                value='completed'
                checked={status === 'completed'}
              />
            </Col>
            <Form.Text className='muted'></Form.Text>
          </Row>
        </Form.Group>
        <Form.Group>
          <Row>
            <Col xs={3}>
              <Form.Label htmlFor='title' column>
                Completed In percentage{' '}
              </Form.Label>
            </Col>
            <Col xs='4'>
              <Form.Range
                value={completedPercentage}
                name='completedPercentage'
                onChange={handleChange}
              />
            </Col>
            <Col xs={1}>{completedPercentage}</Col>
            <Form.Text className='muted'></Form.Text>
          </Row>
        </Form.Group>
        <Button variant='primary' size='md' type='submit'>
          Submit Issue
        </Button>
      </Form>
    </>
  )
}

export default AddIssue

<!-- css-->

@import url('https://fonts.googleapis.com/css2?family=Lobster&family=Recursive:wght@300;400;500&display=swap');

body {
  font-family: 'Recursive', sans-serif !important;
}

form label {
  font-style: italic;
}

.issue-brand {
  font-family: 'Lobster', cursive;
  font-size: 1.5rem !important;
  margin-right: auto !important;
}



import { useState } from 'react'
import IssueBar from './IssueBar'
import IssueNav from './IssueNav'
import AddIssue from './AddIssue'
import Issues from './Issues'
import './index.css'
import { Col, Row, Container } from 'react-bootstrap'

//uncontrolled component
<!-- App JS--?

function App() {
  const [issues, setIssues] = useState([
    {
      id: 'e83fa1e5-9941-4258-9e31-8fadced461ad',
      title: 'Sample Task Title',
      subTitle: 'Sample Task Description',
      assignedTo: 'samim',
      start: '2022-09-03',
      end: '2022-03-16',
      priority: 'medium',
      status: 'completed',
      completedPercentage: 10,
    },
  ])
  const [total, setTotal] = useState(0)
  const [newCount, setNewCount] = useState(0)
  const [progressCount, setProgressCount] = useState(0)
  const [completedCount, setCompletedCount] = useState(0)

  const addIssue = (issue) => {
    setIssues([...issues, issue])
    setTotal((prevTotal) => {
      return prevTotal + 1
    })
    if (issue.status === 'new') {
      setNewCount((prevCount) => prevCount + 1)
    }

    if (issue.status === 'inProgress') {
      setProgressCount((prevCount) => prevCount + 1)
    }
    if (issue.status === 'completed') {
      setCompletedCount((prevCount) => prevCount + 1)
    }
  }

  return (
    <Row>
      <IssueNav />
      <Col xs={{ span: 10, offset: 2 }}>
        <Container>
          <AddIssue addIssue={addIssue} />
          <IssueBar
            completedCount={completedCount}
            total={total}
            progressCount={progressCount}
            newCount={newCount}
          />
          <Issues issues={issues} />
        </Container>
      </Col>
    </Row>
  )
}

export default App