Skip to content

Commit 8be40ad

Browse files
Satheeshkumar0195Satheeshkumar0195
committed
EJ2-981297: Modified the layout of my profile, organization, policies and achievements pages similar to our HR portal
1 parent 902e3de commit 8be40ad

File tree

11 files changed

+1729
-450
lines changed

11 files changed

+1729
-450
lines changed

‎Employee_Managment_App/src/App.tsx‎

Lines changed: 86 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,104 @@
1-
import React from 'react';
2-
import './App.css';
1+
// src/App.tsx
2+
import React, { useState } from 'react';
33
import { BrowserRouter as Router, Routes, Route, NavLink } from 'react-router-dom';
4+
import './App.css';
5+
import TopNav from './components/TopNav';
46
import MyProfile from './components/MyProfile';
57
import Policies from './components/Policies';
68
import Achievements from './components/Achievements';
79
import Announcement from './components/Announcement';
810
import Organization from './components/Organization';
911
import EmployeeInfo from './components/EmployeeInfo';
1012

13+
// Extend CSSProperties so TS accepts our custom CSS variables
14+
type LayoutCSSVars = React.CSSProperties & {
15+
['--sidebar-expanded']?: string;
16+
['--sidebar-collapsed']?: string;
17+
['--header-h']?: string;
18+
['--sidebar-current-width']?: string;
19+
};
20+
1121
function App() {
22+
// Layout constants
23+
const SIDEBAR_WIDTH = 240;
24+
const SIDEBAR_WIDTH_COLLAPSED = 72;
25+
const HEADER_HEIGHT = 56;
26+
27+
// UI state
28+
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
29+
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
30+
31+
// CSS vars consumed by App.css
32+
const layoutVars: LayoutCSSVars = {
33+
'--sidebar-expanded': `${SIDEBAR_WIDTH}px`,
34+
'--sidebar-collapsed': `${SIDEBAR_WIDTH_COLLAPSED}px`,
35+
'--header-h': `${HEADER_HEIGHT}px`,
36+
'--sidebar-current-width': sidebarCollapsed
37+
? `${SIDEBAR_WIDTH_COLLAPSED}px`
38+
: `${SIDEBAR_WIDTH}px`,
39+
};
40+
41+
const toggleDesktopSidebar = () => setSidebarCollapsed((v) => !v);
42+
const toggleMobileSidebar = () => setMobileSidebarOpen((v) => !v);
1243

1344
return (
14-
<div className="xyz-management">
45+
<div
46+
className={`app-layout ${sidebarCollapsed ? 'sidebar-is-collapsed' : ''} ${
47+
mobileSidebarOpen ? 'mobile-sidebar-is-open' : ''
48+
}`}
49+
style={layoutVars}
50+
>
1551
<Router>
16-
<div className="xyz-management-content" style={{ width: '100%' }}>
17-
<div className="row">
18-
<div className="col-md-2 sidebar">
19-
<div className='sidebar-brand'>
20-
<div className="title">NexGen7 Software</div>
21-
<span className="e-icons e-line-very-small"></span>
22-
</div>
23-
<ul className="nav flex-column">
24-
<li className="nav-item">
25-
<NavLink className="nav-link" to="/">
26-
My Profile
27-
</NavLink>
28-
</li>
29-
<li className="nav-item">
30-
<NavLink className="nav-link" to="/organization">
31-
Organization
32-
</NavLink>
33-
</li>
34-
<li className="nav-item">
35-
<NavLink className="nav-link" to="/policies">
36-
Policies
37-
</NavLink>
38-
</li>
39-
<li className="nav-item">
40-
<NavLink className="nav-link" to="/achievements">
41-
Achievements
42-
</NavLink>
43-
</li>
44-
<li className="nav-item">
45-
<NavLink className="nav-link" to="/announcement">
46-
Announcement
47-
</NavLink>
48-
</li>
49-
</ul>
50-
</div>
51-
<div className="col-md-10 main-content">
52-
<Routes>
53-
<Route path="/" element={<MyProfile />} />
54-
<Route path="/organization" element={<Organization />} />
55-
<Route path="/policies" element={<Policies />} />
56-
<Route path="/achievements" element={<Achievements />} />
57-
<Route path="/announcement" element={<Announcement />} />
58-
<Route path="/employeeinfo" element={<EmployeeInfo />} />
59-
</Routes>
60-
</div>
52+
<TopNav
53+
companyName="Syncfusion Software"
54+
userFullName="Test Person"
55+
sidebarWidth={SIDEBAR_WIDTH}
56+
collapsedSidebarWidth={SIDEBAR_WIDTH_COLLAPSED}
57+
sidebarCollapsed={sidebarCollapsed}
58+
onToggleSidebar={toggleDesktopSidebar}
59+
onSearch={(q) => console.log('Search:', q)}
60+
/>
61+
62+
{/* Sidebar */}
63+
<aside className="app-sidebar" role="navigation" aria-label="Main">
64+
<div className="sidebar-brand">
65+
<div className="title">HR Portal</div>
66+
<span className="e-icons e-line-very-small"></span>
6167
</div>
62-
</div>
68+
69+
<ul className="nav flex-column">
70+
<li className="nav-item">
71+
<NavLink className="nav-link" to="/" end>My Profile</NavLink>
72+
</li>
73+
<li className="nav-item">
74+
<NavLink className="nav-link" to="/organization">Organization</NavLink>
75+
</li>
76+
<li className="nav-item">
77+
<NavLink className="nav-link" to="/policies">Policies</NavLink>
78+
</li>
79+
<li className="nav-item">
80+
<NavLink className="nav-link" to="/achievements">Achievements</NavLink>
81+
</li>
82+
<li className="nav-item">
83+
<NavLink className="nav-link" to="/announcement">Announcement</NavLink>
84+
</li>
85+
</ul>
86+
</aside>
87+
88+
{/* Main content */}
89+
<main className="app-main">
90+
<Routes>
91+
<Route path="/" element={<MyProfile />} />
92+
<Route path="/organization" element={<Organization />} />
93+
<Route path="/policies" element={<Policies />} />
94+
<Route path="/achievements" element={<Achievements />} />
95+
<Route path="/announcement" element={<Announcement />} />
96+
<Route path="/employeeinfo" element={<EmployeeInfo />} />
97+
</Routes>
98+
</main>
6399
</Router>
64100
</div>
65101
);
66102
}
67103

68-
export default App;
104+
export default App;

‎Employee_Managment_App/src/components/Achievements.css‎

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
/* src/components/Achievements.css */
2+
:root{
3+
--bg: #0f1220;
4+
--panel: #171a2b;
5+
--text: #e7e9f5;
6+
--muted: #aab0c0;
7+
--border: #2a2f45;
8+
9+
--red: #ef5350;
10+
--brown: #8d5a2b;
11+
--orange: #ef7b2d;
12+
--green: #2e7d32;
13+
14+
--you-bg: #23304a;
15+
--shadow: 0 8px 24px rgba(0,0,0,.25);
16+
}
17+
18+
* { box-sizing: border-box; }
19+
20+
.achievements-container{
21+
padding: 18px 22px 32px;
22+
background: var(--bg);
23+
min-height: 100%;
24+
color: var(--text);
25+
font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
26+
}
27+
28+
/* Toolbar */
29+
.achievements-toolbar{
30+
display: flex;
31+
align-items: flex-end;
32+
justify-content: space-between;
33+
gap: 16px;
34+
border: 1px solid var(--border);
35+
background: linear-gradient(180deg, #1a1e33 0%, #14182a 100%);
36+
border-radius: 12px;
37+
padding: 16px 18px;
38+
box-shadow: var(--shadow);
39+
}
40+
41+
.toolbar-left .toolbar-title{
42+
font-weight: 700;
43+
letter-spacing: .2px;
44+
font-size: 20px;
45+
}
46+
.toolbar-left .toolbar-sub{
47+
color: var(--muted);
48+
margin-top: 4px;
49+
font-size: 12px;
50+
}
51+
52+
.toolbar-right{
53+
display: flex;
54+
gap: 12px;
55+
flex-wrap: wrap;
56+
}
57+
58+
.toolbar-field{
59+
display: grid;
60+
gap: 6px;
61+
font-size: 12px;
62+
color: var(--muted);
63+
}
64+
.field-label{ opacity: .9; }
65+
.field-input{
66+
background: #0c1020;
67+
color: var(--text);
68+
border: 1px solid var(--border);
69+
padding: 8px 10px;
70+
border-radius: 8px;
71+
min-width: 130px;
72+
outline: none;
73+
}
74+
75+
/* Banner */
76+
.celebrate-banner{
77+
margin: 14px 2px 18px;
78+
text-align: center;
79+
color: #d9b6ff;
80+
font-weight: 700;
81+
letter-spacing: .3px;
82+
font-size: 18px;
83+
}
84+
85+
/* Cards */
86+
.cards-grid{
87+
display: grid;
88+
grid-template-columns: repeat(4, minmax(240px, 1fr));
89+
gap: 16px;
90+
}
91+
@media (max-width: 1280px){
92+
.cards-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
93+
}
94+
@media (max-width: 640px){
95+
.cards-grid{ grid-template-columns: 1fr; }
96+
}
97+
98+
.lb-card{
99+
background: var(--panel);
100+
border: 1px solid var(--border);
101+
border-radius: 14px;
102+
overflow: hidden;
103+
display: flex;
104+
flex-direction: column;
105+
box-shadow: var(--shadow);
106+
min-height: 380px;
107+
}
108+
109+
.lb-card-header{
110+
display: flex;
111+
align-items: center;
112+
gap: 10px;
113+
padding: 14px 14px;
114+
color: #fff;
115+
border-bottom: 1px solid rgba(255,255,255,.12);
116+
}
117+
.bg-red { background: linear-gradient(135deg, #ef5350, #e53935); }
118+
.bg-brown { background: linear-gradient(135deg, #8d5a2b, #6f3c1c); }
119+
.bg-orange{ background: linear-gradient(135deg, #ef7b2d, #d65a16); }
120+
.bg-green { background: linear-gradient(135deg, #2e7d32, #1b5e20); }
121+
122+
.lb-card-icon{
123+
width: 40px;
124+
height: 40px;
125+
display: grid;
126+
place-items: center;
127+
color: #fff;
128+
background: rgba(255,255,255,.18);
129+
border-radius: 10px;
130+
}
131+
132+
.lb-card-titles{ line-height: 1.1; }
133+
.lb-card-title{
134+
font-weight: 800;
135+
letter-spacing: .3px;
136+
}
137+
.lb-card-sub{
138+
font-size: 11px;
139+
opacity: .9;
140+
letter-spacing: 1.4px;
141+
}
142+
143+
/* List */
144+
.lb-list{
145+
list-style: none;
146+
padding: 10px 10px 14px;
147+
margin: 0;
148+
display: grid;
149+
gap: 8px;
150+
overflow: auto;
151+
}
152+
153+
.lb-item{
154+
display: grid;
155+
grid-template-columns: 36px 1fr auto;
156+
align-items: center;
157+
gap: 10px;
158+
padding: 10px 12px;
159+
border: 1px solid var(--border);
160+
background: #0f1429;
161+
border-radius: 10px;
162+
transition: transform .15s ease, background .15s ease;
163+
}
164+
.lb-item:hover{ transform: translateY(-2px); background: #121937; }
165+
166+
.lb-item.you{
167+
border-color: #5b7cff;
168+
background: var(--you-bg);
169+
position: relative;
170+
box-shadow: inset 0 0 0 1px rgba(91,124,255,.25);
171+
}
172+
.lb-item.you::after{
173+
content: "You";
174+
position: absolute;
175+
top: -10px;
176+
right: 12px;
177+
background: #5b7cff;
178+
color: white;
179+
font-size: 10px;
180+
padding: 2px 6px;
181+
border-radius: 999px;
182+
letter-spacing: .3px;
183+
}
184+
185+
.avatar{
186+
width: 36px;
187+
height: 36px;
188+
border-radius: 50%;
189+
display: grid;
190+
place-items: center;
191+
background: #24304f;
192+
color: #d6defa;
193+
font-size: 11px;
194+
font-weight: 800;
195+
letter-spacing: .5px;
196+
text-transform: uppercase;
197+
border: 1px solid var(--border);
198+
}
199+
200+
.name{
201+
color: var(--text);
202+
font-size: 13.5px;
203+
white-space: nowrap;
204+
overflow: hidden;
205+
text-overflow: ellipsis;
206+
}
207+
.score{
208+
color: #ffd27d;
209+
font-weight: 800;
210+
font-feature-settings: "tnum" on, "lnum" on;
211+
}

0 commit comments

Comments
 (0)