ui improvements - dashbord attendance report toggle icons change
This commit is contained in:
parent
495f38db99
commit
0e8691f6d0
@ -6,180 +6,198 @@ import flatColors from "../Charts/flatColor";
|
|||||||
import ChartSkeleton from "../Charts/Skelton";
|
import ChartSkeleton from "../Charts/Skelton";
|
||||||
|
|
||||||
const formatDate = (dateStr) => {
|
const formatDate = (dateStr) => {
|
||||||
const date = new Date(dateStr);
|
const date = new Date(dateStr);
|
||||||
return date.toLocaleDateString("en-GB", {
|
return date.toLocaleDateString("en-GB", {
|
||||||
day: "2-digit",
|
day: "2-digit",
|
||||||
month: "long",
|
month: "long",
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const AttendanceOverview = () => {
|
const AttendanceOverview = () => {
|
||||||
const [dayRange, setDayRange] = useState(7);
|
const [dayRange, setDayRange] = useState(7);
|
||||||
const [view, setView] = useState("chart");
|
const [view, setView] = useState("chart");
|
||||||
|
|
||||||
const projectId = useSelector((store) => store.localVariables.projectId);
|
const projectId = useSelector((store) => store.localVariables.projectId);
|
||||||
const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(projectId, dayRange);
|
const { attendanceOverviewData, loading, error } = useAttendanceOverviewData(
|
||||||
|
projectId,
|
||||||
|
dayRange
|
||||||
|
);
|
||||||
|
|
||||||
const { tableData, roles, dates } = useMemo(() => {
|
const { tableData, roles, dates } = useMemo(() => {
|
||||||
const map = new Map();
|
const map = new Map();
|
||||||
|
|
||||||
attendanceOverviewData.forEach((entry) => {
|
attendanceOverviewData.forEach((entry) => {
|
||||||
const date = formatDate(entry.date);
|
const date = formatDate(entry.date);
|
||||||
if (!map.has(date)) map.set(date, {});
|
if (!map.has(date)) map.set(date, {});
|
||||||
map.get(date)[entry.role.trim()] = entry.present;
|
map.get(date)[entry.role.trim()] = entry.present;
|
||||||
});
|
});
|
||||||
|
|
||||||
const uniqueRoles = [...new Set(attendanceOverviewData.map((e) => e.role.trim()))];
|
const uniqueRoles = [
|
||||||
const sortedDates = [...map.keys()];
|
...new Set(attendanceOverviewData.map((e) => e.role.trim())),
|
||||||
const data = sortedDates.map((date) => {
|
];
|
||||||
const row = { date };
|
const sortedDates = [...map.keys()];
|
||||||
uniqueRoles.forEach((role) => {
|
const data = sortedDates.map((date) => {
|
||||||
row[role] = map.get(date)?.[role] ?? 0;
|
const row = { date };
|
||||||
});
|
uniqueRoles.forEach((role) => {
|
||||||
return row;
|
row[role] = map.get(date)?.[role] ?? 0;
|
||||||
});
|
});
|
||||||
|
return row;
|
||||||
|
});
|
||||||
|
|
||||||
return {
|
return {
|
||||||
tableData: data,
|
tableData: data,
|
||||||
roles: uniqueRoles,
|
roles: uniqueRoles,
|
||||||
dates: sortedDates,
|
dates: sortedDates,
|
||||||
};
|
|
||||||
}, [attendanceOverviewData]);
|
|
||||||
|
|
||||||
const chartSeries = roles.map((role) => ({
|
|
||||||
name: role,
|
|
||||||
data: tableData.map((row) => row[role]),
|
|
||||||
}));
|
|
||||||
|
|
||||||
const chartOptions = {
|
|
||||||
chart: {
|
|
||||||
type: "bar",
|
|
||||||
stacked: true,
|
|
||||||
height: 400,
|
|
||||||
toolbar: { show: false },
|
|
||||||
},
|
|
||||||
plotOptions: {
|
|
||||||
bar: {
|
|
||||||
borderRadius: 2,
|
|
||||||
columnWidth: "60%",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xaxis: {
|
|
||||||
categories: tableData.map((row) => row.date),
|
|
||||||
},
|
|
||||||
yaxis: {
|
|
||||||
show: true,
|
|
||||||
axisBorder: {
|
|
||||||
show: true,
|
|
||||||
color: '#78909C',
|
|
||||||
offsetX: 0,
|
|
||||||
offsetY: 0
|
|
||||||
},
|
|
||||||
axisTicks: {
|
|
||||||
show: true,
|
|
||||||
borderType: 'solid',
|
|
||||||
color: '#78909C',
|
|
||||||
width: 6,
|
|
||||||
offsetX: 0,
|
|
||||||
offsetY: 0
|
|
||||||
},
|
|
||||||
},
|
|
||||||
legend: {
|
|
||||||
position: "bottom",
|
|
||||||
},
|
|
||||||
fill: {
|
|
||||||
opacity: 1,
|
|
||||||
},
|
|
||||||
colors: roles.map((_, i) => flatColors[i % flatColors.length]),
|
|
||||||
};
|
};
|
||||||
|
}, [attendanceOverviewData]);
|
||||||
|
|
||||||
return (
|
const chartSeries = roles.map((role) => ({
|
||||||
<div
|
name: role,
|
||||||
className="bg-white p-4 rounded shadow d-flex flex-column"
|
data: tableData.map((row) => row[role]),
|
||||||
>
|
}));
|
||||||
{/* Header */}
|
|
||||||
<div className="d-flex justify-content-between align-items-center mb-3">
|
|
||||||
<div className="card-title mb-0 text-start">
|
|
||||||
<h5 className="mb-1">Attendance Overview</h5>
|
|
||||||
<p className="card-subtitle">Role-wise present count</p>
|
|
||||||
</div>
|
|
||||||
<div className="d-flex gap-2">
|
|
||||||
<select
|
|
||||||
className="form-select form-select-sm"
|
|
||||||
value={dayRange}
|
|
||||||
onChange={(e) => setDayRange(Number(e.target.value))}
|
|
||||||
>
|
|
||||||
<option value={7}>Last 7 Days</option>
|
|
||||||
<option value={15}>Last 15 Days</option>
|
|
||||||
<option value={30}>Last 30 Days</option>
|
|
||||||
</select>
|
|
||||||
<button
|
|
||||||
className={`btn btn-sm ${view === "chart" ? "btn-primary" : "btn-outline-primary"}`}
|
|
||||||
onClick={() => setView("chart")}
|
|
||||||
>
|
|
||||||
📊
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className={`btn btn-sm ${view === "table" ? "btn-primary" : "btn-outline-primary"}`}
|
|
||||||
onClick={() => setView("table")}
|
|
||||||
>
|
|
||||||
📋
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Content */}
|
const chartOptions = {
|
||||||
<div className="flex-grow-1 d-flex align-items-center justify-content-center">
|
chart: {
|
||||||
{loading ? (
|
type: "bar",
|
||||||
<ChartSkeleton />
|
stacked: true,
|
||||||
) : error ? (
|
height: 400,
|
||||||
<p className="text-danger">{error}</p>
|
toolbar: { show: false },
|
||||||
) : view === "chart" ? (
|
},
|
||||||
<div className="w-100">
|
plotOptions: {
|
||||||
<ReactApexChart
|
bar: {
|
||||||
options={chartOptions}
|
borderRadius: 2,
|
||||||
series={chartSeries}
|
columnWidth: "60%",
|
||||||
type="bar"
|
},
|
||||||
height={400}
|
},
|
||||||
/>
|
xaxis: {
|
||||||
</div>
|
categories: tableData.map((row) => row.date),
|
||||||
) : (
|
},
|
||||||
<div
|
yaxis: {
|
||||||
className="table-responsive w-100"
|
show: true,
|
||||||
style={{ maxHeight: "350px", overflowY: "auto" }}
|
axisBorder: {
|
||||||
>
|
show: true,
|
||||||
<table className="table table-bordered table-sm text-start align-middle mb-0">
|
color: "#78909C",
|
||||||
<thead className="table-light" style={{ position: "sticky", top: 0, zIndex: 1 }}>
|
offsetX: 0,
|
||||||
<tr>
|
offsetY: 0,
|
||||||
<th style={{ background: "#f8f9fa", textTransform: "none" }}>Role</th>
|
},
|
||||||
{dates.map((date, idx) => (
|
axisTicks: {
|
||||||
<th key={idx} style={{ background: "#f8f9fa", textTransform: "none" }}>{date}</th>
|
show: true,
|
||||||
))}
|
borderType: "solid",
|
||||||
</tr>
|
color: "#78909C",
|
||||||
</thead>
|
width: 6,
|
||||||
|
offsetX: 0,
|
||||||
|
offsetY: 0,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
position: "bottom",
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1,
|
||||||
|
},
|
||||||
|
colors: roles.map((_, i) => flatColors[i % flatColors.length]),
|
||||||
|
};
|
||||||
|
|
||||||
<tbody>
|
return (
|
||||||
{roles.map((role) => (
|
<div className="bg-white p-4 rounded shadow d-flex flex-column">
|
||||||
<tr key={role}>
|
{/* Header */}
|
||||||
<td>{role}</td>
|
<div className="d-flex justify-content-between align-items-center mb-3">
|
||||||
{tableData.map((row, idx) => {
|
<div className="card-title mb-0 text-start">
|
||||||
const value = row[role];
|
<h5 className="mb-1">Attendance Overview</h5>
|
||||||
const cellStyle = value > 0 ? { backgroundColor: '#d5d5d5' } : {};
|
<p className="card-subtitle">Role-wise present count</p>
|
||||||
return (
|
|
||||||
<td key={idx} style={cellStyle}>
|
|
||||||
{value}
|
|
||||||
</td>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</tr>
|
|
||||||
))}
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
<div className="d-flex gap-2">
|
||||||
|
<select
|
||||||
|
className="form-select form-select-sm w-auto"
|
||||||
|
value={dayRange}
|
||||||
|
onChange={(e) => setDayRange(Number(e.target.value))}
|
||||||
|
>
|
||||||
|
<option value={7}>Last 7 Days</option>
|
||||||
|
<option value={15}>Last 15 Days</option>
|
||||||
|
<option value={30}>Last 30 Days</option>
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
className={`btn btn-sm p-1 ${
|
||||||
|
view === "chart" ? "btn-primary" : "btn-outline-primary"
|
||||||
|
}`}
|
||||||
|
onClick={() => setView("chart")}
|
||||||
|
>
|
||||||
|
<i class="bx bx-bar-chart fs-5"></i>
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className={`btn btn-sm p-1 ${
|
||||||
|
view === "table" ? "btn-primary" : "btn-outline-primary"
|
||||||
|
}`}
|
||||||
|
onClick={() => setView("table")}
|
||||||
|
>
|
||||||
|
<i class="bx bx-table fs-5"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="flex-grow-1 d-flex align-items-center justify-content-center">
|
||||||
|
{loading ? (
|
||||||
|
<ChartSkeleton />
|
||||||
|
) : error ? (
|
||||||
|
<p className="text-danger">{error}</p>
|
||||||
|
) : view === "chart" ? (
|
||||||
|
<div className="w-100">
|
||||||
|
<ReactApexChart
|
||||||
|
options={chartOptions}
|
||||||
|
series={chartSeries}
|
||||||
|
type="bar"
|
||||||
|
height={400}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div
|
||||||
|
className="table-responsive w-100"
|
||||||
|
style={{ maxHeight: "350px", overflowY: "auto" }}
|
||||||
|
>
|
||||||
|
<table className="table table-bordered table-sm text-start align-middle mb-0">
|
||||||
|
<thead
|
||||||
|
className="table-light"
|
||||||
|
style={{ position: "sticky", top: 0, zIndex: 1 }}
|
||||||
|
>
|
||||||
|
<tr>
|
||||||
|
<th style={{ background: "#f8f9fa", textTransform: "none" }}>
|
||||||
|
Role
|
||||||
|
</th>
|
||||||
|
{dates.map((date, idx) => (
|
||||||
|
<th
|
||||||
|
key={idx}
|
||||||
|
style={{ background: "#f8f9fa", textTransform: "none" }}
|
||||||
|
>
|
||||||
|
{date}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
{roles.map((role) => (
|
||||||
|
<tr key={role}>
|
||||||
|
<td>{role}</td>
|
||||||
|
{tableData.map((row, idx) => {
|
||||||
|
const value = row[role];
|
||||||
|
const cellStyle =
|
||||||
|
value > 0 ? { backgroundColor: "#d5d5d5" } : {};
|
||||||
|
return (
|
||||||
|
<td key={idx} style={cellStyle}>
|
||||||
|
{value}
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default AttendanceOverview;
|
export default AttendanceOverview;
|
||||||
|
|||||||
516
src/components/Employee/EmpDocuments.jsx
Normal file
516
src/components/Employee/EmpDocuments.jsx
Normal file
@ -0,0 +1,516 @@
|
|||||||
|
import React, { useState, useEffect } from "react";
|
||||||
|
|
||||||
|
const EmpDocuments = ({ profile, loggedInUser }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
id="DataTables_Table_0_wrapper"
|
||||||
|
class="dt-container dt-bootstrap5 dt-empty-footer"
|
||||||
|
>
|
||||||
|
<div class="row card-header border-bottom mx-0 px-3 py-2">
|
||||||
|
<div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto">
|
||||||
|
<h5 class="card-title mb-0 text-nowrap text-md-start text-center">
|
||||||
|
Document you have uploaded
|
||||||
|
</h5>
|
||||||
|
</div>
|
||||||
|
<div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ms-auto">
|
||||||
|
<div class="dt-search">
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
class="form-control"
|
||||||
|
id="dt-search-0"
|
||||||
|
placeholder="Search Document"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
/>
|
||||||
|
<label for="dt-search-0"></label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="justify-content-between dt-layout-table">
|
||||||
|
<div class="d-md-flex justify-content-between align-items-center col-12 dt-layout-full col-md">
|
||||||
|
<table
|
||||||
|
class="table table-sm datatables-academy-Document dataTable dtr-column"
|
||||||
|
id="DataTables_Table_0"
|
||||||
|
aria-describedby="DataTables_Table_0_info"
|
||||||
|
style={{ width: "100%" }}
|
||||||
|
>
|
||||||
|
<colgroup>
|
||||||
|
<col data-dt-column="2" style={{ width: "369.984px" }} />
|
||||||
|
<col data-dt-column="3" style={{ width: "96.2656px" }} />
|
||||||
|
<col data-dt-column="4" style={{ width: "259.75px" }} />
|
||||||
|
<col data-dt-column="5" style={{ width: "65px" }} />
|
||||||
|
</colgroup>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th
|
||||||
|
data-dt-column="0"
|
||||||
|
class="control dt-orderable-none dtr-hidden"
|
||||||
|
rowspan="1"
|
||||||
|
colspan="1"
|
||||||
|
aria-label=""
|
||||||
|
style={{ display: "none" }}
|
||||||
|
>
|
||||||
|
<span class="dt-column-title"></span>
|
||||||
|
<span class="dt-column-order"></span>
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<th
|
||||||
|
data-dt-column="2"
|
||||||
|
rowspan="1"
|
||||||
|
colspan="1"
|
||||||
|
class="dt-orderable-asc dt-orderable-desc dt-ordering-desc"
|
||||||
|
aria-sort="descending"
|
||||||
|
aria-label="Document Name: Activate to remove sorting"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span class="dt-column-title" role="button">
|
||||||
|
Document Name
|
||||||
|
</span>
|
||||||
|
<span class="dt-column-order"></span>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
data-dt-column="3"
|
||||||
|
rowspan="1"
|
||||||
|
colspan="1"
|
||||||
|
class="dt-orderable-asc dt-orderable-desc"
|
||||||
|
aria-label="Time: Activate to sort"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span class="dt-column-title" role="button">
|
||||||
|
Uploaded Date
|
||||||
|
</span>
|
||||||
|
<span class="dt-column-order"></span>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
data-dt-column="3"
|
||||||
|
rowspan="1"
|
||||||
|
colspan="1"
|
||||||
|
class="dt-orderable-asc dt-orderable-desc"
|
||||||
|
aria-label="Time: Activate to sort"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span class="dt-column-title" role="button">
|
||||||
|
Uploaded By
|
||||||
|
</span>
|
||||||
|
<span class="dt-column-order"></span>
|
||||||
|
</th>
|
||||||
|
<th
|
||||||
|
class="dt-orderable-asc dt-orderable-desc"
|
||||||
|
data-dt-column="5"
|
||||||
|
rowspan="1"
|
||||||
|
colspan="1"
|
||||||
|
aria-label="Status: Activate to sort"
|
||||||
|
tabindex="0"
|
||||||
|
>
|
||||||
|
<span class="dt-column-title" role="button">
|
||||||
|
Status
|
||||||
|
</span>
|
||||||
|
<span class="dt-column-order"></span>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
class="control dtr-hidden"
|
||||||
|
tabindex="0"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
></td>
|
||||||
|
<td class="sorting_1">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<span class="me-4">
|
||||||
|
<span class="bg-label-danger p-1_5">
|
||||||
|
<i class="icon-base bx bxs-file-pdf icon-28px"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
class="text-heading text-truncate fw-medium mb-2 text-wrap"
|
||||||
|
href="app-academy-Document-details.html"
|
||||||
|
>
|
||||||
|
AADHAR Card
|
||||||
|
</a>
|
||||||
|
<div class="d-flex align-items-center mt-1">
|
||||||
|
{/* <div class="avatar-wrapper me-2">
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img
|
||||||
|
src="../../assets/img/avatars/2.png"
|
||||||
|
alt="Avatar"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<small class="text-nowrap text-heading">
|
||||||
|
card number
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-nowrap text-heading">
|
||||||
|
11-Jun-2025
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-nowrap text-heading">
|
||||||
|
Uploaded By
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td>
|
||||||
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
|
<div class=" d-flex align-items-center">
|
||||||
|
<i class="icon-base bx bx-book-open icon-lg me-1_5 text-info"></i>
|
||||||
|
</div>
|
||||||
|
<div class=" d-flex align-items-center">
|
||||||
|
<i class="icon-base bx bx-trash icon-lg me-1_5 text-danger"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
class="control dtr-hidden"
|
||||||
|
tabindex="0"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
></td>
|
||||||
|
<td class="sorting_1">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<span class="me-4">
|
||||||
|
<span class="badge bg-label-warning rounded p-1_5">
|
||||||
|
<i class="icon-base bx bxs-file-doc icon-28px"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
class="text-heading text-truncate fw-medium mb-2 text-wrap"
|
||||||
|
href="app-academy-Document-details.html"
|
||||||
|
>
|
||||||
|
Degree Certificate
|
||||||
|
</a>
|
||||||
|
<div class="d-flex align-items-center mt-1">
|
||||||
|
{/* <div class="avatar-wrapper me-2">
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img
|
||||||
|
src="../../assets/img/avatars/13.png"
|
||||||
|
alt="Avatar"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<small class="text-nowrap text-heading">
|
||||||
|
certificate details
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-nowrap text-heading">
|
||||||
|
11-Jun-2025
|
||||||
|
</span>
|
||||||
|
</td>{" "}
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-nowrap text-heading">
|
||||||
|
Uploaded By
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
|
<div class=" d-flex align-items-center">
|
||||||
|
<i class="icon-base bx bx-book-open icon-lg me-1_5 text-info"></i>
|
||||||
|
</div>
|
||||||
|
<div class=" d-flex align-items-center">
|
||||||
|
<i class="icon-base bx bx-trash icon-lg me-1_5 text-danger"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
class="control dtr-hidden"
|
||||||
|
tabindex="0"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
></td>
|
||||||
|
<td class="sorting_1">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<span class="me-4">
|
||||||
|
<span class="badge bg-label-success rounded p-1_5">
|
||||||
|
<i class="icon-base bx bxs-file-png icon-28px"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
class="text-heading text-truncate fw-medium mb-2 text-wrap"
|
||||||
|
href="app-academy-Document-details.html"
|
||||||
|
>
|
||||||
|
Photo
|
||||||
|
</a>
|
||||||
|
<div class="d-flex align-items-center mt-1">
|
||||||
|
{/* <div class="avatar-wrapper me-2">
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img
|
||||||
|
src="../../assets/img/avatars/12.png"
|
||||||
|
alt="Avatar"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<small class="text-nowrap text-heading">
|
||||||
|
self photo
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-nowrap text-heading">
|
||||||
|
11-Jun-2025
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-nowrap text-heading">
|
||||||
|
Uploaded By
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
|
<div class=" d-flex align-items-center">
|
||||||
|
<i class="icon-base bx bx-book-open icon-lg me-1_5 text-info"></i>
|
||||||
|
</div>
|
||||||
|
<div class=" d-flex align-items-center">
|
||||||
|
<i class="icon-base bx bx-trash icon-lg me-1_5 text-danger"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
class="control dtr-hidden"
|
||||||
|
tabindex="0"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
></td>
|
||||||
|
<td class="sorting_1">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<span class="me-4">
|
||||||
|
<span class="badge bg-label-primary rounded p-1_5">
|
||||||
|
<i class="icon-base bx bxs-file-pdf icon-28px"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
class="text-heading text-truncate fw-medium mb-2 text-wrap"
|
||||||
|
href="app-academy-Document-details.html"
|
||||||
|
>
|
||||||
|
Driving License
|
||||||
|
</a>
|
||||||
|
<div class="d-flex align-items-center mt-1">
|
||||||
|
{/* <div class="avatar-wrapper me-2">
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img
|
||||||
|
src="../../assets/img/avatars/5.png"
|
||||||
|
alt="Avatar"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<small class="text-nowrap text-heading">
|
||||||
|
license number
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-nowrap text-heading">
|
||||||
|
11-Jun-2025
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-nowrap text-heading">
|
||||||
|
Uploaded By
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
|
<div class=" d-flex align-items-center">
|
||||||
|
<i class="icon-base bx bx-book-open icon-lg me-1_5 text-info"></i>
|
||||||
|
</div>
|
||||||
|
<div class=" d-flex align-items-center">
|
||||||
|
<i class="icon-base bx bx-trash icon-lg me-1_5 text-danger"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td
|
||||||
|
class="control dtr-hidden"
|
||||||
|
tabindex="0"
|
||||||
|
style={{ display: "none" }}
|
||||||
|
></td>
|
||||||
|
<td class="sorting_1">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<span class="me-4">
|
||||||
|
<span class="badge bg-label-primary rounded p-1_5">
|
||||||
|
<i class="icon-base bx bxs-file-txt icon-28px"></i>
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
class="text-heading text-truncate fw-medium mb-2 text-wrap"
|
||||||
|
href="app-academy-Document-details.html"
|
||||||
|
>
|
||||||
|
PAN Card
|
||||||
|
</a>
|
||||||
|
<div class="d-flex align-items-center mt-1">
|
||||||
|
{/* <div class="avatar-wrapper me-2">
|
||||||
|
<div class="avatar avatar-xs">
|
||||||
|
<img
|
||||||
|
src="../../assets/img/avatars/14.png"
|
||||||
|
alt="Avatar"
|
||||||
|
class="rounded-circle"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div> */}
|
||||||
|
<small class="text-nowrap text-heading">
|
||||||
|
card number
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-nowrap text-heading">
|
||||||
|
11-Jun-2025
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<span class="fw-medium text-nowrap text-heading">
|
||||||
|
Uploaded By
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
|
<div class=" d-flex align-items-center">
|
||||||
|
<i class="icon-base bx bx-book-open icon-lg me-1_5 text-info"></i>
|
||||||
|
</div>
|
||||||
|
<div class=" d-flex align-items-center">
|
||||||
|
<i class="icon-base bx bx-trash icon-lg me-1_5 text-danger"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
<tfoot></tfoot>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row mx-3 justify-content-between">
|
||||||
|
<div class="d-md-flex justify-content-between align-items-center dt-layout-start col-md-auto me-auto">
|
||||||
|
<div
|
||||||
|
class="dt-info"
|
||||||
|
aria-live="polite"
|
||||||
|
id="DataTables_Table_0_info"
|
||||||
|
role="status"
|
||||||
|
>
|
||||||
|
Showing 1 to 5 of 25 entries
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-md-flex justify-content-between align-items-center dt-layout-end col-md-auto ms-auto">
|
||||||
|
<div class="dt-paging">
|
||||||
|
<nav aria-label="pagination">
|
||||||
|
<ul class="pagination">
|
||||||
|
<li class="dt-paging-button page-item disabled">
|
||||||
|
<button
|
||||||
|
class="page-link previous"
|
||||||
|
role="link"
|
||||||
|
type="button"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
aria-disabled="true"
|
||||||
|
aria-label="Previous"
|
||||||
|
data-dt-idx="previous"
|
||||||
|
tabindex="-1"
|
||||||
|
>
|
||||||
|
<i class="icon-base bx bx-chevron-left scaleX-n1-rtl icon-18px"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="dt-paging-button page-item active">
|
||||||
|
<button
|
||||||
|
class="page-link"
|
||||||
|
role="link"
|
||||||
|
type="button"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
aria-current="page"
|
||||||
|
data-dt-idx="0"
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="dt-paging-button page-item">
|
||||||
|
<button
|
||||||
|
class="page-link"
|
||||||
|
role="link"
|
||||||
|
type="button"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
data-dt-idx="1"
|
||||||
|
>
|
||||||
|
2
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="dt-paging-button page-item">
|
||||||
|
<button
|
||||||
|
class="page-link"
|
||||||
|
role="link"
|
||||||
|
type="button"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
data-dt-idx="2"
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="dt-paging-button page-item">
|
||||||
|
<button
|
||||||
|
class="page-link"
|
||||||
|
role="link"
|
||||||
|
type="button"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
data-dt-idx="3"
|
||||||
|
>
|
||||||
|
4
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="dt-paging-button page-item">
|
||||||
|
<button
|
||||||
|
class="page-link"
|
||||||
|
role="link"
|
||||||
|
type="button"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
data-dt-idx="4"
|
||||||
|
>
|
||||||
|
5
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
<li class="dt-paging-button page-item">
|
||||||
|
<button
|
||||||
|
class="page-link next"
|
||||||
|
role="link"
|
||||||
|
type="button"
|
||||||
|
aria-controls="DataTables_Table_0"
|
||||||
|
aria-label="Next"
|
||||||
|
data-dt-idx="next"
|
||||||
|
>
|
||||||
|
<i class="icon-base bx bx-chevron-right scaleX-n1-rtl icon-18px"></i>
|
||||||
|
</button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EmpDocuments;
|
||||||
@ -36,12 +36,12 @@ const EmployeeNav = ({ onPillClick, activePill }) => {
|
|||||||
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
|
<li className="nav-item" style={{ padding: "10px 10px 0 10px" }}>
|
||||||
<a
|
<a
|
||||||
className={`nav-link py-1 px-2 small ${
|
className={`nav-link py-1 px-2 small ${
|
||||||
activePill === "account" ? "active" : ""
|
activePill === "documents" ? "active" : ""
|
||||||
}`}
|
}`}
|
||||||
href="#"
|
href="#"
|
||||||
onClick={(e) => {
|
onClick={(e) => {
|
||||||
e.preventDefault(); // Prevent page reload
|
e.preventDefault(); // Prevent page reload
|
||||||
onPillClick("account");
|
onPillClick("documents");
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<i className="bx bx-user bx-sm me-1_5"></i> Documents
|
<i className="bx bx-user bx-sm me-1_5"></i> Documents
|
||||||
|
|||||||
@ -20,6 +20,7 @@ import EmpAttendance from "../../components/Employee/EmpAttendance";
|
|||||||
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
import ManageEmployee from "../../components/Employee/ManageEmployee";
|
||||||
import EmpBanner from "../../components/Employee/EmpBanner";
|
import EmpBanner from "../../components/Employee/EmpBanner";
|
||||||
import EmpDashboard from "../../components/Employee/EmpDashboard";
|
import EmpDashboard from "../../components/Employee/EmpDashboard";
|
||||||
|
import EmpDocuments from "../../components/Employee/EmpDocuments";
|
||||||
|
|
||||||
const EmployeeProfile = () => {
|
const EmployeeProfile = () => {
|
||||||
const { profile } = useProfile();
|
const { profile } = useProfile();
|
||||||
@ -73,10 +74,10 @@ const EmployeeProfile = () => {
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
case "dcoument": {
|
case "documents": {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ComingSoonPage />
|
<EmpDocuments />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
break;
|
break;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user