Skip to content

Instantly share code, notes, and snippets.

@momin-riyadh

momin-riyadh/Dashboard.jsx

Created November 17, 2024 09:18
Show Gist options
  • Save momin-riyadh/384c101363ac47790ea7e418eabeba8c to your computer and use it in GitHub Desktop.
Save momin-riyadh/384c101363ac47790ea7e418eabeba8c to your computer and use it in GitHub Desktop.
Download ZIP
React File
Raw
Dashboard.jsx
import React from 'react';
import { Row, Col, Card } from 'react-bootstrap';
import ChartOne from './ChartOne';
import ChartTwo from './ChartTwo';
const Dashboard = () => {
return (
<Row>
<Col md={4}>
<div className="dashboard-container p-3">
<Row>
<Col md={6}>
<label className="form-label">Chat Observation</label>
</Col>
</Row>
<Row>
<Col>
<Card className="grid-card mt-2">
<Card.Header className="card-header-one card-font">Landed</Card.Header>
<Card.Body className="text-center">
<div className="card-number">14</div>
</Card.Body>
</Card>
</Col>
<Col>
<Card className="grid-card mt-2">
<Card.Header className="card-header-one card-font">Pulled</Card.Header>
<Card.Body className="text-center">
<div className="card-number">12</div>
</Card.Body>
</Card>
</Col>
<Col>
<Card className="grid-card mt-2">
<Card.Header className="card-header-one card-font">Closed</Card.Header>
<Card.Body className="text-center">
<div className="card-number">2</div>
</Card.Body>
</Card>
</Col>
<Col>
<Card className="grid-card mt-2">
<Card.Header className="card-header-one card-font">Served</Card.Header>
<Card.Body className="text-center">
<div className="card-number">10</div>
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col md={12}>
<Card className="grid-card">
<Card.Header className="card-header-one card-font">Longest Chat Support Time</Card.Header>
<Card.Body className="text-center">
<div className="card-number">00:05:20</div>
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col md={12}>
<Card className="grid-card grid-card-height" >
<Card.Header className="card-header-one card-font">Running Projection</Card.Header>
<Card.Body>
<ChartTwo />
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col md={6}>
<Card className="grid-card">
<Card.Header className="bottom-card-one card-font">Average Response Time</Card.Header>
<Card.Body className="text-center bottom-card-one">
<div className="card-number">00:02:11</div>
</Card.Body>
</Card>
</Col>
<Col md={6}>
<Card className="grid-card">
<Card.Header className="bottom-card-one card-font">Average Handling Time</Card.Header>
<Card.Body className="text-center bottom-card-one">
<div className="card-number">00:01:48</div>
</Card.Body>
</Card>
</Col>
</Row>
</div>
</Col>
<Col md={4}>
<div className="dashboard-container p-3">
<Row>
<Col md={6}>
<label className="form-label">Comment Observation</label>
{/* <select id="departmentSelect" className="form-select">
<option>All</option>
</select> */}
</Col>
</Row>
<Row>
<Col>
<Card className="grid-card mt-2">
<Card.Header className="card-header-two card-font">Landed</Card.Header>
<Card.Body className="text-center">
<div className="card-number">20</div>
</Card.Body>
</Card>
</Col>
<Col>
<Card className="grid-card mt-2">
<Card.Header className="card-header-two card-font">Pulled</Card.Header>
<Card.Body className="text-center">
<div className="card-number">16</div>
</Card.Body>
</Card>
</Col>
<Col className='ps-0'>
<Card className="grid-card mt-2">
<Card.Header className="card-header-two card-font">Served</Card.Header>
<Card.Body className="text-center">
<div className="card-number">15</div>
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col md={12}>
<Card className="grid-card">
<Card.Header className="card-header-two card-font">Longest Comment Support Time</Card.Header>
<Card.Body className="text-center">
<div className="card-number">00:03:25</div>
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col md={12}>
<Card className="grid-card grid-card-height" >
<Card.Header className="card-header-two card-font">Running Projection</Card.Header>
<Card.Body>
<ChartTwo />
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col md={6}>
<Card className="grid-card">
<Card.Header className="card-header-two card-font">Average Response Time</Card.Header>
<Card.Body className="text-center card-header-two">
<div className="card-number">00:02:37</div>
</Card.Body>
</Card>
</Col>
<Col md={6}>
<Card className="grid-card">
<Card.Header className="card-header-two card-font">Average Handling Time</Card.Header>
<Card.Body className="text-center card-header-two">
<div className="card-number">00:01:07</div>
</Card.Body>
</Card>
</Col>
</Row>
</div>
</Col>
<Col md={4}>
<div className="dashboard-container p-3">
<Row>
<Col md={6}>
<label className="form-label">Activity Observation</label>
{/* <select id="departmentSelect" className="form-select">
<option>All</option>
</select> */}
</Col>
</Row>
<Row>
<Col>
<Card className="grid-card mt-2">
<Card.Header className="card-header-three card-font px-1">Chats in Queue</Card.Header>
<Card.Body className="text-center">
<div className="card-number">19</div>
</Card.Body>
</Card>
</Col>
<Col>
<Card className="grid-card mt-2">
<Card.Header className="card-header-three card-font px-1">Logged in Agents</Card.Header>
<Card.Body className="text-center">
<div className="card-number">13</div>
</Card.Body>
</Card>
</Col>
<Col>
<Card className="grid-card mt-2">
<Card.Header className="card-header-three card-font px-1">Idle Agents</Card.Header>
<Card.Body className="text-center">
<div className="card-number">1</div>
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col md={12}>
<Card className="grid-card">
<Card.Header className="card-header-three card-font">Average Waiting Time</Card.Header>
<Card.Body className="text-center">
<div className="card-number">00:02:39</div>
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col md={12}>
<Card className="grid-card grid-card-height" >
<Card.Header className="card-header-three card-font">Queue Projection</Card.Header>
<Card.Body>
<ChartOne />
</Card.Body>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card className="grid-card">
<Card.Header className="card-header-three card-font">On Ready</Card.Header>
<Card.Body className="text-center card-header-three">
<div className="card-number">8</div>
</Card.Body>
</Card>
</Col>
<Col>
<Card className="grid-card">
<Card.Header className="card-header-three card-font">On Break</Card.Header>
<Card.Body className="text-center card-header-three">
<div className="card-number">2</div>
</Card.Body>
</Card>
</Col>
<Col>
<Card className="grid-card">
<Card.Header className="card-header-three card-font">On Busy</Card.Header>
<Card.Body className="text-center card-header-three">
<div className="card-number">3</div>
</Card.Body>
</Card>
</Col>
</Row>
</div>
</Col>
</Row>
);
};
export default Dashboard;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment