Sonali
/
Paisa_vara
1
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

" expense , login amd signup and idd invoice , back deposite ui change"

2112__sonali
sonali 2024-12-21 18:01:20 +05:30
parent a1926389f6
commit ff36597ef7
19 changed files with 744 additions and 520 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
public/index.html
View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<!-- Favicon pointing to local file --> <!-- Favicon pointing to local file -->
<link rel="icon" href="/favicon.ico" /> <!-- <link rel="icon" href="/favicon.ico" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="description" content="" /> <meta name="description" content="" />
@ -28,7 +28,7 @@
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> --> <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -->
<style> <style>
body { body {
background-color: #f9fff6; background-color: #f9fff6;
background-image: url('../src/assets/Image/Pattern.png'); background-image: url('../src/assets/Image/Pattern.png');
background-size: cover; background-size: cover;
@ -40,7 +40,6 @@
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.hideonmobile { .hideonmobile {
display: none; display: none;
@ -61,7 +60,7 @@
} }
</style> </style>
<title>Ezhisab</title> <title>PaisaVara</title>
</head> </head>
<body> <body>

BIN
src/assets/Image/expenses type .png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 530 B

BIN
src/assets/Image/invoiceIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 456 B

BIN
src/assets/Image/loginbackgound.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
src/assets/Image/vendor.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 751 B

14
src/assets/css/App.css
View File

@ -128,6 +128,7 @@ body {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -135,6 +136,7 @@ body {
.nav-item { .nav-item {
margin: 0 15px; margin: 0 15px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }
@ -142,6 +144,7 @@ body {
font-family: "Manrope"; font-family: "Manrope";
font-size: 18px !important; font-size: 18px !important;
color: #002300; color: #002300;
text-decoration: none; text-decoration: none;
} }
.nav-link:hover { .nav-link:hover {
@ -500,7 +503,7 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
.search-container input::placeholder { .search-container input::placeholder {
color: #a9a9a9; color: #ffffff;
} }
.search-container input:focus { .search-container input:focus {
outline: none; outline: none;
@ -722,12 +725,13 @@ h3 {
padding: 8px 12px; padding: 8px 12px;
font-size: 16px; font-size: 16px;
border: none; border: none;
border-radius: 60px; border-radius: 10px;
background-color: #007bff; background-color: #FFAF32;
color: white; color: rgb(0, 0, 0);
cursor: pointer; cursor: pointer;
transition: background-color 0.3s; /* transition: background-color 0.3s; */
} }
.expense-searchcontainerstart { .expense-searchcontainerstart {
width: 90%; width: 90%;
} }

212
src/components/Pages/AppPAges/Dashboard/Invoice/AddInvoice.js
View File

@ -288,12 +288,12 @@ function AddInvoice() {
}, },
{ {
row: 2, row: 2,
column: "col-md-5", column: "col-md-3",
label: "Amount", label: "Amount",
name: "amount", name: "amount",
type: "prefix-input", type: "prefix-input",
placeholder: "Amount", placeholder: "Amount",
prefixText: "USD", // prefixText: "USD",
}, },
{ {
row: 2, row: 2,
@ -309,19 +309,19 @@ function AddInvoice() {
}, },
{ {
row: 4, row: 4,
column: "col-md-12", column: "col-md-6",
label: "Payment Method Options", label: "Payment Method Options",
type: "payment-method-options", type: "payment-method-options",
}, },
{ {
row: 4, row: 4,
column: "col-md-12", column: "col-md-6",
label: "Payment Method Options", label: "Payment Method Options",
type: "pay-bank-options", type: "pay-bank-options",
}, },
{ {
row: 4, row: 5,
column: "col-md-6", column: "col-md-3",
label: "Due Days", label: "Due Days",
type: "select-dueDays", type: "select-dueDays",
name: "due_days", name: "due_days",
@ -331,14 +331,14 @@ function AddInvoice() {
// The "Notes" field is conditionally rendered based on pay_method_status // The "Notes" field is conditionally rendered based on pay_method_status
...(formData.pay_method_status !== "pay_now" ...(formData.pay_method_status !== "pay_now"
? [ ? [
{ // {
row: 5, // row: 5,
column: "col-md-6", // column: "col-md-6",
label: "Notes", // label: "Notes",
type: "text", // type: "text",
name: "note", // name: "note",
placeholder: "Notes", // placeholder: "Notes",
}, // },
] ]
: []), : []),
{ {
@ -450,15 +450,16 @@ function AddInvoice() {
borderBottom: "1px solid #f4f4f4", borderBottom: "1px solid #f4f4f4",
paddingBottom: "16px", paddingBottom: "16px",
height: "50px", height: "50px",
}} }}
> >
<div className="input-group"> <div className="input-groups">
<span className="input-group-text" style={{ border: "none" }}> {/* <span className="input-group-text" style={{ border: "none" }}>
{field.prefixText} {field.prefixText}
</span> </span> */}
<input <input
type="text" // Set input type to 'text' to allow decimals type="text" // Set input type to 'text' to allow decimals
style={{ border: "none" }} style={{ borderBottom : "2px solid #e4e5e7" , marginTop:'30px'}}
className="form-control-borderless" className="form-control-borderless"
name={field.name} name={field.name}
placeholder={field.placeholder} placeholder={field.placeholder}
@ -581,54 +582,69 @@ function AddInvoice() {
) )
); );
case "radio": case "radio":
return ( return (
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '10px 10px', width: "fit-content", borderRadius: '20px', }}> <div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
<label className="me-4">{field.label}</label> <label className="me-4">{field.label}</label>
{field.options.map((option, index) => ( {field.options.map((option, index) => (
<div key={index} className="form-check me-4"> <div
{" "} key={index}
<input className="form-check me-4"
type="radio" style={{
className="form-check-input" cursor: 'pointer',
name={field.name} backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
value={option.value} padding: '5px 15px', // Add padding for better appearance
checked={formData[field.name] === option.value} borderRadius: '20px', // Optional: Round the corners of the label
onChange={handlePaymentMethodChange} }}
/> onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })}
<label className="form-check-label">{option.label}</label> >
</div> <label
))} className="form-check-label"
</div> style={{
); fontWeight: 'normal',
color: formData[field.name] === option.value ? '#ffffff' : '#282e26',
case "payment-method-options": }}
return ( >
formData.pay_method_status === "pay_now" && ( {option.label}
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '10px 10px', width: "fit-content", borderRadius: '20px' }}> </label>
{/* Align items vertically */}
{/* <label className="me-4">Payment Method Options:</label>{" "} */}
{/* Extra space after the main label */}
{paymentMethodOptions.map((option, index) => (
<div key={index} className="form-check me-4">
{" "}
{/* Space between options */}
<input
type="radio"
className="form-check-input"
name="pay_method"
value={option.value}
checked={formData.pay_method === option.value}
onChange={handleChange}
/>
<label className="form-check-label">{option.label}</label>{" "}
{/* Space between radio and label */}
</div> </div>
))} ))}
</div> </div>
) );
);
case "payment-method-options":
return (
formData.pay_method_status === "pay_now" && (
<div className="form-group d-flex" style={{ border: '2px solid #ACB4AA', padding: '5px 10px', width: "fit-content", borderRadius: '40px' }}>
{paymentMethodOptions.map((option, index) => (
<div
key={index}
className="form-check me-4"
style={{
cursor: 'pointer',
backgroundColor: formData.pay_method === option.value ? '#4a5546' : 'transparent',
padding: '5px 25px', // Add padding for better appearance
borderRadius: '20px', // Optional: Round the corners of the label
}}
onClick={() => handleChange({ target: { name: 'pay_method', value: option.value } })}
>
<label
className="form-check-label"
style={{
fontWeight: 'normal',
color: formData.pay_method === option.value ? '#ffffff' : '#282e26',
}}
>
{option.label}
</label>
</div>
))}
</div>
)
);
case "checkbox": case "checkbox":
return ( return (
<div className="form-check"> <div className="form-check">
@ -643,47 +659,47 @@ function AddInvoice() {
</div> </div>
); );
case "pay-bank-options": case "pay-bank-options":
return ( return (
(formData.pay_method === "cheque" || (formData.pay_method === "cheque" || formData.pay_method === "bank") && (
formData.pay_method === "bank") && ( <div className="row align-items-center">
<div className="row mb-3" > <div className="col-md-4">
<div className="col-md-6">
<div className="form-group">
<select
required
className="form-control-borderless"
name="bank"
value={formData.bank}
onChange={handleChange}
>
<option value="">Select Bank</option>
{banks.map((bank) => (
<option key={bank.id} value={bank.id}>
{bank.name}
</option>
))}
</select>
</div>
</div>
{formData.pay_method === "cheque" && ( // Only show this if pay_method is cheque
<div className="col-md-6">
<div className="form-group"> <div className="form-group">
<input <select
required required
type="text"
className="form-control-borderless" className="form-control-borderless"
name="cheque_no" name="bank"
placeholder="Enter Cheque Number" value={formData.bank}
value={formData.cheque_no}
onChange={handleChange} onChange={handleChange}
maxLength={20} >
/> <option value="">Select Bank</option>
{banks.map((bank) => (
<option key={bank.id} value={bank.id}>
{bank.name}
</option>
))}
</select>
</div> </div>
</div> </div>
)}
<div className="col-md-12"> {formData.pay_method === "cheque" && (
<div className="col-md-4">
<div className="form-group">
<input
required
type="text"
className="form-control-borderless"
name="cheque_no"
placeholder="Cheque Number"
value={formData.cheque_no}
onChange={handleChange}
maxLength={20}
/>
</div>
</div>
)}
<div className="col-md-6">
<div className="form-group"> <div className="form-group">
<input <input
className="form-control-borderless" className="form-control-borderless"
@ -765,7 +781,7 @@ function AddInvoice() {
<div className="row mb-3"> <div className="row mb-3">
<div className="col-md-6"> <div className="col-md-6">
<div className="form-group"> <div className="form-group">
<label htmlFor="prepaid_amount">Prepaid Tax</label> {/* <label htmlFor="prepaid_amount">Prepaid Tax</label> */}
<input <input
type="text" type="text"
className="form-control-borderless" className="form-control-borderless"

6
src/components/Pages/AppPAges/Dashboard/Invoice/AtmDeposit.js
View File

@ -216,12 +216,12 @@ function AtmDeposit() {
</div> </div>
<div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}> <div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
<div className="input-group" style={{ width: "100%" }}> <div className="input-group" style={{ width: "100%" }}>
<span className="input-group-text" style={{ border: "none" }}> {/* <span className="input-group-text" style={{ border: "none" }}>
USD USD
</span> </span> */}
<input <input
type="number" type="number"
style={{ border: "none", flex: 1 }} style={{ flex: 1, borderBottom: " 2px solid #e4e5e7" }}
className="form-control-borderless" className="form-control-borderless"
name="cash_amount" name="cash_amount"
placeholder="Amount" placeholder="Amount"

212
src/components/Pages/AppPAges/Dashboard/Invoice/BankDeposit.js
View File

@ -14,13 +14,13 @@ function BankDeposit() {
const { Get, Post } = useApi(); const { Get, Post } = useApi();
const storeid = user.store; const storeid = user.store;
const navigate = useNavigate(); 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 today = new Date().toISOString().split("T")[0]; // Formats date as YYYY-MM-DD
const [isOpen, setIsOpen] = useState(false); const [isOpen, setIsOpen] = useState(false);
const [reloadData, setReloadData] = useState(false); const [reloadData, setReloadData] = useState(false);
const location = useLocation(); const location = useLocation();
useEffect(() => { 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]); }, [location.pathname]);
const dropdownRef = useRef(null); const dropdownRef = useRef(null);
@ -156,46 +156,46 @@ function BankDeposit() {
<div className="dashboard-container"> <div className="dashboard-container">
<ToastContainer /> <ToastContainer />
<div className="d-flex justify-content-between mb-4"> <div className="d-flex justify-content-between mb-4">
<div className="button-groups"> <div className="button-groups">
<button <button
className={`btn ${activeButton === '/' ? 'active' : ''}`} className={`btn ${activeButton === '/' ? 'active' : ''}`}
onClick={() => handleLinkClick('/')} onClick={() => handleLinkClick('/')}
> >
Add Invoice Add Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`} className={`btn ${activeButton === '/payInvoice' ? 'active' : ''}`}
onClick={() => handleLinkClick('/payInvoice')} onClick={() => handleLinkClick('/payInvoice')}
> >
Pay Invoice Pay Invoice
</button> </button>
<button <button
className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/bankDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/bankDeposit')} onClick={() => handleLinkClick('/bankDeposit')}
> >
Bank Deposit Bank Deposit
</button> </button>
<button <button
className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`} className={`btn ${activeButton === '/atmDeposit' ? 'active' : ''}`}
onClick={() => handleLinkClick('/atmDeposit')} onClick={() => handleLinkClick('/atmDeposit')}
> >
ATM Deposit ATM Deposit
</button> </button>
</div> </div>
</div> </div>
<div className="formcontainer"> <div className="formcontainer">
<div <div
className="container" className="container"
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)", boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
borderRadius:"40px" borderRadius: "40px"
}} }}
> >
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<div className="col-md-12 row mb-3"> <div className="col-md-12 row mb-3">
<div className="mb-3 col-md-4"> <div className="mb-3 col-md-4">
@ -224,93 +224,73 @@ function BankDeposit() {
))} ))}
</select> </select>
</div> </div>
<div className="mb-3 col-md-4"> <div className="mb-3 col-md-3">
<input <select
type="text" className="form-select custom-select"
className="form-control-borderless" id="bank_deposite_type"
name="note" name="bank_deposite_type"
value={formData.note} value={formData.bank_deposite_type}
onChange={handleChange} onChange={handleChange}
placeholder="Notes" >
/> <option value="" enable>
</div> Select a type
</div> </option>
<div className="col-md-12 row">
<div className="mb-3 col-md-12">
<div className="d-flex flex-row">
Type:&nbsp; &nbsp; &nbsp;
{["Business cash", "Lottery cash", "Gas cash"].map((type) => ( {["Business cash", "Lottery cash", "Gas cash"].map((type) => (
<div className="form-check me-3" key={type}> <option key={type} value={type}>
<input {type}
className="form-check-input" </option>
type="radio"
name="bank_deposite_type"
id={`type-${type.toLowerCase().replace(" ", "-")}`}
value={type}
checked={formData.bank_deposite_type === type}
onChange={handleChange}
/>
<label
className="form-check-label"
htmlFor={`type-${type.toLowerCase().replace(" ", "-")}`}
>
{type}
</label>
</div>
))} ))}
</div> </select>
</div> </div>
<div className="col-md-12 row mt-4">
<div
className="col-md-12"
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between", // Adjust spacing between items
gap: "50px", // Add gap for consistent spacing
}}
>
<div <div
className="form-group col-md-5" className="form-group "
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
borderBottom: "1px solid #f4f4f4", borderBottom: "2px solid #e4e5e7",
paddingBottom: "16px",
height: "50px", height: "50px",
marginLeft: "10px" flex: "1", // Allow the field to adjust in size
}} }}
> >
<div className="input-group"> <div className="input-group">
<span className="input-group-text" style={{ border: "none" }}>
USD
</span>
<input <input
type="text" // Change to text because we want to handle the regex validation manually type="text"
style={{ border: "none" }} style={{ border: "none", width: "100%" }}
className="form-control-borderless" className="form-control-borderless"
name="cash_amount" name="cash_amount"
placeholder="Cash Amount" placeholder="Cash Amount"
value={formData.cash_amount || ""} value={formData.cash_amount || ""}
onChange={handleChange} onChange={handleChange}
maxLength={10} // Limit input to 10 digits maxLength={10}
/> />
</div> </div>
</div> </div>
<div <div
className="form-group col-md-5" className="form-group "
style={{ style={{
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
borderBottom: "1px solid #f4f4f4", borderBottom: "2px solid #e4e5e7",
paddingBottom: "16px",
height: "50px", height: "50px",
marginLeft: "10px" flex: "1",
}} }}
> >
<div className="input-group"> <div className="input-group">
<span
className="input-group-text"
style={{ border: "none" }}
>
USD
</span>
<input <input
type="number" type="number"
style={{ border: "none" }} style={{ border: "none", width: "100%" }}
className="form-control-borderless" className="form-control-borderless"
name="cheque_amount" name="cheque_amount"
placeholder="Cheque Amount" placeholder="Cheque Amount"
@ -319,22 +299,48 @@ function BankDeposit() {
/> />
</div> </div>
</div> </div>
<div
className="form-group"
style={{
display: "flex",
alignItems: "center",
borderBottom: "2px solid #e4e5e7",
height: "50px",
flex: "1",
}}
>
<input
type="text"
className="form-control-borderless"
name="note"
value={formData.note}
onChange={handleChange}
placeholder="Notes"
style={{
border: "none",
width: "100%",
}}
/>
</div>
</div> </div>
</div> </div>
<div className="d-flex justify-content-end"> <div className="d-flex justify-content-end">
<button <button
type="button" type="button"
className="btn btn-contained me-2" className="btn btn-contained me-2"
onClick={() => navigate("/")} onClick={() => navigate("/")}
style={{border: " 1px solid #282e26", borderRadius:'20px' }} style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
> >
Cancel Cancel
</button> </button>
<button type="submit" className="btn" style={{color:"white", backgroundColor:'#282e26', borderRadius:'20px'}}> <button type="submit" className="btn" style={{ color: "white", backgroundColor: '#282e26', borderRadius: '20px' }}>
Save Save
</button> </button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>

14
src/components/Pages/AppPAges/Dashboard/Invoice/BankDepositTable.js
View File

@ -270,7 +270,7 @@ const BankDepositTable = (props) => {
return ( return (
<div className="pagination"> <div className="pagination">
<button {/* <button
className="pgbtn" className="pgbtn"
onClick={handlePrevPage} onClick={handlePrevPage}
disabled={currentPage === 1} disabled={currentPage === 1}
@ -284,11 +284,11 @@ const BankDepositTable = (props) => {
> >
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" /> <path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
</svg> </svg>
</button> </button> */}
{paginationItems} {paginationItems}
<button {/* <button
className="pgbtn" className="pgbtn"
onClick={handleNextPage} onClick={handleNextPage}
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
@ -302,7 +302,7 @@ const BankDepositTable = (props) => {
> >
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" /> <path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
</svg> </svg>
</button> </button> */}
</div> </div>
); );
}; };
@ -675,10 +675,8 @@ const BankDepositTable = (props) => {
style={{ style={{
paddingLeft: index === 0 ? "30px" : "0", paddingLeft: index === 0 ? "30px" : "0",
cursor: "pointer", cursor: "pointer",
borderTopLeftRadius: index === 0 ? "60px" : "0", backgroundColor:'#282e26',
borderBottomLeftRadius: index === 0 ? "60px" : "0", color:'#ffffff',
borderTopRightRadius: index === 5 ? "60px" : "0",
borderBottomRightRadius: index === 5 ? "60px" : "0",
textAlign: "start", textAlign: "start",
alignContent: "center", alignContent: "center",
}} }}

5
src/components/Pages/AppPAges/Dashboard/Invoice/Invoice.css
View File

@ -94,7 +94,7 @@
.input-group .form-control { .input-group .form-control {
border: none; border: none;
background-color: transparent; /* background-color: transparent; */
outline: none; /* Removes the outline */ outline: none; /* Removes the outline */
} }
@ -310,8 +310,7 @@ input[type="color"]:focus,
width:.30%; /* Make it 30% smaller (i.e., 70% width) */ width:.30%; /* Make it 30% smaller (i.e., 70% width) */
} }
} }
/* style for dropdown --> select type in bank deposite and atm deposite */
.custom-select { .custom-select {
border: none; /* Remove default borders */ border: none; /* Remove default borders */
border-bottom: 2px solid #e4e5e7; /* Add a bottom border */ border-bottom: 2px solid #e4e5e7; /* Add a bottom border */

564
src/components/Pages/AppPAges/Expense/expense.js
View File

@ -9,6 +9,9 @@ import { useNavigate } from "react-router-dom";
import AddExpenseTypeModal from "../ReusableForm/AddExpenseModal"; import AddExpenseTypeModal from "../ReusableForm/AddExpenseModal";
import AddVendorModal from "../ReusableForm/AddVendorModal"; import AddVendorModal from "../ReusableForm/AddVendorModal";
import Swal from "sweetalert2"; import Swal from "sweetalert2";
import invoiceIcon from '../../../../assets/Image/invoiceIcon.png'
import expensetype from '../../../../assets/Image/expenses type .png'
import vendor from '../../../../assets/Image/vendor.png'
export default function Expense() { export default function Expense() {
const { user } = useContext(AuthContext); const { user } = useContext(AuthContext);
@ -448,24 +451,24 @@ export default function Expense() {
try { try {
let response; let response;
if (editingInvoiceId) { if (editingInvoiceId) {
// Editing an existing invoice // Editing an existing invoice
const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId); const originalInvoice = invoices.find((invoice) => invoice.id === editingInvoiceId);
if (!originalInvoice) { if (!originalInvoice) {
console.error("Invoice not found for editingInvoiceId:", editingInvoiceId); console.error("Invoice not found for editingInvoiceId:", editingInvoiceId);
return; return;
} }
// Determine the new status based on payment method and remaining amount // Determine the new status based on payment method and remaining amount
const newRemainingAmount = Math.max(0, originalInvoice.amount - (formData.pay_amount || 0)); const newRemainingAmount = Math.max(0, originalInvoice.amount - (formData.pay_amount || 0));
let newStatus = originalInvoice.status; // Start with the original status let newStatus = originalInvoice.status; // Start with the original status
if (formData.pay_method_status === "pay_now") { if (formData.pay_method_status === "pay_now") {
newStatus = "paid"; // Always "paid" if paid now newStatus = "paid"; // Always "paid" if paid now
} else if (formData.pay_method_status === "pay_later") { } else if (formData.pay_method_status === "pay_later") {
newStatus = "unpaid"; // Ensure unpaid if paying later newStatus = "unpaid"; // Ensure unpaid if paying later
} else if (newRemainingAmount < originalInvoice.amount) { } else if (newRemainingAmount < originalInvoice.amount) {
newStatus = "partially_paid"; // Adjust if partially paid newStatus = "partially_paid"; // Adjust if partially paid
} }
// Ensure pay_amount is included when editing // Ensure pay_amount is included when editing
@ -625,15 +628,148 @@ export default function Expense() {
<div className="main-container"> <div className="main-container">
<div className="d-flex p-2"> <div className="d-flex p-2">
<div className="expensecontainer d-flex flex-column pd-2"> <div className="expensecontainer d-flex flex-column pd-2">
<div className="d-flex justify-content-between align-items-center mb-3"> <div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
<h3 className="mb-1">Expense</h3> <button className="btn cus d-flex align-items-center" onClick={toggleModal}>
<button className="btn btn-primary cus" onClick={toggleModal}>
{" "}
+ Add Invoice + Add Invoice
<img
src={invoiceIcon}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button> </button>
<button style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}>
+ Add New Vendor
<img
src={vendor}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<button style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
>
+ Add Expense Type
<img
src={expensetype}
alt="Invoice Icon"
style={{ width: "20px", height: "20px", marginLeft: "8px" }}
/>
</button>
<div
style={{
display: "flex",
gap: "16px",
justifyContent: "center",
alignItems: "center",
margin: "20px",
}}
>
{/* Invoice due this month */}
<div
style={{
backgroundColor: "#fff8e6",
border: "1px solid #ffd700",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$500
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Invoice due this month
</p>
</div>
{/* Last 7 days sale */}
<div
style={{
backgroundColor: "#e6ffee",
border: "1px solid #00b300",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$1900
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Last 7 days sale
</p>
</div>
{/* Expense this month */}
<div
style={{
backgroundColor: "#ffe6e6",
border: "1px solid #ff4d4d",
borderRadius: "8px",
padding: "16px 24px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "flex-start",
width: "300px",
textAlign: "left",
}}
>
<p style={{ fontSize: "24px", fontWeight: "bold", margin: "0" }}>
$0.00
</p>
<p style={{ fontSize: "14px", color: "#555", margin: "4px 0" }}>
Expense this month
</p>
</div>
</div>
</div> </div>
<div className="table-responsive"> <div className="table-responsive">
<ToastContainer /> <ToastContainer />
<DataTable <DataTable
data={expenseInvoice} data={expenseInvoice}
@ -660,7 +796,7 @@ export default function Expense() {
className="modal-container" className="modal-container"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
style={{ style={{
width: "700px", width: "1200px",
backgroundColor: "white", backgroundColor: "white",
margin: "100px auto", margin: "100px auto",
padding: "20px", padding: "20px",
@ -694,13 +830,16 @@ export default function Expense() {
<div className="modal-body"> <div className="modal-body">
<form> <form>
<div className="form-row form-group col-md-12 position-relative d-flex"> <div className="form-row form-group col-md-12 position-relative d-flex">
<div className="col-md-6" style={{ paddingRight: "10px" }}> <div className="col-md-3" style={{ paddingRight: "10px" }}>
<input <input
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#ffffff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
paddingRight: "10px" paddingRight: "10px",
}} }}
type="date" type="date"
className="form-control" className="form-control"
@ -711,12 +850,16 @@ export default function Expense() {
required required
/> />
</div> </div>
<div className="col-md-6" style={{ paddingRight: "10px" }}> <div className="col-md-3" style={{ paddingRight: "10px" }}>
<input <input
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#ffffff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
outline: "none", // Remove outline to prevent default focus styling
}} }}
type="text" type="text"
className="form-control" className="form-control"
@ -726,15 +869,15 @@ export default function Expense() {
onChange={handleChange} onChange={handleChange}
required required
/> />
</div>
</div>
<div className="d-flex col-md-12"> </div>
<div className="col-md-6" style={{ paddingRight: "10px" }}> <div className="col-md-6" style={{ paddingRight: "10px" }}>
<select <select
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#ffffff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
className="form-control" className="form-control"
@ -764,12 +907,18 @@ export default function Expense() {
))} ))}
</select> </select>
</div> </div>
<div className="col-md-6" style={{ paddingRight: "10px" }}> </div>
<div className="d-flex col-md-12">
<div className="col-md-3" style={{ paddingRight: "10px" }}>
<select <select
className="form-control" className="form-control"
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#ffffff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
name="vendor_department_service_titles" name="vendor_department_service_titles"
@ -778,7 +927,7 @@ export default function Expense() {
id="expenseType" id="expenseType"
required required
> >
<option value="">Select Expense Type</option> <option value="">Expense Type</option>
<option value="add-expense">Add Expense Type</option> <option value="add-expense">Add Expense Type</option>
{filteredExpenseTypes.map((service) => ( {filteredExpenseTypes.map((service) => (
<option key={service.id} value={service.title}> <option key={service.id} value={service.title}>
@ -787,85 +936,207 @@ export default function Expense() {
))} ))}
</select> </select>
</div> </div>
</div>
<div className="d-flex col-md-12" style={{ paddingTop: "15px" }}> <div
<p>Payment Method : </p> className="form-row d-flex col-md-3 "
<label className="radio-inline" style={{ paddingLeft: "10px" }}> style={{
<input backgroundColor: "#ffffff",
type="radio" border: "none", // Remove all borders
name="pay_method_status" borderBottom: "2px solid #ccc", // Set bottom border
value="pay_later" borderRadius: "0px", // Remove border radius
checked={formData.pay_method_status === "pay_later"} height: "52px",
onChange={handlePaymentMethodChange} }}
/>{" "} >
Pay Later <div className="input-group col-md-6">
</label> <div
<label className="radio-inline" style={{ paddingLeft: "10px" }}> className="input-group-prepend"
<input style={{
type="radio" background: "#ffffff",
name="pay_method_status" height: "100%",
value="pay_now"
checked={formData.pay_method_status === "pay_now"}
onChange={handlePaymentMethodChange}
/>{" "}
Pay Now
</label>
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
<input
type="radio"
name="pay_method_status"
value="credit_invoice"
checked={formData.pay_method_status === "credit_invoice"}
onChange={handlePaymentMethodChange}
/>{" "}
Credit Invoice
</label>
</div>
{showPaymentOptions && ( display: "flex",
<div className="d-flex col-md-6 mb-3"> alignItems: "center",
<label className="radio-inline" style={{ paddingLeft: "10px" }}> }}
>
{/* <span
className="input-group-text prefixtext"
style={{
border: "none",
fontSize: "14px",
}}
>
USD
</span> */}
</div>
<input
className="form-control sampletext"
placeholder="Amount"
aria-label="Amount"
aria-describedby="addon-wrapping"
name={editingInvoiceId ? "amount" : "amount"}
value={
editingInvoiceId && formData.pay_amount === undefined
? formData.remaining_amount
: formData.amount || formData.amount
}
onInput={(e) => {
// 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}
/>
</div>
</div>
<div
style={{
border: '2px solid #ACB4AA',
padding: '10px 10px',
width: 'fit-content',
borderRadius: '40px',
// marginTop:'20px',
display: 'flex', // Use flexbox
gap: '10px', // Add spacing between the options
}}
>
<label
className="radio-inline"
>
<input <input
type="radio" type="radio"
name="specificPaymentMethod" name="pay_method_status"
value="cash" value="pay_later"
onChange={handleSpecificPaymentMethodChange} checked={formData.pay_method_status === 'pay_later'}
/>{" "} onChange={handlePaymentMethodChange}
Cash style={{ display: 'none' }}
/>
<span
style={{
backgroundColor: formData.pay_method_status === 'pay_later' ? '#4a5546' : 'transparent',
color: formData.pay_method_status === 'pay_later' ? '#fff' : '#000',
padding: '5px 10px',
borderRadius: '20px',
}}
>
Pay Later
</span>
</label> </label>
<label className="radio-inline" style={{ paddingLeft: "10px" }}> <label
className="radio-inline"
>
<input <input
type="radio" type="radio"
name="specificPaymentMethod" name="pay_method_status"
value="cheque" value="pay_now"
onChange={handleSpecificPaymentMethodChange} checked={formData.pay_method_status === 'pay_now'}
/>{" "} onChange={handlePaymentMethodChange}
Check style={{ display: 'none' }}
/>
<span
style={{
backgroundColor: formData.pay_method_status === 'pay_now' ? '#4a5546' : 'transparent',
color: formData.pay_method_status === 'pay_now' ? '#fff' : '#000',
padding: '5px 10px',
borderRadius: '20px',
}}
>
Pay Now
</span>
</label> </label>
<label className="radio-inline" style={{ paddingLeft: "10px" }}> <label
className="radio-inline"
>
<input <input
type="radio" type="radio"
name="specificPaymentMethod" name="pay_method_status"
value="bank" value="credit_invoice"
onChange={handleSpecificPaymentMethodChange} checked={formData.pay_method_status === 'credit_invoice'}
/>{" "} onChange={handlePaymentMethodChange}
Bank Card/ACH/EFT style={{ display: 'none' }}
/>
<span
style={{
backgroundColor: formData.pay_method_status === 'credit_invoice' ? '#4a5546' : 'transparent',
color: formData.pay_method_status === 'credit_invoice' ? '#fff' : '#000',
padding: '5px 10px',
borderRadius: '20px',
}}
>
Credit Invoice
</span>
</label> </label>
</div> </div>
)} </div>
{showPaymentOptions && (
<div
className="d-flex col-md-6 mb-3"
style={{
border: '2px solid #ACB4AA',
padding: '10px 10px',
width: 'fit-content',
borderRadius: '40px',
display: 'flex', // Use flexbox for inner items
gap: '10px', // Add spacing between the options
marginTop: '20px', // Keep this if you want some space above
}}
>
{[
{ value: "cash", label: "Cash" },
{ value: "cheque", label: "Check" },
{ value: "bank", label: "Bank Card/ACH/EFT" }
].map((method) => (
<label
key={method.value}
className="radio-inline"
style={{
backgroundColor: formData.pay_method === method.value ? "#4a5546" : "transparent",
color: formData.pay_method === method.value ? "white" : "black",
padding: '5px 10px', // Add padding for better appearance
borderRadius: '20px', // Optional: Round the corners of the label
cursor: "pointer",
}}
>
<input
type="radio"
name="specificPaymentMethod"
value={method.value}
onChange={handleSpecificPaymentMethodChange}
style={{ display: 'none' }}
/>
{method.label} {/* Use the label defined in the array */}
</label>
))}
</div>
)}
{(formData.pay_method_status === "pay_later" || {(formData.pay_method_status === "pay_later" ||
formData.pay_method_status === "credit_invoice") && ( formData.pay_method_status === "credit_invoice") && (
<div className="col-md-6 d-flex" style={{ paddingRight: "10px" }}> <div className="col-md-6 d-flex" style={{ paddingRight: "10px", marginTop:'20px' }}>
<select <select
className="form-control col-md-6 me-2" className="form-control col-md-6 me-2"
name="days" name="days"
value={formData.days || ""} value={formData.days || ""}
onChange={handleChange} onChange={handleChange}
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
required required
@ -881,8 +1152,11 @@ export default function Expense() {
<input <input
type="text" type="text"
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "50px", height: "50px",
}} }}
className="form-control d-flex col-md-5" className="form-control d-flex col-md-5"
@ -900,8 +1174,11 @@ export default function Expense() {
<div className="d-flex col-md-4 mt-2"> <div className="d-flex col-md-4 mt-2">
<select <select
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px",
border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
marginRight: "10px", marginRight: "10px",
}} }}
@ -924,8 +1201,10 @@ export default function Expense() {
className="form-control me-2" className="form-control me-2"
placeholder="Check Number" placeholder="Check Number"
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
marginRight: "10px", marginRight: "10px",
}} }}
@ -939,8 +1218,10 @@ export default function Expense() {
<div className="d-flex col-md-4 mt-2"> <div className="d-flex col-md-4 mt-2">
<input <input
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
className="form-control col-md-3" className="form-control col-md-3"
@ -956,8 +1237,10 @@ export default function Expense() {
<div className="d-flex col-md-6 mt-2"> <div className="d-flex col-md-6 mt-2">
<select <select
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
marginRight: "10px", marginRight: "10px",
}} }}
@ -977,8 +1260,10 @@ export default function Expense() {
<div className="d-flex col-md-6 mt-2"> <div className="d-flex col-md-6 mt-2">
<input <input
style={{ style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}} }}
className="form-control col-md-3" className="form-control col-md-3"
@ -1006,8 +1291,10 @@ export default function Expense() {
{formData.prepaid_tax && ( {formData.prepaid_tax && (
<div className="form-row d-flex col-md-6 p-2 mt-2" style={{ <div className="form-row d-flex col-md-6 p-2 mt-2" style={{
backgroundColor: "#0023000C", backgroundColor: "#fff",
borderRadius: "10px", border: "none", // Remove all borders
borderBottom: "2px solid #ccc", // Set bottom border
borderRadius: "0px", // Remove border radius
height: "52px", height: "52px",
}}> }}>
<div className="input-group col-md-6"> <div className="input-group col-md-6">
@ -1021,7 +1308,7 @@ export default function Expense() {
alignItems: "center", alignItems: "center",
}} }}
> >
<span {/* <span
className="input-group-text prefixtext" className="input-group-text prefixtext"
style={{ style={{
border: "none", border: "none",
@ -1029,7 +1316,7 @@ export default function Expense() {
}} }}
> >
USD USD
</span> </span> */}
</div> </div>
<input <input
type="text" type="text"
@ -1051,57 +1338,7 @@ export default function Expense() {
</div> </div>
)} )}
<div
className="form-row d-flex col-md-6 p-2 mt-2"
style={{
backgroundColor: "#0023000C",
borderRadius: "10px",
height: "52px",
}}
>
<div className="input-group col-md-6">
<div
className="input-group-prepend"
style={{
background: "#F5F5F5",
height: "100%",
borderRadius: "10px 0 0 10px",
display: "flex",
alignItems: "center",
}}
>
<span
className="input-group-text prefixtext"
style={{
border: "none",
fontSize: "14px",
}}
>
USD
</span>
</div>
<input
className="form-control sampletext"
placeholder="Amount"
aria-label="Amount"
aria-describedby="addon-wrapping"
name={editingInvoiceId ? "amount" : "amount"}
value={
editingInvoiceId && formData.pay_amount === undefined
? formData.remaining_amount
: formData.amount || formData.amount
}
onInput={(e) => {
// 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}
/>
</div>
</div>
</form> </form>
</div> </div>
@ -1115,7 +1352,8 @@ export default function Expense() {
</button> </button>
<button <button
type="submit" type="submit"
className="btn btn-primary" style={{backgroundColor:'#282E26' ,color:"#fff"}}
className="btn"
onClick={handleSubmit} onClick={handleSubmit}
> >
Submit Submit

92
src/components/Pages/AppPAges/ManageSettings/DataTables.js
View File

@ -130,40 +130,46 @@ const PayrollTable = ({
padding: "5px 10px", padding: "5px 10px",
}, },
unpaid: { unpaid: {
backgroundColor: "#EF3E49", backgroundColor: "#ff2024",
color: "#fff", color: "#fff",
borderRadius: "30px", borderRadius: "10px",
padding: "5px 10px", padding: "5px 20px",
textAlign:'center',
alignItems:'center'
}, },
paid: { paid: {
backgroundColor: "#5856AC", backgroundColor: "#198f51",
color: "#fff", color: "#fff",
borderRadius: "30px", borderRadius: "10px",
padding: "5px 10px", padding: "5px 20px",
textAlign:'center',
alignItems:'center'
}, },
partially_paid: { partially_paid: {
backgroundColor: "#FFB830", backgroundColor: "#0c8ce9",
color: "#fff", color: "#fff",
borderRadius: "30px", borderRadius: "10px",
padding: "5px 10px", padding: "5px 20px",
textAlign:'center',
alignItems:'center'
}, },
}; };
const paymentMethodStyles = { const paymentMethodStyles = {
bank: { backgroundColor: "#57A09C" }, bank: { backgroundColor: "" },
"Business Cash": { backgroundColor: "#38400B" }, "Business Cash": { backgroundColor: "" },
"Credit Card": { backgroundColor: "#28a745" }, "Credit Card": { backgroundColor: "" },
cash: { backgroundColor: "#CAC59D" }, cash: { backgroundColor: "" },
cheque: { backgroundColor: "#38400B" }, cheque: { backgroundColor: "" },
pay_later: { backgroundColor: "#E55477" }, pay_later: { backgroundColor: "" },
pay_now: { backgroundColor: "#A9B0F0" }, pay_now: { backgroundColor: "" },
credit_invoice: { backgroundColor: "#CFCC76" }, credit_invoice: { backgroundColor: "" },
}; };
const getPaymentMethodStyle = (method) => ({ const getPaymentMethodStyle = (method) => ({
...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }), ...(paymentMethodStyles[method] || { backgroundColor: "#6c757d" }),
borderRadius: "30px", borderRadius: "30px",
padding: "5px 10px", padding: "5px 10px",
color: "#fff", color: "#000",
}); });
const downloadCSV = () => { const downloadCSV = () => {
@ -186,17 +192,20 @@ const PayrollTable = ({
return ( return (
<div className="data-table-container"> <div className="data-table-container">
<div className="d-flex mb-3"> <div className="d-flex mb-3">
<div className="expense-searchcontainerstart d-flex"> <div className="expense-searchcontainerstart d-flex">
<div className="search-container"> <div className="search-container"
>
<input <input
type="text" type="text"
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
placeholder="Search" placeholder="Search"
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
/> />
<SearchIcon /> <SearchIcon />
</div> </div>
<button <button
type="button" type="button"
className="btn btn-outline-dark custbtn" className="btn btn-outline-dark custbtn"
@ -218,6 +227,8 @@ const PayrollTable = ({
</svg> </svg>
Export To Excel Export To Excel
</button> </button>
{/* <button className="btn custbtn2" type="submit"> {/* <button className="btn custbtn2" type="submit">
<svg <svg
width="24" width="24"
@ -238,12 +249,39 @@ const PayrollTable = ({
Filter Filter
</button> */} </button> */}
</div> </div>
<div className="expense-searchcontainerend d-flex align-items-center">
<h3 className="me-2">Show</h3> <div style={{marginRight:"60%"}}>
<div
className="expense-search d-flex align-items-center"
style={{
backgroundColor: "#4A5546",
boxShadow: "none",
outline: "none",
width: "auto",
height: "42px",
padding: "8px 12px",
fontSize: "16px",
border: "none",
borderRadius: "10px",
color: "#F4FFEE",
cursor: "pointer",
}}
>
<h6 className="" style={{margin:'10px'}}>Show</h6>
<select <select
name="option" name="option"
id="pageSelect" id="pageSelect"
className="selectoptions" className="selectoptions"
style={{
height: "30px",
padding: "2px 6px",
border: "1px solid #ccc",
backgroundColor: "#282E26",
color: "#fff",
fontSize: "14px",
}}
value={rowsPerPage} value={rowsPerPage}
onChange={(e) => { onChange={(e) => {
setRowsPerPage(Number(e.target.value)); setRowsPerPage(Number(e.target.value));
@ -256,6 +294,8 @@ const PayrollTable = ({
<option value={20}>20</option> <option value={20}>20</option>
</select> </select>
</div> </div>
</div>
</div> </div>
<table className="data-table custom-table rounded-table"> <table className="data-table custom-table rounded-table">
<thead className="table-header"> <thead className="table-header">
@ -486,7 +526,7 @@ const PayrollTable = ({
<nav> <nav>
<ul className="pagination"> <ul className="pagination">
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}> <li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
<span {/* <span
style={{ style={{
width: "30px", width: "30px",
height: "30px", height: "30px",
@ -501,7 +541,7 @@ const PayrollTable = ({
onClick={handlePrev} onClick={handlePrev}
> >
<PrevIcon /> <PrevIcon />
</span> </span> */}
&nbsp; &nbsp;
</li> </li>
{renderPagination()} {renderPagination()}
@ -510,7 +550,7 @@ const PayrollTable = ({
}`} }`}
> >
&nbsp; &nbsp;
<span {/* <span
style={{ style={{
width: "30px", width: "30px",
height: "30px", height: "30px",
@ -525,7 +565,7 @@ const PayrollTable = ({
onClick={handleNext} onClick={handleNext}
> >
<NextIcon /> <NextIcon />
</span> </span> */}
</li> </li>
</ul> </ul>
</nav> </nav>

20
src/components/Pages/AppPAges/ManageSettings/Settings.css
View File

@ -575,6 +575,7 @@ input[type="date"] {
.pagination .page-link { .pagination .page-link {
padding: 10px; padding: 10px;
border: 1px solid #F4F4F4; border: 1px solid #F4F4F4;
background-color: #b6d7a8;
border-radius: 50%; border-radius: 50%;
color: #002300; color: #002300;
text-decoration: none; text-decoration: none;
@ -586,30 +587,17 @@ input[type="date"] {
transition: background-color 0.3s, color 0.3s; transition: background-color 0.3s, color 0.3s;
} }
.pagination .page-link:hover { .pagination .page-link:hover {
background-color: #f2f2f2; background-color: #ffaf32;
} }
.pagination .page-item.active .page-link { .pagination .page-item.active .page-link {
background-color: #FFFFFF; background-color: #ffaf32; /* Yellow background */
color: #002300; color: #002300;
border-color:#fbfbfbfb; border-color:#fbfbfbfb;
border: 1px solid #d3d3d3fb; border: 1px solid #d3d3d3fb;
} }
.pagination .page-item.disabled .page-link { .pagination .page-item.disabled .page-link {
opacity: 0.5; opacity: 0.5;
pointer-events: none; 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;
}

82
src/components/common/FormLayout.js
View File

@ -1,9 +1,9 @@
import React from "react"; import React from "react";
import PropTypes from "prop-types"; 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 { Link } from "react-router-dom";
import "./Formlayout.css"; import "./Formlayout.css";
const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => { const FormLayout = ({ backgroundImageSrc, children, TopImage }) => {
return ( return (
<div <div
style={{ style={{
@ -21,21 +21,7 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
}} }}
> >
<div <div
style={{
display: "flex",
height: "860px",
width: "1440px",
borderRadius: "30px",
overflow: "hidden",
position: "relative",
justifyContent: "center",
alignItems: "center",
backgroundColor: "#ffffff",
flexDirection: "row",
"@media (maxWidth: 768px)": {
flexDirection: "column",
},
}}
> >
{/* Left side: Form */} {/* Left side: Form */}
<div <div
@ -49,6 +35,8 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
boxSizing: "border-box", boxSizing: "border-box",
height: "100%", height: "100%",
overflow: "hidden", overflow: "hidden",
boxShadow: "0px 0px 10px rgba(74, 85, 70, 0.25)",
borderRadius:"40px",
position: "relative", position: "relative",
"@media (maxWidth: 768px)": { "@media (maxWidth: 768px)": {
width: "100%", width: "100%",
@ -56,22 +44,7 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
}, },
}} }}
> >
<div
style={{
position: "absolute",
top: "30px",
left: "70px",
}}
>
<Link to="/login">
<img
src={logoSrc}
alt="Logo"
style={{ height: "70px", width: "100px" }}
/>
</Link>
</div>
<div <div
style={{ style={{
flex: "1", flex: "1",
@ -84,48 +57,7 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
</div> </div>
</div> </div>
{/* Right side: Background image */} {/* Right side: Background image */}
<div
style={{
flex: "1",
backgroundColor: "#DADAF8",
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
position: "relative",
height: "860px", // Updated height
width: "827px", // Updated width
"@media (maxWidth: 768px)": {
display: "none",
},
}}
className="hideonmobile"
>
<img
src={TopImage}
alt="Background"
style={{
width: "461.13px",
height: "120px",
objectFit: "contain",
position: "absolute",
top: 50,
right: 0,
left: 220,
}}
/>
<img
src={backgroundImageSrc}
alt="Background"
style={{
width: "100%",
objectFit: "contain",
position: "absolute",
top: 230,
right: 0,
left: 80,
}}
/>
</div>
</div> </div>
</div> </div>
); );

2
src/components/common/Login.js
View File

@ -6,7 +6,7 @@ import backgroundImage from "../../assets/img/Frame 812.png";
import LoginPage from "./WithUi/LoginPage"; import LoginPage from "./WithUi/LoginPage";
function Login() { function Login() {
return ( return (
<FormLayout logoSrc={logo} backgroundImageSrc={backgroundImage} TopImage={topimage}> <FormLayout logoSrc={logo} >
<LoginPage /> <LoginPage />
</FormLayout> </FormLayout>
); );

19
src/components/common/WithUi/AccountCreate.js
View File

@ -305,6 +305,7 @@ function AccountCreate() {
fontWeight: "700", fontWeight: "700",
lineHeight: "40px", lineHeight: "40px",
textAlign: "left", textAlign: "left",
// width:'500px',
marginTop: "100px", marginTop: "100px",
}} }}
> >
@ -314,8 +315,8 @@ function AccountCreate() {
className="mb-3" className="mb-3"
style={{ fontSize: "14px", color: "#002300" }} style={{ fontSize: "14px", color: "#002300" }}
> >
Start managing your finances effortlessly. Sign up to access your {/* Start managing your finances effortlessly. Sign up to access your
personal ledger and gain control of your transactions with ease! personal ledger and gain control of your transactions with ease! */}
</p> </p>
<div className="mb-3"> <div className="mb-3">
<CustomInput <CustomInput
@ -427,13 +428,14 @@ function AccountCreate() {
className="card-title mb-3" className="card-title mb-3"
style={{ style={{
fontSize: "40px", fontSize: "30px",
fontWeight: "700", fontWeight: "700",
textAlign: "left", textAlign: "left",
marginTop: "80px", marginTop: "80px",
// width:"500px"
}} }}
> >
Enter the Details Enter store details
</p> </p>
</div> </div>
<p <p
@ -444,8 +446,9 @@ function AccountCreate() {
color: "#002300", color: "#002300",
}} }}
> >
Get started with your personal ledger. Fill in your information to track {/* Get started with your personal ledger. */}
transactions and manage your finances seamlessly! {/* Fill in your information to track
transactions and manage your finances seamlessly! */}
</p> </p>
<div className="mb-3"> <div className="mb-3">
<CustomInput <CustomInput
@ -544,11 +547,11 @@ function AccountCreate() {
<div className="mb-3 mt-4"> <div className="mb-3 mt-4">
<button <button
type="submit" type="submit"
className="btn btn-primary rounded-pill" className="btn rounded-pill"
style={{ style={{
width: "100%", width: "100%",
height: "60px", height: "60px",
backgroundColor: "#4545DB", backgroundColor: "#4A5546",
color: "#ffffff", color: "#ffffff",
padding: "10px 0px", padding: "10px 0px",
fontSize: "20px", fontSize: "20px",

11
src/components/common/WithUi/LoginPage.js
View File

@ -62,9 +62,9 @@ const LoginPage = () => {
<p className="card-title mb-3 mt-4" style={{ fontWeight: "700", fontSize: "30px" }}> <p className="card-title mb-3 mt-4" style={{ fontWeight: "700", fontSize: "30px" }}>
Welcome Back Welcome Back
</p> </p>
<p className="mb-3" style={{ fontSize: "14px", color: "#002300" }}> {/* <p className="mb-3" style={{ fontSize: "14px", color: "#002300" }}>
Ready to manage your ledger? Sign in to track your transactions and stay on top of your financials! Ready to manage your ledger? Sign in to track your transactions and stay on top of your financials!
</p> </p> */}
<form onSubmit={loginUser}> <form onSubmit={loginUser}>
<div className="mb-3"> <div className="mb-3">
<CustomInput <CustomInput
@ -120,11 +120,11 @@ const LoginPage = () => {
</div> </div>
<button <button
type="submit" type="submit"
className="btn btn-primary rounded-pill" className="btn rounded-pill"
style={{ style={{
width: "100%", width: "100%",
height: "60px", height: "60px",
backgroundColor: "#4545DB", backgroundColor: "#4A5546",
color: "#ffffff", color: "#ffffff",
padding: "10px 10px", padding: "10px 10px",
fontSize: "20px", fontSize: "20px",
@ -139,7 +139,7 @@ const LoginPage = () => {
</form> </form>
<div className="text-center mt-4"> <div className="text-center mt-4">
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}> <div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}>
<span>New to Ezhisab?</span> <span>New to PaisaVara?</span>
<Link <Link
to="/create-user" to="/create-user"
style={{ style={{
@ -147,6 +147,7 @@ const LoginPage = () => {
marginLeft: "5px", marginLeft: "5px",
fontSize: "22px", fontSize: "22px",
fontWeight: "700", fontWeight: "700",
color:"#000"
}} }}
> >
Create an Account Create an Account

4
src/components/customphoninput/CustomPhoneInput.css
View File

@ -23,7 +23,7 @@
height: 60px; height: 60px;
padding: 28px 26px; padding: 28px 26px;
border-radius: 10px; border-radius: 10px;
border: 1px solid #4545db4d; /* Your border color */ border: 1px solid #9FAA9A; /* Your border color */
opacity: 1; /* Ensure inputs are visible */ opacity: 1; /* Ensure inputs are visible */
box-shadow: none; /* Remove any box-shadow if applied */ box-shadow: none; /* Remove any box-shadow if applied */
font-size: 16px; /* Optional: Set font size for the input text */ font-size: 16px; /* Optional: Set font size for the input text */
@ -32,7 +32,7 @@
.custom-input:focus { .custom-input:focus {
outline: none; outline: none;
border: 1px solid #4545db4d; border: 1px solid #9FAA9A;
} }
.input-error { .input-error {