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

modified ui base on suggestion

Browse Source
This commit is contained in:
pramod.mahajan 2025-12-10 16:32:59 +05:30
parent 07ba95e533
commit 4253ed71eb
9 changed files with 185 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/Dashboard/Dashboard.jsx
View File

@ -42,24 +42,24 @@ const Dashboard = () => {
<div className="container-fluid mt-5">
<div className="row gy-4">
{isAllProjectsSelected && (
<div className="col-sm-6 col-lg-4">
<div className="col-sm-6 col-lg-6">
<Projects />
</div>
)}
<div
className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-6"
}`}
>
<Teams />
</div>
<div
className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-4"
{!isAllProjectsSelected && ( <div
className={`${!isAllProjectsSelected ? "col-sm-6 col-lg-6" : "col-sm-6 col-lg-6"
}`}
>
<TasksCard />
</div>
</div>)}
<div className="col-12 col-xl-4 col-md-6">
<div className="card ">
<ExpenseStatus />
@ -101,7 +101,7 @@ const Dashboard = () => {
</div>
)}
{isAllProjectsSelected && (
<div className="col-12 col-md-6 mb-sm-0 mb-4">
<div className="col-12 col-md-4 mb-sm-0 mb-4">
<ServiceJobs />
</div>
)}

84
src/components/Dashboard/ExpenseByProject.jsx
View File

@ -92,45 +92,40 @@ const ExpenseByProject = () => {
<div className="card shadow-sm h-100 rounded ">
{/* Header */}
<div className="card-header">
<div className="d-flex justify-content-between align-items-center mb-1 mt-1">
<div className="d-block justify-content-between align-items-center mb-1 mt-1">
<div className="text-start">
<h5 className="mb-1 me-6 card-title">Monthly Expense -</h5>
<p className="card-subtitle m-0">{projectName}</p>
</div>
<div className="btn-group mb-5 ms-n8">
<button
className="btn btn-sm dropdown-toggle fs-5"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
<h5 className="mb-1 me-6 card-title">Monthly Expense </h5>
<div className="row w-100">
<div className="col-6"> <p className="card-subtitle m-0">{projectName}</p></div>
<div className="col-6 d-flex justify-content-between align-items-center px-0">
<select
className="form-select form-select-sm ms-auto mt-sm-0"
value={selectedType}
onChange={(e) => setSelectedType(e.target.value)}
disabled={typeLoading}
style={{ maxWidth: "200px" }}
>
{viewMode}
</button>
<ul className="dropdown-menu dropdown-menu-end ">
<li>
<button
className="dropdown-item"
onClick={() => {
setViewMode("Category");
setSelectedType("");
}}
>
Category
</button>
</li>
<li>
<button
className="dropdown-item"
onClick={() => {
setViewMode("Project");
setSelectedType("");
}}
>
Project
</button>
</li>
</ul>
<option value="">All Categories</option>
{expenseCategories?.map((type) => (
<option key={type.id} value={type.id}>
{type.name}
</option>
))}
</select>
</div>
</div>
</div>
</div>
{/* Range Buttons + Expense Dropdown */}
@ -148,22 +143,7 @@ const ExpenseByProject = () => {
{item}
</button>
))}
{viewMode === "Category" && (
<select
className="form-select form-select-sm ms-auto mb-3 mt-1 mt-sm-0"
value={selectedType}
onChange={(e) => setSelectedType(e.target.value)}
disabled={typeLoading}
style={{ maxWidth: "200px" }}
>
<option value="">All Types</option>
{expenseCategories?.map((type) => (
<option key={type.id} value={type.id}>
{type.name}
</option>
))}
</select>
)}
</div>
</div>

139
src/components/Project/AssignTask.jsx
View File

@ -237,69 +237,23 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
))}
</span>
</p>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-label text-start">
<div className="row mb-1">
<div className="col-12">
<div className="row text-start">
<div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center mt-4">
<div>
<AppFormController
name="organizationId"
control={control}
rules={{ required: "Organization is required" }}
render={({ field }) => (
<SelectField
label="" // No label here, use external label if needed
options={organizationList ?? []}
placeholder="--Select Organization--"
required
labelKey="name"
valueKeyKey="id"
value={field.value || ""}
onChange={field.onChange}
isLoading={isServiceLoading}
className="m-0 form-select-sm w-100"
/>
)}
/>
{errors.organizationId && (
<small className="danger-text">{errors.organizationId.message}</small>
)}
</div>
<div>
<AppFormController
name="serviceId"
control={control}
rules={{ required: "Service is required" }}
render={({ field }) => (
<SelectField
label="" // No label as you have one above or elsewhere
options={serviceList ?? []}
placeholder="--Select Service--"
required
labelKey="name"
valueKeyKey="id"
value={field.value || ""}
onChange={field.onChange}
isLoading={isOrgLoading}
className="m-0 form-select-sm w-100"
/>
)}
/>
{errors.serviceId && (
<small className="danger-text">{errors.serviceId.message}</small>
)}
</div>
</div>
<div
<div
className="col-12 col-md-4 d-flex flex-row gap-3 align-items-center justify-content-end"
ref={dropdownRef}
>
<div className="d-flex justify-content-between align-items-center w-100">
{/* Search Box */}
<div>
<input
type="text"
className="form-control form-control-sm ms-auto mb-2 mt-2"
placeholder="Search employees or roles..."
value={searchTerm}
onChange={handleSearchChange}
/>
</div>
{/* Dropdown */}
<div className="dropdown position-relative d-inline-block">
<a
@ -387,18 +341,67 @@ const AssignTask = ({ assignData, onClose, setAssigned }) => {
</ul>
)}
</div>
{/* Search Box */}
</div>
</div>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="form-label text-start">
<div className="row mb-1">
<div className="col-12">
<div className="row text-start">
<div className="col-12 col-md-8 d-flex flex-row gap-3 align-items-center mt-4 d-none">
<div>
<input
type="text"
className="form-control form-control-sm ms-auto mb-2 mt-2"
placeholder="Search employees or roles..."
value={searchTerm}
onChange={handleSearchChange}
<AppFormController
name="organizationId"
control={control}
rules={{ required: "Organization is required" }}
render={({ field }) => (
<SelectField
label="" // No label here, use external label if needed
options={organizationList ?? []}
placeholder="--Select Organization--"
required
labelKey="name"
valueKeyKey="id"
value={field.value || ""}
onChange={field.onChange}
isLoading={isServiceLoading}
className="m-0 form-select-sm w-100"
/>
)}
/>
{errors.organizationId && (
<small className="danger-text">{errors.organizationId.message}</small>
)}
</div>
<div>
<AppFormController
name="serviceId"
control={control}
rules={{ required: "Service is required" }}
render={({ field }) => (
<SelectField
label="" // No label as you have one above or elsewhere
options={serviceList ?? []}
placeholder="--Select Service--"
required
labelKey="name"
valueKeyKey="id"
value={field.value || ""}
onChange={field.onChange}
isLoading={isOrgLoading}
className="m-0 form-select-sm w-100"
/>
)}
/>
{errors.serviceId && (
<small className="danger-text">{errors.serviceId.message}</small>
)}
</div>
</div>
</div>
</div>
</div>

7
src/components/reports/Progress.jsx
View File

@ -24,11 +24,16 @@ const Progress = ({
value: {
show: true,
fontSize: "13px",
width:"12px",
textWrap:"wrap",
color: color,
fontWeight: 600,
fontWeight: 400,
offsetY: 7,
formatter: () => `${formatFigure(completed,{notation:"compact"})} / ${formatFigure(total,{notation:"compact"})}`,
},
style:{
textWrap:"wrap",
}
},
},
},

114
src/components/reports/report-dpr.jsx
View File

@ -12,19 +12,18 @@ const ReportDPR = ({ project, date }) => {
);
return (
<>
<div className="card">
<div className="card py-2">
<div className="d-flex text-start px-2 mt-2">
Project Status Reported - Generated at{" "}
{formatUTCToLocalTime(data?.date, true)}
</div>
{/* <!-- Status Cards */}
<div className="d-flex justify-content-between flex-wrap gap-5 px-3 py-2">
<div className="d-flex justify-content-between flex-wrap gap-5 px-3 py-4">
<ReportsDonutCard
title={"TODAY'S ATTENDANCE"}
total={data?.totalEmployees}
value={data?.todaysAttendances}
/>
<ReportsDonutCard
title={"DAILY TASKS COMPLETED"}
@ -42,9 +41,8 @@ const ReportDPR = ({ project, date }) => {
footer=""
/>
<div className="card px-3 border-top border-warning">
<h4 className="reports-card-title">Attendance Pending Report</h4>
<p>Team member present</p>
<div className="border-top card border-warning py-4 px-2">
<h5 className="reports-card-title">Attendance Pending Report</h5>
<div className="d-flex flex-column gap-2">
<div className="d-flex justify-content-between">
<span className="text-secondry"> Regualrization</span>{" "}
@ -61,60 +59,68 @@ const ReportDPR = ({ project, date }) => {
<span className="text-secondry"> Total Employee</span>{" "}
<span className="text-secondry">
{" "}
{ data?.todaysAttendances}
{data?.todaysAttendances}
</span>{" "}
</div>
</div>
</div>
<div className="reports-card">
{/* {/* <!-- Row 1: Header */}
<div>
<h4 className="reports-card-title">Team Strength on Site</h4>
</div>
<table style={{ width: "100%" }}>
<tbody>
{data?.teamOnSite?.map((member, index) => (
<tr key={index}>
<td style={{ textAlign: "left" }}>{member?.roleName}</td>
<td style={{ textAlign: "right" }}>
{member?.numberofEmployees}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div className="row px-3">
<div className="col-4">
<div className="reports-card">
{/* {/* <!-- Row 1: Header */}
<div>
<h4 className="reports-card-title">Team Strength on Site</h4>
</div>
<table style={{ width: "100%" }}>
<tbody>
{data?.teamOnSite
?.filter((item) => item?.numberofEmployees > 0)
?.map((member, index) => (
<tr key={index}>
<td style={{ textAlign: "left" }}>
{member?.roleName}
</td>
{/* {/* <!-- Activities */}
<div className="reports-activities">
<h2>Activities (Tasks) Performed 17-Sep-2025</h2>
<table className="reports-table">
<thead>
<tr>
<th>NAME</th>
<th>JOB ROLE</th>
<th>CHECK IN</th>
<th>CHECK OUT</th>
</tr>
</thead>
<tbody>
{data?.performedAttendance?.map((att,index) => (
<tr key={att.index + att.name}>
<td>{att.name}</td>
<td>{att.roleName}</td>
<td>{formatUTCToLocalTime(att.inTime, true)}</td>
<td>
{att.outTime
? formatUTCToLocalTime(att.outTime, true)
: "--"}
</td>
</tr>
))}
</tbody>
</table>
<td style={{ textAlign: "right" }}>
{member?.numberofEmployees}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
<div className="col-8">
{/* {/* <!-- Activities */}
<div className="reports-card">
<h4 className="reports-card-title">Employee In-Out Report </h4>
<table className="reports-table">
<thead>
<tr>
<th>NAME</th>
<th>JOB ROLE</th>
<th>CHECK IN</th>
<th>CHECK OUT</th>
</tr>
</thead>
<tbody>
{data?.performedAttendance?.map((att, index) => (
<tr key={att.index + att.name}>
<td>{att.name}</td>
<td>{att.roleName}</td>
<td>{formatUTCToLocalTime(att.inTime, true)}</td>
<td>
{att.outTime
? formatUTCToLocalTime(att.outTime, true)
: "--"}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
</>

2
src/pages/ServiceProject/ServiceProjectDisplay.jsx
View File

@ -20,7 +20,7 @@ const ServiceProjectDisplay = ({ listView, selectedStatuses, searchTerm }) => {
const { manageServiceProject, setManageServiceProject } = useProjectContext();
const debouncedSearch = useDebounce(searchTerm, 500);
const { data, isLoading, isError, error } = useServiceProjects(
ITEMS_PER_PAGE,
9,
currentPage,
debouncedSearch
);

7
src/pages/employee/EmployeeList.jsx
View File

@ -41,6 +41,7 @@ import Pagination from "../../components/common/Pagination";
import handleEmployeeExport from "../../components/Employee/handleEmployeeExport";
import { SpinnerLoader } from "../../components/common/Loader";
import ManageReporting from "../../components/Employee/ManageReporting";
import { capitalizeFirstLetter } from "../../utils/appUtils";
const EmployeeList = () => {
const selectedProjectId = useSelector(
@ -526,8 +527,8 @@ const EmployeeList = () => {
className="text-heading text-truncate cursor-pointer"
>
<span className="fw-normal">
{item.firstName} {item.middleName}{" "}
{item.lastName}
{capitalizeFirstLetter(item.firstName) } {capitalizeFirstLetter(item.middleName)}{" "}
{capitalizeFirstLetter(item.lastName)}
</span>
</a>
</div>
@ -540,7 +541,7 @@ const EmployeeList = () => {
{item.email}
</span>
) : (
<span className="d-block text-start text-muted fst-italic">NA</span>
<small className="d-block text-start text-muted small">-</small>
)}
</td>

2
src/pages/project/ProjectsDisplay.jsx
View File

@ -29,7 +29,7 @@ const ProjectsDisplay = ({
const [projectList, setProjectList] = useState([]);
const debouncedSearch = useDebounce(searchTerm, 500);
const { data, isLoading, isError, error } = useProjects(
ITEMS_PER_PAGE,
9,
currentPage,
debouncedSearch
);

4
src/utils/appUtils.js
View File

@ -267,3 +267,7 @@ export function calculateTDSPercentage(baseAmount = 0, taxAmount = 0, tdsPercent
}
export function capitalizeFirstLetter(str) {
if (!str) return "";
return str.charAt(0).toUpperCase() + str.slice(1);
}