admin/marco.pms.web
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Highlight Separator Line Between Expense Details and History Section adding border-2 for the thikness of the line. #326

Merged
pramod.mahajan merged 4 commits from Expense_Bugs into Expense_Manangement_Feature 2025-08-06 09:41:43 +00:00
Conversation 0 Commits 4 Files Changed 5 +103 -102
5 changed files with 103 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Expenses/ViewExpense.jsx
View File

@ -30,7 +30,7 @@ import moment from "moment";
import ExpenseStatusLogs from "./ExpenseStatusLogs";
const ViewExpense = ({ ExpenseId }) => {
const { data, isLoading, isError, error } = useExpense(ExpenseId);
const { data, isLoading, isError, error, isFetching } = useExpense(ExpenseId);
const [IsPaymentProcess, setIsPaymentProcess] = useState(false);
const [clickedStatusId, setClickedStatusId] = useState(null);
@ -363,7 +363,7 @@ const ViewExpense = ({ ExpenseId }) => {
)}
</div>
)}
<hr className="divider my-1 divider-primary" />
<hr className="divider my-1 border-2 divider-primary my-2"/>
{Array.isArray(data?.nextStatus) && data.nextStatus.length > 0 && (
<>
@ -435,7 +435,7 @@ const ViewExpense = ({ ExpenseId }) => {
setValue("statusId", status.id);
handleSubmit(onSubmit)();
}}
disabled={isPending}
disabled={isPending || isFetching}
className="btn btn-primary btn-sm cursor-pointer mx-2 border-0"
>
{isPending && clickedStatusId === status.id

2
src/components/common/SelectMultiple.jsx
View File

@ -67,7 +67,7 @@ const SelectMultiple = ({
const dropdownElement = (
<div
ref={dropdownRef}
className="multi-select-dropdown-options"
className="multi-select-dropdown-options py-2"
style={{
position: "absolute",
top: dropdownStyles.top,

43
src/hooks/useExpense.js
View File

@ -168,27 +168,27 @@ export const useActionOnExpense = (onSuccessCallBack) => {
onSuccess: (updatedExpense, variables) => {
showToast("Request processed successfully.", "success");
queryClient.setQueriesData(
{
queryKey: ["Expenses"],
exact: false,
},
(oldData) => {
if (!oldData) return oldData;
return {
...oldData,
data: oldData.data.map((item) =>
item.id === updatedExpense.id
? {
...item,
nextStatus: updatedExpense.nextStatus,
status: updatedExpense.status,
}
: item
),
};
}
);
// queryClient.setQueriesData(
// {
// queryKey: ["Expenses"],
// exact: false,
// },
// (oldData) => {
// if (!oldData) return oldData;
// return {
// ...oldData,
// data: oldData.data.map((item) =>
// item.id === updatedExpense.id
// ? {
// ...item,
// nextStatus: updatedExpense.nextStatus,
// status: updatedExpense.status,
// }
// : item
// ),
// };
// }
// );
// queryClient.setQueriesData(
// { queryKey: ["Expense", updatedExpense.id] },
// (oldData) => {
@ -200,6 +200,7 @@ export const useActionOnExpense = (onSuccessCallBack) => {
// }
// );
queryClient.invalidateQueries({queryKey:["Expense",updatedExpense.id]})
queryClient.invalidateQueries({queryKey:["Expenses",updatedExpense.id]})
if (onSuccessCallBack) onSuccessCallBack();
},

152
src/pages/master/MasterPage.jsx
View File

@ -1,94 +1,94 @@
import React, { useState, useEffect, useMemo } from "react";
import Breadcrumb from "../../components/common/Breadcrumb";
import MasterModal from "../../components/master/MasterModal";
import { mastersList} from "../../data/masters";
import { mastersList } from "../../data/masters";
import { useDispatch, useSelector } from "react-redux";
import { changeMaster } from "../../slices/localVariablesSlice";
import useMaster from "../../hooks/masterHook/useMaster"
import MasterTable from "./MasterTable";
import { getCachedData } from "../../slices/apiDataManager";
import {useHasUserPermission} from "../../hooks/useHasUserPermission";
import { useHasUserPermission } from "../../hooks/useHasUserPermission";
import { MANAGE_MASTER } from "../../utils/constants";
import {useQueryClient} from "@tanstack/react-query";
import { useQueryClient } from "@tanstack/react-query";
const MasterPage = () => {
const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: null });
const [searchTerm, setSearchTerm] = useState('');
const [filteredResults, setFilteredResults] = useState([]);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const [modalConfig, setModalConfig] = useState({ modalType: "", item: null, masterType: null });
const [searchTerm, setSearchTerm] = useState('');
const [filteredResults, setFilteredResults] = useState([]);
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
const dispatch = useDispatch();
const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
const queryClient = useQueryClient();
const hasMasterPermission = useHasUserPermission(MANAGE_MASTER);
const dispatch = useDispatch();
const selectedMaster = useSelector((store) => store.localVariables.selectedMaster);
const queryClient = useQueryClient();
const { data: masterData = [], loading, error, RecallApi } = useMaster();
const { data: masterData = [], loading, error, RecallApi } = useMaster();
const openModal = () => setIsCreateModalOpen(true);
const openModal = () => setIsCreateModalOpen(true);
const closeModal = () => {
setIsCreateModalOpen(false);
setModalConfig(null);
// Clean up Bootstrap modal manually
const modalEl = document.getElementById('master-modal');
modalEl?.classList.remove('show');
if (modalEl) modalEl.style.display = 'none';
document.body.classList.remove('modal-open');
document.body.style.overflow = 'auto';
document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
};
const handleModalData = (modalType, item, masterType = selectedMaster) => {
setModalConfig({ modalType, item, masterType });
};
const handleSearch = (e) => {
const value = e.target.value.toLowerCase();
setSearchTerm(value);
if (!masterData?.length) return;
const results = masterData.filter((item) =>
Object.values(item).some(
(field) => field?.toString().toLowerCase().includes(value)
)
);
setFilteredResults(results);
};
const displayData = useMemo(() => {
if (searchTerm) return filteredResults;
return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
}, [searchTerm, filteredResults, selectedMaster, masterData]);
const columns = useMemo(() => {
if (!displayData?.length) return [];
return Object.keys(displayData[0]).map((key) => ({
key,
label: key.toUpperCase(),
}));
}, [displayData]);
useEffect(() => {
if (modalConfig) openModal();
}, [modalConfig]);
useEffect(() => {
return () => {
const closeModal = () => {
setIsCreateModalOpen(false);
closeModal();
setModalConfig(null);
// Clean up Bootstrap modal manually
const modalEl = document.getElementById('master-modal');
modalEl?.classList.remove('show');
if (modalEl) modalEl.style.display = 'none';
document.body.classList.remove('modal-open');
document.body.style.overflow = 'auto';
document.querySelectorAll('.modal-backdrop').forEach((el) => el.remove());
};
}, []);
const handleModalData = (modalType, item, masterType = selectedMaster) => {
setModalConfig({ modalType, item, masterType });
};
const handleSearch = (e) => {
const value = e.target.value.toLowerCase();
setSearchTerm(value);
if (!masterData?.length) return;
const results = masterData.filter((item) =>
Object.values(item).some(
(field) => field?.toString().toLowerCase().includes(value)
)
);
setFilteredResults(results);
};
const displayData = useMemo(() => {
if (searchTerm) return filteredResults;
return queryClient.getQueryData(["masterData", selectedMaster]) || masterData;
}, [searchTerm, filteredResults, selectedMaster, masterData]);
const columns = useMemo(() => {
if (!displayData?.length) return [];
return Object.keys(displayData[0]).map((key) => ({
key,
label: key.toUpperCase(),
}));
}, [displayData]);
useEffect(() => {
if (modalConfig) openModal();
}, [modalConfig]);
useEffect(() => {
return () => {
setIsCreateModalOpen(false);
closeModal();
};
}, []);
return (
<>
{isCreateModalOpen && (
<MasterModal modaldata={modalConfig} closeModal={closeModal} />
<MasterModal modaldata={modalConfig} closeModal={closeModal} />
)}
<div className="container-fluid">
@ -100,7 +100,7 @@ useEffect(() => {
></Breadcrumb>
<div className="row">
<div className="card">
<div className="card-datatable table-responsive pt-2">
<div className="card-datatable table-responsive py-4">
<div
id="DataTables_Table_0_wrapper"
className="dataTables_wrapper dt-bootstrap5 no-footer"
@ -115,15 +115,15 @@ useEffect(() => {
>
<label>
<select
onChange={(e) => dispatch(changeMaster(e.target.value))}
onChange={(e) => dispatch(changeMaster(e.target.value))}
name="DataTables_Table_0_length"
aria-controls="DataTables_Table_0"
className="form-select form-select-sm"
value={selectedMaster}
>
{mastersList.map( ( item ) => (
{mastersList.map((item) => (
<option key={item.id} value={item.name}>{item.name}</option>
))}
</select>
@ -151,7 +151,7 @@ useEffect(() => {
<div className={`dt-buttons btn-group flex-wrap ${!hasMasterPermission && 'd-none'}`}>
{" "}
<div className="input-group">
<button
className={`btn btn-sm add-new btn-primary `}
// ${hasUserPermission('660131a4-788c-4739-a082-cbbf7879cbf2') ? "":"d-none"}
@ -161,8 +161,8 @@ useEffect(() => {
data-bs-toggle="modal"
data-bs-target="#master-modal"
onClick={() => {
handleModalData(selectedMaster,"null",selectedMaster)
handleModalData(selectedMaster, "null", selectedMaster)
}}
>
<span>
@ -177,7 +177,7 @@ useEffect(() => {
</div>
</div>
</div>
<MasterTable data={displayData} columns={columns} loading={loading} handleModalData={handleModalData} />
<div style={{ width: "1%" }}></div>
</div>

2
src/pages/master/MasterTable.jsx
View File

@ -184,7 +184,7 @@ const MasterTable = ({ data, columns, loading, handleModalData }) => {
{/* Pagination */}
{!loading && safeData.length > 20 && (
<nav aria-label="Page ">
<ul className="pagination pagination-sm justify-content-end py-1">
<ul className="pagination pagination-sm justify-content-end mt-3">
<li className={`page-item ${currentPage === 1 ? "disabled" : ""}`}>
<button
className="page-link btn-xs"