import { DatePicker, Space, Select as AntSelect } 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 } 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 [currentPage, setCurrentPage] = useState(reduxCurrentPage || 1); const [pageSize, setPageSize] = useState(reduxPageSize || 10); const [searchTerm, setSearchTerm] = useState(""); const [debouncedSearchTerm, setDebouncedSearchTerm] = useState(""); const [orderStatus, setOrderStatus] = useState(null); useEffect(() => { const loadOrders = async () => { try { const searchParams = { page: currentPage, limit: pageSize, search: debouncedSearchTerm || "", status: orderStatus, }; // Remove empty parameters const cleanParams = Object.fromEntries( Object.entries(searchParams).filter(([, value]) => value !== "") ); await dispatch(fetchOrders(cleanParams)); } catch (error) { console.error("Failed to fetch orders", error); } }; loadOrders(); }, [dispatch, currentPage, pageSize, debouncedSearchTerm, orderStatus]); useEffect(() => { const timer = setTimeout(() => { setDebouncedSearchTerm(searchTerm); }, 500); // 500ms delay return () => clearTimeout(timer); }, [searchTerm]); // Handle search const handleSearch = (e) => { const value = e.target.value; setSearchTerm(value); // Reset to first page when searching setCurrentPage(1); }; const handleFilterStatus = (e) => { const value = e.target.value; setOrderStatus(value); setCurrentPage(1); }; // Handle pagination const handlePageChange = (page) => { setCurrentPage(page); }; // Handle page size change const handlePageSizeChange = (newPageSize) => { setPageSize(newPageSize); setCurrentPage(1); // Reset to first page when changing page size }; // Calculate pagination info const totalRecords = totalOrders || dataSource.length; const calculatedTotalPages = Math.ceil(totalRecords / pageSize); 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 options = [ { label: "Sort By: Last 7 Days", value: "last7days" }, { label: "Sort By: Last Month", value: "lastmonth" }, { label: "Sort By: Ascending", value: "ascending" }, { label: "Sort By: Descending", value: "descending" }, ]; const [selectedDate, setSelectedDate] = useState(new Date()); const handleDateChange = (date) => { setSelectedDate(date); }; const renderTooltip = (props) => ( Pdf ); const renderExcelTooltip = (props) => ( Excel ); const renderPrinterTooltip = (props) => ( Printer ); const renderRefreshTooltip = (props) => ( Refresh ); const renderCollapseTooltip = (props) => ( Collapse ); return (

Sales List

Manage Your Sales
  • { dispatch(setToogleHeader(!data)); }} >
Add New Sales
{/* /product list */}
option.value === orderStatus ) || null } onChange={handleFilterStatus} />
{loading ? (
Loading...

Loading products...

) : error ? (
Error: {error}
) : ( <> {dataSource && dataSource.map((item, index) => ( ))}
Customer Name Reference Date Status Total Amount Discount Amount Table Number Action
{item.metadata?.customer_name} {item.order_number} {formatDate(item.created_at)} {item.status} {formatRupiah(item.total_amount)} {formatRupiah(item.discount_amount)} {item.table_number ?? 0}
)}
{/* /product list */}
<> {/*add popup */}

Add Sales

Product Qty Purchase Price($) Discount($) Tax(%) Tax Amount($) Unit Cost($) Total Cost(%)

  • Order Tax

    $ 0.00

  • Discount

    $ 0.00

  • Shipping

    $ 0.00

  • Grand Total

    $ 0.00
2000 500 0.00 0.00 0.00 1500
Apple Series 5 Watch
+
3000 400 0.00 0.00 0.00 1700
Lobar Handy
+
2500 500 0.00 0.00 0.00 2000
Order Tax $ 0.00
Discount $ 0.00
Grand Total $ 5200.00
Paid $ 5200.00
Due $ 0.00