1515 lines
63 KiB
JavaScript
1515 lines
63 KiB
JavaScript
import { Select as AntSelect, DatePicker, Space } from "antd";
|
||
import {
|
||
ChevronUp,
|
||
PlusCircle,
|
||
RotateCcw,
|
||
} from "feather-icons-react/build/IconComponents";
|
||
import { useEffect, useState } from "react";
|
||
import { OverlayTrigger, Tooltip } from "react-bootstrap";
|
||
import { useDispatch, useSelector } from "react-redux";
|
||
import { Link } from "react-router-dom";
|
||
import Select from "react-select";
|
||
import CustomPagination from "../../components/CustomPagination";
|
||
import ImageWithBasePath from "../../core/img/imagewithbasebath";
|
||
import { setToogleHeader } from "../../core/redux/action";
|
||
import {
|
||
clearOrderError,
|
||
fetchOrders,
|
||
} from "../../core/redux/actions/orderActions";
|
||
import { formatRupiah } from "../../utils/currency";
|
||
import { formatDate, formatInputDate } from "../../utils/date";
|
||
|
||
const SalesList = () => {
|
||
const {
|
||
orders: apiOrders,
|
||
loading,
|
||
error,
|
||
totalOrders,
|
||
totalPages,
|
||
pageSize: reduxPageSize,
|
||
currentPage: reduxCurrentPage,
|
||
} = useSelector((state) => state.orders);
|
||
|
||
const dispatch = useDispatch();
|
||
const data = useSelector((state) => state.toggle_header);
|
||
|
||
const dataSource = apiOrders?.length > 0 ? apiOrders : [];
|
||
|
||
const [params, setParams] = useState({
|
||
page: reduxCurrentPage || 1,
|
||
limit: reduxPageSize || 10,
|
||
status: null,
|
||
date_from: null,
|
||
date_to: null,
|
||
});
|
||
|
||
const [searchTerm, setSearchTerm] = useState("");
|
||
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
|
||
|
||
const [selectedOrder, setSelectedOrder] = useState(null);
|
||
|
||
const handleSetParams = (key, value) => {
|
||
setParams({
|
||
...params,
|
||
[key]: value,
|
||
});
|
||
};
|
||
|
||
useEffect(() => {
|
||
const loadOrders = async () => {
|
||
try {
|
||
const receivedParams = {
|
||
page: params.page,
|
||
limit: params.limit,
|
||
search: debouncedSearchTerm || "",
|
||
status: params.status,
|
||
date_from: params.date_from,
|
||
date_to: params.date_to,
|
||
};
|
||
|
||
// Remove empty parameters
|
||
const cleanParams = Object.fromEntries(
|
||
Object.entries(receivedParams).filter(([, value]) => value !== "")
|
||
);
|
||
|
||
await dispatch(fetchOrders(cleanParams));
|
||
} catch (error) {
|
||
console.error("Failed to fetch orders", error);
|
||
}
|
||
};
|
||
|
||
loadOrders();
|
||
}, [dispatch, params, debouncedSearchTerm]);
|
||
|
||
useEffect(() => {
|
||
const timer = setTimeout(() => {
|
||
setDebouncedSearchTerm(searchTerm);
|
||
handleSetParams("page", 1);
|
||
}, 500); // 500ms delay
|
||
|
||
return () => clearTimeout(timer);
|
||
}, [searchTerm]);
|
||
|
||
// Handle search
|
||
const handleSearch = (e) => {
|
||
const value = e.target.value;
|
||
setSearchTerm(value);
|
||
};
|
||
|
||
// Handle pagination
|
||
const handlePageChange = (page) => {
|
||
handleSetParams("page", page);
|
||
};
|
||
|
||
// Handle page size change
|
||
const handlePageSizeChange = (newPageSize) => {
|
||
handleSetParams("limit", newPageSize);
|
||
handleSetParams("page", 1);
|
||
};
|
||
|
||
// Calculate pagination info
|
||
const totalRecords = totalOrders || dataSource.length;
|
||
const calculatedTotalPages = Math.ceil(totalRecords / params.limit);
|
||
const actualTotalPages = totalPages || calculatedTotalPages;
|
||
|
||
// Clear error when component unmounts
|
||
useEffect(() => {
|
||
return () => {
|
||
dispatch(clearOrderError());
|
||
};
|
||
}, [dispatch]);
|
||
|
||
const paymentStatus = [
|
||
{ value: "", label: "All" },
|
||
{ value: "pending", label: "Pending" },
|
||
{ value: "completed", label: "Completed" },
|
||
{ value: "cancelled", label: "Cancelled" },
|
||
];
|
||
const customer = [
|
||
{ value: "Choose Customer", label: "Choose Customer" },
|
||
{ value: "Customer Name", label: "Customer Name" },
|
||
];
|
||
const suppliername = [
|
||
{ value: "Supplier", label: "Supplier" },
|
||
{ value: "Supplier Name", label: "Supplier Name" },
|
||
];
|
||
const statusupdate = [
|
||
{ value: "Supplier", label: "Choose" },
|
||
{ value: "Completed", label: "Completed" },
|
||
{ value: "InProgress", label: "InProgress" },
|
||
];
|
||
const paymenttype = [
|
||
{ value: "Choose", label: "Choose" },
|
||
{ value: "Cash", label: "Cash" },
|
||
{ value: "Online", label: "Online" },
|
||
];
|
||
const badgeColors = {
|
||
pending: "primary",
|
||
completed: "success",
|
||
cancelled: "danger",
|
||
};
|
||
|
||
const [selectedDate, setSelectedDate] = useState(new Date());
|
||
const handleDateChange = (date) => {
|
||
setSelectedDate(date);
|
||
};
|
||
|
||
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>Sales List</h4>
|
||
<h6>Manage Your Sales</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
|
||
</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"
|
||
value={searchTerm}
|
||
onChange={handleSearch}
|
||
/>
|
||
<Link to className="btn btn-searchset">
|
||
<i data-feather="search" className="feather-search" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<Space warp align="center">
|
||
<AntSelect
|
||
style={{ height: 36, width: 120 }}
|
||
placeholder={"Status"}
|
||
options={paymentStatus}
|
||
value={
|
||
paymentStatus.find(
|
||
(option) => option.value === params.status
|
||
) || null
|
||
}
|
||
onChange={(selectedOption) =>
|
||
handleSetParams("status", selectedOption)
|
||
}
|
||
/>
|
||
|
||
<DatePicker
|
||
selected={params.date_from}
|
||
onChange={(date) =>
|
||
date
|
||
? handleSetParams("date_from", formatInputDate(date))
|
||
: handleSetParams("date_from", "")
|
||
}
|
||
height={120}
|
||
type="date"
|
||
className="datetimepicker w-100"
|
||
dateFormat="dd-MM-yyyy"
|
||
placeholder="From Date"
|
||
style={{ height: 36 }}
|
||
/>
|
||
|
||
<DatePicker
|
||
selected={params.date_to}
|
||
onChange={(date) =>
|
||
date
|
||
? handleSetParams("date_to", formatInputDate(date))
|
||
: handleSetParams("date_to", "")
|
||
}
|
||
type="date"
|
||
className="datetimepicker w-100"
|
||
dateFormat="dd-MM-yyyy"
|
||
placeholder="To Date"
|
||
style={{ height: 36 }}
|
||
/>
|
||
</Space>
|
||
</div>
|
||
|
||
<div className="table-responsive">
|
||
{loading ? (
|
||
<div className="text-center p-4">
|
||
<div className="spinner-border text-primary" role="status">
|
||
<span className="visually-hidden">Loading...</span>
|
||
</div>
|
||
<p className="mt-2">Loading products...</p>
|
||
</div>
|
||
) : error ? (
|
||
<div className="alert alert-danger" role="alert">
|
||
<strong>Error:</strong> {error}
|
||
<button
|
||
className="btn btn-sm btn-outline-danger ms-2"
|
||
onClick={() => dispatch(fetchOrders())}
|
||
>
|
||
Retry
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<table className="table datanew">
|
||
<thead className="thead-light">
|
||
<tr>
|
||
<th className="no-sort">
|
||
<label className="checkboxs">
|
||
<input type="checkbox" id="select-all" />
|
||
<span className="checkmarks" />
|
||
</label>
|
||
</th>
|
||
<th>Customer Name</th>
|
||
<th>Reference</th>
|
||
<th>Date</th>
|
||
<th>Status</th>
|
||
<th>Total Amount</th>
|
||
<th>Discount Amount</th>
|
||
<th>Table Number</th>
|
||
<th className="text-center">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody className="sales-list">
|
||
{dataSource &&
|
||
dataSource.map((item, index) => (
|
||
<tr key={index}>
|
||
<td>
|
||
<label className="checkboxs">
|
||
<input type="checkbox" />
|
||
<span className="checkmarks" />
|
||
</label>
|
||
</td>
|
||
<td>{item.metadata?.customer_name}</td>
|
||
<td>{item.order_number}</td>
|
||
<td>{formatDate(item.created_at)}</td>
|
||
<td>
|
||
<span
|
||
className={`badge text-bg-${
|
||
badgeColors[item.status]
|
||
}`}
|
||
>
|
||
{item.status}
|
||
</span>
|
||
</td>
|
||
<td>{formatRupiah(item.total_amount)}</td>
|
||
<td>{formatRupiah(item.discount_amount)}</td>
|
||
<td>{item.table_number ?? 0}</td>
|
||
<td className="text-center">
|
||
<Link
|
||
className="action-set"
|
||
to="#"
|
||
data-bs-toggle="dropdown"
|
||
aria-expanded="true"
|
||
>
|
||
<i
|
||
className="fa fa-ellipsis-v"
|
||
aria-hidden="true"
|
||
/>
|
||
</Link>
|
||
<ul className="dropdown-menu">
|
||
<li>
|
||
<Link
|
||
to="#"
|
||
className="dropdown-item"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#sales-details-new"
|
||
onClick={() => setSelectedOrder(item)}
|
||
>
|
||
<i
|
||
data-feather="eye"
|
||
className="info-img"
|
||
/>
|
||
Sales Detail
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
to="#"
|
||
className="dropdown-item"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#edit-sales-new"
|
||
>
|
||
<i
|
||
data-feather="edit"
|
||
className="info-img"
|
||
/>
|
||
Edit Sale
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
to="#"
|
||
className="dropdown-item"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#showpayment"
|
||
>
|
||
<i
|
||
data-feather="dollar-sign"
|
||
className="info-img"
|
||
/>
|
||
Show Payments
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
to="#"
|
||
className="dropdown-item"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#createpayment"
|
||
>
|
||
<i
|
||
data-feather="plus-circle"
|
||
className="info-img"
|
||
/>
|
||
Create Payment
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link to="#" className="dropdown-item">
|
||
<i
|
||
data-feather="download"
|
||
className="info-img"
|
||
/>
|
||
Download pdf
|
||
</Link>
|
||
</li>
|
||
<li>
|
||
<Link
|
||
to="#"
|
||
className="dropdown-item confirm-text mb-0"
|
||
>
|
||
<i
|
||
data-feather="trash-2"
|
||
className="info-img"
|
||
/>
|
||
Delete Sale
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
|
||
<CustomPagination
|
||
currentPage={params.page}
|
||
pageSize={params.limit}
|
||
totalCount={totalRecords}
|
||
totalPages={actualTotalPages}
|
||
loading={loading}
|
||
onPageChange={handlePageChange}
|
||
onPageSizeChange={handlePageSizeChange}
|
||
pageSizeOptions={[10, 20, 50, 100]}
|
||
showInfo={true}
|
||
showPageSizeSelector={true}
|
||
compact={false}
|
||
className="order-list-pagination"
|
||
/>
|
||
</>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /product list */}
|
||
</div>
|
||
</div>
|
||
<>
|
||
{/*add popup */}
|
||
<div className="modal fade" id="add-sales-new">
|
||
<div className="modal-dialog add-centered">
|
||
<div className="modal-content">
|
||
<div className="page-wrapper p-0 m-0">
|
||
<div className="content p-0">
|
||
<div className="modal-header border-0 custom-modal-header">
|
||
<div className="page-title">
|
||
<h4> Add Sales</h4>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="close"
|
||
data-bs-dismiss="modal"
|
||
aria-label="Close"
|
||
>
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div className="card">
|
||
<div className="card-body">
|
||
<form>
|
||
<div className="row">
|
||
<div className="col-lg-4 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Customer Name</label>
|
||
<div className="row">
|
||
<div className="col-lg-10 col-sm-10 col-10">
|
||
<Select
|
||
className="select"
|
||
options={customer}
|
||
placeholder="Newest"
|
||
/>
|
||
</div>
|
||
<div className="col-lg-2 col-sm-2 col-2 ps-0">
|
||
<div className="add-icon">
|
||
<Link to="#" className="choose-add">
|
||
<PlusCircle className="plus" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-4 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Date</label>
|
||
<div className="input-groupicon calender-input">
|
||
<DatePicker
|
||
selected={selectedDate}
|
||
onChange={handleDateChange}
|
||
type="date"
|
||
className="filterdatepicker"
|
||
dateFormat="dd-MM-yyyy"
|
||
placeholder="Choose Date"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-4 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Supplier</label>
|
||
|
||
<Select
|
||
className="select"
|
||
options={suppliername}
|
||
placeholder="Newest"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-12 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Product Name</label>
|
||
<div className="input-groupicon select-code">
|
||
<input
|
||
type="text"
|
||
placeholder="Please type product code and select"
|
||
/>
|
||
<div className="addonset">
|
||
<ImageWithBasePath
|
||
src="assets/img/icons/qrcode-scan.svg"
|
||
alt="img"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="table-responsive no-pagination">
|
||
<table className="table datanew">
|
||
<thead>
|
||
<tr>
|
||
<th>Product</th>
|
||
<th>Qty</th>
|
||
<th>Purchase Price($)</th>
|
||
<th>Discount($)</th>
|
||
<th>Tax(%)</th>
|
||
<th>Tax Amount($)</th>
|
||
<th>Unit Cost($)</th>
|
||
<th>Total Cost(%)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td />
|
||
<td />
|
||
<td />
|
||
<td />
|
||
<td />
|
||
<td />
|
||
<td />
|
||
<td />
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
<div className="row">
|
||
<div className="col-lg-6 ms-auto">
|
||
<div className="total-order w-100 max-widthauto m-auto mb-4">
|
||
<ul>
|
||
<li>
|
||
<h4>Order Tax</h4>
|
||
<h5>$ 0.00</h5>
|
||
</li>
|
||
<li>
|
||
<h4>Discount</h4>
|
||
<h5>$ 0.00</h5>
|
||
</li>
|
||
<li>
|
||
<h4>Shipping</h4>
|
||
<h5>$ 0.00</h5>
|
||
</li>
|
||
<li>
|
||
<h4>Grand Total</h4>
|
||
<h5>$ 0.00</h5>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="row">
|
||
<div className="col-lg-3 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Order Tax</label>
|
||
<div className="input-groupicon select-code">
|
||
<input
|
||
type="text"
|
||
defaultValue={0}
|
||
className="p-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Discount</label>
|
||
<div className="input-groupicon select-code">
|
||
<input
|
||
type="text"
|
||
defaultValue={0}
|
||
className="p-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Shipping</label>
|
||
<div className="input-groupicon select-code">
|
||
<input
|
||
type="text"
|
||
defaultValue={0}
|
||
className="p-2"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-sm-6 col-12">
|
||
<div className="input-blocks mb-5">
|
||
<label>Status</label>
|
||
|
||
<Select
|
||
className="select"
|
||
options={statusupdate}
|
||
placeholder="status"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-12 text-end">
|
||
<button
|
||
type="button"
|
||
className="btn btn-cancel add-cancel me-3"
|
||
data-bs-dismiss="modal"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<Link to="#" className="btn btn-submit add-sale">
|
||
Submit
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /add popup */}
|
||
|
||
{/* details popup */}
|
||
<div className="modal fade" id="sales-details-new">
|
||
<div className="modal-dialog sales-details-modal">
|
||
<div className="modal-content">
|
||
<div className="page-wrapper details-blk">
|
||
{setSelectedOrder && (
|
||
<div className="content p-4">
|
||
<div className="d-flex justify-content-between align-items-center mb-4 modal-header">
|
||
<h4 className="fw-bold">Sales Detail</h4>
|
||
<button className="btn btn-dark" data-bs-dismiss="modal">
|
||
<i className="fa fa-arrow-left me-2"></i>Back to Sales
|
||
</button>
|
||
</div>
|
||
|
||
<div className="row g-4 mb-4">
|
||
<div className="col-md-4">
|
||
<h6 className="fw-bold text-muted">Customer Info</h6>
|
||
<p className="mb-0">
|
||
{selectedOrder?.metadata?.customer_name}
|
||
</p>
|
||
<small className="text-muted d-block">
|
||
3103 Trainer Avenue Peoria, IL 61602
|
||
</small>
|
||
<small className="text-muted d-block">
|
||
Email: carlevans241@example.com
|
||
</small>
|
||
<small className="text-muted d-block">
|
||
Phone: +1 987 471 6589
|
||
</small>
|
||
</div>
|
||
<div className="col-md-4">
|
||
<h6 className="fw-bold text-muted">Company Info</h6>
|
||
<p className="mb-0">DGT</p>
|
||
<small className="text-muted d-block">
|
||
2077 Chicago Avenue Orosi, CA 93647
|
||
</small>
|
||
<small className="text-muted d-block">
|
||
Email: admin@example.com
|
||
</small>
|
||
<small className="text-muted d-block">
|
||
Phone: +1 893 174 0385
|
||
</small>
|
||
</div>
|
||
<div className="col-md-4">
|
||
<h6 className="fw-bold text-muted">Invoice Info</h6>
|
||
<small className="d-block">
|
||
Reference:{" "}
|
||
<span className="text-warning fw-semibold">
|
||
{selectedOrder?.order_number}
|
||
</span>
|
||
</small>
|
||
<small className="d-block">
|
||
Date: {formatDate(selectedOrder?.created_at)}
|
||
</small>
|
||
<small className="d-block">
|
||
Status:{" "}
|
||
<span
|
||
className={`badge text-bg-${
|
||
badgeColors[selectedOrder?.status]
|
||
}`}
|
||
>
|
||
{selectedOrder?.status}
|
||
</span>
|
||
</small>
|
||
<small className="d-block">
|
||
Payment Status:{" "}
|
||
<span className="badge bg-light-success text-success">
|
||
Paid
|
||
</span>
|
||
</small>
|
||
</div>
|
||
</div>
|
||
|
||
<h5 className="fw-bold mb-3">Order Summary</h5>
|
||
|
||
<div className="table-responsive mb-4">
|
||
<table className="table table-bordered">
|
||
<thead className="thead-light text-dark">
|
||
<tr>
|
||
<th>Product</th>
|
||
<th>Variant</th>
|
||
<th>Status</th>
|
||
<th>Quantity</th>
|
||
<th>Unit Price</th>
|
||
<th>Total Price</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{selectedOrder?.order_items?.map((item, index) => (
|
||
<tr key={index}>
|
||
<td>{item?.product_name}</td>
|
||
<td>{item?.product_variant_name ?? "-"}</td>
|
||
<td>{item?.status}</td>
|
||
<td>{item?.quantity}</td>
|
||
<td>{formatRupiah(item?.unit_price)}</td>
|
||
<td>{formatRupiah(item?.total_price)}</td>
|
||
</tr>
|
||
))}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="row justify-content-end pb-3">
|
||
<div className="col-md-6">
|
||
<table className="table table-bordered">
|
||
<tbody>
|
||
<tr>
|
||
<td>Order Tax</td>
|
||
<td className="text-end">
|
||
{formatRupiah(selectedOrder?.tax_amount)}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Discount</td>
|
||
<td className="text-end">
|
||
{formatRupiah(selectedOrder?.discount_amount)}
|
||
</td>
|
||
</tr>
|
||
<tr className="fw-bold">
|
||
<td>Grand Total</td>
|
||
<td className="text-end">
|
||
{formatRupiah(selectedOrder?.total_amount)}
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Sub Total</td>
|
||
<td className="text-end">
|
||
{formatRupiah(selectedOrder?.subtotal)}
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /details popup */}
|
||
{/* edit popup */}
|
||
<div className="modal fade" id="edit-sales-new">
|
||
<div className="modal-dialog edit-sales-modal">
|
||
<div className="modal-content">
|
||
<div className="page-wrapper p-0 m-0">
|
||
<div className="content p-0">
|
||
<div className="page-header p-4 mb-0">
|
||
<div className="add-item new-sale-items d-flex">
|
||
<div className="page-title">
|
||
<h4>Edit Sales</h4>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="close"
|
||
data-bs-dismiss="modal"
|
||
aria-label="Close"
|
||
>
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="card">
|
||
<div className="card-body">
|
||
<form>
|
||
<div className="table-responsive no-pagination mb-3">
|
||
<table className="table datanew">
|
||
<thead className="thead-light">
|
||
<tr>
|
||
<th>Product</th>
|
||
<th>Qty</th>
|
||
<th>Purchase Price</th>
|
||
<th>Discount($)</th>
|
||
<th>Tax(%)</th>
|
||
<th>Tax Amount($)</th>
|
||
<th>Unit Cost($)</th>
|
||
<th>Total Cost(%)</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>
|
||
<div className="productimgname">
|
||
<Link
|
||
to="#"
|
||
className="product-img stock-img"
|
||
>
|
||
<ImageWithBasePath
|
||
src="assets/img/products/stock-img-02.png"
|
||
alt="product"
|
||
/>
|
||
</Link>
|
||
<Link to="#">Nike Jordan</Link>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="product-quantity">
|
||
<span className="quantity-btn">
|
||
+
|
||
<i
|
||
data-feather="plus-circle"
|
||
className="plus-circle"
|
||
/>
|
||
</span>
|
||
<input
|
||
type="text"
|
||
className="quntity-input"
|
||
defaultValue={2}
|
||
/>
|
||
<span className="quantity-btn">
|
||
<i
|
||
data-feather="minus-circle"
|
||
className="feather-search"
|
||
/>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td>2000</td>
|
||
<td>500</td>
|
||
<td>0.00</td>
|
||
<td>0.00</td>
|
||
<td>0.00</td>
|
||
<td>1500</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div className="productimgname">
|
||
<Link
|
||
to="#"
|
||
className="product-img stock-img"
|
||
>
|
||
<ImageWithBasePath
|
||
src="assets/img/products/stock-img-03.png"
|
||
alt="product"
|
||
/>
|
||
</Link>
|
||
<Link to="#">Apple Series 5 Watch</Link>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="product-quantity">
|
||
<span className="quantity-btn">
|
||
+
|
||
<i
|
||
data-feather="plus-circle"
|
||
className="plus-circle"
|
||
/>
|
||
</span>
|
||
<input
|
||
type="text"
|
||
className="quntity-input"
|
||
defaultValue={2}
|
||
/>
|
||
<span className="quantity-btn">
|
||
<i
|
||
data-feather="minus-circle"
|
||
className="feather-search"
|
||
/>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td>3000</td>
|
||
<td>400</td>
|
||
<td>0.00</td>
|
||
<td>0.00</td>
|
||
<td>0.00</td>
|
||
<td>1700</td>
|
||
</tr>
|
||
<tr>
|
||
<td>
|
||
<div className="productimgname">
|
||
<Link
|
||
to="#"
|
||
className="product-img stock-img"
|
||
>
|
||
<ImageWithBasePath
|
||
src="assets/img/products/stock-img-05.png"
|
||
alt="product"
|
||
/>
|
||
</Link>
|
||
<Link to="#">Lobar Handy</Link>
|
||
</div>
|
||
</td>
|
||
<td>
|
||
<div className="product-quantity">
|
||
<span className="quantity-btn">
|
||
+
|
||
<i
|
||
data-feather="plus-circle"
|
||
className="plus-circle"
|
||
/>
|
||
</span>
|
||
<input
|
||
type="text"
|
||
className="quntity-input"
|
||
defaultValue={2}
|
||
/>
|
||
<span className="quantity-btn">
|
||
<i
|
||
data-feather="minus-circle"
|
||
className="feather-search"
|
||
/>
|
||
</span>
|
||
</div>
|
||
</td>
|
||
<td>2500</td>
|
||
<td>500</td>
|
||
<td>0.00</td>
|
||
<td>0.00</td>
|
||
<td>0.00</td>
|
||
<td>2000</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div className="row mb-3">
|
||
<div className="col-lg-4 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Customer</label>
|
||
<div className="row">
|
||
<div className="col-lg-10 col-sm-10 col-10">
|
||
<Select
|
||
className="select"
|
||
options={customer}
|
||
placeholder="Newest"
|
||
/>
|
||
</div>
|
||
<div className="col-lg-2 col-sm-2 col-2 ps-0">
|
||
<div className="add-icon">
|
||
<Link to="#" className="choose-add">
|
||
<PlusCircle className="plus" />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-4 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Purchase Date</label>
|
||
<div className="input-groupicon calender-input">
|
||
<DatePicker
|
||
selected={selectedDate}
|
||
onChange={handleDateChange}
|
||
type="date"
|
||
className="filterdatepicker w-100"
|
||
dateFormat="dd-MM-yyyy"
|
||
placeholder="Choose Date"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-4 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Supplier</label>
|
||
<Select
|
||
className="select"
|
||
options={suppliername}
|
||
placeholder="Newest"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-12 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Product Name</label>
|
||
<div className="input-groupicon select-code">
|
||
<input
|
||
type="text"
|
||
placeholder="Please type product code and select"
|
||
/>
|
||
<div className="addonset">
|
||
<ImageWithBasePath
|
||
src="assets/img/icons/scanners.svg"
|
||
alt="img"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row mb-5">
|
||
<div className="col-lg-6 ms-auto">
|
||
<table className="table table-bordered">
|
||
<tbody>
|
||
<tr>
|
||
<td>Order Tax</td>
|
||
<td className="text-end">$ 0.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Discount</td>
|
||
<td className="text-end">$ 0.00</td>
|
||
</tr>
|
||
<tr className="fw-bold">
|
||
<td>Grand Total</td>
|
||
<td className="text-end">$ 5200.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Paid</td>
|
||
<td className="text-end">$ 5200.00</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Due</td>
|
||
<td className="text-end">$ 0.00</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row">
|
||
<div className="col-lg-3 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Order Tax</label>
|
||
<div className="input-groupicon select-code">
|
||
<input type="text" placeholder={0} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Discount</label>
|
||
<div className="input-groupicon select-code">
|
||
<input type="text" placeholder={0} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-sm-6 col-12">
|
||
<div className="input-blocks">
|
||
<label>Shipping</label>
|
||
<div className="input-groupicon select-code">
|
||
<input type="text" placeholder={0} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-3 col-sm-6 col-12">
|
||
<div className="input-blocks mb-5">
|
||
<label>Status</label>
|
||
<Select
|
||
className="select"
|
||
options={statusupdate}
|
||
placeholder="Newest"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="row">
|
||
<div className="col-lg-12">
|
||
<div className="input-blocks">
|
||
<label>Notes</label>
|
||
<textarea
|
||
className="form-control"
|
||
defaultValue={""}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-12 text-end">
|
||
<button
|
||
type="button"
|
||
className="btn btn-cancel add-cancel me-3"
|
||
data-bs-dismiss="modal"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<Link to="#" className="btn btn-submit add-sale">
|
||
Submit
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* /edit popup */}
|
||
{/* show payment Modal */}
|
||
<div
|
||
className="modal fade"
|
||
id="showpayment"
|
||
tabIndex={-1}
|
||
aria-labelledby="showpayment"
|
||
aria-hidden="true"
|
||
>
|
||
<div className="modal-dialog modal-dialog-centered stock-adjust-modal">
|
||
<div className="modal-content">
|
||
<div className="page-wrapper-new p-0">
|
||
<div className="content">
|
||
<div className="modal-header border-0 custom-modal-header">
|
||
<div className="page-title">
|
||
<h4>Show Payments</h4>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="close"
|
||
data-bs-dismiss="modal"
|
||
aria-label="Close"
|
||
>
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div className="modal-body custom-modal-body">
|
||
<div className="row">
|
||
<div className="col-lg-12">
|
||
<div className="modal-body-table total-orders">
|
||
<div className="table-responsive">
|
||
<table className="table datanew">
|
||
<thead>
|
||
<tr>
|
||
<th>Date</th>
|
||
<th>Reference</th>
|
||
<th>Amount</th>
|
||
<th>Paid By</th>
|
||
<th className="no-sort">Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>19 Jan 2023</td>
|
||
<td>INV/SL0101</td>
|
||
<td>$1500</td>
|
||
<td>Cash</td>
|
||
<td className="action-table-data">
|
||
<div className="edit-delete-action">
|
||
<Link className="me-3 p-2" to="#">
|
||
<i
|
||
data-feather="printer"
|
||
className="feather-rotate-ccw"
|
||
/>
|
||
</Link>
|
||
<Link
|
||
className="me-3 p-2"
|
||
to="#"
|
||
data-bs-toggle="modal"
|
||
data-bs-target="#editpayment"
|
||
>
|
||
<i
|
||
data-feather="edit"
|
||
className="feather-edit"
|
||
/>
|
||
</Link>
|
||
<Link className="confirm-text p-2" to="#">
|
||
<i
|
||
data-feather="trash-2"
|
||
className="feather-trash-2"
|
||
/>
|
||
</Link>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* show payment Modal */}
|
||
{/* Create payment Modal */}
|
||
<div
|
||
className="modal fade"
|
||
id="createpayment"
|
||
tabIndex={-1}
|
||
aria-labelledby="createpayment"
|
||
aria-hidden="true"
|
||
>
|
||
<div className="modal-dialog modal-lg modal-dialog-centered">
|
||
<div className="modal-content">
|
||
<div className="modal-header border-0 custom-modal-header">
|
||
<div className="page-title">
|
||
<h4>Create Payments</h4>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="close"
|
||
data-bs-dismiss="modal"
|
||
aria-label="Close"
|
||
>
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div className="modal-body custom-modal-body">
|
||
<form>
|
||
<div className="row">
|
||
<div className="col-lg-6">
|
||
<div className="input-blocks">
|
||
<label> Date</label>
|
||
<div className="input-groupicon calender-input">
|
||
<DatePicker
|
||
selected={selectedDate}
|
||
onChange={handleDateChange}
|
||
type="date"
|
||
className="filterdatepicker"
|
||
dateFormat="dd-MM-yyyy"
|
||
placeholder="Choose Date"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-6 col-sm-12 col-12">
|
||
<div className="input-blocks">
|
||
<label>Reference</label>
|
||
<input type="text" className="form-control" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="row">
|
||
<div className="col-lg-4 col-sm-12 col-12">
|
||
<div className="input-blocks">
|
||
<label>Received Amount</label>
|
||
<div className="input-groupicon calender-input">
|
||
<i data-feather="dollar-sign" className="info-img" />
|
||
<input type="text" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-4 col-sm-12 col-12">
|
||
<div className="input-blocks">
|
||
<label>Paying Amount</label>
|
||
<div className="input-groupicon calender-input">
|
||
<i data-feather="dollar-sign" className="info-img" />
|
||
<input type="text" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-4 col-sm-12 col-12">
|
||
<div className="input-blocks">
|
||
<label>Payment type</label>
|
||
|
||
<Select
|
||
className="select"
|
||
options={paymenttype}
|
||
placeholder="Newest"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-12">
|
||
<div className="input-blocks">
|
||
<label>Description</label>
|
||
<textarea className="form-control" defaultValue={""} />
|
||
<p>Maximum 60 Characters</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-12">
|
||
<div className="modal-footer-btn">
|
||
<button
|
||
type="button"
|
||
className="btn btn-cancel me-2"
|
||
data-bs-dismiss="modal"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<Link to="#" className="btn btn-submit">
|
||
Submit
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* Create payment Modal */}
|
||
{/* edit payment Modal */}
|
||
<div
|
||
className="modal fade"
|
||
id="editpayment"
|
||
tabIndex={-1}
|
||
aria-labelledby="editpayment"
|
||
aria-hidden="true"
|
||
>
|
||
<div className="modal-dialog modal-lg modal-dialog-centered">
|
||
<div className="modal-content">
|
||
<div className="modal-header border-0 custom-modal-header">
|
||
<div className="page-title">
|
||
<h4>Edit Payments</h4>
|
||
</div>
|
||
<button
|
||
type="button"
|
||
className="close"
|
||
data-bs-dismiss="modal"
|
||
aria-label="Close"
|
||
>
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div className="modal-body custom-modal-body">
|
||
<form>
|
||
<div className="row">
|
||
<div className="col-lg-6">
|
||
<div className="input-blocks">
|
||
<label>19 Jan 2023</label>
|
||
<div className="input-groupicon calender-input">
|
||
<i data-feather="calendar" className="info-img" />
|
||
<input
|
||
type="text"
|
||
className="datetimepicker form-control"
|
||
placeholder="Select Date"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-6 col-sm-12 col-12">
|
||
<div className="input-blocks">
|
||
<label>Reference</label>
|
||
<input type="text" defaultValue="INV/SL0101" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="row">
|
||
<div className="col-lg-4 col-sm-12 col-12">
|
||
<div className="input-blocks">
|
||
<label>Received Amount</label>
|
||
<div className="input-groupicon calender-input">
|
||
<i data-feather="dollar-sign" className="info-img" />
|
||
<input type="text" defaultValue={1500} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-4 col-sm-12 col-12">
|
||
<div className="input-blocks">
|
||
<label>Paying Amount</label>
|
||
<div className="input-groupicon calender-input">
|
||
<i data-feather="dollar-sign" className="info-img" />
|
||
<input type="text" defaultValue={1500} />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-4 col-sm-12 col-12">
|
||
<div className="input-blocks">
|
||
<label>Payment type</label>
|
||
<select className="select">
|
||
<option>Cash</option>
|
||
<option>Online</option>
|
||
<option>Inprogress</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-12">
|
||
<div className="input-blocks summer-description-box transfer">
|
||
<label>Description</label>
|
||
<textarea className="form-control" defaultValue={""} />
|
||
</div>
|
||
<p>Maximum 60 Characters</p>
|
||
</div>
|
||
</div>
|
||
<div className="col-lg-12">
|
||
<div className="modal-footer-btn mb-3 me-3">
|
||
<button
|
||
type="button"
|
||
className="btn btn-cancel me-2"
|
||
data-bs-dismiss="modal"
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button type="submit" className="btn btn-submit">
|
||
Save Changes
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/* edit payment Modal */}
|
||
<div className="customizer-links" id="setdata">
|
||
<ul className="sticky-sidebar">
|
||
<li className="sidebar-icons">
|
||
<Link
|
||
to="#"
|
||
className="navigation-add"
|
||
data-bs-toggle="tooltip"
|
||
data-bs-placement="left"
|
||
data-bs-original-title="Theme"
|
||
>
|
||
<i data-feather="settings" className="feather-five" />
|
||
</Link>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SalesList;
|