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

Ui alignment in Recurring Expense and Payment Request page.

Browse Source
This commit is contained in:
Kartik Sharma 2025-11-10 16:00:28 +05:30
parent 26675d61c3
commit 00e74b645c
5 changed files with 16 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Expenses/ExpenseSkeleton.jsx
View File

@ -154,7 +154,7 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
<thead> <thead>
<tr> <tr>
<th className="d-none d-sm-table-cell"> <th className="d-none d-sm-table-cell">
<div className="text-start ms-5">Expense Categort</div> <div className="text-start ms-5">Expense Category</div>
</th> </th>
<th className="d-none d-sm-table-cell"> <th className="d-none d-sm-table-cell">
<div className="text-start ms-5">Payment Mode</div> <div className="text-start ms-5">Payment Mode</div>

2
src/components/PaymentRequest/PaymentRequestList.jsx
View File

@ -239,7 +239,7 @@ const PaymentRequestList = ({ filters, groupBy = "submittedBy", search }) => {
/> />
)} )}
<div className="card page-min-h table-responsive px-sm-4"> <div className="card page-min-h table-responsive px-sm-4">
<div className="card-datatable" id="payment-request-table"> <div className="card-datatable mx-2" id="payment-request-table ">
<table className="table border-top dataTable text-nowrap align-middle"> <table className="table border-top dataTable text-nowrap align-middle">
<thead> <thead>
<tr> <tr>

8
src/components/RecurringExpense/RecurringExpenseList.jsx
View File

@ -181,10 +181,11 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
/> />
)} )}
<div className="card page-min-h table-responsive px-sm-4 "> <div className="card page-min-h table-responsive px-sm-4">
<div className="card-datatable" id="payment-request-table"> <div className="card-datatable" id="payment-request-table">
{Array.isArray(filteredData) && filteredData.length > 0 && ( <div className="mx-2">
<table className="table border-top dataTable text-nowrap align-middle"> {Array.isArray(filteredData) && filteredData.length > 0 && (
<table className="table border-top dataTable text-nowrap align-middle">
<thead> <thead>
<tr> <tr>
{recurringExpenseColumns.map((col) => ( {recurringExpenseColumns.map((col) => (
@ -284,6 +285,7 @@ const RecurringExpenseList = ({ search, filterStatuses }) => {
{isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)} {isError ? (<p>{error.message}</p>):(<p>No Recurring Expense Found</p>)}
</div> </div>
)} )}
</div>
</div> </div>
{/* Pagination */} {/* Pagination */}

8
src/pages/PaymentRequest/PaymentRequestPage.jsx
View File

@ -73,7 +73,7 @@ const PaymentRequestPage = () => {
{/* Top Bar */} {/* Top Bar */}
<div className="card my-3 px-sm-4 px-0"> <div className="card my-3 px-sm-4 px-0">
<div className="card-body py-2 px-0"> <div className="card-body py-2 px-0 mx-2">
<div className="row align-items-center"> <div className="row align-items-center">
<div className="col-6"> <div className="col-6">
<input <input
@ -81,11 +81,12 @@ const PaymentRequestPage = () => {
className="form-control form-control-sm w-auto" className="form-control form-control-sm w-auto"
placeholder="Search Payment Request" placeholder="Search Payment Request"
value={search} value={search}
style={{minWidth:"200px"}}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />
</div> </div>
<div className="col-6 text-end mt-2 mt-sm-0"> <div className="col-6 text-end mt-sm-0">
<button <button
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
type="button" type="button"
@ -145,7 +146,8 @@ const PaymentRequestPage = () => {
size="md" size="md"
closeModal={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} closeModal={() => setIsExpenseGenerate({IsOpen:false, requestId: null})}
> >
<MakeExpense onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} /> <MakeExpe
nse onClose={() => setIsExpenseGenerate({IsOpen:false, requestId: null})} />
</GlobalModel> </GlobalModel>
)} )}

7
src/pages/RecurringExpense/RecurringExpensePage.jsx
View File

@ -57,16 +57,17 @@ const RecurringExpensePage = () => {
{/* Top Bar */} {/* Top Bar */}
<div className="card my-3 px-sm-4 px-0"> <div className="card my-3 px-sm-4 px-0">
<div className="card-body py-2 px-1"> <div className="card-body py-2 px-1 mx-2">
<div className="row align-items-center mb-0"> <div className="row align-items-center mb-0">
{/* Left Column: Search + Filter */} {/* Left Column: Search + Filter */}
<div className="col-md-8 col-sm-12 mb-2 mb-md-0"> <div className="col-md-8 col-sm-12 mb-2 mb-md-0">
<div className="d-flex align-items-center flex-wrap gap-0"> <div className="d-flex align-items-center flex-wrap gap-0">
<input <input
type="search" type="search"
className="form-control form-control-sm w-25" className="form-control form-control-sm w-auto"
placeholder="Search Recurring Expense" placeholder="Search Recurring Expense"
value={search} value={search}
style={{minWidth:"200px"}}
onChange={(e) => setSearch(e.target.value)} onChange={(e) => setSearch(e.target.value)}
/> />
@ -99,7 +100,7 @@ const RecurringExpensePage = () => {
</div> </div>
{/* Right Column: Add Button */} {/* Right Column: Add Button */}
<div className="col-md-4 col-sm-12 text-md-end text-start"> <div className="col-md-4 col-sm-12 text-md-end text-end">
<button <button
className="btn btn-sm btn-primary" className="btn btn-sm btn-primary"
type="button" type="button"