Refactor_Expenses #321
128
src/components/Expenses/CreateExpense.jsx
Normal file
128
src/components/Expenses/CreateExpense.jsx
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import React from "react";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { ExpenseSchema } from "./ExpenseSchema";
|
||||||
|
|
||||||
|
const CreateExpense = () => {
|
||||||
|
const {} = useForm({
|
||||||
|
resolver: zodResolver(ExpenseSchema),
|
||||||
|
defaultValues: {
|
||||||
|
projectId: "",
|
||||||
|
expensesTypeId: "",
|
||||||
|
paymentModeId: "",
|
||||||
|
paidById: "",
|
||||||
|
transactionDate: "",
|
||||||
|
transactionId: "",
|
||||||
|
description: "",
|
||||||
|
location: "",
|
||||||
|
supplerName: "",
|
||||||
|
amount: "",
|
||||||
|
noOfPersons: "",
|
||||||
|
statusId: "",
|
||||||
|
billAttachments: [],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<div class="container p-3">
|
||||||
|
<p class="fw-bold m-0">Create New Expense</p>
|
||||||
|
<form id="expenseForm">
|
||||||
|
<div class="row my-2">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="projectId">Select Project</label>
|
||||||
|
<select class="form-select form-select-sm" id="projectId" required>
|
||||||
|
<option value="">-- Select Project --</option>
|
||||||
|
<option value="project1">Project A</option>
|
||||||
|
<option value="project2">Project B</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="expensesTypeId">Expense Type</label>
|
||||||
|
<select class="form-select form-select-sm" id="expensesTypeId" required>
|
||||||
|
<option value="">-- Select Type --</option>
|
||||||
|
<option value="type1">Travel</option>
|
||||||
|
<option value="type2">Meal</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row my-2">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="paymentModeId">Payment Mode</label>
|
||||||
|
<select class="form-select form-select-sm" id="paymentModeId" required>
|
||||||
|
<option value="">-- Select Payment Mode --</option>
|
||||||
|
<option value="cash">Cash</option>
|
||||||
|
<option value="card">Card</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="paidById">Paid By</label>
|
||||||
|
<input type="text" id="paidById" class="form-control form-control-sm" required />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row my-2">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="transactionDate">Transaction Date</label>
|
||||||
|
<input type="date" id="transactionDate" class="form-control form-control-sm" placeholder="DD-MM-YYYY" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="amount">Amount</label>
|
||||||
|
<input type="number" id="amount" class="form-control form-control-sm" min="1" required />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row my-2">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="noOfPersons">No. of Persons</label>
|
||||||
|
<input type="number" id="noOfPersons" class="form-control form-control-sm" min="1" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="statusId">Status</label>
|
||||||
|
<select class="form-select form-select-sm" id="statusId" required>
|
||||||
|
<option value="">-- Select Status --</option>
|
||||||
|
<option value="approved">Approved</option>
|
||||||
|
<option value="pending">Pending</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row my-2">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="location">Location</label>
|
||||||
|
<input type="text" id="location" class="form-control form-control-sm" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col-md-6">
|
||||||
|
<label for="supplerName">Supplier Name</label>
|
||||||
|
<input type="text" id="supplerName" class="form-control form-control-sm" required />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row my-2">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<label for="description">Description</label>
|
||||||
|
<textarea id="description" class="form-control form-control-sm" rows="2" required></textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row my-2">
|
||||||
|
<div class="col-md-12">
|
||||||
|
<label for="billAttachments">Upload Bill (PDF, JPG, PNG, max 5MB)</label>
|
||||||
|
<input type="file" id="billAttachments" class="form-control form-control-sm"
|
||||||
|
accept=".pdf,.jpg,.jpeg,.png" required />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="d-flex justify-content-center gap-2"> <button type="submit" class="btn btn-primary btn-sm mt-3">Submit</button>
|
||||||
|
<button type="submit" class="btn btn-secondary btn-sm mt-3">Cancel</button></div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CreateExpense;
|
98
src/components/Expenses/ExpenseList.jsx
Normal file
98
src/components/Expenses/ExpenseList.jsx
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const ExpenseList = () => {
|
||||||
|
return (
|
||||||
|
<div className="card ">
|
||||||
|
<div className="card-datatable table-responsive">
|
||||||
|
<div
|
||||||
|
id="DataTables_Table_0_wrapper"
|
||||||
|
className="dataTables_wrapper dt-bootstrap5 no-footer"
|
||||||
|
>
|
||||||
|
|
||||||
|
<table
|
||||||
|
className="datatables-users table border-top dataTable no-footer dtr-column text-nowrap"
|
||||||
|
id="DataTables_Table_0"
|
||||||
|
aria-describedby="DataTables_Table_0_info"
|
||||||
|
|
||||||
|
>
|
||||||
|
<thead>
|
||||||
|
<tr className=''>
|
||||||
|
<th
|
||||||
|
className="sorting sorting_desc"
|
||||||
|
tabIndex="0"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
rowSpan="1"
|
||||||
|
colSpan="3"
|
||||||
|
aria-label="User: activate to sort column ascending"
|
||||||
|
aria-sort="descending"
|
||||||
|
>
|
||||||
|
<div className="text-start ms-6">Date</div>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
className="sorting sorting_desc d-sm-table-cell"
|
||||||
|
tabIndex="0"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
rowSpan="1"
|
||||||
|
colSpan="1"
|
||||||
|
aria-label="User: activate to sort column ascending"
|
||||||
|
aria-sort="descending"
|
||||||
|
>
|
||||||
|
<div className="text-start ms-5">Expense Type</div>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||||
|
tabIndex="0"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
rowSpan="1"
|
||||||
|
colSpan="1"
|
||||||
|
aria-label="User: activate to sort column ascending"
|
||||||
|
aria-sort="descending"
|
||||||
|
>
|
||||||
|
<div className="text-start ">Payment mode</div>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
className="sorting sorting_desc d-none d-sm-table-cell"
|
||||||
|
tabIndex="0"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
rowSpan="1"
|
||||||
|
colSpan="1"
|
||||||
|
aria-label="User: activate to sort column ascending"
|
||||||
|
aria-sort="descending"
|
||||||
|
>
|
||||||
|
<div className="text-start ">Paid By</div>
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
className="sorting"
|
||||||
|
tabIndex="0"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
rowSpan="1"
|
||||||
|
colSpan="1"
|
||||||
|
aria-label="Billing: activate to sort column ascending"
|
||||||
|
>
|
||||||
|
Status
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
className="sorting d-none d-md-table-cell"
|
||||||
|
tabIndex="0"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
rowSpan="1"
|
||||||
|
colSpan="1"
|
||||||
|
aria-label="Plan: activate to sort column ascending"
|
||||||
|
>
|
||||||
|
Amount
|
||||||
|
</th>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseList
|
66
src/components/Expenses/ExpenseSchema.js
Normal file
66
src/components/Expenses/ExpenseSchema.js
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import { z } from 'zod';
|
||||||
|
|
||||||
|
const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
|
||||||
|
const ALLOWED_TYPES = [
|
||||||
|
'application/pdf',
|
||||||
|
'image/png',
|
||||||
|
'image/jpg',
|
||||||
|
'image/jpeg',
|
||||||
|
];
|
||||||
|
|
||||||
|
export const ExpenseSchema = z.object({
|
||||||
|
projectId: z.string().min(1, { message: "Project is required" }),
|
||||||
|
expensesTypeId: z.string().min(1, { message: "Expense type is required" }),
|
||||||
|
paymentModeId: z.string().min(1, { message: "Payment mode is required" }),
|
||||||
|
paidById: z.string().min(1, { message: "Employee name is required" }),
|
||||||
|
transactionDate: z.string().min(1, { message: "Date is required" }),
|
||||||
|
transactionId: z.string().optional(), // if optional, else use .min(1)
|
||||||
|
description: z.string().min(1, { message: "Description is required" }),
|
||||||
|
location: z.string().min(1, { message: "Location is required" }),
|
||||||
|
supplerName: z.string().min(1, { message: "Supplier name is required" }),
|
||||||
|
amount: z.number().min(1, { message: "Amount must be at least 1" }).max(10000, { message: "Amount must not exceed 10,000" }),
|
||||||
|
noOfPersons: z.number().min(1, { message: "1 Employee at least required" }),
|
||||||
|
statusId: z.string().min(1, { message: "Please select status" }),
|
||||||
|
|
||||||
|
billAttachments: z
|
||||||
|
.array(
|
||||||
|
z.object({
|
||||||
|
fileName: z.string().min(1, { message: "Filename is required" }),
|
||||||
|
base64Data: z.string().min(1, { message: "File data is required" }),
|
||||||
|
contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
|
||||||
|
message: "Only PDF, PNG, JPG, or JPEG files are allowed",
|
||||||
|
}),
|
||||||
|
fileSize: z.number().max(MAX_FILE_SIZE, {
|
||||||
|
message: "File size must be less than or equal to 5MB",
|
||||||
|
}),
|
||||||
|
description: z.string().optional(),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.nonempty({ message: "At least one file attachment is required" }),
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
let payload=
|
||||||
|
{
|
||||||
|
"projectId": "2618f2ef-2823-11f0-9d9e-bc241163f504",
|
||||||
|
"expensesTypeId": "dd120bc4-ab0a-45ba-8450-5cd45ff221ca",
|
||||||
|
"paymentModeId": "ed667353-8eea-4fd1-8750-719405932480",
|
||||||
|
"paidById": "08dda7d8-014e-443f-858d-a55f4b484bc4",
|
||||||
|
"transactionDate": "2025-07-12T09:56:54.122Z",
|
||||||
|
"transactionId": "string",
|
||||||
|
"description": "string",
|
||||||
|
"location": "string",
|
||||||
|
"supplerName": "string",
|
||||||
|
"amount": 390,
|
||||||
|
"noOfPersons": 0,
|
||||||
|
"statusId": "297e0d8f-f668-41b5-bfea-e03b354251c8",
|
||||||
|
"billAttachments": [
|
||||||
|
{
|
||||||
|
"fileName": "string",
|
||||||
|
"base64Data": "string",
|
||||||
|
"contentType": "string",
|
||||||
|
"fileSize": 0,
|
||||||
|
"description": "string"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
@ -66,6 +66,12 @@
|
|||||||
"available": true,
|
"available": true,
|
||||||
"link": "/gallary"
|
"link": "/gallary"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"text": "Expense",
|
||||||
|
"icon": "bx bx-receipt",
|
||||||
|
"available": true,
|
||||||
|
"link": "/expenses"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"text": "Administration",
|
"text": "Administration",
|
||||||
"icon": "bx bx-box",
|
"icon": "bx bx-box",
|
||||||
|
30
src/hooks/useExpense.js
Normal file
30
src/hooks/useExpense.js
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { useMutation } from "@tanstack/react-query"
|
||||||
|
import ExpenseRepository from "../repositories/ExpsenseRepository"
|
||||||
|
import showToast from "../services/toastService"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// -------------------Query------------------------------------------------------
|
||||||
|
export const useExpenseList = ()=>{
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// ---------------------------Mutation---------------------------------------------
|
||||||
|
|
||||||
|
export const useCreateExpnse =()=>{
|
||||||
|
return useMutation({
|
||||||
|
mutationFn:(payload)=>{
|
||||||
|
await ExpenseRepository.CreateExpense(payload)
|
||||||
|
},
|
||||||
|
onSuccess:(_,variables)=>{
|
||||||
|
showToast("Expense Created Successfully","success")
|
||||||
|
},
|
||||||
|
onError:(error)=>{
|
||||||
|
showToast(error.message || "Something went wrong please try again !","success")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
48
src/pages/Expense/ExpensePage.jsx
Normal file
48
src/pages/Expense/ExpensePage.jsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import ExpenseList from "../../components/Expenses/ExpenseList";
|
||||||
|
import Breadcrumb from "../../components/common/Breadcrumb";
|
||||||
|
import GlobalModel from "../../components/common/GlobalModel";
|
||||||
|
import CreateExpense from "../../components/Expenses/createExpense";
|
||||||
|
|
||||||
|
const ExpensePage = () => {
|
||||||
|
const[IsNewExpen,setNewExpense] = useState(false)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container-fluid">
|
||||||
|
<Breadcrumb
|
||||||
|
data={[
|
||||||
|
{ label: "Home", link: "/" },
|
||||||
|
{ label: "Expense", link: null },
|
||||||
|
]}
|
||||||
|
></Breadcrumb>
|
||||||
|
<div className="card my-1 text-start px-0">
|
||||||
|
<div className="card-body py-1 px-1">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-5 col-sm-4">
|
||||||
|
<label className="mb-0">
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
className="form-control form-control-sm"
|
||||||
|
placeholder="Search Expense..."
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="col-7 col-sm-8 text-end">
|
||||||
|
<button type="button" className="btn btn-sm btn-primary me-2" onClick={()=>setNewExpense(true)}>
|
||||||
|
<span class="icon-base bx bx-plus-circle me-1"></span>Add New
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<ExpenseList />
|
||||||
|
|
||||||
|
<GlobalModel isOpen={IsNewExpen} closeModal={()=>setNewExpense(false)}>
|
||||||
|
<CreateExpense/>
|
||||||
|
</GlobalModel>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ExpensePage;
|
13
src/repositories/ExpsenseRepository.jsx
Normal file
13
src/repositories/ExpsenseRepository.jsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { api } from "../utils/axiosClient";
|
||||||
|
|
||||||
|
|
||||||
|
const ExpenseRepository = {
|
||||||
|
GetExpenseList:()=>api.get("/api/expanse/list"),
|
||||||
|
GetExpenseDetails:(id)=>api.get(`/api/Expanse/details/${id}`),
|
||||||
|
CreateExpense:(data)=>api.post("/api/Expanse/create",data),
|
||||||
|
UpdateExpense:(id)=>api.put(`/api/Expanse/edit/${id}`),
|
||||||
|
DeleteExpense:(id)=>api.delete(`/api/Expanse/edit/${id}`)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ExpenseRepository;
|
@ -38,6 +38,7 @@ import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
|
|||||||
import ProtectedRoute from "./ProtectedRoute";
|
import ProtectedRoute from "./ProtectedRoute";
|
||||||
import Directory from "../pages/Directory/Directory";
|
import Directory from "../pages/Directory/Directory";
|
||||||
import LoginWithOtp from "../pages/authentication/LoginWithOtp";
|
import LoginWithOtp from "../pages/authentication/LoginWithOtp";
|
||||||
|
import ExpensePage from "../pages/Expense/ExpensePage";
|
||||||
|
|
||||||
const router = createBrowserRouter(
|
const router = createBrowserRouter(
|
||||||
[
|
[
|
||||||
@ -76,6 +77,7 @@ const router = createBrowserRouter(
|
|||||||
{ path: "/activities/task", element: <TaskPlannng /> },
|
{ path: "/activities/task", element: <TaskPlannng /> },
|
||||||
{ path: "/activities/reports", element: <Reports /> },
|
{ path: "/activities/reports", element: <Reports /> },
|
||||||
{ path: "/gallary", element: <ImageGallary /> },
|
{ path: "/gallary", element: <ImageGallary /> },
|
||||||
|
{ path: "/expenses", element: <ExpensePage /> },
|
||||||
{ path: "/masters", element: <MasterPage /> },
|
{ path: "/masters", element: <MasterPage /> },
|
||||||
{ path: "/help/support", element: <Support /> },
|
{ path: "/help/support", element: <Support /> },
|
||||||
{ path: "/help/docs", element: <Documentation /> },
|
{ path: "/help/docs", element: <Documentation /> },
|
||||||
|
Loading…
x
Reference in New Issue
Block a user