created list view interface

src/components/Expenses/CreateExpense.jsx

@@ -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;

src/components/Expenses/ExpenseList.jsx

@@ -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

src/components/Expenses/ExpenseSchema.js

@@ -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"
+}
+]
+}

src/data/menuData.json

@@ -66,6 +66,12 @@
                 "available": true,
                 "link": "/gallary"
             },
+            {
+                "text": "Expense",
+                "icon": "bx bx-receipt",
+                "available": true,
+                "link": "/expenses"
+            },
             {
                 "text": "Administration",
                 "icon": "bx bx-box",

src/hooks/useExpense.js

@@ -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")
+        }
+    })
+}

src/pages/Expense/ExpensePage.jsx

@@ -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;

src/repositories/ExpsenseRepository.jsx

@@ -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;

src/router/AppRoutes.jsx

@@ -38,6 +38,7 @@ import LegalInfoCard from "../pages/TermsAndConditions/LegalInfoCard";
 import ProtectedRoute from "./ProtectedRoute";
 import Directory from "../pages/Directory/Directory";
 import LoginWithOtp from "../pages/authentication/LoginWithOtp";
+import ExpensePage from "../pages/Expense/ExpensePage";
 
 const router = createBrowserRouter(
   [
@@ -76,6 +77,7 @@ const router = createBrowserRouter(
             { path: "/activities/task", element: <TaskPlannng /> },
             { path: "/activities/reports", element: <Reports /> },
             { path: "/gallary", element: <ImageGallary /> },
+            { path: "/expenses", element: <ExpensePage /> },
             { path: "/masters", element: <MasterPage /> },
             { path: "/help/support", element: <Support /> },
             { path: "/help/docs", element: <Documentation /> },