first commit
This commit is contained in:
Kapil Panwar
169
src/app/dashboard/ham/page.tsx
Normal file
169
src/app/dashboard/ham/page.tsx
Normal file
@@ -0,0 +1,169 @@
|
||||
'use client';
|
||||
import { useState } from 'react';
|
||||
import Link from 'next/link';
|
||||
import styles from './ham.module.css';
|
||||
import shared from '../shared/components.module.css';
|
||||
|
||||
// Mock data
|
||||
const MOCK_STATS = {
|
||||
totalEmployees: 247,
|
||||
presentToday: 231,
|
||||
onLeaveToday: 12,
|
||||
pendingApprovals: 8,
|
||||
upcomingBirthdays: 5,
|
||||
reviewsDue: 15,
|
||||
payrollStatus: 'Processed'
|
||||
};
|
||||
|
||||
const MOCK_BIRTHDAYS = [
|
||||
{ id: 1, name: 'Rahul Sharma', date: 'Tomorrow', department: 'Engineering' },
|
||||
{ id: 2, name: 'Priya Patel', date: 'Dec 23', department: 'Marketing' },
|
||||
{ id: 3, name: 'Amit Kumar', date: 'Dec 25', department: 'Sales' }
|
||||
];
|
||||
|
||||
const MOCK_RECENT_ACTIVITIES = [
|
||||
{ id: 1, type: 'leave', message: 'Vikram Singh applied for leave', time: '10 mins ago' },
|
||||
{ id: 2, type: 'attendance', message: 'Sarah Williams checked in', time: '25 mins ago' },
|
||||
{ id: 3, type: 'review', message: 'Performance review completed for John Doe', time: '1 hour ago' },
|
||||
{ id: 4, type: 'employee', message: 'New employee onboarded: Jane Smith', time: '2 hours ago' }
|
||||
];
|
||||
|
||||
export default function HAMDashboard() {
|
||||
const [stats] = useState(MOCK_STATS);
|
||||
|
||||
return (
|
||||
<div className={styles.hamContainer}>
|
||||
<div className={styles.sectionHeader}>
|
||||
<div>
|
||||
<h1 className={styles.pageTitle}>HAM Dashboard</h1>
|
||||
<p className={styles.pageSubtitle}>Human Asset Management Overview</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Widgets */}
|
||||
<div className={styles.widgetsGrid}>
|
||||
<div className={styles.widget}>
|
||||
<span className={styles.widgetIcon}>👥</span>
|
||||
<div className={styles.widgetValue}>{stats.totalEmployees}</div>
|
||||
<div className={styles.widgetLabel}>Total Employees</div>
|
||||
<div className={`${styles.widgetChange} ${styles.positive}`}>
|
||||
↑ 5 this month
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.widget}>
|
||||
<span className={styles.widgetIcon}>✅</span>
|
||||
<div className={styles.widgetValue}>{stats.presentToday}</div>
|
||||
<div className={styles.widgetLabel}>Present Today</div>
|
||||
<div className={`${styles.widgetChange} ${styles.positive}`}>
|
||||
{((stats.presentToday / stats.totalEmployees) * 100).toFixed(1)}% attendance
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.widget}>
|
||||
<span className={styles.widgetIcon}>🏖️</span>
|
||||
<div className={styles.widgetValue}>{stats.onLeaveToday}</div>
|
||||
<div className={styles.widgetLabel}>On Leave Today</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.widget}>
|
||||
<span className={styles.widgetIcon}>⏳</span>
|
||||
<div className={styles.widgetValue}>{stats.pendingApprovals}</div>
|
||||
<div className={styles.widgetLabel}>Pending Approvals</div>
|
||||
<Link href="/dashboard/ham/leave" style={{ fontSize: '0.85rem', color: '#ffd700', marginTop: '0.5rem', display: 'block' }}>
|
||||
View All →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className={styles.widget}>
|
||||
<span className={styles.widgetIcon}>🎂</span>
|
||||
<div className={styles.widgetValue}>{stats.upcomingBirthdays}</div>
|
||||
<div className={styles.widgetLabel}>Upcoming Birthdays</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.widget}>
|
||||
<span className={styles.widgetIcon}>📊</span>
|
||||
<div className={styles.widgetValue}>{stats.reviewsDue}</div>
|
||||
<div className={styles.widgetLabel}>Reviews Due</div>
|
||||
<Link href="/dashboard/ham/performance" style={{ fontSize: '0.85rem', color: '#ffd700', marginTop: '0.5rem', display: 'block' }}>
|
||||
View All →
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className={styles.widget}>
|
||||
<span className={styles.widgetIcon}>💰</span>
|
||||
<div className={styles.widgetValue} style={{ fontSize: '1.5rem' }}>{stats.payrollStatus}</div>
|
||||
<div className={styles.widgetLabel}>Payroll Status</div>
|
||||
<div className={`${styles.widgetChange} ${styles.positive}`}>
|
||||
December 2024
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions */}
|
||||
<div className={styles.section}>
|
||||
<h3 style={{ color: '#ffd700', marginBottom: '1rem' }}>Quick Actions</h3>
|
||||
<div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
|
||||
<Link href="/dashboard/ham/employees">
|
||||
<button className={styles.btnPrimary}>+ Add Employee</button>
|
||||
</Link>
|
||||
<Link href="/dashboard/ham/attendance">
|
||||
<button className={styles.btnSecondary}>Mark Attendance</button>
|
||||
</Link>
|
||||
<Link href="/dashboard/ham/leave">
|
||||
<button className={styles.btnSecondary}>Approve Leaves</button>
|
||||
</Link>
|
||||
<Link href="/dashboard/ham/payroll">
|
||||
<button className={styles.btnSecondary}>View Payroll</button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Two Column Layout */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '1.5rem' }}>
|
||||
{/* Upcoming Birthdays */}
|
||||
<div className={styles.section}>
|
||||
<h3 style={{ color: '#ffd700', marginBottom: '1rem' }}>🎂 Upcoming Birthdays</h3>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
{MOCK_BIRTHDAYS.map(birthday => (
|
||||
<div key={birthday.id} style={{
|
||||
padding: '1rem',
|
||||
background: 'rgba(255,255,255,0.03)',
|
||||
borderRadius: '8px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<div>
|
||||
<div style={{ fontWeight: 600, color: '#fff' }}>{birthday.name}</div>
|
||||
<div style={{ fontSize: '0.85rem', color: '#888' }}>{birthday.department}</div>
|
||||
</div>
|
||||
<div style={{ color: '#ffd700', fontWeight: 600 }}>{birthday.date}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Recent Activities */}
|
||||
<div className={styles.section}>
|
||||
<h3 style={{ color: '#ffd700', marginBottom: '1rem' }}>📋 Recent Activities</h3>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
||||
{MOCK_RECENT_ACTIVITIES.map(activity => (
|
||||
<div key={activity.id} style={{
|
||||
padding: '1rem',
|
||||
background: 'rgba(255,255,255,0.03)',
|
||||
borderRadius: '8px',
|
||||
borderLeft: '3px solid #ffd700'
|
||||
}}>
|
||||
<div style={{ fontWeight: 600, color: '#fff', marginBottom: '0.3rem' }}>
|
||||
{activity.message}
|
||||
</div>
|
||||
<div style={{ fontSize: '0.8rem', color: '#888' }}>{activity.time}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user