Skip to content

Commit 7140072

Browse files
TamilRamGanesan-SF5080TamilRamGanesan-SF5080
authored
Merge branch 'EJ2-981297-Emp-Management' into 1000365-Employee-D2
2 parents 359384c + 28b936d commit 7140072

File tree

5 files changed

+173
-91
lines changed

5 files changed

+173
-91
lines changed

‎Employee_Managment_App/src/components/AnnouncementDialog.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -123,6 +123,7 @@
123123
}
124124
.annc-dlg-details_value {
125125
font-size: 14px;
126+
font-weight: 500;
126127
color: var(--annc-text);
127128
min-width: 0;
128129
overflow: hidden;

‎Employee_Managment_App/src/components/EmployeePayRoll.tsx‎

Lines changed: 69 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -73,42 +73,42 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
7373
}, []);
7474

7575
const itemTemplate = () => {
76-
return (
77-
<div>
78-
<table className="CardTable">
79-
<colgroup>
80-
<col />
81-
</colgroup>
82-
<tbody>
83-
<tr>
84-
<td className="cardcell"> Regular Hours Worked </td>
85-
</tr>
86-
<tr>
87-
<td className="cardcell">OverTime Hours Worked </td>
88-
</tr>
89-
<tr>
90-
<td className="cardcell"> Bonus </td>
91-
</tr>
92-
<tr>
93-
<td className="cardcell separateline"> Commission </td>
94-
</tr>
95-
<tr>
96-
<td className="cardcell"> Federal Income Tax </td>
97-
</tr>
98-
<tr>
99-
<td className="cardcell"> State Income Tax </td>
100-
</tr>
101-
<tr>
102-
<td className="cardcell"> Social Security Tax </td>
103-
</tr>
104-
<tr>
105-
<td className="cardcell"> MedicareTax </td>
106-
</tr>
107-
</tbody>
108-
</table>
109-
</div>
110-
);
111-
};
76+
return (
77+
<div>
78+
<table className="CardTable">
79+
<colgroup>
80+
<col />
81+
</colgroup>
82+
<tbody>
83+
<tr>
84+
<td className="cardcell" style={{ fontWeight: 400 }}> Regular Hours Worked </td>
85+
</tr>
86+
<tr>
87+
<td className="cardcell" style={{ fontWeight: 400 }}>OverTime Hours Worked </td>
88+
</tr>
89+
<tr>
90+
<td className="cardcell" style={{ fontWeight: 400 }}> Bonus </td>
91+
</tr>
92+
<tr>
93+
<td className="cardcell separateline" style={{ fontWeight: 400 }}> Commission </td>
94+
</tr>
95+
<tr>
96+
<td className="cardcell" style={{ fontWeight: 400 }}> Federal Income Tax </td>
97+
</tr>
98+
<tr>
99+
<td className="cardcell" style={{ fontWeight: 400 }}> State Income Tax </td>
100+
</tr>
101+
<tr>
102+
<td className="cardcell" style={{ fontWeight: 400 }}> Social Security Tax </td>
103+
</tr>
104+
<tr>
105+
<td className="cardcell" style={{ fontWeight: 400 }}> MedicareTax </td>
106+
</tr>
107+
</tbody>
108+
</table>
109+
</div>
110+
);
111+
};
112112

113113
const totalTemplate = () => {
114114
return (
@@ -208,21 +208,26 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
208208
];
209209

210210
const queryCellInfo = (args: QueryCellInfoEventArgs): void => {
211-
if (args.column?.field === 'Total') {
212-
for (let i: number = 0; i < elemClass.length; i++) {
213-
const elem: HTMLElement = args.cell?.querySelector('.' + elemClass[i]) as HTMLElement;
214-
let value: number = 0;
215-
for (let j: number = 0; j < months.length; j++) {
216-
if ((args.data as any)[months[j].field]) {
217-
value += (args.data as any)[months[j].field][elemClass[i]] * (isPreviousYearRef.current ? 0.9 : 1);
218-
}
219-
}
220-
if (elem) {
221-
elem.innerText = '$ ' + value.toFixed(2);
211+
if (args.column?.field === 'Total') {
212+
// Compute totals into the Total column
213+
for (let i = 0; i < elemClass.length; i++) {
214+
const elem = args.cell?.querySelector('.' + elemClass[i]) as HTMLElement;
215+
let value = 0;
216+
for (let j = 0; j < months.length; j++) {
217+
if ((args.data as any)[months[j].field]) {
218+
value += (args.data as any)[months[j].field][elemClass[i]] * (isPreviousYearRef.current ? 0.9 : 1);
222219
}
223220
}
221+
if (elem) {
222+
elem.innerText = '$ ' + value.toFixed(2);
223+
}
224224
}
225-
};
225+
226+
// Make all Total column values medium (500)
227+
const totalCells = args.cell?.querySelectorAll('.cardcell') ?? [];
228+
totalCells.forEach((c) => ((c as HTMLElement).style.fontWeight = '500'));
229+
}
230+
};
226231

227232
const calculteGrossAggregate = (data: any, aggColumn: AggregateColumnModel): string => {
228233
const payStubData: MonthPayStub =
@@ -412,7 +417,7 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
412417
type="Custom"
413418
customAggregate={calculteGrossInYear}
414419
footerTemplate={(props: any) => {
415-
return <span>$ {props.Custom}</span>;
420+
return <span style={{ fontWeight: 500 }}>$ {props.Custom}</span>;
416421
}}
417422
/>
418423
{months.map((x, index) => {
@@ -445,7 +450,7 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
445450
type="Custom"
446451
customAggregate={calculteDeductionInYear}
447452
footerTemplate={(props: any) => {
448-
return <span>$ {props.Custom}</span>;
453+
return <span style={{ fontWeight: 500 }}>$ {props.Custom}</span>;
449454
}}
450455
/>
451456
{months.map((x, index) => {
@@ -470,30 +475,30 @@ const EmployeePayRoll = (props: { employeeData: EmployeeDetails }) => {
470475
field="Item"
471476
type="Custom"
472477
footerTemplate={() => {
473-
return <strong>Net Pay</strong>;
478+
return <span style={{ fontWeight: 600 }}>Net Pay</span>;
474479
}}
475480
/>
476481
<AggregateColumnDirective
477482
field="Total"
478483
type="Custom"
479484
customAggregate={calculteNetPayInYear}
480485
footerTemplate={(props: any) => {
481-
return <strong>$ {props.Custom}</strong>;
486+
return <span style={{ fontWeight: 600 }}>$ {props.Custom}</span>;
482487
}}
483488
/>
484489
{months.map((x, index) => {
485-
return (
486-
<AggregateColumnDirective
487-
key={index + 3}
488-
field={x.field}
489-
type="Custom"
490-
customAggregate={calculteNetPayAggregate}
491-
footerTemplate={(props: any) => {
492-
return <span>$ {props.Custom}</span>;
493-
}}
494-
/>
495-
);
496-
})}
490+
return (
491+
<AggregateColumnDirective
492+
key={index + 3}
493+
field={x.field}
494+
type="Custom"
495+
customAggregate={calculteNetPayAggregate}
496+
footerTemplate={(props: any) => {
497+
return <span style={{ fontWeight: 600 }}>$ {props.Custom}</span>;
498+
}}
499+
/>
500+
);
501+
})}
497502
</AggregateColumnsDirective>
498503
</AggregateDirective>
499504
</AggregatesDirective>

‎Employee_Managment_App/src/components/Policies.css‎

Lines changed: 86 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
--text-strong: #0f172a;
1818
--text-muted: #667085;
1919
--text-soft: #475467;
20+
--policy-text: #0f172a;
2021

2122

2223
--surface: #ffffff;
@@ -31,6 +32,8 @@
3132

3233
--color-sf-primary-bg-color: #1ab394;
3334
--color-sf-primary-border-color: #1ab394;
35+
36+
--policy-muted: #64748b;
3437
}
3538

3639
.policies-grid-wrapper {
@@ -64,7 +67,6 @@
6467
grid-template-columns: 1fr;
6568
/* collapse to single column */
6669
gap: 0;
67-
margin: 0 0 14px;
6870
padding: 0;
6971
/* remove unmarked padding/border/shadow */
7072
border: 0;
@@ -98,7 +100,7 @@
98100
display: flex;
99101
align-items: center;
100102
justify-content: space-between;
101-
margin: 12px 0 12px;
103+
margin: 12px 0 8px;
102104
}
103105

104106
.section-title {
@@ -108,6 +110,15 @@
108110
font-family: 'Roboto', sans-serif;
109111
}
110112

113+
.policy-dialog-title {
114+
font-size: 12px;
115+
color: var(--policy-muted);
116+
text-transform: uppercase;
117+
letter-spacing: .3px;
118+
font-weight: 800;
119+
margin-bottom: 8px;
120+
}
121+
111122
.view-all-link {
112123
color: var(--primary-700);
113124
text-decoration: none;
@@ -284,27 +295,44 @@
284295
opacity: .95;
285296
}
286297

287-
/* Dialog */
298+
/* Dialog – match Announcement dialog styles exactly where different */
299+
.no-gradient,
300+
.no-gradient * { background-image: none !important; }
301+
302+
.policy-dialog.e-dialog {
303+
border-radius: 12px;
304+
background: #ffffff;
305+
box-shadow: var(--shadow-md);
306+
overflow: hidden;
307+
}
308+
288309
.policy-dialog .e-dlg-header-content {
289310
border-bottom: 1px solid var(--border);
290-
padding: 14px 18px;
311+
padding: 16px 20px;
291312
background: #fff;
292313
}
293314

294315
.policy-dialog .e-dlg-header {
295-
font-weight: 900;
296-
color: var(--primary-800);
316+
color: var(--policy-text);
317+
font-weight: 800;
318+
font-size: 18px;
319+
line-height: 1.3;
320+
overflow: hidden;
321+
text-overflow: ellipsis;
322+
white-space: nowrap;
297323
}
298324

299325
.policy-dialog .e-dlg-content {
300326
padding: 0;
301327
background: #fff;
328+
max-height: min(72vh, 560px);
329+
overflow: auto;
302330
}
303331

304332
.policy-dialog__content {
305333
display: grid;
306-
gap: 20px;
307-
padding: 18px 20px 20px;
334+
gap: 16px;
335+
padding: 16px 20px 14px 20px;
308336
}
309337

310338
.policy-dialog__meta {
@@ -313,9 +341,8 @@
313341
gap: 12px 16px;
314342
padding: 12px;
315343
border: 1px solid var(--border);
316-
border-radius: 12px;
317-
background: var(--surface-subtle);
318-
box-shadow: var(--shadow-xs);
344+
border-radius: 10px;
345+
background: #ffffff;
319346
}
320347

321348
@media (min-width: 640px) {
@@ -325,23 +352,63 @@
325352
}
326353

327354
.meta-label {
328-
font-size: 12px;
329-
color: var(--text-muted);
355+
font-size: 11px;
356+
color: var(--policy-muted);
357+
text-transform: uppercase;
358+
letter-spacing: .25px;
359+
font-weight: 700;
360+
line-height: 1;
361+
white-space: nowrap;
362+
overflow: hidden;
363+
text-overflow: ellipsis;
330364
}
331365

332366
.meta-value {
333-
font-weight: 600;
334-
font-size: 12px;
335-
padding-top: 5px;
336-
color: var(--text-strong);
367+
font-size: 14px;
368+
font-weight: 500;
369+
color: var(--policy-text);
370+
min-width: 0;
371+
overflow: hidden;
372+
text-overflow: ellipsis;
373+
white-space: nowrap;
374+
padding-top: 4px
337375
}
338376

339377
.meta-badge.status--active {
340378
font-size: 11px;
379+
margin-top: 4px;
380+
font-weight: 700;
381+
display: inline-flex;
382+
align-items: center;
383+
padding: 2px 8px;
384+
border-radius: 999px;
385+
line-height: 1.4;
386+
background: #ecfdf5;
387+
color: #047857;
388+
border: 1px solid #d1fae5;
341389
}
342390
.policy-description{
343-
line-height: 1.75;
344-
padding-top: 10px;
391+
color: var(--policy-text);
392+
font-size: 15px;
393+
line-height: 1.7;
394+
margin: 0;
395+
white-space: pre-wrap;
396+
}
397+
398+
/* Footer to match Announcement dialog */
399+
.policy-dialog .e-dlg-footer-content {
400+
padding: 12px 20px;
401+
border-top: 1px solid var(--border);
402+
background: #fff;
403+
}
404+
.policy-dialog__footer {
405+
width: 100%;
406+
display: flex;
407+
justify-content: flex-end;
408+
gap: 10px;
409+
}
410+
@media (max-width: 520px) {
411+
.policy-dialog__footer { flex-direction: column-reverse; align-items: stretch; }
345412
}
346413
.meta-badge.status--review {
347414
color: #92400e;

0 commit comments

Comments
 (0)