apksel-dev/pos-dashboard
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
pos-dashboard/src/feature-module/sales/saleslist.jsx

1515 lines
63 KiB
React
Raw Normal View History

add superadmin authentication
2025-08-03 11:14:55 +07:00
import { Select as AntSelect, DatePicker, Space } from "antd";
update 3 modules
2025-08-02 02:33:10 +07:00
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";
add superadmin authentication
2025-08-03 11:14:55 +07:00
import { formatDate, formatInputDate } from "../../utils/date";
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
const SalesList = () => {
update 3 modules
2025-08-02 02:33:10 +07:00
const {
orders: apiOrders,
loading,
error,
totalOrders,
totalPages,
pageSize: reduxPageSize,
currentPage: reduxCurrentPage,
} = useSelector((state) => state.orders);
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
update 3 modules
2025-08-02 02:33:10 +07:00
const dispatch = useDispatch();
const data = useSelector((state) => state.toggle_header);
const dataSource = apiOrders?.length > 0 ? apiOrders : [];
add superadmin authentication
2025-08-03 11:14:55 +07:00
const [params, setParams] = useState({
page: reduxCurrentPage || 1,
limit: reduxPageSize || 10,
status: null,
date_from: null,
date_to: null,
});
update 3 modules
2025-08-02 02:33:10 +07:00
const [searchTerm, setSearchTerm] = useState("");
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");
add superadmin authentication
2025-08-03 11:14:55 +07:00
const [selectedOrder, setSelectedOrder] = useState(null);
const handleSetParams = (key, value) => {
setParams({
...params,
[key]: value,
});
};
update 3 modules
2025-08-02 02:33:10 +07:00
useEffect(() => {
const loadOrders = async () => {
try {
add superadmin authentication
2025-08-03 11:14:55 +07:00
const receivedParams = {
page: params.page,
limit: params.limit,
update 3 modules
2025-08-02 02:33:10 +07:00
search: debouncedSearchTerm || "",
add superadmin authentication
2025-08-03 11:14:55 +07:00
status: params.status,
date_from: params.date_from,
date_to: params.date_to,
update 3 modules
2025-08-02 02:33:10 +07:00
};
// Remove empty parameters
const cleanParams = Object.fromEntries(
add superadmin authentication
2025-08-03 11:14:55 +07:00
Object.entries(receivedParams).filter(([, value]) => value !== "")
update 3 modules
2025-08-02 02:33:10 +07:00
);
await dispatch(fetchOrders(cleanParams));
} catch (error) {
console.error("Failed to fetch orders", error);
}
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
};
update 3 modules
2025-08-02 02:33:10 +07:00
loadOrders();
add superadmin authentication
2025-08-03 11:14:55 +07:00
}, [dispatch, params, debouncedSearchTerm]);
update 3 modules
2025-08-02 02:33:10 +07:00
useEffect(() => {
const timer = setTimeout(() => {
setDebouncedSearchTerm(searchTerm);
refactor and conneting api
2025-08-03 20:55:11 +07:00
handleSetParams("page", 1);
update 3 modules
2025-08-02 02:33:10 +07:00
}, 500); // 500ms delay
return () => clearTimeout(timer);
}, [searchTerm]);
// Handle search
const handleSearch = (e) => {
const value = e.target.value;
setSearchTerm(value);
};
// Handle pagination
const handlePageChange = (page) => {
add superadmin authentication
2025-08-03 11:14:55 +07:00
handleSetParams("page", page);
update 3 modules
2025-08-02 02:33:10 +07:00
};
// Handle page size change
const handlePageSizeChange = (newPageSize) => {
add superadmin authentication
2025-08-03 11:14:55 +07:00
handleSetParams("limit", newPageSize);
handleSetParams("page", 1);
update 3 modules
2025-08-02 02:33:10 +07:00
};
// Calculate pagination info
const totalRecords = totalOrders || dataSource.length;
add superadmin authentication
2025-08-03 11:14:55 +07:00
const calculatedTotalPages = Math.ceil(totalRecords / params.limit);
update 3 modules
2025-08-02 02:33:10 +07:00
const actualTotalPages = totalPages || calculatedTotalPages;
// Clear error when component unmounts
useEffect(() => {
return () => {
dispatch(clearOrderError());
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
};
update 3 modules
2025-08-02 02:33:10 +07:00
}, [dispatch]);
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
update 3 modules
2025-08-02 02:33:10 +07:00
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",
};
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
update 3 modules
2025-08-02 02:33:10 +07:00
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>
add superadmin authentication
2025-08-03 11:14:55 +07:00
<Space warp align="center">
update 3 modules
2025-08-02 02:33:10 +07:00
<AntSelect
style={{ height: 36, width: 120 }}
placeholder={"Status"}
options={paymentStatus}
value={
paymentStatus.find(
add superadmin authentication
2025-08-03 11:14:55 +07:00
(option) => option.value === params.status
update 3 modules
2025-08-02 02:33:10 +07:00
) || null
}
add superadmin authentication
2025-08-03 11:14:55 +07:00
onChange={(selectedOption) =>
handleSetParams("status", selectedOption)
}
update 3 modules
2025-08-02 02:33:10 +07:00
/>
add superadmin authentication
2025-08-03 11:14:55 +07:00
<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"
update 3 modules
2025-08-02 02:33:10 +07:00
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"
add superadmin authentication
2025-08-03 11:14:55 +07:00
onClick={() => setSelectedOrder(item)}
update 3 modules
2025-08-02 02:33:10 +07:00
>
<i
data-feather="eye"
className="info-img"
/>
add superadmin authentication
2025-08-03 11:14:55 +07:00
Sales Detail
update 3 modules
2025-08-02 02:33:10 +07:00
</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
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</Link>
update 3 modules
2025-08-02 02:33:10 +07:00
</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
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</Link>
update 3 modules
2025-08-02 02:33:10 +07:00
</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
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</Link>
update 3 modules
2025-08-02 02:33:10 +07:00
</li>
<li>
<Link to="#" className="dropdown-item">
<i
data-feather="download"
className="info-img"
/>
Download pdf
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</Link>
update 3 modules
2025-08-02 02:33:10 +07:00
</li>
<li>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
<Link
update 3 modules
2025-08-02 02:33:10 +07:00
to="#"
className="dropdown-item confirm-text mb-0"
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
>
update 3 modules
2025-08-02 02:33:10 +07:00
<i
data-feather="trash-2"
className="info-img"
/>
Delete Sale
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</Link>
update 3 modules
2025-08-02 02:33:10 +07:00
</li>
</ul>
</td>
</tr>
))}
</tbody>
</table>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
update 3 modules
2025-08-02 02:33:10 +07:00
<CustomPagination
add superadmin authentication
2025-08-03 11:14:55 +07:00
currentPage={params.page}
pageSize={params.limit}
update 3 modules
2025-08-02 02:33:10 +07:00
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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
<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"
/>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
<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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
update 3 modules
2025-08-02 02:33:10 +07:00
<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"
/>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</form>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
</div>
{/* /add popup */}
add superadmin authentication
2025-08-03 11:14:55 +07:00
update 3 modules
2025-08-02 02:33:10 +07:00
{/* 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">
add superadmin authentication
2025-08-03 11:14:55 +07:00
{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>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
add superadmin authentication
2025-08-03 11:14:55 +07:00
<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>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
add superadmin authentication
2025-08-03 11:14:55 +07:00
<h5 className="fw-bold mb-3">Order Summary</h5>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
add superadmin authentication
2025-08-03 11:14:55 +07:00
<div className="table-responsive mb-4">
update 3 modules
2025-08-02 02:33:10 +07:00
<table className="table table-bordered">
add superadmin authentication
2025-08-03 11:14:55 +07:00
<thead className="thead-light text-dark">
update 3 modules
2025-08-02 02:33:10 +07:00
<tr>
add superadmin authentication
2025-08-03 11:14:55 +07:00
<th>Product</th>
<th>Variant</th>
<th>Status</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total Price</th>
update 3 modules
2025-08-02 02:33:10 +07:00
</tr>
add superadmin authentication
2025-08-03 11:14:55 +07:00
</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>
))}
update 3 modules
2025-08-02 02:33:10 +07:00
</tbody>
</table>
add superadmin authentication
2025-08-03 11:14:55 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
add superadmin authentication
2025-08-03 11:14:55 +07:00
<div className="row justify-content-end pb-3">
<div className="col-md-6">
<table className="table table-bordered">
<tbody>
<tr>
<td>Order Tax</td>
refactor and conneting api
2025-08-03 20:55:11 +07:00
<td className="text-end">
{formatRupiah(selectedOrder?.tax_amount)}
</td>
add superadmin authentication
2025-08-03 11:14:55 +07:00
</tr>
<tr>
<td>Discount</td>
refactor and conneting api
2025-08-03 20:55:11 +07:00
<td className="text-end">
{formatRupiah(selectedOrder?.discount_amount)}
</td>
add superadmin authentication
2025-08-03 11:14:55 +07:00
</tr>
<tr className="fw-bold">
<td>Grand Total</td>
refactor and conneting api
2025-08-03 20:55:11 +07:00
<td className="text-end">
{formatRupiah(selectedOrder?.total_amount)}
</td>
add superadmin authentication
2025-08-03 11:14:55 +07:00
</tr>
<tr>
<td>Sub Total</td>
refactor and conneting api
2025-08-03 20:55:11 +07:00
<td className="text-end">
{formatRupiah(selectedOrder?.subtotal)}
</td>
add superadmin authentication
2025-08-03 11:14:55 +07:00
</tr>
</tbody>
</table>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
add superadmin authentication
2025-08-03 11:14:55 +07:00
)}
update 3 modules
2025-08-02 02:33:10 +07:00
</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>
add superadmin authentication
2025-08-03 11:14:55 +07:00
<th>Purchase Price</th>
update 3 modules
2025-08-02 02:33:10 +07:00
<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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
<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"
/>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</form>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</td>
</tr>
</tbody>
</table>
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</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"
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
>
update 3 modules
2025-08-02 02:33:10 +07:00
<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" />
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
<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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
<button
type="button"
className="close"
data-bs-dismiss="modal"
aria-label="Close"
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
>
update 3 modules
2025-08-02 02:33:10 +07:00
<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"
/>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</div>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
<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>
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
</div>
update 3 modules
2025-08-02 02:33:10 +07:00
</>
</div>
);
};
Initial commit of Dreams POS React template
2025-05-23 23:34:50 +07:00
update 3 modules
2025-08-02 02:33:10 +07:00
export default SalesList;
Reference in New Issue Copy Permalink