1231 lines
50 KiB
React
1231 lines
50 KiB
React
import React, { useState } from "react";
|
|
import ImageWithBasePath from "../../core/img/imagewithbasebath";
|
|
import { Filter, Sliders } from "react-feather";
|
|
import Select from "react-select";
|
|
import { Link } from "react-router-dom";
|
|
import DatePicker from "react-datepicker";
|
|
import { Box, Calendar, StopCircle, User, FileText } from "react-feather";
|
|
import DateRangePicker from "react-bootstrap-daterangepicker";
|
|
import Breadcrumbs from "../../core/breadcrumbs";
|
|
|
|
const SupplierReport = () => {
|
|
const [isFilterVisible, setIsFilterVisible] = useState(false);
|
|
const [isFilterVisibleTwo, setIsFilterVisibleTwo] = useState(false);
|
|
const [isFilterVisibleThree, setisFilterVisibleThree] = useState(false);
|
|
const [selectedDate, setSelectedDate] = useState(null);
|
|
|
|
const toggleFilterVisibility = () => {
|
|
setIsFilterVisible((prevVisibility) => !prevVisibility);
|
|
};
|
|
|
|
const toggleFilterVisibilityTwo = () => {
|
|
setIsFilterVisibleTwo((prevVisibilityTwo) => !prevVisibilityTwo);
|
|
};
|
|
|
|
const toggleFilterVisibilityThree = () => {
|
|
setisFilterVisibleThree((prevVisibilityThree) => !prevVisibilityThree);
|
|
};
|
|
|
|
const handleDateChange = (date) => {
|
|
setSelectedDate(date);
|
|
};
|
|
const options = [
|
|
{ value: "sortByDate", label: "Sort by Date" },
|
|
{ value: "140923", label: "14 09 23" },
|
|
{ value: "110923", label: "11 09 23" },
|
|
];
|
|
|
|
const optionsThree = [
|
|
{ value: "sortByDate", label: "Sort by Date" },
|
|
{ value: "140923", label: "14 09 23" },
|
|
{ value: "110923", label: "11 09 23" },
|
|
];
|
|
|
|
const optionsTwo = [
|
|
{ value: "sortByDate", label: "Sort by Date" },
|
|
{ value: "140923", label: "14 09 23" },
|
|
{ value: "110923", label: "11 09 23" },
|
|
];
|
|
|
|
const productOptions = [
|
|
{ value: "chooseProduct", label: "Choose Product" },
|
|
{ value: "appleSeries5Watch", label: "Apple Series 5 Watch" },
|
|
{ value: "amazonEchoDot", label: "Amazon Echo Dot" },
|
|
];
|
|
|
|
const statusOptions = [
|
|
{ value: "chooseStatus", label: "Choose Status" },
|
|
{ value: "received", label: "Received" },
|
|
];
|
|
|
|
const supplierNameOptions = [
|
|
{ value: "chooseSupplierName", label: "Choose Supplier Name" },
|
|
{ value: "apexComputers", label: "Apex Computers" },
|
|
{ value: "beatsHeadphones", label: "Beats Headphones" },
|
|
];
|
|
|
|
const nameOptions = [
|
|
{ value: "chooseName", label: "Choose Name" },
|
|
{ value: "apexComputers", label: "Apex Computers" },
|
|
{ value: "beatsHeadphones", label: "Beats Headphones" },
|
|
];
|
|
|
|
const statusOptions2 = [
|
|
{ value: "chooseStatus", label: "Choose Status" },
|
|
{ value: "completed", label: "Completed" },
|
|
{ value: "incompleted", label: "Incompleted" },
|
|
];
|
|
|
|
const paymentStatusOptions = [
|
|
{ value: "choosePaymentStatus", label: "Choose Payment Status" },
|
|
{ value: "paid", label: "Paid" },
|
|
{ value: "unpaid", label: "Unpaid" },
|
|
{ value: "overdue", label: "Overdue" },
|
|
];
|
|
|
|
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 className="page-wrapper">
|
|
<div className="content">
|
|
<Breadcrumbs
|
|
maintitle="Supplier Report"
|
|
subtitle="Manage Your Supplier Report"
|
|
/>
|
|
<div className="table-tab">
|
|
<ul className="nav nav-pills" id="pills-tab" role="tablist">
|
|
<li className="nav-item" role="presentation">
|
|
<button
|
|
className="nav-link active"
|
|
id="purchase-report-tab"
|
|
data-bs-toggle="pill"
|
|
data-bs-target="#purchase-report"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="purchase-report"
|
|
aria-selected="true"
|
|
>
|
|
Purchase
|
|
</button>
|
|
</li>
|
|
<li className="nav-item" role="presentation">
|
|
<button
|
|
className="nav-link"
|
|
id="payment-report-tab"
|
|
data-bs-toggle="pill"
|
|
data-bs-target="#payment-report"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="payment-report"
|
|
aria-selected="false"
|
|
>
|
|
Payment
|
|
</button>
|
|
</li>
|
|
<li className="nav-item" role="presentation">
|
|
<button
|
|
className="nav-link"
|
|
id="return-report-tab"
|
|
data-bs-toggle="pill"
|
|
data-bs-target="#return-report"
|
|
type="button"
|
|
role="tab"
|
|
aria-controls="return-report"
|
|
aria-selected="false"
|
|
>
|
|
Return
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
<div className="tab-content" id="pills-tabContent">
|
|
<div
|
|
className="tab-pane fade show active"
|
|
id="purchase-report"
|
|
role="tabpanel"
|
|
aria-labelledby="purchase-report-tab"
|
|
>
|
|
{/* /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 stylewidth">
|
|
<Sliders className="info-img" />
|
|
|
|
<Select
|
|
className="select "
|
|
options={optionsTwo}
|
|
placeholder="Sort by Date"
|
|
/>
|
|
</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={productOptions}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-2 col-sm-6 col-12">
|
|
<div className="input-blocks">
|
|
<StopCircle className="info-img" />
|
|
<Select
|
|
className="select"
|
|
options={statusOptions}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-2 col-sm-6 col-12">
|
|
<div className="input-blocks">
|
|
<div className="position-relative daterange-wraper">
|
|
<Calendar className="feather-14 info-img" />
|
|
|
|
<DateRangePicker
|
|
initialSettings={initialSettings}
|
|
>
|
|
<input
|
|
className="form-control col-4 input-range"
|
|
type="text"
|
|
style={{ border: "none" }}
|
|
/>
|
|
</DateRangePicker>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 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>Purchase Date</th>
|
|
<th>Product</th>
|
|
<th>Purchase Amount</th>
|
|
<th>Purchase Qty</th>
|
|
<th>Paid</th>
|
|
<th>Balance</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>19 Jan 2023</td>
|
|
<td className="productimgname">
|
|
<div className="view-product me-2">
|
|
<Link to="#">
|
|
<ImageWithBasePath
|
|
src="assets/img/products/stock-img-01.png"
|
|
alt="product"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<Link to="#">Lenovo 3rd Generation</Link>
|
|
</td>
|
|
<td>$1500</td>
|
|
<td>50</td>
|
|
<td>$1500</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Received
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>24 Jan 2023</td>
|
|
<td className="productimgname">
|
|
<div className="view-product me-2">
|
|
<Link to="#">
|
|
<ImageWithBasePath
|
|
src="assets/img/products/stock-img-06.png"
|
|
alt="product"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<Link to="#">Bold V3.2</Link>
|
|
</td>
|
|
<td>$1200</td>
|
|
<td>20</td>
|
|
<td>$1200</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Received
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>03 Feb 2023</td>
|
|
<td className="productimgname">
|
|
<div className="view-product me-2">
|
|
<Link to="#">
|
|
<ImageWithBasePath
|
|
src="assets/img/products/stock-img-02.png"
|
|
alt="product"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<Link to="#">Nike Jordan</Link>
|
|
</td>
|
|
<td>$2000</td>
|
|
<td>30</td>
|
|
<td>$2000</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Received
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>15 Feb 2023</td>
|
|
<td className="productimgname">
|
|
<div className="view-product me-2">
|
|
<Link to="#">
|
|
<ImageWithBasePath
|
|
src="assets/img/products/stock-img-03.png"
|
|
alt="product"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<Link to="#">Apple Series 5 Watch</Link>
|
|
</td>
|
|
<td>$800</td>
|
|
<td>80</td>
|
|
<td>$800</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Received
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>12 Mar 2023</td>
|
|
<td className="productimgname">
|
|
<div className="view-product me-2">
|
|
<Link to="#">
|
|
<ImageWithBasePath
|
|
src="assets/img/products/stock-img-04.png"
|
|
alt="product"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<Link to="#">Amazon Echo Dot</Link>
|
|
</td>
|
|
<td>$500</td>
|
|
<td>70</td>
|
|
<td>$500</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Received
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>25 Mar 2023</td>
|
|
<td className="productimgname">
|
|
<div className="view-product me-2">
|
|
<Link to="#">
|
|
<ImageWithBasePath
|
|
src="assets/img/products/stock-img-05.png"
|
|
alt="product"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<Link to="#">Lobar Handy</Link>
|
|
</td>
|
|
<td>$400</td>
|
|
<td>100</td>
|
|
<td>$400</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Received
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>02 Apr 2023</td>
|
|
<td className="productimgname">
|
|
<div className="view-product me-2">
|
|
<Link to="#">
|
|
<ImageWithBasePath
|
|
src="assets/img/products/expire-product-01.png"
|
|
alt="product"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<Link to="#">Red Premium Handy</Link>
|
|
</td>
|
|
<td>$300</td>
|
|
<td>120</td>
|
|
<td>$300</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Received
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>19 Apr 2023</td>
|
|
<td className="productimgname">
|
|
<div className="view-product me-2">
|
|
<Link to="#">
|
|
<ImageWithBasePath
|
|
src="assets/img/products/expire-product-02.png"
|
|
alt="product"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<Link to="#">Iphone 14 Pro</Link>
|
|
</td>
|
|
<td>$1800</td>
|
|
<td>40</td>
|
|
<td>$1800</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Received
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>11 May 2023</td>
|
|
<td className="productimgname">
|
|
<div className="view-product me-2">
|
|
<Link to="#">
|
|
<ImageWithBasePath
|
|
src="assets/img/products/expire-product-03.png"
|
|
alt="product"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<Link to="#">Black Slim 200</Link>
|
|
</td>
|
|
<td>$700</td>
|
|
<td>300</td>
|
|
<td>$700</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Received
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>27 May 2023</td>
|
|
<td className="productimgname">
|
|
<div className="view-product me-2">
|
|
<Link to="#">
|
|
<ImageWithBasePath
|
|
src="assets/img/products/expire-product-04.png"
|
|
alt="product"
|
|
/>
|
|
</Link>
|
|
</div>
|
|
<Link to="#">Woodcraft Sandal</Link>
|
|
</td>
|
|
<td>$600</td>
|
|
<td>200</td>
|
|
<td>$600</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Received
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /product list */}
|
|
</div>
|
|
<div
|
|
className="tab-pane fade"
|
|
id="payment-report"
|
|
role="tabpanel"
|
|
aria-labelledby="payment-report-tab"
|
|
>
|
|
{/* /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 ${
|
|
isFilterVisibleTwo ? "setclose" : ""
|
|
}`}
|
|
id="filter_search"
|
|
>
|
|
<Filter
|
|
className="filter-icon"
|
|
onClick={toggleFilterVisibilityTwo}
|
|
/>
|
|
<span onClick={toggleFilterVisibilityTwo}>
|
|
<ImageWithBasePath
|
|
src="assets/img/icons/closes.svg"
|
|
alt="img"
|
|
/>
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
<div className="form-sort stylewidth">
|
|
<Sliders className="info-img" />
|
|
|
|
<Select
|
|
className="select"
|
|
options={optionsThree}
|
|
placeholder="Sort by Date"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* /Filter */}
|
|
<div
|
|
className={`card${isFilterVisibleTwo ? " visible" : ""}`}
|
|
id="filter_inputs1"
|
|
style={{ display: isFilterVisibleTwo ? "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={supplierNameOptions}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-sm-6 col-12">
|
|
<div className="input-blocks">
|
|
<Calendar className="info-img" />
|
|
<div className="input-groupicon">
|
|
<DatePicker
|
|
selected={selectedDate}
|
|
onChange={handleDateChange}
|
|
dateFormat="dd/MM/yyyy"
|
|
placeholderText="Choose Date"
|
|
className="datetimepicker"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-sm-6 col-12">
|
|
<div className="input-blocks">
|
|
<FileText className="info-img" />
|
|
<input type="text" placeholder="Enter Reference" />
|
|
</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-all2" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</th>
|
|
<th>Date</th>
|
|
<th>Purchase</th>
|
|
<th>Reference</th>
|
|
<th>Supplier Name</th>
|
|
<th>Amount</th>
|
|
<th>Paid</th>
|
|
<th>Paid By</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>19 Jan 2023</td>
|
|
<td>PR_0001</td>
|
|
<td>INV/PR_0001</td>
|
|
<td>Apex Computers</td>
|
|
<td>$1800</td>
|
|
<td>$1800</td>
|
|
<td>Cash</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>24 Jan 2023</td>
|
|
<td>PR_0002</td>
|
|
<td>INV/PR_0002</td>
|
|
<td>Beats Headphones</td>
|
|
<td>$1100</td>
|
|
<td>$1100</td>
|
|
<td>Cash</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>02 Feb 2023</td>
|
|
<td>PR_0003</td>
|
|
<td>INV/PR_0003</td>
|
|
<td>Dazzle Shoes</td>
|
|
<td>$2000</td>
|
|
<td>$2000</td>
|
|
<td>Cash</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>15 Feb 2023</td>
|
|
<td>PR_0004</td>
|
|
<td>INV/PR_0004</td>
|
|
<td>Best Accessories</td>
|
|
<td>$700</td>
|
|
<td>$700</td>
|
|
<td>Cash</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>12 Mar 2023</td>
|
|
<td>PR_0005</td>
|
|
<td>INV/PR_0005</td>
|
|
<td>Aesthetic Bags</td>
|
|
<td>$500</td>
|
|
<td>$500</td>
|
|
<td>Cash</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>26 Mar 2023</td>
|
|
<td>PR_0006</td>
|
|
<td>INV/PR_0006</td>
|
|
<td>Hatimi Hardwares</td>
|
|
<td>$1600</td>
|
|
<td>$1600</td>
|
|
<td>Cash</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>16 Apr 2023</td>
|
|
<td>PR_0007</td>
|
|
<td>INV/PR_0007</td>
|
|
<td>Shine Bags</td>
|
|
<td>$600</td>
|
|
<td>$600</td>
|
|
<td>Cash</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>24 Apr 2023</td>
|
|
<td>PR_0008</td>
|
|
<td>INV/PR_0008</td>
|
|
<td>Alpha Mobiles</td>
|
|
<td>$120</td>
|
|
<td>$120</td>
|
|
<td>Cash</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>13 May 2023</td>
|
|
<td>PR_0009</td>
|
|
<td>INV/PR_0009</td>
|
|
<td>Sigma Chairs</td>
|
|
<td>$300</td>
|
|
<td>$300</td>
|
|
<td>Cash</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>29 May 2023</td>
|
|
<td>PR_0010</td>
|
|
<td>INV/PR_0011</td>
|
|
<td>Zenith Bags</td>
|
|
<td>$350</td>
|
|
<td>$350</td>
|
|
<td>Cash</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /product list */}
|
|
</div>
|
|
<div
|
|
className="tab-pane fade"
|
|
id="return-report"
|
|
role="tabpanel"
|
|
aria-labelledby="return-report-tab"
|
|
>
|
|
{/* /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 ${
|
|
isFilterVisibleThree ? "setclose" : ""
|
|
}`}
|
|
id="filter_search"
|
|
>
|
|
<Filter
|
|
className="filter-icon"
|
|
onClick={toggleFilterVisibilityThree}
|
|
/>
|
|
<span onClick={toggleFilterVisibilityThree}>
|
|
<ImageWithBasePath
|
|
src="assets/img/icons/closes.svg"
|
|
alt="img"
|
|
/>
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
<div className="form-sort stylewidth">
|
|
<Sliders className="info-img" />
|
|
|
|
<Select
|
|
className="select"
|
|
options={options}
|
|
placeholder="Sort by Date"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/* /Filter */}
|
|
<div
|
|
className={`card${isFilterVisibleThree ? " visible" : ""}`}
|
|
id="filter_inputs2"
|
|
style={{ display: isFilterVisibleThree ? "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={nameOptions} />
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-sm-6 col-12">
|
|
<div className="input-blocks">
|
|
<StopCircle className="info-img" />
|
|
<Select
|
|
className="select"
|
|
options={statusOptions2}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-3 col-sm-6 col-12">
|
|
<div className="input-blocks">
|
|
<ImageWithBasePath
|
|
src="assets/img/icons/payment-status.svg"
|
|
className="info-img status-icon"
|
|
alt="Icon"
|
|
/>
|
|
<Select
|
|
className="select"
|
|
options={paymentStatusOptions}
|
|
/>
|
|
</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-all3" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</th>
|
|
<th>Reference</th>
|
|
<th>Supplier Name</th>
|
|
<th>Amount</th>
|
|
<th>Paid</th>
|
|
<th>Due Amount</th>
|
|
<th>Status</th>
|
|
<th>Payment Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>PR0001</td>
|
|
<td>Apex Computers</td>
|
|
<td>$1800</td>
|
|
<td>$1800</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Completed
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span className="badge-linesuccess">Paid</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>PR0002</td>
|
|
<td>Beats Headphones</td>
|
|
<td>$1200</td>
|
|
<td>$0.00</td>
|
|
<td>$1200</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Completed
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span className="badge badge-linedanger">
|
|
Unpaid
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>PR0003</td>
|
|
<td>Dazzle Shoes</td>
|
|
<td>$2000</td>
|
|
<td>$2000</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Completed
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span className="badge-linesuccess">Paid</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>PR0004</td>
|
|
<td>Best Accessories</td>
|
|
<td>$1300</td>
|
|
<td>$1300</td>
|
|
<td>$1300</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Completed
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span className="badges-warning">Overdue</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>PR0005</td>
|
|
<td>Aesthetic Bags</td>
|
|
<td>$400</td>
|
|
<td>$0.00</td>
|
|
<td>$400</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Completed
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span className="badge badge-linedanger">
|
|
Unpaid
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>PR0006</td>
|
|
<td>Hatimi Hardwares</td>
|
|
<td>$700</td>
|
|
<td>$700</td>
|
|
<td>$700</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Completed
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span className="badges-warning">Overdue</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>PR0007</td>
|
|
<td>Shine Bags</td>
|
|
<td>$800</td>
|
|
<td>$800</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Completed
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span className="badge-linesuccess">Paid</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>PR0008</td>
|
|
<td>Alpha Mobiles</td>
|
|
<td>$300</td>
|
|
<td>$300</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Completed
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span className="badge-linesuccess">Paid</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>PR0009</td>
|
|
<td>Sigma Chairs</td>
|
|
<td>$120</td>
|
|
<td>$120</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Completed
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span className="badge-linesuccess">Paid</span>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label className="checkboxs">
|
|
<input type="checkbox" />
|
|
<span className="checkmarks" />
|
|
</label>
|
|
</td>
|
|
<td>PR0010</td>
|
|
<td>Zenith Bags</td>
|
|
<td>$600</td>
|
|
<td>$600</td>
|
|
<td>$0.00</td>
|
|
<td>
|
|
<span className="badges status-badge">
|
|
Completed
|
|
</span>
|
|
</td>
|
|
<td>
|
|
<span className="badge-linesuccess">Paid</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/* /product list */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SupplierReport;
|