index.html

@@ -27,6 +27,7 @@
   <link rel="stylesheet" href="/assets/vendor/css/theme-default.css" class="template-customizer-theme-css" />
   <link rel="stylesheet" href="/assets/css/core-extend.css" />
   <link rel="stylesheet" href="/assets/css/default.css" />
+  <link rel="stylesheet" href="/assets/css/skeleton.css" />
 
   <link rel="stylesheet" href="/assets/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
 

public/assets/css/skeleton.css

@@ -0,0 +1,32 @@
+/* skeleton.css */
+.skeleton {
+  background-color: #e2e8f0;  /* Tailwind's gray-300 */
+  border-radius: 0.25rem;     /* Tailwind's rounded */
+  position: relative;
+  overflow: hidden;
+}
+
+.skeleton::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0; left: -150px;
+  height: 100%;
+  width: 150px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.4),
+    transparent
+  );
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    left: -150px;
+  }
+  100% {
+    left: 100%;
+  }
+}

src/components/Expenses/ExpenseList.jsx

@@ -6,9 +6,10 @@ import { formatDate, formatUTCToLocalTime } from "../../utils/dateUtils";
 import Pagination from "../common/Pagination";
 import { ITEMS_PER_PAGE } from "../../utils/constants";
 import { AppColorconfig, getColorNameFromHex } from "../../utils/appUtils";
+import { ExpenseTableSkeleton } from "./ExpenseSkeleton";
 
 const ExpenseList = () => {
-  const { setViewExpense,setExpenseModal } = useExpenseContext();
+  const { setViewExpense,setManageExpenseModal } = useExpenseContext();
   const [currentPage, setCurrentPage] = useState(1);
   const pageSize = 10;
 
@@ -22,8 +23,9 @@ const ExpenseList = () => {
   };
   
 
-  const { data, isLoading, isError,isInitialLoading } = useExpenseList(10, currentPage, filter);
+  const { data, isLoading, isError,isInitialLoading,error } = useExpenseList(10, currentPage, filter);
-  if (isInitialLoading) return <div>Loading...</div>;
+  if (isInitialLoading) return <ExpenseTableSkeleton/>;
+    if (isError) return <div>{error}</div>;
   const items = data.data ?? [];
   const totalPages = data?.totalPages ?? 1;
   const hasMore = currentPage < totalPages;
@@ -192,7 +194,7 @@ const ExpenseList = () => {
                       </span>
                       <span
                         className="cursor-pointer"
-                       onClick={()=>setExpenseModal({isOpen:true,ExpEdit:expense})}
+                       onClick={()=>setManageExpenseModal({IsOpen:true,expenseId:expense.id})}
                       >
                        <i className='bx bx-edit bx-sm text-secondary'></i>
                       </span> 

src/components/Expenses/ExpenseSchema.js

@@ -35,7 +35,7 @@ export const ExpenseSchema = (expenseTypes) => {
         .array(
           z.object({
             fileName: z.string().min(1, { message: "Filename is required" }),
-            base64Data: z.string().min(1, { message: "File data is required" }),
+            base64Data: z.string().nullable(),
             contentType: z.string().refine((val) => ALLOWED_TYPES.includes(val), {
               message: "Only PDF, PNG, JPG, or JPEG files are allowed",
             }),

src/components/Expenses/ExpenseSkeleton.jsx

@@ -0,0 +1,218 @@
+import React from "react";
+
+
+const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
+  <div
+    className={`skeleton mb-2 ${className}`}
+    style={{
+      height,
+      width,
+    }}
+  ></div>
+);
+
+
+const ExpenseSkeleton = () => {
+  return (
+    <div className="container p-3">
+<div className="d-flex justify-content-center">
+  <SkeletonLine height={20} width="200px" />
+</div>
+
+      {[...Array(5)].map((_, idx) => (
+        <div className="row my-2" key={idx}>
+          <div className="col-md-6">
+            <SkeletonLine />
+          </div>
+          <div className="col-md-6">
+            <SkeletonLine />
+          </div>
+        </div>
+      ))}
+
+      <div className="row my-2">
+        <div className="col-md-12">
+          <SkeletonLine height={60} />
+        </div>
+      </div>
+
+      <div className="row my-2">
+        <div className="col-md-12">
+          <SkeletonLine height={120} />
+        </div>
+      </div>
+
+      <div className="d-flex justify-content-center gap-2 mt-3">
+        <SkeletonLine height={35} width="100px" />
+        <SkeletonLine height={35} width="100px" />
+      </div>
+    </div>
+  );
+};
+
+export default ExpenseSkeleton;
+
+
+
+
+export const ExpenseDetailsSkeleton = () => {
+  return (
+      <div className="container px-3">
+      <div className="row mb-3">
+        <div className="d-flex justify-content-center mb-3">
+          <SkeletonLine height={20} width="180px" className="mb-2" />
+        </div>
+
+        {[...Array(3)].map((_, i) => (
+          <div className="col-12 col-md-4 mb-3" key={`row-1-${i}`}>
+            <SkeletonLine height={14}  className="mb-1" />
+            <SkeletonLine />
+          </div>
+        ))}
+
+        {[...Array(6)].map((_, i) => (
+          <div className="col-12 col-md-4 mb-3" key={`row-2-${i}`}>
+            <SkeletonLine height={14} className="mb-1" />
+            <SkeletonLine />
+          </div>
+        ))}
+
+     
+
+        <div className="col-12 my-2">
+          <SkeletonLine height={14} width="100px" className="mb-2" />
+          {[...Array(2)].map((_, i) => (
+            <div
+              className="list-group-item d-flex align-items-center mb-2"
+              key={i}
+            >
+              <div
+                className="rounded me-2"
+                style={{
+                  height: "50px",
+                  width: "80px",
+                  backgroundColor: "#dcdcdc",
+                  borderRadius: "4px",
+                }}
+              />
+              <div className="w-100">
+                <SkeletonLine height={14} width="60%" className="mb-1" />
+                <SkeletonLine height={14} width="20%" />
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <hr className="divider my-1" />
+
+        <div className="col-12 mb-3">
+          <SkeletonLine height={14} width="80px" className="mb-1" />
+          <SkeletonLine height={60} className="mb-2" />
+          <div className="d-flex gap-2 flex-wrap">
+            {[...Array(2)].map((_, i) => (
+              <SkeletonLine
+                key={i}
+                height={30}
+                width="100px"
+                className="rounded"
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+const SkeletonCell = ({ width = "100%", height = 20, className = "" }) => (
+  <div
+    className={`skeleton ${className}`}
+    style={{
+      width,
+      height,
+      borderRadius: 4,
+    }}
+  />
+);
+export const ExpenseTableSkeleton = ({ rows = 5 }) => {
+  return (
+    <table
+      className="card-body table border-top dataTable no-footer dtr-column text-nowrap"
+      aria-describedby="DataTables_Table_0_info"
+      id="horizontal-example"
+    >
+      <thead>
+        <tr>
+          <th colSpan={2}>
+            <div className="text-start ms-6">Date Time</div>
+          </th>
+          <th className="d-none d-sm-table-cell">
+            <div className="text-start ms-5">Expense Type</div>
+          </th>
+          <th className="d-none d-sm-table-cell">
+            <div className="text-start ms-5">Payment Mode</div>
+          </th>
+          <th className="d-none d-sm-table-cell">Paid By</th>
+          <th className="d-none d-md-table-cell">Amount</th>
+          <th>Status</th>
+          <th>Action</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {[...Array(rows)].map((_, idx) => (
+          <tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
+            {/* Date Time colSpan=2 */}
+            <td colSpan={2} className="sorting_1">
+              <div className="d-flex justify-content-start align-items-center user-name ms-6">
+                <SkeletonCell width="120px" height={18} />
+              </div>
+            </td>
+
+            {/* Expense Type */}
+            <td className="text-start d-none d-sm-table-cell ms-5">
+              <SkeletonCell width="90px" height={16} />
+            </td>
+
+            {/* Payment Mode */}
+            <td className="text-start d-none d-sm-table-cell ms-5">
+              <SkeletonCell width="90px" height={16} />
+            </td>
+
+            {/* Paid By (Avatar + name) */}
+            <td className="text-start d-none d-sm-table-cell ms-5">
+              <div className="d-flex align-items-center gap-2">
+                <SkeletonCell width="30px" height={30} className="rounded-circle" />
+                <SkeletonCell width="80px" height={16} />
+              </div>
+            </td>
+
+            {/* Amount */}
+            <td className="d-none d-md-table-cell text-end">
+              <SkeletonCell width="60px" height={16} />
+            </td>
+
+            {/* Status */}
+            <td>
+              <SkeletonCell width="80px" height={22} className="rounded" />
+            </td>
+
+            {/* Action (icons) */}
+            <td>
+              <div className="d-flex justify-content-center align-items-center gap-2">
+                {[...Array(3)].map((__, i) => (
+                  <SkeletonCell
+                    key={i}
+                    width={20}
+                    height={20}
+                    className="rounded"
+                    style={{ display: "inline-block" }}
+                  />
+                ))}
+              </div>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+};

src/components/Expenses/ManageExpense.jsx

@@ -16,9 +16,19 @@ import {
   useEmployeesByProject,
 } from "../../hooks/useEmployees";
 import Avatar from "../common/Avatar";
-import { useCreateExpnse } from "../../hooks/useExpense";
+import {
+  useCreateExpnse,
+  useExpense,
+  useUpdateExepse,
+} from "../../hooks/useExpense";
+import ExpenseSkeleton from "./ExpenseSkeleton";
 
-const CreateExpense = ({closeModal,expenseToEdit,}) => {
+const ManageExpense = ({ closeModal, expenseToEdit = null }) => {
+  const {
+    data,
+    isLoading,
+    error: ExpenseErrorLoad,
+  } = useExpense(expenseToEdit);
   const [ExpenseType, setExpenseType] = useState();
   const dispatch = useDispatch();
   const {
@@ -38,27 +48,6 @@ const CreateExpense = ({closeModal,expenseToEdit,}) => {
     resolver: zodResolver(schema),
     defaultValues: defaultExpense,
   });
-  console.log(expenseToEdit)
-
-  useEffect(() => {
-  if (expenseToEdit) {
-    reset({
-      projectId: expenseToEdit.project.id || "",
-      expensesTypeId: expenseToEdit.expensesType.id
- || "",
-      paymentModeId: expenseToEdit.paymentMode.id || "",
-      paidById: expenseToEdit.paidBy.id || "",
-      transactionDate: expenseToEdit.transactionDate?.slice(0, 10) || "",
-      transactionId: expenseToEdit.transactionId || "",
-      description: expenseToEdit.description || "",
-      location: expenseToEdit.location || "",
-      supplerName: expenseToEdit.supplerName || "",
-      amount: expenseToEdit.amount || "",
-      noOfPersons: expenseToEdit.noOfPersons || "",
-      billAttachments: expenseToEdit.billAttachments || [],
-    });
-  }
-}, [expenseToEdit, reset]);
 
 
   const selectedproject = watch("projectId");
@@ -83,6 +72,7 @@ const CreateExpense = ({closeModal,expenseToEdit,}) => {
     error: EmpError,
   } = useEmployeesByProject(selectedproject);
 
+
   const files = watch("billAttachments");
   const onFileChange = async (e) => {
     const newFiles = Array.from(e.target.files);
@@ -132,27 +122,66 @@ const CreateExpense = ({closeModal,expenseToEdit,}) => {
     setValue("billAttachments", newFiles, { shouldValidate: true });
   };
 
-  const {mutate:CreateExpense,isPending} = useCreateExpnse(()=>{
+  useEffect(() => {
+    if (expenseToEdit && data) {
+      reset({
+        projectId: data.project.id || "",
+        expensesTypeId: data.expensesType.id || "",
+        paymentModeId: data.paymentMode.id || "",
+        paidById: data.paidBy.id || "",
+        transactionDate: data.transactionDate?.slice(0, 10) || "",
+        transactionId: data.transactionId || "",
+        description: data.description || "",
+        location: data.location || "",
+        supplerName: data.supplerName || "",
+        amount: data.amount || "",
+        noOfPersons: data.noOfPersons || "",
+        billAttachments: data.documents
+          ? data.documents.map((doc) => ({
+              fileName: doc.fileName,
+              base64Data: null, 
+              contentType: doc.contentType,
+              fileSize: 0,
+              description: "",
+              preSignedUrl: doc.preSignedUrl, 
+            }))
+          : [],
+      });
+    }
+  }, [data, reset, employees]);
+  const { mutate: UpdateExpense, isPending } = useUpdateExepse(() =>
     handleClose()
-  })
+  );
+  const { mutate: CreateExpense, isPending: createPending } = useCreateExpnse(
+    () => {
+      handleClose();
+    }
+  );
   const onSubmit = (payload) => {
-    console.log("Form Data:", payload);
+    if (expenseToEdit) {
-
+      const editPayload = { ...payload, id: data.id };
-    CreateExpense(payload)
+      UpdateExpense({ id: data.id, payload: editPayload });
+    } else {
+      CreateExpense(payload);
+    }
   };
   const ExpenseTypeId = watch("expensesTypeId");
 
   useEffect(() => {
     setExpenseType(ExpenseTypes?.find((type) => type.id === ExpenseTypeId));
+    return () => reset(defaultExpense);
   }, [ExpenseTypeId]);
 
-  const handleClose =()=>{
+  const handleClose = () => {
-    reset()
+    reset();
-    closeModal()
+    closeModal();
-  }
+  };
+  if(EmpLoading || StatusLoadding || projectLoading || ExpenseLoading || isLoading) return <ExpenseSkeleton/>
+
+
   return (
     <div className="container p-3">
-      <h5 className="m-0">Create New Expense</h5>
+      <h5 className="m-0">{expenseToEdit ? "Update Expense ": "Create New Expense"}</h5>
       <form id="expenseForm" onSubmit={handleSubmit(onSubmit)}>
         <div className="row my-2">
           <div className="col-md-6">
@@ -257,16 +286,13 @@ const CreateExpense = ({closeModal,expenseToEdit,}) => {
               ) : (
                 employees?.map((emp) => (
                   <option key={emp.id} value={emp.id}>
-                   
                     {`${emp.firstName} ${emp.lastName} `}
                   </option>
                 ))
               )}
             </select>
-                {errors.paidById && (
+            {errors.paidById && (
-              <small className="danger-text">
+              <small className="danger-text">{errors.paidById.message}</small>
-                {errors.paidById.message}
-              </small>
             )}
           </div>
         </div>
@@ -401,9 +427,7 @@ const CreateExpense = ({closeModal,expenseToEdit,}) => {
 
         <div className="row my-2">
           <div className="col-md-12">
-            <label className="form-label ">
+            <label className="form-label ">Upload Bill </label>
-              Upload Bill{" "}
-            </label>
 
             <div
               className="border border-secondary border-dashed rounded p-4 text-center bg-textMuted position-relative"
@@ -440,29 +464,37 @@ const CreateExpense = ({closeModal,expenseToEdit,}) => {
                 {files.map((file, idx) => (
                   <a
                     key={idx}
-                    class="d-flex justify-content-between text-start p-1"
+                    className="d-flex justify-content-between text-start p-1"
+                    href={file.preSignedUrl || "#"}
+                    target="_blank"
+                    rel="noopener noreferrer"
                   >
                     <div>
                       <span className="mb-0 text-secondary small d-block">
                         {file.fileName}
                       </span>
                       <span className="text-body-secondary small d-block">
-                        {formatFileSize(file.fileSize)}
+                        {file.fileSize ? formatFileSize(file.fileSize) : ""}
                       </span>
                     </div>
                     <i
                       className="bx bx-trash bx-sm cursor-pointer text-danger"
-                      onClick={() => removeFile(idx)}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        removeFile(idx);
+                      }}
                     ></i>
                   </a>
                 ))}
               </div>
             )}
+
             {Array.isArray(errors.billAttachments) &&
               errors.billAttachments.map((fileError, index) => (
                 <div key={index} className="danger-text small mt-1">
                   {fileError?.fileSize?.message ||
-                    fileError?.contentType?.message}
+                    fileError?.contentType?.message ||
+                    fileError?.base64Data?.message}
                 </div>
               ))}
           </div>
@@ -470,10 +502,18 @@ const CreateExpense = ({closeModal,expenseToEdit,}) => {
 
         <div className="d-flex justify-content-center gap-2">
           {" "}
-          <button type="submit" className="btn btn-primary btn-sm mt-3" disabled={isPending}>
+          <button
-            {isPending ? "Please Wait...":"Submit"}
+            type="submit"
+            className="btn btn-primary btn-sm mt-3"
+            disabled={isPending}
+          >
+            {isPending ? "Please Wait..." : expenseToEdit ? "Update" : "Submit"}
           </button>
-          <button type="reset" onClick={handleClose} className="btn btn-secondary btn-sm mt-3">
+          <button
+            type="reset"
+            onClick={handleClose}
+            className="btn btn-secondary btn-sm mt-3"
+          >
             Cancel
           </button>
         </div>
@@ -482,5 +522,4 @@ const CreateExpense = ({closeModal,expenseToEdit,}) => {
   );
 };
 
-export default CreateExpense;
+export default ManageExpense;
-

src/hooks/useExpense.js

@@ -54,7 +54,7 @@ export const useUpdateExepse =()=>{
 const queryClient = useQueryClient();
 
 return useMutation({
-  mutationFn:async (id,payload)=>{
+  mutationFn:async ({id,payload})=>{
     const response = await ExpenseRepository.UpdateExpense(id,payload)
   },
   onSuccess:(updatedExpense,variables)=>{

src/pages/Expense/ExpensePage.jsx

@@ -1,7 +1,6 @@
 import React, { createContext, useContext, useState } from "react";
 
 import ExpenseList from "../../components/Expenses/ExpenseList";
-import CreateExpense from "../../components/Expenses/ManageExpense";
 import ViewExpense from "../../components/Expenses/ViewExpense";
 import Breadcrumb from "../../components/common/Breadcrumb";
 import GlobalModel from "../../components/common/GlobalModel";
@@ -11,9 +10,9 @@ export const ExpenseContext = createContext();
 export const useExpenseContext = () => useContext(ExpenseContext);
 
 const ExpensePage = () => {
-  const [expenseModal, setExpenseModal] = useState({
+  const [ManageExpenseModal, setManageExpenseModal] = useState({
-    isOpen: false,
+    IsOpen: null,
-    ExpEdit: false,
+    expenseId: null,
   });
   const [viewExpense, setViewExpense] = useState({
     expenseId: null,