" expense , login amd signup and idd invoice , back deposite ui change"
parent
a1926389f6
commit
ff36597ef7
|
|
@ -4,7 +4,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<!-- 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="theme-color" content="#000000" />
|
||||
<meta name="description" content="" />
|
||||
|
|
@ -40,7 +40,6 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hideonmobile {
|
||||
display: none;
|
||||
|
|
@ -61,7 +60,7 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<title>Ezhisab</title>
|
||||
<title>PaisaVara</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 530 B |
Binary file not shown.
|
After Width: | Height: | Size: 456 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 751 B |
|
|
@ -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 {
|
||||
|
|
@ -500,7 +503,7 @@ body {
|
|||
box-sizing: border-box;
|
||||
}
|
||||
.search-container input::placeholder {
|
||||
color: #a9a9a9;
|
||||
color: #ffffff;
|
||||
}
|
||||
.search-container input:focus {
|
||||
outline: none;
|
||||
|
|
@ -722,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%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -288,12 +288,12 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 2,
|
||||
column: "col-md-5",
|
||||
column: "col-md-3",
|
||||
label: "Amount",
|
||||
name: "amount",
|
||||
type: "prefix-input",
|
||||
placeholder: "Amount",
|
||||
prefixText: "USD",
|
||||
// prefixText: "USD",
|
||||
},
|
||||
{
|
||||
row: 2,
|
||||
|
|
@ -309,19 +309,19 @@ function AddInvoice() {
|
|||
},
|
||||
{
|
||||
row: 4,
|
||||
column: "col-md-12",
|
||||
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",
|
||||
|
|
@ -331,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",
|
||||
// },
|
||||
]
|
||||
: []),
|
||||
{
|
||||
|
|
@ -450,15 +450,16 @@ function AddInvoice() {
|
|||
borderBottom: "1px solid #f4f4f4",
|
||||
paddingBottom: "16px",
|
||||
height: "50px",
|
||||
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<span className="input-group-text" style={{ border: "none" }}>
|
||||
<div className="input-groups">
|
||||
{/* <span className="input-group-text" style={{ border: "none" }}>
|
||||
{field.prefixText}
|
||||
</span>
|
||||
</span> */}
|
||||
<input
|
||||
type="text" // Set input type to 'text' to allow decimals
|
||||
style={{ border: "none" }}
|
||||
style={{ borderBottom : "2px solid #e4e5e7" , marginTop:'30px'}}
|
||||
className="form-control-borderless"
|
||||
name={field.name}
|
||||
placeholder={field.placeholder}
|
||||
|
|
@ -583,52 +584,67 @@ function AddInvoice() {
|
|||
|
||||
case "radio":
|
||||
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>
|
||||
{field.options.map((option, index) => (
|
||||
<div key={index} className="form-check me-4">
|
||||
{" "}
|
||||
<input
|
||||
type="radio"
|
||||
className="form-check-input"
|
||||
name={field.name}
|
||||
value={option.value}
|
||||
checked={formData[field.name] === option.value}
|
||||
onChange={handlePaymentMethodChange}
|
||||
/>
|
||||
<label className="form-check-label">{option.label}</label>
|
||||
<div
|
||||
key={index}
|
||||
className="form-check me-4"
|
||||
style={{
|
||||
cursor: 'pointer',
|
||||
backgroundColor: formData[field.name] === option.value ? '#4a5546' : 'transparent',
|
||||
padding: '5px 15px', // Add padding for better appearance
|
||||
borderRadius: '20px', // Optional: Round the corners of the label
|
||||
}}
|
||||
onClick={() => handlePaymentMethodChange({ target: { name: field.name, value: option.value } })}
|
||||
>
|
||||
<label
|
||||
className="form-check-label"
|
||||
style={{
|
||||
fontWeight: 'normal',
|
||||
color: formData[field.name] === option.value ? '#ffffff' : '#282e26',
|
||||
}}
|
||||
>
|
||||
{option.label}
|
||||
</label>
|
||||
</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: '10px 10px', width: "fit-content", borderRadius: '20px' }}>
|
||||
{/* Align items vertically */}
|
||||
{/* <label className="me-4">Payment Method Options:</label>{" "} */}
|
||||
{/* Extra space after the main label */}
|
||||
<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">
|
||||
{" "}
|
||||
{/* 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
|
||||
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":
|
||||
return (
|
||||
<div className="form-check">
|
||||
|
|
@ -645,10 +661,9 @@ function AddInvoice() {
|
|||
|
||||
case "pay-bank-options":
|
||||
return (
|
||||
(formData.pay_method === "cheque" ||
|
||||
formData.pay_method === "bank") && (
|
||||
<div className="row mb-3" >
|
||||
<div className="col-md-6">
|
||||
(formData.pay_method === "cheque" || formData.pay_method === "bank") && (
|
||||
<div className="row align-items-center">
|
||||
<div className="col-md-4">
|
||||
<div className="form-group">
|
||||
<select
|
||||
required
|
||||
|
|
@ -667,15 +682,15 @@ function AddInvoice() {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{formData.pay_method === "cheque" && ( // Only show this if pay_method is cheque
|
||||
<div className="col-md-6">
|
||||
{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="Enter Cheque Number"
|
||||
placeholder="Cheque Number"
|
||||
value={formData.cheque_no}
|
||||
onChange={handleChange}
|
||||
maxLength={20}
|
||||
|
|
@ -683,7 +698,8 @@ function AddInvoice() {
|
|||
</div>
|
||||
</div>
|
||||
)}
|
||||
<div className="col-md-12">
|
||||
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<input
|
||||
className="form-control-borderless"
|
||||
|
|
@ -765,7 +781,7 @@ function AddInvoice() {
|
|||
<div className="row mb-3">
|
||||
<div className="col-md-6">
|
||||
<div className="form-group">
|
||||
<label htmlFor="prepaid_amount">Prepaid Tax</label>
|
||||
{/* <label htmlFor="prepaid_amount">Prepaid Tax</label> */}
|
||||
<input
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
|
|
|
|||
|
|
@ -216,12 +216,12 @@ function AtmDeposit() {
|
|||
</div>
|
||||
<div className="col-md-3 mb-3" style={{ display: "flex", alignItems: "center" }}>
|
||||
<div className="input-group" style={{ width: "100%" }}>
|
||||
<span className="input-group-text" style={{ border: "none" }}>
|
||||
{/* <span className="input-group-text" style={{ border: "none" }}>
|
||||
USD
|
||||
</span>
|
||||
</span> */}
|
||||
<input
|
||||
type="number"
|
||||
style={{ border: "none", flex: 1 }}
|
||||
style={{ flex: 1, borderBottom: " 2px solid #e4e5e7" }}
|
||||
className="form-control-borderless"
|
||||
name="cash_amount"
|
||||
placeholder="Amount"
|
||||
|
|
|
|||
|
|
@ -189,7 +189,7 @@ function BankDeposit() {
|
|||
style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.1)",
|
||||
borderRadius:"40px"
|
||||
borderRadius: "40px"
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleSubmit}>
|
||||
|
|
@ -224,93 +224,73 @@ function BankDeposit() {
|
|||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="mb-3 col-md-4">
|
||||
<input
|
||||
type="text"
|
||||
className="form-control-borderless"
|
||||
name="note"
|
||||
value={formData.note}
|
||||
<div className="mb-3 col-md-3">
|
||||
<select
|
||||
className="form-select custom-select"
|
||||
id="bank_deposite_type"
|
||||
name="bank_deposite_type"
|
||||
value={formData.bank_deposite_type}
|
||||
onChange={handleChange}
|
||||
placeholder="Notes"
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
<option value="" enable>
|
||||
Select a type
|
||||
</option>
|
||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="col-md-12 row">
|
||||
<div className="mb-3 col-md-12">
|
||||
<div className="d-flex flex-row">
|
||||
Type:
|
||||
{["Business cash", "Lottery cash", "Gas cash"].map((type) => (
|
||||
<div className="form-check me-3" key={type}>
|
||||
<input
|
||||
className="form-check-input"
|
||||
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>
|
||||
</div>
|
||||
<div className="col-md-12 row mt-4">
|
||||
|
||||
<div
|
||||
className="form-group col-md-5"
|
||||
className="col-md-12"
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid #f4f4f4",
|
||||
paddingBottom: "16px",
|
||||
justifyContent: "space-between", // Adjust spacing between items
|
||||
gap: "50px", // Add gap for consistent spacing
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="form-group "
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
borderBottom: "2px solid #e4e5e7",
|
||||
height: "50px",
|
||||
marginLeft: "10px"
|
||||
flex: "1", // Allow the field to adjust in size
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<span className="input-group-text" style={{ border: "none" }}>
|
||||
USD
|
||||
</span>
|
||||
<input
|
||||
type="text" // Change to text because we want to handle the regex validation manually
|
||||
style={{ border: "none" }}
|
||||
type="text"
|
||||
style={{ border: "none", width: "100%" }}
|
||||
className="form-control-borderless"
|
||||
name="cash_amount"
|
||||
placeholder="Cash Amount"
|
||||
value={formData.cash_amount || ""}
|
||||
onChange={handleChange}
|
||||
maxLength={10} // Limit input to 10 digits
|
||||
maxLength={10}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="form-group col-md-5"
|
||||
className="form-group "
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid #f4f4f4",
|
||||
paddingBottom: "16px",
|
||||
borderBottom: "2px solid #e4e5e7",
|
||||
height: "50px",
|
||||
marginLeft: "10px"
|
||||
flex: "1",
|
||||
}}
|
||||
>
|
||||
<div className="input-group">
|
||||
<span
|
||||
className="input-group-text"
|
||||
style={{ border: "none" }}
|
||||
>
|
||||
USD
|
||||
</span>
|
||||
<input
|
||||
type="number"
|
||||
style={{ border: "none" }}
|
||||
style={{ border: "none", width: "100%" }}
|
||||
className="form-control-borderless"
|
||||
name="cheque_amount"
|
||||
placeholder="Cheque Amount"
|
||||
|
|
@ -319,18 +299,44 @@ function BankDeposit() {
|
|||
/>
|
||||
</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 className="d-flex justify-content-end">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-contained me-2"
|
||||
onClick={() => navigate("/")}
|
||||
style={{border: " 1px solid #282e26", borderRadius:'20px' }}
|
||||
style={{ border: " 1px solid #282e26", borderRadius: '20px' }}
|
||||
>
|
||||
Cancel
|
||||
</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
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -270,7 +270,7 @@ const BankDepositTable = (props) => {
|
|||
|
||||
return (
|
||||
<div className="pagination">
|
||||
<button
|
||||
{/* <button
|
||||
className="pgbtn"
|
||||
onClick={handlePrevPage}
|
||||
disabled={currentPage === 1}
|
||||
|
|
@ -284,11 +284,11 @@ const BankDepositTable = (props) => {
|
|||
>
|
||||
<path d="M4 0L1.74846e-07 4L4 8L4 0Z" fill="#002300" />
|
||||
</svg>
|
||||
</button>
|
||||
</button> */}
|
||||
|
||||
{paginationItems}
|
||||
|
||||
<button
|
||||
{/* <button
|
||||
className="pgbtn"
|
||||
onClick={handleNextPage}
|
||||
disabled={currentPage === totalPages}
|
||||
|
|
@ -302,7 +302,7 @@ const BankDepositTable = (props) => {
|
|||
>
|
||||
<path d="M0 8L4 4L-3.49691e-07 0L0 8Z" fill="#002300" />
|
||||
</svg>
|
||||
</button>
|
||||
</button> */}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
@ -675,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",
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@
|
|||
|
||||
.input-group .form-control {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
/* background-color: transparent; */
|
||||
outline: none; /* Removes the outline */
|
||||
|
||||
}
|
||||
|
|
@ -310,8 +310,7 @@ 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 */
|
||||
|
|
|
|||
|
|
@ -9,6 +9,9 @@ import { useNavigate } from "react-router-dom";
|
|||
import AddExpenseTypeModal from "../ReusableForm/AddExpenseModal";
|
||||
import AddVendorModal from "../ReusableForm/AddVendorModal";
|
||||
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() {
|
||||
const { user } = useContext(AuthContext);
|
||||
|
|
@ -625,15 +628,148 @@ export default function Expense() {
|
|||
<div className="main-container">
|
||||
<div className="d-flex p-2">
|
||||
<div className="expensecontainer d-flex flex-column pd-2">
|
||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||
<h3 className="mb-1">Expense</h3>
|
||||
<button className="btn btn-primary cus" onClick={toggleModal}>
|
||||
{" "}
|
||||
<div className="d-flex align-items-center mb-3" style={{ gap: "10px" }}>
|
||||
<button className="btn cus d-flex align-items-center" onClick={toggleModal}>
|
||||
|
||||
+ Add Invoice
|
||||
<img
|
||||
src={invoiceIcon}
|
||||
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 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 className="table-responsive">
|
||||
|
||||
|
||||
<ToastContainer />
|
||||
<DataTable
|
||||
data={expenseInvoice}
|
||||
|
|
@ -660,7 +796,7 @@ export default function Expense() {
|
|||
className="modal-container"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
style={{
|
||||
width: "700px",
|
||||
width: "1200px",
|
||||
backgroundColor: "white",
|
||||
margin: "100px auto",
|
||||
padding: "20px",
|
||||
|
|
@ -694,13 +830,16 @@ export default function Expense() {
|
|||
<div className="modal-body">
|
||||
<form>
|
||||
<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
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
paddingRight: "10px"
|
||||
paddingRight: "10px",
|
||||
|
||||
}}
|
||||
type="date"
|
||||
className="form-control"
|
||||
|
|
@ -711,12 +850,16 @@ export default function Expense() {
|
|||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||
<div className="col-md-3" style={{ paddingRight: "10px" }}>
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
outline: "none", // Remove outline to prevent default focus styling
|
||||
|
||||
}}
|
||||
type="text"
|
||||
className="form-control"
|
||||
|
|
@ -726,15 +869,15 @@ export default function Expense() {
|
|||
onChange={handleChange}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex col-md-12">
|
||||
</div>
|
||||
<div className="col-md-6" style={{ paddingRight: "10px" }}>
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
}}
|
||||
className="form-control"
|
||||
|
|
@ -764,12 +907,18 @@ export default function Expense() {
|
|||
))}
|
||||
</select>
|
||||
</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
|
||||
className="form-control"
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
}}
|
||||
name="vendor_department_service_titles"
|
||||
|
|
@ -778,7 +927,7 @@ export default function Expense() {
|
|||
id="expenseType"
|
||||
required
|
||||
>
|
||||
<option value="">Select Expense Type</option>
|
||||
<option value="">Expense Type</option>
|
||||
<option value="add-expense">Add Expense Type</option>
|
||||
{filteredExpenseTypes.map((service) => (
|
||||
<option key={service.id} value={service.title}>
|
||||
|
|
@ -787,85 +936,207 @@ export default function Expense() {
|
|||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="d-flex col-md-12" style={{ paddingTop: "15px" }}>
|
||||
<p>Payment Method : </p>
|
||||
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<div
|
||||
className="form-row d-flex col-md-3 "
|
||||
style={{
|
||||
backgroundColor: "#ffffff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
}}
|
||||
>
|
||||
<div className="input-group col-md-6">
|
||||
<div
|
||||
className="input-group-prepend"
|
||||
style={{
|
||||
background: "#ffffff",
|
||||
height: "100%",
|
||||
|
||||
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>
|
||||
<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
|
||||
type="radio"
|
||||
name="pay_method_status"
|
||||
value="pay_later"
|
||||
checked={formData.pay_method_status === "pay_later"}
|
||||
checked={formData.pay_method_status === 'pay_later'}
|
||||
onChange={handlePaymentMethodChange}
|
||||
/>{" "}
|
||||
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 className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<label
|
||||
className="radio-inline"
|
||||
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="pay_method_status"
|
||||
value="pay_now"
|
||||
checked={formData.pay_method_status === "pay_now"}
|
||||
checked={formData.pay_method_status === 'pay_now'}
|
||||
onChange={handlePaymentMethodChange}
|
||||
/>{" "}
|
||||
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 className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<label
|
||||
className="radio-inline"
|
||||
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="pay_method_status"
|
||||
value="credit_invoice"
|
||||
checked={formData.pay_method_status === "credit_invoice"}
|
||||
checked={formData.pay_method_status === 'credit_invoice'}
|
||||
onChange={handlePaymentMethodChange}
|
||||
/>{" "}
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{showPaymentOptions && (
|
||||
<div className="d-flex col-md-6 mb-3">
|
||||
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<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="cash"
|
||||
value={method.value}
|
||||
onChange={handleSpecificPaymentMethodChange}
|
||||
/>{" "}
|
||||
Cash
|
||||
</label>
|
||||
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="specificPaymentMethod"
|
||||
value="cheque"
|
||||
onChange={handleSpecificPaymentMethodChange}
|
||||
/>{" "}
|
||||
Check
|
||||
</label>
|
||||
<label className="radio-inline" style={{ paddingLeft: "10px" }}>
|
||||
<input
|
||||
type="radio"
|
||||
name="specificPaymentMethod"
|
||||
value="bank"
|
||||
onChange={handleSpecificPaymentMethodChange}
|
||||
/>{" "}
|
||||
Bank Card/ACH/EFT
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
{method.label} {/* Use the label defined in the array */}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
|
||||
|
||||
{(formData.pay_method_status === "pay_later" ||
|
||||
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
|
||||
className="form-control col-md-6 me-2"
|
||||
name="days"
|
||||
value={formData.days || ""}
|
||||
onChange={handleChange}
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#fff",
|
||||
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
}}
|
||||
required
|
||||
|
|
@ -881,8 +1152,11 @@ export default function Expense() {
|
|||
<input
|
||||
type="text"
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#fff",
|
||||
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "50px",
|
||||
}}
|
||||
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">
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#fff",
|
||||
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
|
|
@ -924,8 +1201,10 @@ export default function Expense() {
|
|||
className="form-control me-2"
|
||||
placeholder="Check Number"
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
|
|
@ -939,8 +1218,10 @@ export default function Expense() {
|
|||
<div className="d-flex col-md-4 mt-2">
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
}}
|
||||
className="form-control col-md-3"
|
||||
|
|
@ -956,8 +1237,10 @@ export default function Expense() {
|
|||
<div className="d-flex col-md-6 mt-2">
|
||||
<select
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
marginRight: "10px",
|
||||
}}
|
||||
|
|
@ -977,8 +1260,10 @@ export default function Expense() {
|
|||
<div className="d-flex col-md-6 mt-2">
|
||||
<input
|
||||
style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
}}
|
||||
className="form-control col-md-3"
|
||||
|
|
@ -1006,8 +1291,10 @@ export default function Expense() {
|
|||
|
||||
{formData.prepaid_tax && (
|
||||
<div className="form-row d-flex col-md-6 p-2 mt-2" style={{
|
||||
backgroundColor: "#0023000C",
|
||||
borderRadius: "10px",
|
||||
backgroundColor: "#fff",
|
||||
border: "none", // Remove all borders
|
||||
borderBottom: "2px solid #ccc", // Set bottom border
|
||||
borderRadius: "0px", // Remove border radius
|
||||
height: "52px",
|
||||
}}>
|
||||
<div className="input-group col-md-6">
|
||||
|
|
@ -1021,7 +1308,7 @@ export default function Expense() {
|
|||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<span
|
||||
{/* <span
|
||||
className="input-group-text prefixtext"
|
||||
style={{
|
||||
border: "none",
|
||||
|
|
@ -1029,7 +1316,7 @@ export default function Expense() {
|
|||
}}
|
||||
>
|
||||
USD
|
||||
</span>
|
||||
</span> */}
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
|
|
@ -1051,57 +1338,7 @@ export default function Expense() {
|
|||
</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>
|
||||
|
||||
</div>
|
||||
|
|
@ -1115,7 +1352,8 @@ export default function Expense() {
|
|||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary"
|
||||
style={{backgroundColor:'#282E26' ,color:"#fff"}}
|
||||
className="btn"
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
Submit
|
||||
|
|
|
|||
|
|
@ -130,40 +130,46 @@ const PayrollTable = ({
|
|||
padding: "5px 10px",
|
||||
},
|
||||
unpaid: {
|
||||
backgroundColor: "#EF3E49",
|
||||
backgroundColor: "#ff2024",
|
||||
color: "#fff",
|
||||
borderRadius: "30px",
|
||||
padding: "5px 10px",
|
||||
borderRadius: "10px",
|
||||
padding: "5px 20px",
|
||||
textAlign:'center',
|
||||
alignItems:'center'
|
||||
},
|
||||
paid: {
|
||||
backgroundColor: "#5856AC",
|
||||
backgroundColor: "#198f51",
|
||||
color: "#fff",
|
||||
borderRadius: "30px",
|
||||
padding: "5px 10px",
|
||||
borderRadius: "10px",
|
||||
padding: "5px 20px",
|
||||
textAlign:'center',
|
||||
alignItems:'center'
|
||||
},
|
||||
partially_paid: {
|
||||
backgroundColor: "#FFB830",
|
||||
backgroundColor: "#0c8ce9",
|
||||
color: "#fff",
|
||||
borderRadius: "30px",
|
||||
padding: "5px 10px",
|
||||
borderRadius: "10px",
|
||||
padding: "5px 20px",
|
||||
textAlign:'center',
|
||||
alignItems:'center'
|
||||
},
|
||||
};
|
||||
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: "30px",
|
||||
padding: "5px 10px",
|
||||
color: "#fff",
|
||||
color: "#000",
|
||||
});
|
||||
|
||||
const downloadCSV = () => {
|
||||
|
|
@ -188,15 +194,18 @@ const PayrollTable = ({
|
|||
<div className="data-table-container">
|
||||
<div className="d-flex mb-3">
|
||||
<div className="expense-searchcontainerstart d-flex">
|
||||
<div className="search-container">
|
||||
<div className="search-container"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Search"
|
||||
style={{ height: "50px", backgroundColor: "#fff", border: '1px solid #DBDBDB', boxShadow: "0px 0px 10px rgba(187, 187, 187, 0.25)" }}
|
||||
/>
|
||||
<SearchIcon />
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-outline-dark custbtn"
|
||||
|
|
@ -218,6 +227,8 @@ const PayrollTable = ({
|
|||
</svg>
|
||||
Export To Excel
|
||||
</button>
|
||||
|
||||
|
||||
{/* <button className="btn custbtn2" type="submit">
|
||||
<svg
|
||||
width="24"
|
||||
|
|
@ -238,12 +249,39 @@ const PayrollTable = ({
|
|||
Filter
|
||||
</button> */}
|
||||
</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
|
||||
name="option"
|
||||
id="pageSelect"
|
||||
className="selectoptions"
|
||||
style={{
|
||||
height: "30px",
|
||||
|
||||
padding: "2px 6px",
|
||||
border: "1px solid #ccc",
|
||||
backgroundColor: "#282E26",
|
||||
color: "#fff",
|
||||
fontSize: "14px",
|
||||
}}
|
||||
value={rowsPerPage}
|
||||
onChange={(e) => {
|
||||
setRowsPerPage(Number(e.target.value));
|
||||
|
|
@ -256,6 +294,8 @@ const PayrollTable = ({
|
|||
<option value={20}>20</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<table className="data-table custom-table rounded-table">
|
||||
<thead className="table-header">
|
||||
|
|
@ -486,7 +526,7 @@ const PayrollTable = ({
|
|||
<nav>
|
||||
<ul className="pagination">
|
||||
<li className={`prev-next ${currentPage === 1 ? "disabled" : ""}`}>
|
||||
<span
|
||||
{/* <span
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "30px",
|
||||
|
|
@ -501,7 +541,7 @@ const PayrollTable = ({
|
|||
onClick={handlePrev}
|
||||
>
|
||||
<PrevIcon />
|
||||
</span>
|
||||
</span> */}
|
||||
|
||||
</li>
|
||||
{renderPagination()}
|
||||
|
|
@ -510,7 +550,7 @@ const PayrollTable = ({
|
|||
}`}
|
||||
>
|
||||
|
||||
<span
|
||||
{/* <span
|
||||
style={{
|
||||
width: "30px",
|
||||
height: "30px",
|
||||
|
|
@ -525,7 +565,7 @@ const PayrollTable = ({
|
|||
onClick={handleNext}
|
||||
>
|
||||
<NextIcon />
|
||||
</span>
|
||||
</span> */}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
|
|
|||
|
|
@ -575,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;
|
||||
|
|
@ -586,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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -21,21 +21,7 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
|
|||
}}
|
||||
>
|
||||
<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 */}
|
||||
<div
|
||||
|
|
@ -49,6 +35,8 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
|
|||
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 }) => {
|
|||
},
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: "30px",
|
||||
left: "70px",
|
||||
}}
|
||||
>
|
||||
<Link to="/login">
|
||||
<img
|
||||
src={logoSrc}
|
||||
alt="Logo"
|
||||
style={{ height: "70px", width: "100px" }}
|
||||
/>
|
||||
|
||||
</Link>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
flex: "1",
|
||||
|
|
@ -84,48 +57,7 @@ const FormLayout = ({ logoSrc, backgroundImageSrc, children, TopImage }) => {
|
|||
</div>
|
||||
</div>
|
||||
{/* 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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import backgroundImage from "../../assets/img/Frame 812.png";
|
|||
import LoginPage from "./WithUi/LoginPage";
|
||||
function Login() {
|
||||
return (
|
||||
<FormLayout logoSrc={logo} backgroundImageSrc={backgroundImage} TopImage={topimage}>
|
||||
<FormLayout logoSrc={logo} >
|
||||
<LoginPage />
|
||||
</FormLayout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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! */}
|
||||
</p>
|
||||
<div className="mb-3">
|
||||
<CustomInput
|
||||
|
|
@ -427,13 +428,14 @@ function AccountCreate() {
|
|||
className="card-title mb-3"
|
||||
style={{
|
||||
|
||||
fontSize: "40px",
|
||||
fontSize: "30px",
|
||||
fontWeight: "700",
|
||||
textAlign: "left",
|
||||
marginTop: "80px",
|
||||
// width:"500px"
|
||||
}}
|
||||
>
|
||||
Enter the Details
|
||||
Enter store details
|
||||
</p>
|
||||
</div>
|
||||
<p
|
||||
|
|
@ -444,8 +446,9 @@ function AccountCreate() {
|
|||
color: "#002300",
|
||||
}}
|
||||
>
|
||||
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! */}
|
||||
</p>
|
||||
<div className="mb-3">
|
||||
<CustomInput
|
||||
|
|
@ -544,11 +547,11 @@ function AccountCreate() {
|
|||
<div className="mb-3 mt-4">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary rounded-pill"
|
||||
className="btn rounded-pill"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "60px",
|
||||
backgroundColor: "#4545DB",
|
||||
backgroundColor: "#4A5546",
|
||||
color: "#ffffff",
|
||||
padding: "10px 0px",
|
||||
fontSize: "20px",
|
||||
|
|
|
|||
|
|
@ -62,9 +62,9 @@ const LoginPage = () => {
|
|||
<p className="card-title mb-3 mt-4" style={{ fontWeight: "700", fontSize: "30px" }}>
|
||||
Welcome Back
|
||||
</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!
|
||||
</p>
|
||||
</p> */}
|
||||
<form onSubmit={loginUser}>
|
||||
<div className="mb-3">
|
||||
<CustomInput
|
||||
|
|
@ -120,11 +120,11 @@ const LoginPage = () => {
|
|||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
className="btn btn-primary rounded-pill"
|
||||
className="btn rounded-pill"
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "60px",
|
||||
backgroundColor: "#4545DB",
|
||||
backgroundColor: "#4A5546",
|
||||
color: "#ffffff",
|
||||
padding: "10px 10px",
|
||||
fontSize: "20px",
|
||||
|
|
@ -139,7 +139,7 @@ const LoginPage = () => {
|
|||
</form>
|
||||
<div className="text-center mt-4">
|
||||
<div style={{ display: "flex", justifyContent: "center", alignItems: "center", fontSize: "16px" }}>
|
||||
<span>New to Ezhisab?</span>
|
||||
<span>New to PaisaVara?</span>
|
||||
<Link
|
||||
to="/create-user"
|
||||
style={{
|
||||
|
|
@ -147,6 +147,7 @@ const LoginPage = () => {
|
|||
marginLeft: "5px",
|
||||
fontSize: "22px",
|
||||
fontWeight: "700",
|
||||
color:"#000"
|
||||
}}
|
||||
>
|
||||
Create an Account
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
height: 60px;
|
||||
padding: 28px 26px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid #4545db4d; /* Your border color */
|
||||
border: 1px solid #9FAA9A; /* Your border color */
|
||||
opacity: 1; /* Ensure inputs are visible */
|
||||
box-shadow: none; /* Remove any box-shadow if applied */
|
||||
font-size: 16px; /* Optional: Set font size for the input text */
|
||||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
.custom-input:focus {
|
||||
outline: none;
|
||||
border: 1px solid #4545db4d;
|
||||
border: 1px solid #9FAA9A;
|
||||
}
|
||||
|
||||
.input-error {
|
||||
|
|
|
|||
Loading…
Reference in New Issue