Initial commit of Dreams POS React template
This commit is contained in:
tuanOts
@@ -0,0 +1,487 @@
|
||||
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,
|
||||
Filter,
|
||||
RotateCcw,
|
||||
Sliders,
|
||||
StopCircle,
|
||||
} from "feather-icons-react/build/IconComponents";
|
||||
import { setToogleHeader } from "../../core/redux/action";
|
||||
import { useDispatch, useSelector } from "react-redux";
|
||||
import Select from "react-select";
|
||||
import { DatePicker } from "antd";
|
||||
|
||||
const PurchaseOrderReport = () => {
|
||||
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 [selectedDate1, setSelectedDate1] = useState(new Date());
|
||||
const handleDateChange1 = (date) => {
|
||||
setSelectedDate1(date);
|
||||
};
|
||||
|
||||
const oldandlatestvalue = [
|
||||
{ value: "date", label: "Sort by Date" },
|
||||
{ value: "newest", label: "Newest" },
|
||||
{ value: "oldest", label: "Oldest" },
|
||||
];
|
||||
const suppliers = [
|
||||
{ value: "chooseSupplier", label: "Choose Supplier" },
|
||||
{ value: "suppliers", label: "Suppliers" },
|
||||
];
|
||||
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>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
<div className="page-wrapper">
|
||||
<div className="content">
|
||||
<div className="page-header">
|
||||
<div className="add-item d-flex">
|
||||
<div className="page-title">
|
||||
<h4>Purchase order report</h4>
|
||||
<h6>Manage your Purchase order 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">
|
||||
<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">
|
||||
<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-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<div className="input-groupicon">
|
||||
<DatePicker
|
||||
selected={selectedDate1}
|
||||
onChange={handleDateChange1}
|
||||
type="date"
|
||||
className="filterdatepicker"
|
||||
dateFormat="dd-MM-yyyy"
|
||||
placeholder="Choose Date"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<StopCircle className="info-img" />
|
||||
<Select
|
||||
options={suppliers}
|
||||
className="select"
|
||||
placeholder="Choose Supplier"
|
||||
/>
|
||||
</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 className="table datanew">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="no-sort">
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" id="select-all" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</th>
|
||||
<th>Product Name</th>
|
||||
<th>Purchased amount</th>
|
||||
<th>Purchased QTY</th>
|
||||
<th>Instock QTY</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product1.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Macbook pro</Link>
|
||||
</td>
|
||||
<td>38698.00</td>
|
||||
<td>1248</td>
|
||||
<td>1356</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product2.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Orange</Link>
|
||||
</td>
|
||||
<td>36080.00</td>
|
||||
<td>110</td>
|
||||
<td>131</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product3.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Pineapple</Link>
|
||||
</td>
|
||||
<td>21000.00</td>
|
||||
<td>106</td>
|
||||
<td>131</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product4.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Strawberry</Link>
|
||||
</td>
|
||||
<td>11000.00</td>
|
||||
<td>105</td>
|
||||
<td>100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product5.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Sunglasses</Link>
|
||||
</td>
|
||||
<td>10600.00</td>
|
||||
<td>105</td>
|
||||
<td>100</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product6.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Unpaired gray</Link>
|
||||
</td>
|
||||
<td>9984.00</td>
|
||||
<td>50</td>
|
||||
<td>50</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product7.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Avocat</Link>
|
||||
</td>
|
||||
<td>4500.00 </td>
|
||||
<td>41</td>
|
||||
<td>29</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product8.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Banana</Link>
|
||||
</td>
|
||||
<td>900.00 </td>
|
||||
<td>28</td>
|
||||
<td>24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product9.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Earphones</Link>
|
||||
</td>
|
||||
<td>500.00</td>
|
||||
<td>20</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product8.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Banana</Link>
|
||||
</td>
|
||||
<td>900.00 </td>
|
||||
<td>28</td>
|
||||
<td>24</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td className="productimgname">
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product9.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
<Link to="#">Earphones</Link>
|
||||
</td>
|
||||
<td>500.00</td>
|
||||
<td>20</td>
|
||||
<td>11</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /product list */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PurchaseOrderReport;
|
||||
@@ -0,0 +1,736 @@
|
||||
import React, { useState } from 'react'
|
||||
import ImageWithBasePath from '../../core/img/imagewithbasebath'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
|
||||
import { setToogleHeader } from '../../core/redux/action';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { ChevronUp, PlusCircle, RotateCcw, Sliders, StopCircle } from 'feather-icons-react/build/IconComponents';
|
||||
import { Filter } from 'react-feather';
|
||||
import Select from 'react-select';
|
||||
import { DatePicker } from 'antd';
|
||||
import AddPurchaseReturn from '../../core/modals/purchases/addpurchasereturn';
|
||||
import EditPurchaseReturns from '../../core/modals/purchases/editpurchasereturns';
|
||||
import Swal from 'sweetalert2';
|
||||
import withReactContent from 'sweetalert2-react-content';
|
||||
|
||||
const PurchaseReturns = () => {
|
||||
|
||||
const oldandlatestvalue = [
|
||||
{ value: 'date', label: 'Sort by Date' },
|
||||
{ value: 'newest', label: 'Newest' },
|
||||
{ value: 'oldest', label: 'Oldest' },
|
||||
];
|
||||
const supplier = [
|
||||
{ value: 'chooseSupplier', label: 'Choose Supplier' },
|
||||
{ value: 'apexComputers', label: 'Apex Computers' },
|
||||
{ value: 'modernAutomobile', label: 'Modern Automobile' },
|
||||
{ value: 'aimInfotech', label: 'AIM Infotech' },
|
||||
];
|
||||
const supplierlist = [
|
||||
{ value: 'chooseSupplier', label: 'Choose Supplier' },
|
||||
{ value: 'apexComputers', label: 'Apex Computers' },
|
||||
{ value: 'modernAutomobile', label: 'Modern Automobile' },
|
||||
{ value: 'aimInfotech', label: 'AIM Infotech' },
|
||||
];
|
||||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||||
const handleDateChange = (date) => {
|
||||
setSelectedDate(date);
|
||||
};
|
||||
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 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>Purchase 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 Purchase 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">
|
||||
<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-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<StopCircle className="info-img"/>
|
||||
<Select options={supplier} className="select" placeholder="Choose Supplier" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-3 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<i data-feather="stop-circle" className="info-img" />
|
||||
<Select options={supplierlist} className="select" placeholder="Choose Supplier" />
|
||||
|
||||
</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 className="table datanew">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" id="select-all" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</th>
|
||||
<th>Image</th>
|
||||
<th>Date</th>
|
||||
<th>Supplier</th>
|
||||
<th>Reference</th>
|
||||
<th>Status</th>
|
||||
<th>Grand Total ($)</th>
|
||||
<th>Paid ($)</th>
|
||||
<th>Due ($)</th>
|
||||
<th>Payment Status</th>
|
||||
<th className="no-sort">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath src="assets/img/products/product1.jpg" alt="product" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>2/27/2022</td>
|
||||
<td>Apex Computers </td>
|
||||
<td>PT001</td>
|
||||
<td>
|
||||
<span className="badges bg-lightgreen">Received</span>
|
||||
</td>
|
||||
<td>550</td>
|
||||
<td>120</td>
|
||||
<td>550</td>
|
||||
<td>
|
||||
<span className="badges bg-lightgreen">Paid</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath src="assets/img/products/product2.jpg" alt="product" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>1/15/2022</td>
|
||||
<td>Modern Automobile</td>
|
||||
<td>PT002</td>
|
||||
<td>
|
||||
<span className="badges bg-lightyellow">Ordered</span>
|
||||
</td>
|
||||
<td>550</td>
|
||||
<td>120</td>
|
||||
<td>550</td>
|
||||
<td>
|
||||
<span className="badges bg-lightyellow">Partial</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath src="assets/img/products/product3.jpg" alt="product" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>3/24/2022</td>
|
||||
<td>AIM Infotech</td>
|
||||
<td>PT003</td>
|
||||
<td>
|
||||
<span className="badges bg-lightred">Pending</span>
|
||||
</td>
|
||||
<td>210</td>
|
||||
<td>120</td>
|
||||
<td>210</td>
|
||||
<td>
|
||||
<span className="badges bg-lightred">Unpaid</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath src="assets/img/products/product4.jpg" alt="product" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>1/15/2022</td>
|
||||
<td>Best Power Tools</td>
|
||||
<td>PT004</td>
|
||||
<td>
|
||||
<span className="badges bg-lightgreen">Received</span>
|
||||
</td>
|
||||
<td>210</td>
|
||||
<td>120</td>
|
||||
<td>210</td>
|
||||
<td>
|
||||
<span className="badges bg-lightgreen">Paid</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath src="assets/img/products/product5.jpg" alt="product" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>1/15/2022</td>
|
||||
<td>AIM Infotech</td>
|
||||
<td>PT005</td>
|
||||
<td>
|
||||
<span className="badges bg-lightred">Pending</span>
|
||||
</td>
|
||||
<td>210</td>
|
||||
<td>120</td>
|
||||
<td>210</td>
|
||||
<td>
|
||||
<span className="badges bg-lightred">UnPaid</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath src="assets/img/products/product6.jpg" alt="product" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>3/24/2022</td>
|
||||
<td>Best Power Tools</td>
|
||||
<td>PT006</td>
|
||||
<td>
|
||||
<span className="badges bg-lightgreen">Received</span>
|
||||
</td>
|
||||
<td>210</td>
|
||||
<td>120</td>
|
||||
<td>210</td>
|
||||
<td>
|
||||
<span className="badges bg-lightgreen">paid</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath src="assets/img/products/product7.jpg" alt="product" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>1/15/2022</td>
|
||||
<td>Apex Computers</td>
|
||||
<td>PT007</td>
|
||||
<td>
|
||||
<span className="badges bg-lightyellow">Ordered</span>
|
||||
</td>
|
||||
<td>1000</td>
|
||||
<td>500</td>
|
||||
<td>1000</td>
|
||||
<td>
|
||||
<span className="badges bg-lightyellow">Partial</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath src="assets/img/products/product8.jpg" alt="product" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>3/24/2022</td>
|
||||
<td>Best Power Tools</td>
|
||||
<td>PT008</td>
|
||||
<td>
|
||||
<span className="badges bg-lightgreen">Received</span>
|
||||
</td>
|
||||
<td>210</td>
|
||||
<td>120</td>
|
||||
<td>210</td>
|
||||
<td>
|
||||
<span className="badges bg-lightgreen">paid</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath src="assets/img/products/product9.jpg" alt="product" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>3/24/2022</td>
|
||||
<td>Hatimi Hardware & Tools</td>
|
||||
<td>PT009</td>
|
||||
<td>
|
||||
<span className="badges bg-lightred">Pending</span>
|
||||
</td>
|
||||
<td>5500</td>
|
||||
<td>550</td>
|
||||
<td>5500</td>
|
||||
<td>
|
||||
<span className="badges bg-lightred">Unpaid</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath
|
||||
src="assets/img/products/product10.jpg"
|
||||
alt="product"
|
||||
/>
|
||||
</Link>
|
||||
</td>
|
||||
<td>3/24/2022</td>
|
||||
<td>Best Power Tools</td>
|
||||
<td>PT0010</td>
|
||||
<td>
|
||||
<span className="badges bg-lightred">Pending</span>
|
||||
</td>
|
||||
<td>2580</td>
|
||||
<td>1250</td>
|
||||
<td>2580</td>
|
||||
<td>
|
||||
<span className="badges bg-lightred">Unpaid</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>
|
||||
<Link className="product-img">
|
||||
<ImageWithBasePath src="assets/img/products/product5.jpg" alt="product" />
|
||||
</Link>
|
||||
</td>
|
||||
<td>3/24/2022</td>
|
||||
<td>Best Power Tools</td>
|
||||
<td>PT0011</td>
|
||||
<td>
|
||||
<span className="badges bg-lightred">Pending</span>
|
||||
</td>
|
||||
<td>2580</td>
|
||||
<td>1250</td>
|
||||
<td>2580</td>
|
||||
<td>
|
||||
<span className="badges bg-lightred">Unpaid</span>
|
||||
</td>
|
||||
<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" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /product list */}
|
||||
</div>
|
||||
</div>
|
||||
<AddPurchaseReturn/>
|
||||
<EditPurchaseReturns/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PurchaseReturns
|
||||
@@ -0,0 +1,686 @@
|
||||
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, Download, Eye, File, Filter, PlusCircle, RotateCcw, Sliders, StopCircle, User } from 'feather-icons-react/build/IconComponents';
|
||||
import { setToogleHeader } from '../../core/redux/action';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import Select from 'react-select';
|
||||
import AddPurchases from '../../core/modals/purchases/addpurchases';
|
||||
import ImportPurchases from '../../core/modals/purchases/importpurchases';
|
||||
import EditPurchases from '../../core/modals/purchases/editpurchases';
|
||||
import withReactContent from 'sweetalert2-react-content';
|
||||
import Swal from 'sweetalert2';
|
||||
|
||||
const PurchasesList = () => {
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const data = useSelector((state) => state.toggle_header);
|
||||
|
||||
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 suppliername = [
|
||||
{ value: 'chooseSupplier', label: 'Choose Supplier Name' },
|
||||
{ value: 'apexComputers', label: 'Apex Computers' },
|
||||
{ value: 'beatsHeadphones', label: 'Beats Headphones' },
|
||||
{ value: 'dazzleShoes', label: 'Dazzle Shoes' },
|
||||
{ value: 'bestAccessories', label: 'Best Accessories' },
|
||||
];
|
||||
const status = [
|
||||
{ value: 'chooseStatus', label: 'Choose Status' },
|
||||
{ value: 'received', label: 'Received' },
|
||||
{ value: 'ordered', label: 'Ordered' },
|
||||
{ value: 'pending', label: 'Pending' },
|
||||
];
|
||||
const refrencecode = [
|
||||
{ value: 'enterReference', label: 'Enter Reference' },
|
||||
{ value: 'PT001', label: 'PT001' },
|
||||
{ value: 'PT002', label: 'PT002' },
|
||||
{ value: 'PT003', label: 'PT003' },
|
||||
];
|
||||
const paymentstatus = [
|
||||
{ value: 'choosePaymentStatus', label: 'Choose Payment Status' },
|
||||
{ value: 'paid', label: 'Paid' },
|
||||
{ value: 'partial', label: 'Partial' },
|
||||
{ value: 'unpaid', label: 'Unpaid' },
|
||||
];
|
||||
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 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 transfer">
|
||||
<div className="add-item d-flex">
|
||||
<div className="page-title">
|
||||
<h4>Purchase List</h4>
|
||||
<h6>Manage your purchases</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="d-flex purchase-pg-btn">
|
||||
<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 Purchase
|
||||
</Link>
|
||||
</div>
|
||||
<div className="page-btn import">
|
||||
<Link
|
||||
to="#"
|
||||
className="btn btn-added color"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#view-notes"
|
||||
>
|
||||
|
||||
<Download className="me-2"/>
|
||||
Import Purchase
|
||||
</Link>
|
||||
</div>
|
||||
</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-2 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<User className="info-img"/>
|
||||
<Select options={suppliername} className="select" placeholder="Choose Supplier Name" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<StopCircle className="info-img"/>
|
||||
<Select options={status} className="select" placeholder="Choose Status" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<File className="info-img"/>
|
||||
<Select options={refrencecode} className="select" placeholder="Enter Reference" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-lg-2 col-sm-6 col-12">
|
||||
<div className="input-blocks">
|
||||
<i className="fas fa-money-bill info-img" />
|
||||
<Select options={paymentstatus} className="select" placeholder="Choose Payment Status" />
|
||||
|
||||
</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 product-list">
|
||||
<table className="table datanew list">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="no-sort">
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" id="select-all" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</th>
|
||||
<th>Supplier Name</th>
|
||||
<th>Reference</th>
|
||||
<th>Date</th>
|
||||
<th>Status</th>
|
||||
<th>Grand Total</th>
|
||||
<th>Paid</th>
|
||||
<th>Due</th>
|
||||
<th>Created by</th>
|
||||
<th className="no-sort">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>Apex Computers</td>
|
||||
<td>PT001 </td>
|
||||
<td>19 Jan 2023</td>
|
||||
<td>
|
||||
<span className="badges status-badge">Received</span>
|
||||
</td>
|
||||
<td>$550</td>
|
||||
<td>$550</td>
|
||||
<td>$0.00</td>
|
||||
<td>
|
||||
<span className="badge-linesuccess">Paid</span>
|
||||
</td>
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#">
|
||||
<Eye className="action-eye"/>
|
||||
</Link>
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-units"
|
||||
>
|
||||
<i data-feather="edit" className="feather-edit" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>Beats Headphones</td>
|
||||
<td>PT002 </td>
|
||||
<td>27 Jan 2023</td>
|
||||
<td>
|
||||
<span className="badges status-badge">Received</span>
|
||||
</td>
|
||||
<td>$370</td>
|
||||
<td>$370</td>
|
||||
<td>$0.00</td>
|
||||
<td>
|
||||
<span className="badge-linesuccess">Paid</span>
|
||||
</td>
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#">
|
||||
<Eye className="action-eye"/>
|
||||
</Link>
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-units"
|
||||
>
|
||||
<i data-feather="edit" className="feather-edit" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>Dazzle Shoes</td>
|
||||
<td>PT003 </td>
|
||||
<td>08 Feb 2023</td>
|
||||
<td>
|
||||
<span className="badges status-badge ordered">Ordered</span>
|
||||
</td>
|
||||
<td>$400</td>
|
||||
<td>$400</td>
|
||||
<td>$200</td>
|
||||
<td>
|
||||
<span className="badges-warning">Partial</span>
|
||||
</td>
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#">
|
||||
<Eye className="action-eye"/>
|
||||
</Link>
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-units"
|
||||
>
|
||||
<i data-feather="edit" className="feather-edit" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>Best Accessories</td>
|
||||
<td>PT004 </td>
|
||||
<td>16 Feb 2023</td>
|
||||
<td>
|
||||
<span className="badges unstatus-badge">Pending</span>
|
||||
</td>
|
||||
<td>$560</td>
|
||||
<td>$0.00</td>
|
||||
<td>$560</td>
|
||||
<td>
|
||||
<span className="badge badge-linedangered">Unpaid</span>
|
||||
</td>
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#">
|
||||
<Eye className="action-eye"/>
|
||||
</Link>
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-units"
|
||||
>
|
||||
<i data-feather="edit" className="feather-edit" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>A-Z Store</td>
|
||||
<td>PT005</td>
|
||||
<td>12 Mar 2023</td>
|
||||
<td>
|
||||
<span className="badges unstatus-badge">Pending</span>
|
||||
</td>
|
||||
<td>$240</td>
|
||||
<td>$0.00</td>
|
||||
<td>$240</td>
|
||||
<td>
|
||||
<span className="badge badge-linedangered">Unpaid</span>
|
||||
</td>
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#">
|
||||
<Eye className="action-eye"/>
|
||||
</Link>
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-units"
|
||||
>
|
||||
<i data-feather="edit" className="feather-edit" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>Hatimi Hardwares</td>
|
||||
<td>PT006</td>
|
||||
<td>24 Mar 2023</td>
|
||||
<td>
|
||||
<span className="badges status-badge">Received</span>
|
||||
</td>
|
||||
<td>$170</td>
|
||||
<td>$170</td>
|
||||
<td>$0.00</td>
|
||||
<td>
|
||||
<span className="badge-linesuccess">Paid</span>
|
||||
</td>
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#">
|
||||
<Eye className="action-eye"/>
|
||||
</Link>
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-units"
|
||||
>
|
||||
<i data-feather="edit" className="feather-edit" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>Aesthetic Bags</td>
|
||||
<td>PT007</td>
|
||||
<td>06 Apr 2023</td>
|
||||
<td>
|
||||
<span className="badges unstatus-badge">Pending</span>
|
||||
</td>
|
||||
<td>$230</td>
|
||||
<td>$0.00</td>
|
||||
<td>$230</td>
|
||||
<td>
|
||||
<span className="badge badge-linedangered">Unpaid</span>
|
||||
</td>
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#">
|
||||
<Eye className="action-eye"/>
|
||||
</Link>
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-units"
|
||||
>
|
||||
<i data-feather="edit" className="feather-edit" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>Alpha Mobiles</td>
|
||||
<td>PT008</td>
|
||||
<td>14 Apr 2023</td>
|
||||
<td>
|
||||
<span className="badges status-badge ordered">Ordered</span>
|
||||
</td>
|
||||
<td>$300</td>
|
||||
<td>$150</td>
|
||||
<td>$300</td>
|
||||
<td>
|
||||
<span className="badges-warning">Partial</span>
|
||||
</td>
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#">
|
||||
<Eye className="action-eye"/>
|
||||
</Link>
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-units"
|
||||
>
|
||||
<i data-feather="edit" className="feather-edit" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>Sigma Chairs</td>
|
||||
<td>PT009</td>
|
||||
<td>02 May 2023</td>
|
||||
<td>
|
||||
<span className="badges unstatus-badge">Pending</span>
|
||||
</td>
|
||||
<td>$620</td>
|
||||
<td>$0.00</td>
|
||||
<td>$620</td>
|
||||
<td>
|
||||
<span className="badge badge-linedangered">Unpaid</span>
|
||||
</td>
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#">
|
||||
<Eye className="action-eye"/>
|
||||
</Link>
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-units"
|
||||
>
|
||||
<i data-feather="edit" className="feather-edit" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label className="checkboxs">
|
||||
<input type="checkbox" />
|
||||
<span className="checkmarks" />
|
||||
</label>
|
||||
</td>
|
||||
<td>Zenith Bags</td>
|
||||
<td>PT010</td>
|
||||
<td>23 May 2023</td>
|
||||
<td>
|
||||
<span className="badges status-badge">Received</span>
|
||||
</td>
|
||||
<td>$200</td>
|
||||
<td>$200</td>
|
||||
<td>$0.00</td>
|
||||
<td>
|
||||
<span className="badge-linesuccess">Paid</span>
|
||||
</td>
|
||||
<td className="action-table-data">
|
||||
<div className="edit-delete-action">
|
||||
<Link className="me-2 p-2" to="#">
|
||||
<Eye className="action-eye"/>
|
||||
</Link>
|
||||
<Link
|
||||
className="me-2 p-2"
|
||||
data-bs-toggle="modal"
|
||||
data-bs-target="#edit-units"
|
||||
>
|
||||
<i data-feather="edit" className="feather-edit" />
|
||||
</Link>
|
||||
<Link className="confirm-text p-2" to="#" onClick={showConfirmationAlert}>
|
||||
<i data-feather="trash-2" className="feather-trash-2" />
|
||||
</Link>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* /product list */}
|
||||
</div>
|
||||
</div>
|
||||
<AddPurchases />
|
||||
<ImportPurchases />
|
||||
<EditPurchases />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PurchasesList
|
||||
Reference in New Issue
Block a user