Skip to content

Commit 98f0291

Browse files
JamunaSundaramSF3699JamunaSundaramSF3699
authored
Merge branch 'EJ2-981297-Emp-Management' into 104398-employee
2 parents 1fdf969 + 85f6f55 commit 98f0291

File tree

8 files changed

+421
-129
lines changed

8 files changed

+421
-129
lines changed

‎Employee_Managment_App/src/components/Announcement.css‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@
88
--annc-backdrop: rgba(2,6,23,0.35);
99
--annc-elev: 0 8px 20px rgba(2, 6, 23, 0.06);
1010
--annc-panel-width: 380px;
11-
}
11+
12+
--color-sf-icon-color: #6b7280;
13+
--color-sf-secondary-border-color-hover: #d1d5db;
14+
--color-sf-secondary-bg-color-hover: rgba(158, 158, 158, 0.2);
15+
--color-sf-content-text-color: #111827;
1216

1317
/* Backdrop area that starts below the top bar (top offset applied inline) */
1418
.annc-panel-backdrop {
@@ -157,8 +161,8 @@
157161
opacity: 0.75;
158162
}
159163
.annc-panel-item:hover {
160-
background: #f8fffb;
161-
border-color: #e8f7f1;
164+
background: var(--color-sf-secondary-bg-color-hover);
165+
color: var(--color-sf-content-text-color);
162166
}
163167
.annc-panel-item.is-unread:hover {
164168
background: #ecfdf5;

‎Employee_Managment_App/src/components/EmployeeLeave.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,124 @@
1+
.drp-left-icon.e-daterangepicker .e-range-icon::before {
2+
color: #0078d4; /* Blue for icon */
3+
}
4+
.drp-left-icon.e-daterangepicker input.e-input {
5+
color: #666; /* Gray text */
6+
border-radius: 4px; /* Subtle rounding */
7+
}
8+
.drp-left-icon.e-daterangepicker .e-input-group {
9+
border: 1px solid #ccc;
10+
background: #f9f9f9;
11+
}
12+
13+
/* Outer wrapper to position custom icons */
14+
.drp-input-wrapper {
15+
position: relative;
16+
display: inline-block;
17+
}
18+
19+
/* Use the Syncfusion-generated wrapper element as our visible control.
20+
We tweak its border to match the target screenshot. */
21+
.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper {
22+
border: 1px solid #ccc;
23+
border-radius: 4px; /* squared, not pill */
24+
box-shadow: none;
25+
}
26+
27+
/* Keep the built-in range icon hidden (we use our overlay icons instead). */
28+
.custom-syncfusion-drp .e-input-group-icon.e-range-icon {
29+
display: none !important; /* built-in icon suppressed */
30+
}
31+
/* Make sure the input has enough padding for our custom icons. */
32+
.custom-syncfusion-drp .e-date-range-wrapper .e-input {
33+
/* give more room on the left so text doesn't sit under the calendar icon */
34+
padding: 0 34px 0 52px; /* top/right/bottom/left */
35+
cursor: pointer; /* matches expectation: click to open */
36+
}
37+
38+
/* Common styles for our overlay buttons */
39+
.drp-icon-left,
40+
.drp-caret-right {
41+
position: absolute;
42+
top: 50%;
43+
transform: translateY(-50%);
44+
height: 36px;
45+
width: 36px; /* clickable area */
46+
border: 0;
47+
background: transparent;
48+
color: #333;
49+
cursor: pointer;
50+
outline: none;
51+
display: flex;
52+
align-items: center;
53+
justify-content: center;
54+
z-index: 2; /* above the input text */
55+
}
56+
57+
/* Place icons slightly inset from edges so they don't touch the border */
58+
.drp-icon-left { left: 8px; }
59+
.drp-caret-right { right: 6px; }
60+
61+
.calendar-svg, .caret-svg {
62+
width: 14px;
63+
height: 14px;
64+
}
65+
66+
/* Optional hover feedback (subtle) */
67+
.drp-icon-left:hover,
68+
.drp-caret-right:hover {
69+
color: #000;
70+
}
71+
72+
/* size and align Syncfusion icon font elements inside the overlay buttons */
73+
.drp-icon-left .e-icons,
74+
.drp-caret-right .e-icons,
75+
.calendar-i,
76+
.caret-i {
77+
font-family: "e-icons" !important;
78+
font-size: 14px;
79+
line-height: 1;
80+
display: inline-block;
81+
vertical-align: middle;
82+
color: inherit;
83+
}
84+
85+
/* ensure icon button sits above the input text */
86+
.drp-icon-left,
87+
.drp-caret-right {
88+
z-index: 3;
89+
}
90+
91+
/* Compact size tweaks to better match the target screenshot */
92+
.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper {
93+
height: 36px;
94+
padding: 6px 8px;
95+
background: #fff;
96+
}
97+
98+
99+
.custom-syncfusion-drp .e-date-range-wrapper .e-input,
100+
.e-control .e-daterangepicker.e-input{
101+
font-size: 13px;
102+
/* make the input fill the control height and vertically center the single-line text */
103+
height: 100%;
104+
box-sizing: border-box;
105+
/* room for left calendar icon (52px) and right caret (34px) */
106+
padding: 0 34px 0 52px;
107+
line-height: 36px; /* match control height (36px) to vertically center text */
108+
caret-color: #333;
109+
z-index: 1;
110+
position: relative;
111+
white-space: nowrap;
112+
overflow: hidden;
113+
text-overflow: ellipsis;
114+
display: block;
115+
text-align: center !important;
116+
}
117+
118+
/* slightly darker border on focus */
119+
.custom-syncfusion-drp .e-date-range-wrapper.e-input-group.e-control-wrapper:focus-within {
120+
border-color: #b3d4fc;
121+
box-shadow: none;
122+
}
123+
124+
/* (icon height handled above) */

‎Employee_Managment_App/src/components/EmployeeLeave.tsx‎

Lines changed: 46 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
Inject,
1616
RowInfo
1717
} from '@syncfusion/ej2-react-grids';
18+
import './EmployeeLeave.css';
1819
import { ChangeEventArgs, SwitchComponent } from '@syncfusion/ej2-react-buttons';
1920
import { DataManager, Query, UrlAdaptor, Predicate } from '@syncfusion/ej2-data';
2021
import {
@@ -53,21 +54,51 @@ const Presets = (props: { dateRangeChange: (args: RangeEventArgs) => void }) =>
5354
const lastSixEnd: Date = new Date(
5455
new Date(new Date(new Date().setMonth(new Date().getMonth() + 1)).setDate(0)).toDateString()
5556
);
57+
const dateRangePickerRef = React.useRef<DateRangePickerComponent>(null);
5658

5759
return (
58-
<DateRangePickerComponent
59-
placeholder="Select a range"
60-
value={[yearStart, yearEnd]}
61-
change={props.dateRangeChange}
62-
width={190}
63-
>
64-
<PresetsDirective>
65-
<PresetDirective label="This Month" start={monthStart} end={monthEnd}></PresetDirective>
66-
<PresetDirective label="Last Month" start={lastStart} end={lastEnd}></PresetDirective>
67-
<PresetDirective label="Last 6 Months" start={lastSixStart} end={lastSixEnd}></PresetDirective>
68-
<PresetDirective label="This Year" start={yearStart} end={yearEnd}></PresetDirective>
69-
</PresetsDirective>
70-
</DateRangePickerComponent>
60+
<div className="drp-input-wrapper">
61+
{/* left calendar icon (overlay) - opens the picker */}
62+
<button
63+
type="button"
64+
className="drp-icon-left"
65+
aria-hidden
66+
onClick={() => dateRangePickerRef.current && (dateRangePickerRef.current as any).show()}
67+
>
68+
{/* Syncfusion icon (e-icons) for calendar */}
69+
<span className="e-input-group-icon e-range-icon e-icons" aria-hidden="true"></span>
70+
</button>
71+
72+
<DateRangePickerComponent
73+
ref={dateRangePickerRef}
74+
placeholder="Select a range"
75+
value={[yearStart, yearEnd]}
76+
format={'MMM d, yyyy'}
77+
change={props.dateRangeChange}
78+
width={240}
79+
cssClass="custom-syncfusion-drp drp-left-icon"
80+
showClearButton={false}
81+
>
82+
<PresetsDirective>
83+
<PresetDirective label="This Month" start={monthStart} end={monthEnd}></PresetDirective>
84+
<PresetDirective label="Last Month" start={lastStart} end={lastEnd}></PresetDirective>
85+
<PresetDirective label="Last 6 Months" start={lastSixStart} end={lastSixEnd}></PresetDirective>
86+
<PresetDirective label="This Year" start={yearStart} end={yearEnd}></PresetDirective>
87+
</PresetsDirective>
88+
</DateRangePickerComponent>
89+
90+
91+
92+
{/* right caret icon (overlay) - also opens the picker */}
93+
<button
94+
type="button"
95+
className="drp-caret-right"
96+
aria-hidden
97+
onClick={() => dateRangePickerRef.current && (dateRangePickerRef.current as any).show()}
98+
>
99+
<span className="e-icons e-chevron-down caret-i" aria-hidden="true"></span>
100+
</button>
101+
</div>
71102
);
72103
};
73104

@@ -247,8 +278,8 @@ const EmployeeLeave = (props: { employeeData: EmployeeDetails; userInfo: Employe
247278
actionComplete={actionComplete}
248279
>
249280
<ColumnsDirective>
250-
<ColumnDirective field="EmployeeCode" headerText="Code" visible={false} width="120" />
251-
<ColumnDirective field="AttendanceID" headerText="Task ID" isPrimaryKey={true} width="140" />
281+
<ColumnDirective field="EmployeeCode" headerText="ID" visible={false} width="120" />
282+
<ColumnDirective field="AttendanceID" headerText="Leave ID" isPrimaryKey={true} width="140" />
252283
<ColumnDirective field="AbsenceType" headerText="Leave Type" width="120" />
253284
<ColumnDirective field="ShiftName" headerText="Shift Name" width="120" />
254285
<ColumnDirective field="From" type="date" format="d MMM yyyy" textAlign="Right" width="120" />

‎Employee_Managment_App/src/components/Employees.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,16 @@ const Employees = (props?: EmployeesProps) => {
3333
const employeeGridIns = useRef<GridComponent>(null);
3434
const tooltipObj = useRef<TooltipComponent>(null);
3535

36+
// Use Syncfusion Grid API to auto-fit column widths and keep height auto-sized
37+
const onGridDataBound = React.useCallback(() => {
38+
const grid: any = employeeGridIns.current;
39+
if (!grid) return;
40+
// Ensure grid height is set to auto so it adapts to content (Syncfusion supports 'auto')
41+
if (grid.element) {
42+
grid.height = 'auto';
43+
}
44+
}, []);
45+
3646
// Apply/clear remote filters on pill changes or routed context
3747
useEffect(() => {
3848
const grid = employeeGridIns.current;
@@ -178,6 +188,7 @@ const Employees = (props?: EmployeesProps) => {
178188
allowFiltering={true}
179189
filterSettings={{ type: 'Excel', enableInfiniteScrolling: true }}
180190
recordClick={recordClick}
191+
dataBound={onGridDataBound}
181192
>
182193
<ColumnsDirective>
183194
<ColumnDirective
@@ -206,7 +217,7 @@ const Employees = (props?: EmployeesProps) => {
206217
headerText="Date Joined"
207218
textAlign="Right"
208219
type="date"
209-
format={{ type: 'date', skeleton: 'medium' }}
220+
format={{ type: 'date', format: "d MMM yyyy"}}
210221
clipMode="EllipsisWithTooltip"
211222
width="150"
212223
/>

‎Employee_Managment_App/src/components/Policies.css‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
--text-muted: #667085;
1919
--text-soft: #475467;
2020

21+
2122
--surface: #ffffff;
2223
--surface-subtle: #fafbfc;
2324

@@ -27,6 +28,9 @@
2728
--shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
2829
--shadow-sm: 0 2px 8px rgba(16, 24, 40, .08);
2930
--shadow-md: 0 6px 18px rgba(16, 24, 40, .10);
31+
32+
--color-sf-primary-bg-color: #1ab394;
33+
--color-sf-primary-border-color: #1ab394;
3034
}
3135

3236
.policies-grid-wrapper {
@@ -147,9 +151,8 @@
147151
}
148152

149153
.filter-chip:hover {
150-
background: var(--primary-50);
151-
border-color: var(--primary-100);
152-
transform: translateY(-1px);
154+
border-color: var(--text-muted);
155+
153156
}
154157

155158
.filter-chip.is-active {
@@ -355,12 +358,25 @@
355358

356359
.policies-grid-wrapper .e-grid .e-pager .e-currentitem,
357360
.policies-grid-wrapper .e-grid .e-pager .e-currentitem:hover {
358-
background: #1ab394;
359-
border-color:#1ab394;
360-
color: #fff;
361+
background: var(--color-sf-primary-bg-color);
362+
border-color: var(--color-sf-primary-border-color);
363+
color: --surface;
364+
}
365+
366+
.policies-grid-wrapper .e-grid .e-pager .e-numericitem:active {
367+
background: var(--color-sf-primary-bg-color);
368+
border-color: var(--color-sf-primary-border-color);
369+
361370
}
362371

363-
.policies-grid-wrapper .e-grid .e-pager .e-numericitem:hover {
372+
/* Keep hover color for non-active pages only */
373+
.policies-grid-wrapper .e-grid .e-pager .e-numericitem:not(.e-currentitem):hover {
364374
background: var(--primary-50);
365375
color: var(--primary-900);
366-
}
376+
}
377+
/* When hovering the active page, keep the active green */
378+
.policies-grid-wrapper .e-grid .e-pager .e-numericitem.e-currentitem:hover {
379+
background: var(--color-sf-primary-bg-color);
380+
border-color: var(--color-sf-primary-border-color);
381+
color: --surface;
382+
}

‎Employee_Managment_App/src/components/Policies.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -161,8 +161,8 @@ const Policies: React.FC = () => {
161161
<ColumnsDirective>
162162
<ColumnDirective field="policyName" headerText="Policy Name" width="220" template={policyNameTemplate} />
163163
<ColumnDirective field="category" headerText="Category" width="170" template={categoryTemplate} />
164-
<ColumnDirective field="lastUpdated" headerText="Last Updated" width="150" textAlign="Left" />
165-
<ColumnDirective field="enrolledOn" headerText="Enrolled On" width="150" textAlign="Left" />
164+
<ColumnDirective field="lastUpdated" headerText="Last Updated" width="150" type="date" format="d MMM yyyy" textAlign="Right" />
165+
<ColumnDirective field="enrolledOn" headerText="Enrolled On" width="150" type="date" format="d MMM yyyy" textAlign="Right" />
166166
<ColumnDirective field="statusText" headerText="Status" width="130" template={statusTemplate} />
167167
<ColumnDirective headerText="Actions" width="110" commands={viewCommands} textAlign="Center" />
168168
</ColumnsDirective>

‎Employee_Managment_App/src/components/TopNav.css‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@
4040
--shadow-rest: 0 1px 2px rgba(0,0,0,.06);
4141
--shadow-focus: 0 6px 18px rgba(16, 185, 129, 0.16);
4242
--focus-ring: 0 0 0 4px rgba(16, 185, 129, 0.14);
43+
44+
--color-sf-icon-color: #6b7280;
45+
--color-sf-secondary-border-color-hover: #d1d5db;
46+
--color-sf-secondary-bg-color-hover:rgba(158, 158, 158, 0.2);
47+
--color-sf-content-text-color: #111827;
4348
}
4449

4550
/* Parallel fixed header */
@@ -237,9 +242,9 @@
237242
}
238243

239244
.icon-btn:hover {
240-
border-color: var(--accent-100);
241-
background: var(--accent-50);
242-
color: var(--accent-700);
245+
border-color: var(--focus-ring);
246+
background: transparent;
247+
color: var(--color-sf-icon-color);
243248
}
244249

245250
.icon-btn:active { transform: translateY(1px); }
@@ -307,8 +312,9 @@
307312
}
308313

309314
.create-menu button:hover {
310-
background: var(--accent-50);
311-
color: var(--accent-700);
315+
background: var(--color-sf-secondary-bg-color-hover);
316+
border-color: var(--color-sf-content-text-color);
317+
color: var(--color-sf-content-text-color);
312318
}
313319

314320
/* Badge */
@@ -358,9 +364,9 @@
358364
}
359365

360366
.topnav-avatar:hover {
361-
border-color: var(--accent-100);
362-
background: var(--accent-50);
363-
color: var(--accent-700);
367+
border-color: var(--focus-ring);
368+
background: transparent;
369+
color: var(--color-sf-icon-color);
364370
}
365371

366372
.topnav-avatar-menu {

0 commit comments

Comments
 (0)