Initial commit of Dreams POS React template
This commit is contained in:
tuanOts
@@ -0,0 +1,555 @@
|
||||
import React, { useState } from 'react'
|
||||
import ImageWithBasePath from '../../core/img/imagewithbasebath'
|
||||
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ChevronUp, Layout, RotateCcw, Sliders, StopCircle } from 'feather-icons-react/build/IconComponents';
|
||||
import Select from 'react-select';
|
||||
import Filter from 'feather-icons-react/build/IconComponents/Filter';
|
||||
import { DatePicker } from 'antd';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import Table from '../../core/pagination/datatable'
|
||||
import { setToogleHeader } from '../../core/redux/action';
|
||||
|
||||
const AttendanceEmployee = () => {
|
||||
|
||||
const dataSource = useSelector((state) => state.attendenceemployee_data);
|
||||
const dispatch = useDispatch();
|
||||
const data = useSelector((state) => state.toggle_header);
|
||||
const [isFilterVisible, setIsFilterVisible] = useState(false);
|
||||
const toggleFilterVisibility = () => {
|
||||
setIsFilterVisible((prevVisibility) => !prevVisibility);
|
||||
};
|
||||
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const handleDateChange = (date) => {
|
||||
setSelectedDate(date);
|
||||
};
|
||||
|
||||
const [isLayoutVisible, setIsLayoutVisible] = useState(false);
|
||||
const handleLayoutClick = () => {
|
||||
setIsLayoutVisible(!isLayoutVisible);
|
||||
};
|
||||
|
||||
|
||||
const oldandlatestvalue = [
|
||||
{ value: 'date', label: 'Sort by Date' },
|
||||
{ value: 'newest', label: 'Newest' },
|
||||
{ value: 'oldest', label: 'Oldest' },
|
||||
];
|
||||
const status = [
|
||||
{ value: 'Choose Status', label: 'Choose Status' },
|
||||
{ value: 'Present', label: 'Present' },
|
||||
{ value: 'Absent', label: 'Absent' },
|
||||
{ value: 'Holiday', label: 'Holiday' },
|
||||
];
|
||||
|
||||
|
||||
const renderTooltip = (props) => (
|
||||
<Tooltip id="pdf-tooltip" {...props}>
|
||||
Pdf
|
||||
</Tooltip>
|
||||
);
|
||||
const renderExcelTooltip = (props) => (
|
||||
<Tooltip id="excel-tooltip" {...props}>
|
||||
Excel
|
||||
</Tooltip>
|
||||
);
|
||||
const renderPrinterTooltip = (props) => (
|
||||
<Tooltip id="printer-tooltip" {...props}>
|
||||
Printer
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
|
||||
const renderRefreshTooltip = (props) => (
|
||||
<Tooltip id="refresh-tooltip" {...props}>
|
||||
Refresh
|
||||
</Tooltip>
|
||||
);
|
||||
const renderCollapseTooltip = (props) => (
|
||||
<Tooltip id="refresh-tooltip" {...props}>
|
||||
Collapse
|
||||
</Tooltip>
|
||||
);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Date",
|
||||
dataIndex: "date",
|
||||
sorter: (a, b) => a.date.length - b.date.length,
|
||||
},
|
||||
{
|
||||
title: "Clock In",
|
||||
dataIndex: "clockin",
|
||||
sorter: (a, b) => a.clockin.length - b.clockin.length,
|
||||
},
|
||||
{
|
||||
title: "Clock Out",
|
||||
dataIndex: "clockout",
|
||||
sorter: (a, b) => a.clockout.length - b.clockout.length,
|
||||
},
|
||||
{
|
||||
title: "Production",
|
||||
dataIndex: "production",
|
||||
sorter: (a, b) => a.production.length - b.production.length,
|
||||
},
|
||||
{
|
||||
title: "Break",
|
||||
dataIndex: "break",
|
||||
sorter: (a, b) => a.break.length - b.break.length,
|
||||
},
|
||||
{
|
||||
title: "OverTime",
|
||||
dataIndex: "overtime",
|
||||
sorter: (a, b) => a.overtime.length - b.overtime.length,
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Progress',
|
||||
dataIndex: 'progress',
|
||||
key: 'progress',
|
||||
render: (progressArray) => (
|
||||
<div>
|
||||
{progressArray && progressArray.length > 0 ? (
|
||||
<div className="progress attendance">
|
||||
{progressArray.map((value, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`progress-bar ${index === 0 ? 'progress-bar-success' : index === 1 ? 'progress-bar-warning' : 'progress-bar-danger'
|
||||
}`}
|
||||
role="progressbar"
|
||||
style={{ width: `${value}%` }}
|
||||
></div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
|
||||
{
|
||||
title: 'Status',
|
||||
dataIndex: 'status',
|
||||
render: (text) => (
|
||||
<span className={`badge ${text === 'Present' ? 'badge-linesuccess' : 'badges-inactive Holiday'}`}>
|
||||
{text === 'Present' ? 'Active' : text === 'Abscent' ? 'Inactive' : 'Holiday'}
|
||||
</span>
|
||||
),
|
||||
sorter: (a, b) => a.status.length - b.status.length,
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
title: "TotalHours",
|
||||
dataIndex: "totalhours",
|
||||
sorter: (a, b) => a.totalhours.length - b.totalhours.length,
|
||||
},
|
||||
|
||||
];
|
||||
return (
|
||||
<div>
|
||||
<div className="page-wrapper">
|
||||
<div className="content">
|
||||
<div className="attendance-header">
|
||||
<div className="attendance-content">
|
||||
<ImageWithBasePath
|
||||
src="./assets/img/icons/hand01.svg"
|
||||
className="hand-img"
|
||||
alt="img"
|
||||
/>
|
||||
<h3>
|
||||
Good Morning, <span>John Smilga</span>
|
||||
</h3>
|
||||
</div>
|
||||
<div>
|
||||
<ul className="table-top-head employe">
|
||||
<li>
|
||||
<OverlayTrigger placement="top" overlay={renderRefreshTooltip}>
|
||||
|
||||
<Link data-bs-toggle="tooltip" data-bs-placement="top">
|
||||
<RotateCcw />
|
||||
</Link>
|
||||
</OverlayTrigger>
|
||||
</li>
|
||||
<li>
|
||||
<OverlayTrigger placement="top" overlay={renderCollapseTooltip}>
|
||||
|
||||
<Link
|
||||
data-bs-toggle="tooltip"
|
||||
data-bs-placement="top"
|
||||
id="collapse-header"
|
||||
className={data ? "active" : ""}
|
||||
onClick={() => {dispatch(setToogleHeader(!data)) }}
|
||||
>
|
||||
<ChevronUp />
|
||||
</Link>
|
||||
</OverlayTrigger>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div className="attendance-widget">
|
||||
<div className="row">
|
||||
<div className="col-xl-4 col-lg-12 col-md-4 d-flex">
|
||||
<div className="card w-100">
|
||||
<div className="card-body">
|
||||
<h5>
|
||||
Attendance<span>22 Aug 2023</span>
|
||||
</h5>
|
||||
<div className="card attendance">
|
||||
<div>
|
||||
<ImageWithBasePath src="./assets/img/icons/time-big.svg" alt="time-img" />
|
||||
</div>
|
||||
<div>
|
||||
<h2>05:45:22</h2>
|
||||
<p>Current Time</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-attendance-btn flex-column flex-lg-row">
|
||||
<Link to="#" className="btn btn-submit w-100">
|
||||
Clock Out
|
||||
</Link>
|
||||
<Link
|
||||
to="#"
|
||||
className="btn btn-cancel me-2 w-100"
|
||||
>
|
||||
Break
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-xl-8 col-lg-12 col-md-8 d-flex">
|
||||
<div className="card w-100">
|
||||
<div className="card-body">
|
||||
<h5>Days Overview This Month</h5>
|
||||
<ul className="widget-attend">
|
||||
<li className="box-attend">
|
||||
<div className="warming-card">
|
||||
<h4>31</h4>
|
||||
<h6>Total Working Days</h6>
|
||||
</div>
|
||||
</li>
|
||||
<li className="box-attend">
|
||||
<div className="danger-card">
|
||||
<h4>05</h4>
|
||||
<h6>Abesent Days</h6>
|
||||
</div>
|
||||
</li>
|
||||
<li className="box-attend">
|
||||
<div className="light-card">
|
||||
<h4>28</h4>
|
||||
<h6>Present Days</h6>
|
||||
</div>
|
||||
</li>
|
||||
<li className="box-attend">
|
||||
<div className="warming-card">
|
||||
<h4>02</h4>
|
||||
<h6>Half Days</h6>
|
||||
</div>
|
||||
</li>
|
||||
<li className="box-attend">
|
||||
<div className="warming-card">
|
||||
<h4>01</h4>
|
||||
<h6>Late Days</h6>
|
||||
</div>
|
||||
</li>
|
||||
<li className="box-attend">
|
||||
<div className="success-card">
|
||||
<h4>02</h4>
|
||||
<h6>Holidays</h6>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="page-header">
|
||||
<div className="add-item d-flex">
|
||||
<div className="page-title">
|
||||
<h4>Attendance</h4>
|
||||
</div>
|
||||
</div>
|
||||
<ul className="table-top-head">
|
||||
<li>
|
||||
<OverlayTrigger placement="top" overlay={renderTooltip}>
|
||||
<Link>
|
||||
<ImageWithBasePath src="assets/img/icons/pdf.svg" alt="img" />
|
||||
</Link>
|
||||
</OverlayTrigger>
|
||||
</li>
|
||||
<li>
|
||||
<OverlayTrigger placement="top" overlay={renderExcelTooltip}>
|
||||
<Link data-bs-toggle="tooltip" data-bs-placement="top">
|
||||
<ImageWithBasePath src="assets/img/icons/excel.svg" alt="img" />
|
||||
</Link>
|
||||
</OverlayTrigger>
|
||||
</li>
|
||||
<li>
|
||||
<OverlayTrigger placement="top" overlay={renderPrinterTooltip}>
|
||||
|
||||
<Link data-bs-toggle="tooltip" data-bs-placement="top">
|
||||
<i data-feather="printer" className="feather-printer" />
|
||||
</Link>
|
||||
</OverlayTrigger>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
{/* /product list */}
|
||||
<div className="card table-list-card">
|
||||
<div className="card-body pb-0">
|
||||
<div className="table-top">
|
||||
<div className="input-blocks search-set mb-0">
|
||||
<div className="search-set">
|
||||
<div className="search-input">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search"
|
||||
className="form-control form-control-sm formsearch"
|
||||
/>
|
||||
<Link to className="btn btn-searchset">
|
||||
<i data-feather="search" className="feather-search" />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="search-path">
|
||||
<div className="d-flex align-items-center">
|
||||
<Link className="btn btn-filter" id="filter_search">
|
||||
<Filter className="filter-icon" onClick={toggleFilterVisibility}
|
||||
/>
|
||||
<span>
|
||||
<ImageWithBasePath src="assets/img/icons/closes.svg" alt="img" />
|
||||
</span>
|
||||
</Link>
|
||||
<div className={`layout-hide-box ${isLayoutVisible ? 'layout-show-box' : 'layout-hide-box'}`}>
|
||||
<Link to="#" className="me-3 layout-box" onClick={handleLayoutClick}>
|
||||
<Layout />
|
||||
</Link>
|
||||
{isLayoutVisible && (
|
||||
|
||||
<div className="layout-drop-item card">
|
||||
<div className="drop-item-head">
|
||||
<h5>Want to manage datatable?</h5>
|
||||
<p>
|
||||
Please drag and drop your column to reorder your table and
|
||||
enable see option as you want.
|
||||
</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<div className="status-toggle modal-status d-flex justify-content-between align-items-center">
|
||||
<span className="status-label">
|
||||
<i data-feather="menu" className="feather-menu" />
|
||||
Shop
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="option1"
|
||||
className="check"
|
||||
defaultChecked="true"
|
||||
/>
|
||||
<label htmlFor="option1" className="checktoggle">
|
||||
{" "}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="status-toggle modal-status d-flex justify-content-between align-items-center">
|
||||
<span className="status-label">
|
||||
<i data-feather="menu" className="feather-menu" />
|
||||
Product
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="option2"
|
||||
className="check"
|
||||
defaultChecked="true"
|
||||
/>
|
||||
<label htmlFor="option2" className="checktoggle">
|
||||
{" "}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="status-toggle modal-status d-flex justify-content-between align-items-center">
|
||||
<span className="status-label">
|
||||
<i data-feather="menu" className="feather-menu" />
|
||||
Reference No
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="option3"
|
||||
className="check"
|
||||
defaultChecked="true"
|
||||
/>
|
||||
<label htmlFor="option3" className="checktoggle">
|
||||
{" "}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="status-toggle modal-status d-flex justify-content-between align-items-center">
|
||||
<span className="status-label">
|
||||
<i data-feather="menu" className="feather-menu" />
|
||||
Date
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="option4"
|
||||
className="check"
|
||||
defaultChecked="true"
|
||||
/>
|
||||
<label htmlFor="option4" className="checktoggle">
|
||||
{" "}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="status-toggle modal-status d-flex justify-content-between align-items-center">
|
||||
<span className="status-label">
|
||||
<i data-feather="menu" className="feather-menu" />
|
||||
Responsible Person
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="option5"
|
||||
className="check"
|
||||
defaultChecked="true"
|
||||
/>
|
||||
<label htmlFor="option5" className="checktoggle">
|
||||
{" "}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="status-toggle modal-status d-flex justify-content-between align-items-center">
|
||||
<span className="status-label">
|
||||
<i data-feather="menu" className="feather-menu" />
|
||||
Notes
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="option6"
|
||||
className="check"
|
||||
defaultChecked="true"
|
||||
/>
|
||||
<label htmlFor="option6" className="checktoggle">
|
||||
{" "}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="status-toggle modal-status d-flex justify-content-between align-items-center">
|
||||
<span className="status-label">
|
||||
<i data-feather="menu" className="feather-menu" />
|
||||
Quantity
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="option7"
|
||||
className="check"
|
||||
defaultChecked="true"
|
||||
/>
|
||||
<label htmlFor="option7" className="checktoggle">
|
||||
{" "}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div className="status-toggle modal-status d-flex justify-content-between align-items-center">
|
||||
<span className="status-label">
|
||||
<i data-feather="menu" className="feather-menu" />
|
||||
Actions
|
||||
</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="option8"
|
||||
className="check"
|
||||
defaultChecked="true"
|
||||
/>
|
||||
<label htmlFor="option8" className="checktoggle">
|
||||
{" "}
|
||||
</label>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="form-sort">
|
||||
<Sliders className="info-img" />
|
||||
<Select
|
||||
className="select"
|
||||
options={oldandlatestvalue}
|
||||
placeholder="Newest"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* /Filter */}
|
||||
<div
|
||||
className={`card${isFilterVisible ? " visible" : ""}`}
|
||||
id="filter_inputs"
|
||||
style={{ display: isFilterVisible ? "block" : "none" }}
|
||||
>
|
||||
<div className="card-body pb-0">
|
||||
<div className="row">
|
||||
<div className="col-lg-4 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<i data-feather="calendar" className="info-img" />
|
||||
<div className="input-groupicon">
|
||||
<DatePicker
|
||||
selected={selectedDate}
|
||||
onChange={handleDateChange}
|
||||
type="date"
|
||||
className="filterdatepicker"
|
||||
dateFormat="dd-MM-yyyy"
|
||||
placeholder='Choose Date'
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<i data-feather="stop-circle" className="info-img" />
|
||||
<StopCircle className="info-img" />
|
||||
|
||||
<Select
|
||||
className="select"
|
||||
options={status}
|
||||
placeholder="Newest"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-sm-6 col-12 ms-auto">
|
||||
<div className="input-blocks">
|
||||
<Link className="btn btn-filters ms-auto">
|
||||
{" "}
|
||||
<i data-feather="search" className="feather-search" />{" "}
|
||||
Search{" "}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /Filter */}
|
||||
<div className="table-responsive">
|
||||
<Table columns={columns} dataSource={dataSource} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /product list */}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AttendanceEmployee
|
||||
Reference in New Issue
Block a user