58 lines
2.3 KiB
TypeScript
58 lines
2.3 KiB
TypeScript
|
import React from 'react'
|
||
|
|
import dayjs from 'dayjs'
|
||
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
|
|
import { UserInfoViewModel } from '@/proxy/admin/models'
|
||
|
|
import { Avatar } from '@/components/ui'
|
||
|
|
import { AVATAR_URL } from '@/constants/app.constant'
|
||
|
|
|
||
|
|
const TodayBirthdays: React.FC<{ employees: UserInfoViewModel[] }> = ({ employees }) => {
|
||
|
|
const today = dayjs()
|
||
|
|
const { translate } = useLocalization();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="bg-gradient-to-br from-pink-50 to-purple-50 dark:from-pink-900/20 dark:to-purple-900/20 rounded-lg shadow-sm border border-pink-200 dark:border-pink-800">
|
||
|
|
<div className="p-4 border-b border-pink-200 dark:border-pink-700">
|
||
|
|
<h2 className="text-base font-semibold text-gray-900 dark:text-white flex items-center gap-2">
|
||
|
|
🎂 {translate('::App.Platform.Intranet.Widgets.TodayBirthdays.Title')}
|
||
|
|
</h2>
|
||
|
|
</div>
|
||
|
|
<div className="p-2 space-y-3">
|
||
|
|
{employees.length > 0 ? (
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||
|
|
{employees.map((birthday, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="flex items-center gap-2 p-2"
|
||
|
|
>
|
||
|
|
<Avatar
|
||
|
|
size={48}
|
||
|
|
shape="circle"
|
||
|
|
src={AVATAR_URL(birthday.id, birthday.tenantId)}
|
||
|
|
alt={birthday.fullName}
|
||
|
|
/>
|
||
|
|
<div className="flex-1">
|
||
|
|
<p className="text-sm font-semibold text-gray-900 dark:text-white">
|
||
|
|
{birthday.fullName}
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||
|
|
{translate('::App.Platform.Intranet.Widgets.TodayBirthdays.Age', { age: today.diff(dayjs(birthday.birthDate), 'year') })} 🎉
|
||
|
|
</p>
|
||
|
|
<p className="text-xs text-gray-500 dark:text-gray-500 mt-1">
|
||
|
|
{birthday.department?.name}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 text-center py-4">
|
||
|
|
{translate('::App.Platform.Intranet.Widgets.TodayBirthdays.NoBirthday')}
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default TodayBirthdays
|