Initial commit of Dreams POS React template
This commit is contained in:
tuanOts
@@ -0,0 +1,324 @@
|
||||
import React, { useState } from 'react'
|
||||
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
|
||||
import { Link } from 'react-router-dom';
|
||||
import ImageWithBasePath from '../../core/img/imagewithbasebath';
|
||||
import { ChevronUp, RotateCcw, Sliders, StopCircle, User } from 'feather-icons-react/build/IconComponents';
|
||||
import { setToogleHeader } from '../../core/redux/action';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Filter } from 'react-feather';
|
||||
import Select from 'react-select';
|
||||
import Table from '../../core/pagination/datatable'
|
||||
import DateRangePicker from 'react-bootstrap-daterangepicker';
|
||||
import Calendar from 'feather-icons-react/build/IconComponents/Calendar';
|
||||
|
||||
|
||||
const InvoiceReport = () => {
|
||||
const dataSource = useSelector((state) => state.invoicereport_data);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const data = useSelector((state) => state.toggle_header);
|
||||
|
||||
|
||||
const [isFilterVisible, setIsFilterVisible] = useState(false);
|
||||
|
||||
const toggleFilterVisibility = () => {
|
||||
setIsFilterVisible((prevVisibility) => !prevVisibility);
|
||||
};
|
||||
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 status = [
|
||||
{ value: 'Choose Name', label: 'Choose Name' },
|
||||
{ value: 'Rose', label: 'Rose' },
|
||||
{ value: 'Kaitlin', label: 'Kaitlin' },
|
||||
];
|
||||
const statusupdate = [
|
||||
{ value: 'Choose Status', label: 'Choose Status' },
|
||||
{ value: 'Paid', label: 'Paid' },
|
||||
{ value: 'Unpaid', label: 'Unpaid' },
|
||||
{ value: 'Overdue', label: 'Overdue' },
|
||||
];
|
||||
const oldandlatestvalue = [
|
||||
{ value: 'Sort by Date', label: 'Sort by Date' },
|
||||
{ value: '07 09 23', label: '07 09 23' },
|
||||
{ value: '21 09 23', label: '21 09 23' },
|
||||
];
|
||||
|
||||
const columns = [
|
||||
|
||||
{
|
||||
title: "invoiceno",
|
||||
dataIndex: "invoiceno",
|
||||
sorter: (a, b) => a.invoiceno.length - b.invoiceno.length,
|
||||
},
|
||||
|
||||
{
|
||||
title: "customer",
|
||||
dataIndex: "customer",
|
||||
sorter: (a, b) => a.customer.length - b.customer.length,
|
||||
},
|
||||
{
|
||||
title: "duedate",
|
||||
dataIndex: "duedate",
|
||||
sorter: (a, b) => a.duedate.length - b.duedate.length,
|
||||
},
|
||||
{
|
||||
title: "amount",
|
||||
dataIndex: "amount",
|
||||
sorter: (a, b) => a.amount.length - b.amount.length,
|
||||
},
|
||||
{
|
||||
title: "paid",
|
||||
dataIndex: "paid",
|
||||
sorter: (a, b) => a.paid.length - b.paid.length,
|
||||
},
|
||||
{
|
||||
title: "amountdue",
|
||||
dataIndex: "amountdue",
|
||||
sorter: (a, b) => a.amountdue.length - b.amountdue.length,
|
||||
},
|
||||
|
||||
{
|
||||
title: "Status",
|
||||
dataIndex: "status",
|
||||
render: (text) => (
|
||||
<div>
|
||||
{text === "Paid" && (
|
||||
<span className="badge badge-linesuccess">{text}</span>
|
||||
)}
|
||||
{text === "Unpaid" && (
|
||||
<span className="badge badge-linedanger">{text}</span>
|
||||
)}
|
||||
{text === "Overdue" && (
|
||||
<span className="badge badges-warning">{text}</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
sorter: (a, b) => a.status.length - b.status.length,
|
||||
},
|
||||
|
||||
]
|
||||
const initialSettings = {
|
||||
endDate: new Date("2020-08-11T12:30:00.000Z"),
|
||||
ranges: {
|
||||
"Last 30 Days": [
|
||||
new Date("2020-07-12T04:57:17.076Z"),
|
||||
new Date("2020-08-10T04:57:17.076Z"),
|
||||
],
|
||||
"Last 7 Days": [
|
||||
new Date("2020-08-04T04:57:17.076Z"),
|
||||
new Date("2020-08-10T04:57:17.076Z"),
|
||||
],
|
||||
"Last Month": [
|
||||
new Date("2020-06-30T18:30:00.000Z"),
|
||||
new Date("2020-07-31T18:29:59.999Z"),
|
||||
],
|
||||
"This Month": [
|
||||
new Date("2020-07-31T18:30:00.000Z"),
|
||||
new Date("2020-08-31T18:29:59.999Z"),
|
||||
],
|
||||
Today: [
|
||||
new Date("2020-08-10T04:57:17.076Z"),
|
||||
new Date("2020-08-10T04:57:17.076Z"),
|
||||
],
|
||||
Yesterday: [
|
||||
new Date("2020-08-09T04:57:17.076Z"),
|
||||
new Date("2020-08-09T04:57:17.076Z"),
|
||||
],
|
||||
},
|
||||
startDate: new Date("2020-08-04T04:57:17.076Z"), // Set "Last 7 Days" as default
|
||||
timePicker: false,
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div className="page-wrapper">
|
||||
<div className="content">
|
||||
<div className="page-header">
|
||||
<div className="add-item d-flex">
|
||||
<div className="page-title">
|
||||
<h4>Invoice Report </h4>
|
||||
<h6>Manage Your Invoice Report</h6>
|
||||
</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>
|
||||
<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>
|
||||
{/* /product list */}
|
||||
<div className="card table-list-card">
|
||||
<div className="card-body">
|
||||
<div className="table-top">
|
||||
<div className="search-set">
|
||||
<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 ${isFilterVisible ? "setclose" : ""}`} id="filter_search">
|
||||
<Filter
|
||||
className="filter-icon"
|
||||
onClick={toggleFilterVisibility}
|
||||
/>
|
||||
<span onClick={toggleFilterVisibility}>
|
||||
<ImageWithBasePath src="assets/img/icons/closes.svg" alt="img" />
|
||||
</span>
|
||||
</Link>
|
||||
</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-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<User className="info-img" />
|
||||
|
||||
<Select
|
||||
className="select"
|
||||
options={status}
|
||||
placeholder="Choose Brand"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
|
||||
<StopCircle className="info-img" />
|
||||
|
||||
<Select
|
||||
className="select"
|
||||
options={statusupdate}
|
||||
placeholder="Choose Brand"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<div className="position-relative daterange-wraper">
|
||||
<Calendar />
|
||||
<DateRangePicker
|
||||
initialSettings={initialSettings}
|
||||
>
|
||||
<input
|
||||
className="form-control"
|
||||
type="text"
|
||||
//style={{ border: "none" }}
|
||||
/>
|
||||
</DateRangePicker>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<a className="btn btn-filters ms-auto">
|
||||
{" "}
|
||||
<i data-feather="search" className="feather-search" />{" "}
|
||||
Search{" "}
|
||||
</a>
|
||||
</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 InvoiceReport
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,353 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import ImageWithBasePath from '../../core/img/imagewithbasebath'
|
||||
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
|
||||
import { ChevronUp, Eye, PlusCircle, RotateCcw } from 'feather-icons-react/build/IconComponents';
|
||||
import { setToogleHeader } from '../../core/redux/action';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Box, Filter, Sliders, StopCircle, User } from 'react-feather';
|
||||
import Select from 'react-select';
|
||||
import withReactContent from 'sweetalert2-react-content';
|
||||
import Swal from 'sweetalert2';
|
||||
import Table from '../../core/pagination/datatable'
|
||||
import AddQuotation from '../../core/modals/sales/addquotation';
|
||||
import EditQuotation from '../../core/modals/sales/editquotation';
|
||||
|
||||
const QuotationList = () => {
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const data = useSelector((state) => state.toggle_header);
|
||||
const dataSource = useSelector((state) => state.quotationlist_data);
|
||||
|
||||
const [isFilterVisible, setIsFilterVisible] = useState(false);
|
||||
const toggleFilterVisibility = () => {
|
||||
setIsFilterVisible((prevVisibility) => !prevVisibility);
|
||||
};
|
||||
const oldandlatestvalue = [
|
||||
{ value: 'date', label: 'Sort by Date' },
|
||||
{ value: 'newest', label: 'Newest' },
|
||||
{ value: 'oldest', label: 'Oldest' },
|
||||
];
|
||||
const products = [
|
||||
{ value: 'Choose product', label: 'Choose product' },
|
||||
{ value: 'Bold V3.2', label: 'Bold V3.2' },
|
||||
{ value: 'Apple Series 5 Watch', label: 'Apple Series 5 Watch' },
|
||||
];
|
||||
const status = [
|
||||
{ value: 'Choose product', label: 'Choose Status' },
|
||||
{ value: 'Ordered', label: 'Ordered' },
|
||||
{ value: 'Sent', label: 'Sent' },
|
||||
];
|
||||
const customername = [
|
||||
{ value: 'Choose Custmer', label: 'Choose Customer' },
|
||||
{ value: 'walk-in-customer', label: 'walk-in-customer' },
|
||||
{ value: 'John Smith', label: 'John Smith' },
|
||||
];
|
||||
|
||||
|
||||
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: "Product Name",
|
||||
dataIndex: "productname",
|
||||
sorter: (a, b) => a.productname.length - b.productname.length,
|
||||
},
|
||||
{
|
||||
title: "Reference",
|
||||
dataIndex: "reference",
|
||||
sorter: (a, b) => a.reference.length - b.reference.length,
|
||||
},
|
||||
{
|
||||
title: "Customer Name",
|
||||
dataIndex: "customername",
|
||||
sorter: (a, b) => a.customername.length - b.customername.length,
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
dataIndex: "status",
|
||||
render: (text) => (
|
||||
<div>
|
||||
{text === "Sent" && (
|
||||
<span className="badges status-badge">{text}</span>
|
||||
)}
|
||||
{text === "Ordered" && (
|
||||
<span className="badges order-badge">{text}</span>
|
||||
)}
|
||||
{text === "Pending" && (
|
||||
<span className="badges unstatus-badge">{text}</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
sorter: (a, b) => a.status.length - b.status.length,
|
||||
},
|
||||
{
|
||||
title: "Grand Total ($)",
|
||||
dataIndex: "grandtotal",
|
||||
sorter: (a, b) => a.grandtotal.length - b.grandtotal.length,
|
||||
},
|
||||
{
|
||||
title: 'Actions',
|
||||
dataIndex: 'actions',
|
||||
key: 'actions',
|
||||
render: () => (
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
to="#"
|
||||
>
|
||||
<Eye className="feather-view" />
|
||||
</Link>
|
||||
<Link className="me-2 p-2" to="#" data-bs-toggle="modal" data-bs-target="#edit-units">
|
||||
<i data-feather="edit" className="feather-edit"></i>
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" >
|
||||
<i data-feather="trash-2" className="feather-trash-2" onClick={showConfirmationAlert}></i>
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
},
|
||||
]
|
||||
const MySwal = withReactContent(Swal);
|
||||
|
||||
const showConfirmationAlert = () => {
|
||||
MySwal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: 'You won\'t be able to revert this!',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#00ff00',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonColor: '#ff0000',
|
||||
cancelButtonText: 'Cancel',
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
|
||||
MySwal.fire({
|
||||
title: 'Deleted!',
|
||||
text: 'Your file has been deleted.',
|
||||
className: "btn btn-success",
|
||||
confirmButtonText: 'OK',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success',
|
||||
},
|
||||
});
|
||||
} else {
|
||||
MySwal.close();
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div className="page-wrapper">
|
||||
<div className="content">
|
||||
<div className="page-header">
|
||||
<div className="add-item d-flex">
|
||||
<div className="page-title">
|
||||
<h4>Quotation List</h4>
|
||||
<h6>Manage Your Quotation</h6>
|
||||
</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>
|
||||
<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 className="page-btn">
|
||||
<Link
|
||||
to="#"
|
||||
className="btn btn-added"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#add-units"
|
||||
>
|
||||
|
||||
<PlusCircle className="me-2" />
|
||||
Add New Quotation
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* /product list */}
|
||||
<div className="card table-list-card">
|
||||
<div className="card-body">
|
||||
<div className="table-top">
|
||||
<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 className="search-path">
|
||||
<div className="d-flex align-items-center">
|
||||
<Link className={`btn btn-filter ${isFilterVisible ? "setclose" : ""}`} id="filter_search">
|
||||
<Filter
|
||||
className="filter-icon"
|
||||
onClick={toggleFilterVisibility}
|
||||
/>
|
||||
<span onClick={toggleFilterVisibility}>
|
||||
<ImageWithBasePath src="assets/img/icons/closes.svg" alt="img" />
|
||||
</span>
|
||||
</Link>
|
||||
</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-2 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<Box className="info-img" />
|
||||
|
||||
<Select
|
||||
className="select"
|
||||
options={products}
|
||||
placeholder="Choose Product"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<StopCircle className="info-img" />
|
||||
<Select
|
||||
className="select"
|
||||
options={status}
|
||||
placeholder="Choose Status"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
|
||||
<User className="info-img" />
|
||||
|
||||
<Select
|
||||
className="select"
|
||||
options={customername}
|
||||
placeholder="Choose Custmer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<i data-feather="file-text" className="info-img" />
|
||||
<div className="input-groupicon">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control"
|
||||
placeholder="Enter Reference"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-4 col-sm-6 col-12">
|
||||
<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>
|
||||
<AddQuotation/>
|
||||
<EditQuotation />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default QuotationList
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,369 @@
|
||||
import React, { useState } from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import ImageWithBasePath from '../../core/img/imagewithbasebath'
|
||||
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
|
||||
import { ChevronUp, PlusCircle, RotateCcw, Sliders, StopCircle, User } from 'feather-icons-react/build/IconComponents';
|
||||
import { setToogleHeader } from '../../core/redux/action';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { Filter, Zap } from 'react-feather';
|
||||
import Select from 'react-select';
|
||||
import Table from '../../core/pagination/datatable'
|
||||
import withReactContent from 'sweetalert2-react-content';
|
||||
import Swal from 'sweetalert2';
|
||||
import AddSalesReturns from '../../core/modals/sales/addsalesreturns';
|
||||
import EditSalesRetuens from '../../core/modals/sales/editsalesretuens';
|
||||
const SalesReturn = () => {
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const data = useSelector((state) => state.toggle_header);
|
||||
const dataSource = useSelector((state) => state.salesreturns_data);
|
||||
|
||||
const [isFilterVisible, setIsFilterVisible] = useState(false);
|
||||
const toggleFilterVisibility = () => {
|
||||
setIsFilterVisible((prevVisibility) => !prevVisibility);
|
||||
};
|
||||
const oldandlatestvalue = [
|
||||
{ value: 'date', label: 'Sort by Date' },
|
||||
{ value: 'newest', label: 'Newest' },
|
||||
{ value: 'oldest', label: 'Oldest' },
|
||||
];
|
||||
const customer = [
|
||||
{ value: 'Choose Customer', label: 'Choose Customer' },
|
||||
{ value: 'Thomas', label: 'Thomas' },
|
||||
{ value: 'James', label: 'James' },
|
||||
{ value: 'Beverly', label: 'Beverly' },
|
||||
];
|
||||
const status = [
|
||||
{ value: 'Choose Status', label: 'Choose Status' },
|
||||
{ value: 'Received', label: 'Received' },
|
||||
{ value: 'Pending', label: 'Pending' },
|
||||
];
|
||||
const paymentstatus = [
|
||||
{ value: 'Choose Payment Status', label: 'Choose Payment Status' },
|
||||
{ value: 'Unpaid', label: 'Unpaid' },
|
||||
{ value: 'Paids', label: 'Paids' },
|
||||
];
|
||||
|
||||
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: "Product Name",
|
||||
dataIndex: "productname",
|
||||
render: (text, record) => (
|
||||
<div className="productimgname">
|
||||
<Link to="#" className="product-img" />
|
||||
<ImageWithBasePath alt="img" src={record.img} />
|
||||
<Link to="#" className='ms-2'>{text}</Link>
|
||||
|
||||
</div>
|
||||
),
|
||||
sorter: (a, b) => a.productname.length - b.productname.length,
|
||||
},
|
||||
{
|
||||
title: "Date",
|
||||
dataIndex: "date",
|
||||
sorter: (a, b) => a.date.length - b.date.length,
|
||||
},
|
||||
{
|
||||
title: "Customer",
|
||||
dataIndex: "customer",
|
||||
sorter: (a, b) => a.customer.length - b.customer.length,
|
||||
},
|
||||
{
|
||||
title: "Status",
|
||||
dataIndex: "status",
|
||||
render: (text) => (
|
||||
<div>
|
||||
{text === "Received" && (
|
||||
<span className="badges bg-lightgreen">{text}</span>
|
||||
)}
|
||||
{text === "Pending" && (
|
||||
<span className="badges bg-lightred">{text}</span>
|
||||
)}
|
||||
{text === "Ordered" && (
|
||||
<span className="badges bg-lightyellow">{text}</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
sorter: (a, b) => a.status.length - b.status.length,
|
||||
},
|
||||
{
|
||||
title: "Grand Total ($)",
|
||||
dataIndex: "grandtotal",
|
||||
sorter: (a, b) => a.grandtotal.length - b.grandtotal.length,
|
||||
},
|
||||
{
|
||||
title: "Paid",
|
||||
dataIndex: "paid",
|
||||
sorter: (a, b) => a.paid.length - b.paid.length,
|
||||
},
|
||||
{
|
||||
title: "Due ($)",
|
||||
dataIndex: "due",
|
||||
sorter: (a, b) => a.due.length - b.due.length,
|
||||
},
|
||||
{
|
||||
title: "paymentstatus",
|
||||
dataIndex: "paymentstatus",
|
||||
render: (text) => (
|
||||
<div>
|
||||
{text === "Paid" && (
|
||||
<span className="badges bg-lightgreen">{text}</span>
|
||||
)}
|
||||
{text === "Unpaid" && (
|
||||
<span className="badges bg-lightred">{text}</span>
|
||||
)}
|
||||
{text === "Partial" && (
|
||||
<span className="badges bg-lightyellow">{text}</span>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
sorter: (a, b) => a.paymentstatus.length - b.paymentstatus.length,
|
||||
},
|
||||
{
|
||||
title: 'Actions',
|
||||
dataIndex: 'actions',
|
||||
key: 'actions',
|
||||
render: () => (
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#" data-bs-toggle="modal" data-bs-target="#edit-sales-new">
|
||||
<i data-feather="edit" className="feather-edit"></i>
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" >
|
||||
<i data-feather="trash-2" className="feather-trash-2" onClick={showConfirmationAlert}></i>
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
)
|
||||
},
|
||||
]
|
||||
const MySwal = withReactContent(Swal);
|
||||
|
||||
const showConfirmationAlert = () => {
|
||||
MySwal.fire({
|
||||
title: 'Are you sure?',
|
||||
text: 'You won\'t be able to revert this!',
|
||||
showCancelButton: true,
|
||||
confirmButtonColor: '#00ff00',
|
||||
confirmButtonText: 'Yes, delete it!',
|
||||
cancelButtonColor: '#ff0000',
|
||||
cancelButtonText: 'Cancel',
|
||||
}).then((result) => {
|
||||
if (result.isConfirmed) {
|
||||
|
||||
MySwal.fire({
|
||||
title: 'Deleted!',
|
||||
text: 'Your file has been deleted.',
|
||||
className: "btn btn-success",
|
||||
confirmButtonText: 'OK',
|
||||
customClass: {
|
||||
confirmButton: 'btn btn-success',
|
||||
},
|
||||
});
|
||||
} else {
|
||||
MySwal.close();
|
||||
}
|
||||
|
||||
});
|
||||
};
|
||||
return (
|
||||
<div>
|
||||
<div className="page-wrapper">
|
||||
<div className="content">
|
||||
<div className="page-header">
|
||||
<div className="add-item d-flex">
|
||||
<div className="page-title">
|
||||
<h4>Sales Return List</h4>
|
||||
<h6>Manage your Returns</h6>
|
||||
</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>
|
||||
<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 className="page-btn">
|
||||
<Link
|
||||
to="#"
|
||||
className="btn btn-added"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#add-sales-new"
|
||||
>
|
||||
<PlusCircle className="me-2" />
|
||||
Add New Sales Return
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
{/* /product list */}
|
||||
<div className="card table-list-card">
|
||||
<div className="card-body">
|
||||
<div className="table-top">
|
||||
<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 className="search-path">
|
||||
<Link className={`btn btn-filter ${isFilterVisible ? "setclose" : ""}`} id="filter_search">
|
||||
<Filter
|
||||
className="filter-icon"
|
||||
onClick={toggleFilterVisibility}
|
||||
/>
|
||||
<span onClick={toggleFilterVisibility}>
|
||||
<ImageWithBasePath src="assets/img/icons/closes.svg" alt="img" />
|
||||
</span>
|
||||
</Link>
|
||||
</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-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<User className="info-img" />
|
||||
|
||||
<Select
|
||||
className="select"
|
||||
options={customer}
|
||||
placeholder="Choose Brand"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<Zap className="info-img" />
|
||||
|
||||
<Select
|
||||
className="select"
|
||||
options={status}
|
||||
placeholder="Choose Brand"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
|
||||
<StopCircle className="info-img" />
|
||||
|
||||
<Select
|
||||
className="select"
|
||||
options={paymentstatus}
|
||||
placeholder="Choose Brand"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 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>
|
||||
<AddSalesReturns />
|
||||
<EditSalesRetuens />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SalesReturn
|
||||
Reference in New Issue
Block a user