diff --git a/public/index.html b/public/index.html index 7e1c132..b7751db 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,7 @@ - + @@ -28,10 +28,17 @@ - Ezhisab + PaisaVara diff --git a/src/assets/Image/Background.png b/src/assets/Image/Background.png new file mode 100644 index 0000000..744a5e9 Binary files /dev/null and b/src/assets/Image/Background.png differ diff --git a/src/assets/Image/Pattern.png b/src/assets/Image/Pattern.png new file mode 100644 index 0000000..191aea0 Binary files /dev/null and b/src/assets/Image/Pattern.png differ diff --git a/src/assets/Image/expenses type .png b/src/assets/Image/expenses type .png new file mode 100644 index 0000000..b77a618 Binary files /dev/null and b/src/assets/Image/expenses type .png differ diff --git a/src/assets/Image/invoiceIcon.png b/src/assets/Image/invoiceIcon.png new file mode 100644 index 0000000..01c97d1 Binary files /dev/null and b/src/assets/Image/invoiceIcon.png differ diff --git a/src/assets/Image/loginbackgound.png b/src/assets/Image/loginbackgound.png new file mode 100644 index 0000000..0b73c60 Binary files /dev/null and b/src/assets/Image/loginbackgound.png differ diff --git a/src/assets/Image/vendor.png b/src/assets/Image/vendor.png new file mode 100644 index 0000000..41a5266 Binary files /dev/null and b/src/assets/Image/vendor.png differ diff --git a/src/assets/css/App.css b/src/assets/css/App.css index 2e2b4a9..c89fe4c 100644 --- a/src/assets/css/App.css +++ b/src/assets/css/App.css @@ -128,6 +128,7 @@ body { list-style: none; margin: 0; padding: 0; + display: flex; justify-content: center; align-items: center; @@ -135,6 +136,7 @@ body { .nav-item { margin: 0 15px; position: relative; + display: flex; align-items: center; } @@ -142,6 +144,7 @@ body { font-family: "Manrope"; font-size: 18px !important; color: #002300; + text-decoration: none; } .nav-link:hover { @@ -226,7 +229,7 @@ body { display: flex; align-items: center; position: relative; - gap:120px; + gap:10px; } .avatar { @@ -293,14 +296,16 @@ body { } .nav-menu-drop { white-space: nowrap; /* Prevent wrapping */ + } .nav-menu-drop { list-style-type: none; padding: 0; margin: 0; + margin-left: 80%; position: absolute; - + /* margin-left: 140px; */ top: 100%; /* Positions dropdown below the parent */ left: 0; background-color: #FFFFFF; @@ -318,7 +323,7 @@ body { color: #002300; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); display: block; - + width: auto; box-sizing: border-box; border-bottom: 1px solid rgba(230, 230, 230, 0.3); @@ -356,11 +361,14 @@ body { display: block; margin-bottom: 10px; width: 100%; + } /* Grid system */ .row { display: flex; flex-wrap: wrap; + gap: 40px; + } .col-2 { flex: 0 0 16.6667%; @@ -495,7 +503,7 @@ body { box-sizing: border-box; } .search-container input::placeholder { - color: #a9a9a9; + color: #ffffff; } .search-container input:focus { outline: none; @@ -621,10 +629,16 @@ body { height: 18px; background-color: #4545db; border-color: #4545db; + border-radius: 50%; } .form-check-input[type="radio"] { border-radius: 50%; } + +.form-check-input[type=checkbox] { + border-radius: 50%; +} + .filter-button { background-color: transparent; border: none; @@ -711,12 +725,13 @@ h3 { padding: 8px 12px; font-size: 16px; border: none; - border-radius: 60px; - background-color: #007bff; - color: white; + border-radius: 10px; + background-color: #FFAF32; + color: rgb(0, 0, 0); cursor: pointer; - transition: background-color 0.3s; + /* transition: background-color 0.3s; */ } + .expense-searchcontainerstart { width: 90%; } diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js b/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js index e6232db..a6e8427 100644 --- a/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js +++ b/src/components/Pages/AppPAges/Dashboard/Invoice/ATMDepositTable.js @@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react"; import "./Invoice.css"; import Swal from "sweetalert2"; +import { DatePicker } from "antd"; import { toast } from "react-toastify"; import useApi from "../../../../../utils/api-manager/Helper/useApi"; @@ -18,15 +19,20 @@ const ATMDepositTable = (props) => { const [vendors, setVendors] = useState([]); const [fromDate, setFromDate] = useState(""); const [toDate, setToDate] = useState(""); + const [dateRange, setDateRange] = useState([]); + + const { Get, Delete } = useApi(); + + function filterByTransactionType(dataArray, transactionType) { return dataArray.filter(record => record.transaction_type === transactionType); -} + } useEffect(() => { const fetchInvoices = async () => { await Get("transactionData") .then((response) => { - let type = (props.transaction_type)?props.transaction_type:"Bank Deposit"; + let type = (props.transaction_type) ? props.transaction_type : "Bank Deposit"; setInvoices(filterByTransactionType(response, type)); const uniqueVendors = [ ...new Set(response.map((invoice) => invoice.vendor_department_name)), @@ -39,31 +45,39 @@ const ATMDepositTable = (props) => { }; fetchInvoices(); }, [props.reloadData]); + + useEffect(() => { + let filteredInvoices = invoices; + + // Filter by date range + if (dateRange.length === 2) { + const [start, end] = dateRange; + filteredInvoices = filteredInvoices.filter((invoice) => { + const invoiceDate = new Date(invoice.date); + return invoiceDate >= start && invoiceDate <= end; + }); + } + + setInvoices(filteredInvoices); + }, [dateRange, invoices]); + const applyFilters = () => { let filteredInvoices = invoices; + // Apply status filter if (selectedStatus !== "All") { filteredInvoices = filteredInvoices.filter( (invoice) => invoice.status === selectedStatus ); } + + // Apply vendor filter if (selectedVendor) { filteredInvoices = filteredInvoices.filter( (invoice) => invoice.vendor_department_name === selectedVendor ); } - if (fromDate) { - filteredInvoices = filteredInvoices.filter( - (invoice) => new Date(invoice.date) >= new Date(fromDate) - ); - } - if (toDate) { - filteredInvoices = filteredInvoices.filter( - (invoice) => new Date(invoice.date) <= new Date(toDate) - ); - } - setInvoices(filteredInvoices); }; @@ -118,37 +132,37 @@ const ATMDepositTable = (props) => { }; const handleDelete = async (id) => { const result = await Swal.fire({ - title: "Are you sure?", - text: "You won't be able to revert this!", - icon: "warning", - showCancelButton: true, - confirmButtonColor: "#d33", - cancelButtonColor: "#3085d6", - confirmButtonText: "Yes, delete it!", + title: "Are you sure?", + text: "You won't be able to revert this!", + icon: "warning", + showCancelButton: true, + confirmButtonColor: "#d33", + cancelButtonColor: "#3085d6", + confirmButtonText: "Yes, delete it!", }); // Check if the user clicked the confirm button if (!result.isConfirmed) return; // Exit if the user cancels try { - await Delete(`transactionData`, id); + await Delete(`transactionData`, id); - const updatedInvoices = invoices.filter((invoice) => invoice.id !== id); - setInvoices(updatedInvoices); + const updatedInvoices = invoices.filter((invoice) => invoice.id !== id); + setInvoices(updatedInvoices); - // Show success notification - toast.success("Invoice successfully deleted!"); + // Show success notification + toast.success("Invoice successfully deleted!"); } catch (error) { - if (error.response) { - toast.error(`Error deleting invoice: ${error.response.data}`); - toast.error(`Status code: ${error.response.status}`); - } else if (error.request) { - toast.error("No response received"); - } else { - toast.error(`Error setting up request: ${error.message}`); - } + if (error.response) { + toast.error(`Error deleting invoice: ${error.response.data}`); + toast.error(`Status code: ${error.response.status}`); + } else if (error.request) { + toast.error("No response received"); + } else { + toast.error(`Error setting up request: ${error.message}`); + } } -}; + }; const handleEdit = (invoice) => { @@ -250,7 +264,7 @@ const ATMDepositTable = (props) => { return (
- + */} {paginationItems} - + */}
); }; return (
-
+ +
+ {/* Invoice due this month */} +
+

+ $500 +

+

+ Invoice due this month +

+
+ + {/* Last 7 days sale */} +
+

+ $19,864,63,521 +

+

+ Last 7 days sale +

+
+ + {/* Expense this month */} +
+

+ $0.00 +

+

+ Expense this month +

+
+
+ +
{/* Search Bar */}
{
-
-
+ {/*
{ ))} -
+
*/}
{ }} >
  • -
    +
    { value={toDate} onChange={(e) => setToDate(e.target.value)} /> -
    +
    */}
  • @@ -552,14 +646,21 @@ const ATMDepositTable = (props) => {
    • - + {/* Date Filters using Ant Design RangePicker */} +
    + setDateRange(dates || [])} // Handle null case + format="YYYY-MM-DD" + /> +
    {/* Table of Invoices */} - {["date", "bank_deposite_type", "amount","Transaction Type", "actions"].map( + {["date", "bank_deposite_type", "amount", "Transaction Type", "actions"].map( (header, index) => ( - {currentInvoices.length !== 0? + {currentInvoices.length !== 0 ? currentInvoices.map((invoice) => ( - - + + - - - + + - + - - )) +
  • + handleDelete(invoice.id)} + > + Delete + +
    • + + + + + )) - :( - - - - ) + : ( + + + + ) }
    { style={{ paddingLeft: index === 0 ? "30px" : "0", cursor: "pointer", - borderTopLeftRadius: index === 0 ? "60px" : "0", - borderBottomLeftRadius: index === 0 ? "60px" : "0", - borderTopRightRadius: index === 4 ? "60px" : "0", - borderBottomRightRadius: index === 4 ? "60px" : "0", textAlign: "start", alignContent: "center", + backgroundColor:'#282e26', + color:'#ffffff' }} > {header @@ -610,49 +709,49 @@ const ATMDepositTable = (props) => {
    - {invoice.date} -
    + {invoice.date} + - - {invoice.bank_deposite_type - ? invoice.bank_deposite_type.charAt(0).toUpperCase() + + + + {invoice.bank_deposite_type + ? invoice.bank_deposite_type.charAt(0).toUpperCase() + invoice.bank_deposite_type.slice(1) - : "N/A"} - - {invoice.total_amount} - + : "N/A"} + + {invoice.total_amount} + {invoice.transaction_type ? - invoice.transaction_type.charAt(0).toUpperCase() + invoice.transaction_type.slice(1) : - 'N/A'} - - -
    -
    		+ -
    - No data found -
    + No data found +
    @@ -720,8 +819,8 @@ const getPaymentMethodStyle = (method) => ({ const statusStyles = { All: { backgroundColor: "#4545DB" }, "Business cash": { backgroundColor: "#38400B" }, - "Lottery cash": { backgroundColor: "#CAC59D" }, - "Gas cash": { backgroundColor: "#57A09C" }, + "Lottery cash": { backgroundColor: "#CAC59D" }, + "Gas cash": { backgroundColor: "#57A09C" }, }; const getStatusStyle = (status) => ({ diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js b/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js index 4cc6ee8..7974c61 100644 --- a/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js +++ b/src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js @@ -9,6 +9,8 @@ import TableComponent from "./InvoiceTable"; import useApi from "../../../../../utils/api-manager/Helper/useApi"; import AuthContext from "../../../../../utils/secure-route/AuthContext"; import AddVendorModal from "../../ReusableForm/AddVendorModal"; +import { colors } from "@mui/material"; +import { Space } from "antd"; function AddInvoice() { const { Get, Post } = useApi(); @@ -269,7 +271,7 @@ function AddInvoice() { }, { row: 1, - column: "col-md-5", + column: "col-md-4", label: "Vendor", type: "select-vendor", name: "vendor_department_name", @@ -278,7 +280,7 @@ function AddInvoice() { }, { row: 1, - column: "col-md-5", + column: "col-md-2", label: "Invoice Number", type: "invoice_no", name: "invoice_no", @@ -286,9 +288,18 @@ function AddInvoice() { }, { row: 2, - column: "col-md-12", + column: "col-md-3", + label: "Amount", + name: "amount", + type: "prefix-input", + placeholder: "Amount", + // prefixText: "USD", + }, + { + row: 2, + column: "col-md-5", name: "pay_method_status", - label: "Payment Method:", + // label: "Payment Method:", type: "radio", options: [ { value: "pay_later", label: "Pay Later" }, @@ -297,20 +308,20 @@ function AddInvoice() { ], }, { - row: 3, - column: "col-md-12", + row: 4, + column: "col-md-6", label: "Payment Method Options", type: "payment-method-options", }, { row: 4, - column: "col-md-12", + column: "col-md-6", label: "Payment Method Options", type: "pay-bank-options", }, { - row: 4, - column: "col-md-6", + row: 5, + column: "col-md-3", label: "Due Days", type: "select-dueDays", name: "due_days", @@ -320,14 +331,14 @@ function AddInvoice() { // The "Notes" field is conditionally rendered based on pay_method_status ...(formData.pay_method_status !== "pay_now" ? [ - { - row: 5, - column: "col-md-6", - label: "Notes", - type: "text", - name: "note", - placeholder: "Notes", - }, + // { + // row: 5, + // column: "col-md-6", + // label: "Notes", + // type: "text", + // name: "note", + // placeholder: "Notes", + // }, ] : []), { @@ -337,15 +348,7 @@ function AddInvoice() { type: "checkbox", name: "prepaid_tax", }, - { - row: 6, - column: "col-md-6", - label: "Amount", - name: "amount", - type: "prefix-input", - placeholder: "Amount", - prefixText: "USD", - }, + ]; const paymentMethodOptions = [ @@ -382,7 +385,7 @@ function AddInvoice() { setIsOpen(false); // Close the dropdown after clicking a link navigate(path); // Navigate to the clicked path - + }; const renderField = (field) => { @@ -447,15 +450,16 @@ function AddInvoice() { borderBottom: "1px solid #f4f4f4", paddingBottom: "16px", height: "50px", + }} > -
    - +
    + {/* {field.prefixText} - + */} - - {field.options.map((option, index) => ( -
    - {" "} - - -
    - ))} -
    - ); - - case "payment-method-options": - return ( - formData.pay_method_status === "pay_now" && ( -
    - {/* Align items vertically */} - {" "} - {/* Extra space after the main label */} - {paymentMethodOptions.map((option, index) => ( -
    - {" "} - {/* Space between options */} - - {" "} - {/* Space between radio and label */} + case "radio": + return ( +
    + + {field.options.map((option, index) => ( +
    handlePaymentMethodChange({ target: { name: field.name, value: option.value } })} + > +
    ))}
    - ) - ); + ); + + case "payment-method-options": + return ( + formData.pay_method_status === "pay_now" && ( +
    + {paymentMethodOptions.map((option, index) => ( +
    handleChange({ target: { name: 'pay_method', value: option.value } })} + > + +
    + ))} +
    + ) + ); + + case "checkbox": return (
    @@ -640,47 +659,47 @@ function AddInvoice() {
    ); - case "pay-bank-options": - return ( - (formData.pay_method === "cheque" || - formData.pay_method === "bank") && ( -
    -
    -
    - -
    -
    - - {formData.pay_method === "cheque" && ( // Only show this if pay_method is cheque -
    + case "pay-bank-options": + return ( + (formData.pay_method === "cheque" || formData.pay_method === "bank") && ( +
    +
    - + > + + {banks.map((bank) => ( + + ))} +
    - )} -
    + + {formData.pay_method === "cheque" && ( +
    +
    + +
    +
    + )} + +
    +
    +
    ) ); @@ -702,117 +723,127 @@ function AddInvoice() { return (
    -
    -
    - - - - +
    +
    + + + + +
    -
    -
    +
    +
    +
    + + {/* Render Fields */} + {Object.keys(groupedFields).map((rowKey) => ( +
    + {groupedFields[rowKey].map((field, index) => ( +
    + {renderField(field)} +
    + + ))} + +
    + + ))} + + {/* Prepaid Tax Field */} + {formData.prepaid_tax && ( +
    +
    +
    + {/* */} + { + // Allow only numbers and one decimal point with two digits after it + e.target.value = e.target.value + .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point + .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Ensure only two decimal places + .slice(0, 12); // Limit input length + }} + /> + +
    + +
    + +
    + )} +
    + {/* Action Buttons */} +
    + + +
    +
    +
    +
    +
    + + +
    -
    -
    - {/* Action Buttons */} -
    - - -
    -
    - {/* Render Fields */} - {Object.keys(groupedFields).map((rowKey) => ( -
    - {groupedFields[rowKey].map((field, index) => ( -
    - {renderField(field)} -
    - ))} -
    - ))} - - {/* Prepaid Tax Field */} - {formData.prepaid_tax && ( -
    -
    -
    - - { - // Allow only numbers and one decimal point with two digits after it - e.target.value = e.target.value - .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point - .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Ensure only two decimal places - .slice(0, 12); // Limit input length - }} - /> -
    -
    -
    - )} -
    + +
    -
    - - -
    - -
    -
    -); + ); } export default AddInvoice; \ No newline at end of file diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js b/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js index f4fe8e9..14e4e3d 100644 --- a/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js +++ b/src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js @@ -17,13 +17,13 @@ function AtmDeposit() { const navigate = useNavigate(); const today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD - const [activeButton, setActiveButton] = useState(''); - - const location = useLocation(); - - useEffect(() => { - setActiveButton(location.pathname); // Set the active button based on the current location - }, [location.pathname]); + const [activeButton, setActiveButton] = useState(''); + + const location = useLocation(); + + useEffect(() => { + setActiveButton(location.pathname); // Set the active button based on the current location + }, [location.pathname]); const [isOpen, setIsOpen] = useState(false); const [banks, setBanks] = useState([]); @@ -148,61 +148,47 @@ function AtmDeposit() {
    -
    - - - - +
    + + + + +
    -
    -
    - -
    - - -
    -
    -
    -
    +
    +
    +
    + +
    +
    +
    + {/* + USD + */} + { + e.target.value = e.target.value + .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point + .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places + .slice(0, 12); // Limit input length + }} + /> +
    +
    -
    -
    -
    - Type:      - {["Business cash", "Lottery cash", "Gas cash"].map((type) => ( -
    - - -
    - ))} -
    -
    +
    + + {/*
    { - // Allow only numbers and a decimal point with two digits after it - e.target.value = e.target.value - .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point - .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places - .slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places) - }} - - /> + +
    + + +
    + +
    @@ -310,7 +297,7 @@ function AtmDeposit() { boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", }} > - +
    ); diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js index b7e2d55..801c5af 100644 --- a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js +++ b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js @@ -14,13 +14,13 @@ function BankDeposit() { const { Get, Post } = useApi(); const storeid = user.store; const navigate = useNavigate(); - const [activeButton, setActiveButton] = useState(''); + const [activeButton, setActiveButton] = useState(''); const today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD const [isOpen, setIsOpen] = useState(false); const [reloadData, setReloadData] = useState(false); - const location = useLocation(); + const location = useLocation(); useEffect(() => { - setActiveButton(location.pathname); // Set the active button based on the current location + setActiveButton(location.pathname); // Set the active button based on the current location }, [location.pathname]); const dropdownRef = useRef(null); @@ -156,57 +156,46 @@ function BankDeposit() {
    -
    - - - - -
    -
    +
    + + + + +
    +
    -
    - -
    - - -
    -
    + + +
    @@ -235,93 +224,73 @@ function BankDeposit() { ))}
    -
    - + - -
    + ))} -
    +
    -
    + + +
    - - USD -
    -
    +
    - - USD -
    + +
    + +
    + + +
    + + +
    +
    diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js index d1bb014..a13585a 100644 --- a/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js +++ b/src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js @@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react"; import "./Invoice.css"; import Swal from "sweetalert2"; +import { DatePicker } from "antd"; import { toast } from "react-toastify"; import useApi from "../../../../../utils/api-manager/Helper/useApi"; @@ -18,7 +19,8 @@ const BankDepositTable = (props) => { const [vendors, setVendors] = useState([]); const [fromDate, setFromDate] = useState(""); const [toDate, setToDate] = useState(""); - + const [dateRange, setDateRange] = useState([]); + const { RangePicker } = DatePicker; const { Get, Delete } = useApi(); function filterByTransactionType(dataArray, transactionType) { return dataArray.filter(record => record.transaction_type === transactionType); @@ -40,34 +42,47 @@ const BankDepositTable = (props) => { }; fetchInvoices(); }, [props.reloadData]); - const applyFilters = () => { + useEffect(() => { let filteredInvoices = invoices; + // Apply date range filter + if (dateRange.length === 2) { + const [start, end] = dateRange; + filteredInvoices = filteredInvoices.filter((invoice) => { + const invoiceDate = new Date(invoice.date); + return invoiceDate >= start && invoiceDate <= end; + }); + } + + // Apply other filters on top of date filtering + applyFilters(filteredInvoices); + }, [dateRange]); + + const applyFilters = (filteredInvoices = invoices) => { + let updatedInvoices = filteredInvoices; + + // Apply status filter if (selectedStatus !== "All") { - filteredInvoices = filteredInvoices.filter( + updatedInvoices = updatedInvoices.filter( (invoice) => invoice.bank_deposite_type === selectedStatus ); } + + // Apply vendor filter if (selectedVendor) { - filteredInvoices = filteredInvoices.filter( + updatedInvoices = updatedInvoices.filter( (invoice) => invoice.vendor_department_name === selectedVendor ); } - if (fromDate) { - filteredInvoices = filteredInvoices.filter( - (invoice) => new Date(invoice.date) >= new Date(fromDate) - ); - } - if (toDate) { - filteredInvoices = filteredInvoices.filter( - (invoice) => new Date(invoice.date) <= new Date(toDate) - ); - } - - setInvoices(filteredInvoices); + setInvoices(updatedInvoices); }; + // Update filters when status or vendor changes + useEffect(() => { + applyFilters(); + }, [selectedStatus, selectedVendor]); + const handleSort = (column) => { const direction = sortOrder.column === column && sortOrder.direction === "asc" @@ -255,7 +270,7 @@ const BankDepositTable = (props) => { return (
    - + */} {paginationItems} - + */}
    ); }; return (
    -
    +
    + {/* Invoice due this month */} +
    +

    + $500 +

    +

    + Invoice due this month +

    +
    + + {/* Last 7 days sale */} +
    +

    + $19,864,63,521 +

    +

    + Last 7 days sale +

    +
    + + {/* Expense this month */} +
    +

    + $0.00 +

    +

    + Expense this month +

    +
    +
    + + +
    {/* Search Bar */}
    {
    -
    { ))} -
    +
    */}
    {
    */}
  • -
    @@ -543,7 +638,7 @@ const BankDepositTable = (props) => { onChange={(e) => setToDate(e.target.value)} />
    -
    • +
    */}
    • +
    +
    + setDateRange(dates || [])} // Handle null case + format="YYYY-MM-DD" + /> +
    +
    {/* Table of Invoices */} @@ -571,10 +675,8 @@ const BankDepositTable = (props) => { style={{ paddingLeft: index === 0 ? "30px" : "0", cursor: "pointer", - borderTopLeftRadius: index === 0 ? "60px" : "0", - borderBottomLeftRadius: index === 0 ? "60px" : "0", - borderTopRightRadius: index === 5 ? "60px" : "0", - borderBottomRightRadius: index === 5 ? "60px" : "0", + backgroundColor:'#282e26', + color:'#ffffff', textAlign: "start", alignContent: "center", }} diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css b/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css index 74dd668..60bc52a 100644 --- a/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css +++ b/src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css @@ -6,7 +6,7 @@ .container { padding: 30px; - border-radius: 10px; + border-radius: 40px; } .dropdown-toggle::after { @@ -22,7 +22,7 @@ gap: 10px; /* Adjust the spacing between buttons */ background-color: #ffffff; width: auto; - border-radius: 20px; + border-radius: 44px; padding: 10px 50px; @@ -37,44 +37,10 @@ } -.dash-drop-menu { - white-space: nowrap; /* Prevent wrapping */ - list-style-type: none; - padding: 0; - margin: 0; - position: absolute; - top: 100%; /* Positions dropdown below the parent */ - left: 0; - background-color: #FFFFFF; - border: 1px solid #F6F6F6; - z-index: 1000; - border-radius: 10px; - min-width: 190px; /* Optional minimum width */ - filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); -} - -.dash-drop-menu-item { - padding: 10px 15px; - text-decoration: none; - color: #002300; - filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); - display: block; - width: auto; - font-size: 16px; - box-sizing: border-box; - border-bottom: 1px solid rgba(230, 230, 230, 0.3); - transition: none; -} - -.dash-drop-menu-item:hover { - background-color: transparent; /* Prevent background change */ - color: #002300; /* Maintain original text color */ - cursor: default; /* Maintain default cursor */ -} - .form-container { width: 1328px; height: 461px; + } .form-group { @@ -128,7 +94,7 @@ .input-group .form-control { border: none; - background-color: transparent; + /* background-color: transparent; */ outline: none; /* Removes the outline */ } @@ -344,3 +310,18 @@ input[type="color"]:focus, width:.30%; /* Make it 30% smaller (i.e., 70% width) */ } } +/* style for dropdown --> select type in bank deposite and atm deposite */ +.custom-select { + border: none; /* Remove default borders */ + border-bottom: 2px solid #e4e5e7; /* Add a bottom border */ + border-radius: 0; /* Remove border radius for a flat look */ + outline: none; /* Remove the outline on focus */ + padding: 0.375rem 0.75rem; /* Adjust padding if necessary */ + } + + .custom-select:focus { + border-bottom: 2px solid #e4e5e7; /* Change color on focus */ + box-shadow: none; /* Remove any shadow */ + } + + \ No newline at end of file diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js b/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js index 931398d..1c63487 100644 --- a/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js +++ b/src/components/Pages/AppPAges/Dashboard/Invoice/InvoiceTable.js @@ -4,7 +4,7 @@ import React, { useEffect, useState } from "react"; import "./Invoice.css"; import Swal from "sweetalert2"; - +import { DatePicker } from "antd"; import { toast } from "react-toastify"; import useApi from "../../../../../utils/api-manager/Helper/useApi"; import { FilterButton } from "../../../../../utils/api-manager/Forms/SvgIcons"; @@ -23,6 +23,7 @@ const InvoiceTable = ({ reloadData }) => { const [fromDate, setFromDate] = useState(""); const [toDate, setToDate] = useState(""); const [originalInvoices, setOriginalInvoices] = useState([]); + const [dateRange, setDateRange] = useState([]); const [reloaData, setReloadData] = useState(false); @@ -53,6 +54,22 @@ const InvoiceTable = ({ reloadData }) => { fetchInvoices(); }, [reloadData]); + useEffect(() => { + let filteredInvoices = originalInvoices; + + // Filter by date range + if (dateRange.length === 2) { + const [start, end] = dateRange; + filteredInvoices = filteredInvoices.filter((invoice) => { + const invoiceDate = new Date(invoice.date); + return invoiceDate >= start && invoiceDate <= end; + }); + } + + setInvoices(filteredInvoices); + + }, [dateRange, originalInvoices]); + const applyFilters = () => { let filteredInvoices = originalInvoices; @@ -70,22 +87,10 @@ const InvoiceTable = ({ reloadData }) => { ); } - // Apply date filters - if (fromDate) { - filteredInvoices = filteredInvoices.filter( - (invoice) => new Date(invoice.date) >= new Date(fromDate) - ); - } - if (toDate) { - filteredInvoices = filteredInvoices.filter( - (invoice) => new Date(invoice.date) <= new Date(toDate) - ); - } - - // Update the state with filtered invoices setInvoices(filteredInvoices); }; + const handleSort = (column) => { const direction = sortOrder.column === column && sortOrder.direction === "asc" @@ -279,15 +284,100 @@ const InvoiceTable = ({ reloadData }) => { return (
    -
    +
    + {/* Invoice due this month */} +
    +

    + $500 +

    +

    + Invoice due this month +

    +
    + + {/* Last 7 days sale */} +
    +

    + $19,864,63,521 +

    +

    + Last 7 days sale +

    +
    + + {/* Expense this month */} +
    +

    + $0.00 +

    +

    + Expense this month +

    +
    +
    + +
    + +
    +
    + +
    +
    { className="form-control" placeholder="Search" value={searchQuery} + onChange={(e) => setSearchQuery(e.target.value)} />
    +
    - +
    -
    + + +
    + {/*
    { ))} -
    +
    */}
    {
    +
  • -
    @@ -495,7 +593,7 @@ const InvoiceTable = ({ reloadData }) => { onChange={(e) => setToDate(e.target.value)} />
    -
    • +
    */}
    • +
    + {/* Date Filters using Ant Design RangePicker */} +
    + setDateRange(dates || [])} // Handle null case + format="YYYY-MM-DD" + /> +
    +
    {/* Table of Invoices */} @@ -642,21 +750,21 @@ const InvoiceTable = ({ reloadData }) => { }; const paymentMethodStyles = { - bank: { backgroundColor: "#57A09C" }, - "Business Cash": { backgroundColor: "#38400B" }, - "Credit Card": { backgroundColor: "#28a745" }, - cash: { backgroundColor: "#CAC59D" }, - cheque: { backgroundColor: "#38400B" }, - pay_later: { backgroundColor: "#E55477" }, - pay_now: { backgroundColor: "#A9B0F0" }, - credit_invoice: { backgroundColor: "#CFCC76" }, + bank: { backgroundColor: "" }, + "Business Cash": { backgroundColor: "" }, + "Credit Card": { backgroundColor: "" }, + cash: { backgroundColor: "" }, + cheque: { backgroundColor: "" }, + pay_later: { backgroundColor: "" }, + pay_now: { backgroundColor: "" }, + credit_invoice: { backgroundColor: "" }, }; const getPaymentMethodStyle = (method) => ({ ...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }), borderRadius: "5px", padding: "10px 20px", - color: "#fff", + color: "#000", }); const statusStyles = { diff --git a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js index 7da52ca..08d8b96 100644 --- a/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js +++ b/src/components/Pages/AppPAges/Dashboard/Invoice/PayInvoice.js @@ -334,26 +334,16 @@ function PayInvoice() { style={{ backgroundColor: "white", boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", + borderRadius:"40px" }} >
    -
    - - -
    +
    -
    -
    +
    +
    */}
    -
    - Payment Method: -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
    -
    + +
    + +
    + + + + +
    + {['cash', 'cheque', 'bank'].map((method) => ( +
    + + +
    + ))} +
    + + +
    + {/*
    -
    +
    */} -
    - - -
    +
    -
    +
    {formData.pay_method === "cheque" && ( -
    +
    -
    +
    -
    -
    -
    +
    - + {filteredExpenseTypes.map((service) => (
    -
    -
    -

    Payment Method :

    - - - -
    +
    +
    +
    -
    + { + // Allow only numbers and a decimal point with two digits after it + e.target.value = e.target.value + .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point + .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places + .slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places) + }} + onChange={handleChange} + /> +
    +
    +
    + -
    - )} +
    + + + + {showPaymentOptions && ( +
    + {[ + { value: "cash", label: "Cash" }, + { value: "cheque", label: "Check" }, + { value: "bank", label: "Bank Card/ACH/EFT" } + ].map((method) => ( + + ))} +
    +)} + + {(formData.pay_method_status === "pay_later" || formData.pay_method_status === "credit_invoice") && ( -
    +
    @@ -1021,7 +1308,7 @@ export default function Expense() { alignItems: "center", }} > - USD - + */}
    )} -
    -
    -
    - - USD - -
    - { - // Allow only numbers and a decimal point with two digits after it - e.target.value = e.target.value - .replace(/[^0-9.]/g, '') // Remove non-numeric characters except the decimal point - .replace(/^(\d*\.?\d{0,2}).*/g, '$1') // Allow only two decimal places - .slice(0, 12); // Limit input length (10 digits + 1 decimal + 2 decimal places) - }} - onChange={handleChange} - /> -
    -
    +
    @@ -1115,7 +1352,8 @@ export default function Expense() { + + {/*
    -
    -

    Show

    + +
    +
    +
    Show
    +
    +
    @@ -486,7 +526,7 @@ const PayrollTable = ({ diff --git a/src/components/Pages/AppPAges/ManageSettings/Settings.css b/src/components/Pages/AppPAges/ManageSettings/Settings.css index d0d40dc..5e7170b 100644 --- a/src/components/Pages/AppPAges/ManageSettings/Settings.css +++ b/src/components/Pages/AppPAges/ManageSettings/Settings.css @@ -52,6 +52,7 @@ background-color: #ffffff; } .form-check-input { + cursor: pointer; } /*===========================================================================Bank container=================================================================*/ @@ -574,6 +575,7 @@ input[type="date"] { .pagination .page-link { padding: 10px; border: 1px solid #F4F4F4; + background-color: #b6d7a8; border-radius: 50%; color: #002300; text-decoration: none; @@ -585,30 +587,17 @@ input[type="date"] { transition: background-color 0.3s, color 0.3s; } .pagination .page-link:hover { - background-color: #f2f2f2; + background-color: #ffaf32; } .pagination .page-item.active .page-link { - background-color: #FFFFFF; + background-color: #ffaf32; /* Yellow background */ color: #002300; border-color:#fbfbfbfb; border: 1px solid #d3d3d3fb; } .pagination .page-item.disabled .page-link { opacity: 0.5; + pointer-events: none; } -.pagination .prev-next { - height: 36px; - display: flex; - align-items: center; - justify-content: center; - border-radius: 50%; - border: 1px solid #F4F4F4; - color: #002300; - cursor: pointer; - transition: background-color 0.3s, color 0.3s; -} -.pagination .prev-next:hover { - background-color: #f2f2f2; -} diff --git a/src/components/common/FormLayout.js b/src/components/common/FormLayout.js index 918ba1a..34fa414 100644 --- a/src/components/common/FormLayout.js +++ b/src/components/common/FormLayout.js @@ -1,9 +1,9 @@ import React from "react"; import PropTypes from "prop-types"; -import backgroundimg from "../../assets/img/BackgroundBody.png"; +import backgroundimg from "../../assets/Image/loginbackgound.png"; import { Link } from "react-router-dom"; import "./Formlayout.css"; -const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => { +const FormLayout = ({ backgroundImageSrc, children, TopImage }) => { return (
    { }} >
    {/* Left side: Form */}
    { boxSizing: "border-box", height: "100%", overflow: "hidden", + boxShadow: "0px 0px 10px rgba(74, 85, 70, 0.25)", + borderRadius:"40px", position: "relative", "@media (maxWidth: 768px)": { width: "100%", @@ -56,22 +44,7 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => { }, }} > -
    - - Logo - - -
    +
    {
    {/* Right side: Background image */} -
    - Background - Background -
    +
    ); diff --git a/src/components/common/Header.js b/src/components/common/Header.js index 0762401..940456b 100644 --- a/src/components/common/Header.js +++ b/src/components/common/Header.js @@ -14,7 +14,7 @@ import shopeKeeper from "../../assets/img/shopkeeper.png"; const Header = () => { const { logOutUser } = useContext(AuthContext); - const [avatarDropdownOpen, setAvatarDropdownOpen] = useState(false); + const [settingsDropOpen, setsettingsDropOpen] = useState(false); const [settingsDropdownOpen, setSettingsDropdownOpen] = useState(false); const [generalDropdownOpen, setGeneralDropdownOpen] = useState(false); const [expenseDropdownOpen, setExpenseDropdownOpen] = useState(false); @@ -47,6 +47,7 @@ const Header = () => { try { const checkuser = await Get(`checkUserType`); setUserRole(checkuser.role_name); + // console.log() } catch (error) { console.error(error); } @@ -82,7 +83,7 @@ const Header = () => { const response = await Post("selectStore", { store_id: storeId }); navigate("/"); setDropdownVisible(false); - setAvatarDropdownOpen(false); + setsettingsDropOpen(false); } catch (error) { console.error("Error selecting store:", error); } finally { @@ -133,7 +134,7 @@ const Header = () => { } }; const closeDropdowns = () => { - setAvatarDropdownOpen(false); + setsettingsDropOpen(false); setSettingsDropdownOpen(false); setGeneralDropdownOpen(false); setExpenseDropdownOpen(false); @@ -577,25 +578,25 @@ const Header = () => { src={shopeKeeper} className="avatar" alt="User Avatar" - onClick={() => { - closeDropdowns(); - setAvatarDropdownOpen(!avatarDropdownOpen); - }} + /> - + {/* Display role_name here */} +
    + {userRole && {userRole}} +
    {/* Settings Icon Button */} - - {avatarDropdownOpen && ( + + {settingsDropOpen && (
    • @@ -658,6 +659,7 @@ const Header = () => { + ); }; diff --git a/src/components/common/Login.js b/src/components/common/Login.js index c43534e..52e576a 100644 --- a/src/components/common/Login.js +++ b/src/components/common/Login.js @@ -6,7 +6,7 @@ import backgroundImage from "../../assets/img/Frame 812.png"; import LoginPage from "./WithUi/LoginPage"; function Login() { return ( - + ); diff --git a/src/components/common/WithUi/AccountCreate.js b/src/components/common/WithUi/AccountCreate.js index 562acf8..adb8c08 100644 --- a/src/components/common/WithUi/AccountCreate.js +++ b/src/components/common/WithUi/AccountCreate.js @@ -305,6 +305,7 @@ function AccountCreate() { fontWeight: "700", lineHeight: "40px", textAlign: "left", + // width:'500px', marginTop: "100px", }} > @@ -314,8 +315,8 @@ function AccountCreate() { className="mb-3" style={{ fontSize: "14px", color: "#002300" }} > - Start managing your finances effortlessly. Sign up to access your - personal ledger and gain control of your transactions with ease! + {/* Start managing your finances effortlessly. Sign up to access your + personal ledger and gain control of your transactions with ease! */}

      - Enter the Details + Enter store details

      - Get started with your personal ledger. Fill in your information to track - transactions and manage your finances seamlessly! + {/* Get started with your personal ledger. */} + {/* Fill in your information to track + transactions and manage your finances seamlessly! */}