- Add NotificationDropdown component with filtering (all/pending/unread) - Create NotificationItem component with accept/reject/assign actions - Implement notification service with mock data for vouches and praise - Add data types for Notification, Vouch, Praise, and RCard categories - Include default rCard categories (Business, Colleague, Family, Friend, etc.) - Add rCard assignment dialog for organizing accepted vouches/praise - Replace static notification badge with dynamic notification system - Support real-time notification management with state updates Features: - Accept/reject vouches and praise from other users - Assign accepted items to specific rCard categories - Mark notifications as read/unread - Filter by status (pending, unread, all) - Real-time badge count updates - Professional notification UI with avatars and status chips 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>main
Oliver Sylvester-Bradley
2 months ago
parent
f63a00a9f7
commit
142920b264
@ -0,0 +1,247 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { |
||||||
|
IconButton, |
||||||
|
Badge, |
||||||
|
Menu, |
||||||
|
Box, |
||||||
|
Typography, |
||||||
|
List, |
||||||
|
Divider, |
||||||
|
Button, |
||||||
|
Chip, |
||||||
|
} from '@mui/material'; |
||||||
|
import { |
||||||
|
NotificationsNone, |
||||||
|
Notifications, |
||||||
|
MarkEmailRead, |
||||||
|
} from '@mui/icons-material'; |
||||||
|
import type { Notification, NotificationSummary } from '../../types/notification'; |
||||||
|
import NotificationItem from './NotificationItem'; |
||||||
|
|
||||||
|
interface NotificationDropdownProps { |
||||||
|
notifications: Notification[]; |
||||||
|
summary: NotificationSummary; |
||||||
|
onMarkAsRead: (notificationId: string) => void; |
||||||
|
onMarkAllAsRead: () => void; |
||||||
|
onAcceptVouch: (notificationId: string, vouchId: string) => void; |
||||||
|
onRejectVouch: (notificationId: string, vouchId: string) => void; |
||||||
|
onAcceptPraise: (notificationId: string, praiseId: string) => void; |
||||||
|
onRejectPraise: (notificationId: string, praiseId: string) => void; |
||||||
|
onAssignToRCard: (notificationId: string, rCardId: string) => void; |
||||||
|
} |
||||||
|
|
||||||
|
const NotificationDropdown = ({ |
||||||
|
notifications, |
||||||
|
summary, |
||||||
|
onMarkAsRead, |
||||||
|
onMarkAllAsRead, |
||||||
|
onAcceptVouch, |
||||||
|
onRejectVouch, |
||||||
|
onAcceptPraise, |
||||||
|
onRejectPraise, |
||||||
|
onAssignToRCard, |
||||||
|
}: NotificationDropdownProps) => { |
||||||
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null); |
||||||
|
const [filter, setFilter] = useState<'all' | 'pending' | 'unread'>('all'); |
||||||
|
|
||||||
|
const isOpen = Boolean(anchorEl); |
||||||
|
|
||||||
|
const handleClick = (event: React.MouseEvent<HTMLElement>) => { |
||||||
|
setAnchorEl(event.currentTarget); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleClose = () => { |
||||||
|
setAnchorEl(null); |
||||||
|
}; |
||||||
|
|
||||||
|
const filteredNotifications = notifications.filter(notification => { |
||||||
|
switch (filter) { |
||||||
|
case 'pending': |
||||||
|
return notification.status === 'pending' && notification.isActionable; |
||||||
|
case 'unread': |
||||||
|
return !notification.isRead; |
||||||
|
default: |
||||||
|
return true; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
const getFilterChipColor = (filterType: string) => { |
||||||
|
return filter === filterType ? 'primary' : 'default'; |
||||||
|
}; |
||||||
|
|
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<IconButton |
||||||
|
size="large" |
||||||
|
color="inherit" |
||||||
|
onClick={handleClick} |
||||||
|
aria-label="notifications" |
||||||
|
aria-expanded={isOpen ? 'true' : undefined} |
||||||
|
aria-haspopup="true" |
||||||
|
> |
||||||
|
<Badge badgeContent={summary.unread} color="error"> |
||||||
|
{summary.unread > 0 ? <Notifications /> : <NotificationsNone />} |
||||||
|
</Badge> |
||||||
|
</IconButton> |
||||||
|
|
||||||
|
<Menu |
||||||
|
anchorEl={anchorEl} |
||||||
|
open={isOpen} |
||||||
|
onClose={handleClose} |
||||||
|
onClick={(e) => e.stopPropagation()} |
||||||
|
PaperProps={{ |
||||||
|
elevation: 8, |
||||||
|
sx: { |
||||||
|
width: 400, |
||||||
|
maxWidth: '90vw', |
||||||
|
maxHeight: '80vh', |
||||||
|
mt: 1.5, |
||||||
|
borderRadius: 2, |
||||||
|
border: 1, |
||||||
|
borderColor: 'divider', |
||||||
|
'&::before': { |
||||||
|
content: '""', |
||||||
|
display: 'block', |
||||||
|
position: 'absolute', |
||||||
|
top: 0, |
||||||
|
right: 20, |
||||||
|
width: 10, |
||||||
|
height: 10, |
||||||
|
bgcolor: 'background.paper', |
||||||
|
transform: 'translateY(-50%) rotate(45deg)', |
||||||
|
zIndex: 0, |
||||||
|
border: 1, |
||||||
|
borderColor: 'divider', |
||||||
|
borderBottom: 0, |
||||||
|
borderRight: 0, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}} |
||||||
|
transformOrigin={{ horizontal: 'right', vertical: 'top' }} |
||||||
|
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }} |
||||||
|
> |
||||||
|
{/* Header */} |
||||||
|
<Box sx={{ p: 2, borderBottom: 1, borderColor: 'divider' }}> |
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}> |
||||||
|
<Typography variant="h6" sx={{ fontWeight: 600 }}> |
||||||
|
Notifications |
||||||
|
</Typography> |
||||||
|
{summary.unread > 0 && ( |
||||||
|
<Button |
||||||
|
size="small" |
||||||
|
startIcon={<MarkEmailRead />} |
||||||
|
onClick={onMarkAllAsRead} |
||||||
|
sx={{ textTransform: 'none' }} |
||||||
|
> |
||||||
|
Mark all read |
||||||
|
</Button> |
||||||
|
)} |
||||||
|
</Box> |
||||||
|
|
||||||
|
{/* Summary Stats */} |
||||||
|
<Box sx={{ display: 'flex', gap: 1, mb: 2 }}> |
||||||
|
<Chip |
||||||
|
size="small" |
||||||
|
label={`${summary.total} Total`} |
||||||
|
sx={{ fontSize: '0.75rem' }} |
||||||
|
/> |
||||||
|
{summary.unread > 0 && ( |
||||||
|
<Chip |
||||||
|
size="small" |
||||||
|
label={`${summary.unread} Unread`} |
||||||
|
color="error" |
||||||
|
sx={{ fontSize: '0.75rem' }} |
||||||
|
/> |
||||||
|
)} |
||||||
|
{summary.pending > 0 && ( |
||||||
|
<Chip |
||||||
|
size="small" |
||||||
|
label={`${summary.pending} Pending`} |
||||||
|
color="warning" |
||||||
|
sx={{ fontSize: '0.75rem' }} |
||||||
|
/> |
||||||
|
)} |
||||||
|
</Box> |
||||||
|
|
||||||
|
{/* Filter Chips */} |
||||||
|
<Box sx={{ display: 'flex', gap: 1 }}> |
||||||
|
<Chip |
||||||
|
size="small" |
||||||
|
label="All" |
||||||
|
onClick={() => setFilter('all')} |
||||||
|
color={getFilterChipColor('all')} |
||||||
|
variant={filter === 'all' ? 'filled' : 'outlined'} |
||||||
|
sx={{ fontSize: '0.75rem', cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
<Chip |
||||||
|
size="small" |
||||||
|
label="Pending" |
||||||
|
onClick={() => setFilter('pending')} |
||||||
|
color={getFilterChipColor('pending')} |
||||||
|
variant={filter === 'pending' ? 'filled' : 'outlined'} |
||||||
|
sx={{ fontSize: '0.75rem', cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
<Chip |
||||||
|
size="small" |
||||||
|
label="Unread" |
||||||
|
onClick={() => setFilter('unread')} |
||||||
|
color={getFilterChipColor('unread')} |
||||||
|
variant={filter === 'unread' ? 'filled' : 'outlined'} |
||||||
|
sx={{ fontSize: '0.75rem', cursor: 'pointer' }} |
||||||
|
/> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
|
||||||
|
{/* Notification List */} |
||||||
|
<Box sx={{ maxHeight: 400, overflow: 'auto' }}> |
||||||
|
{filteredNotifications.length === 0 ? ( |
||||||
|
<Box sx={{ p: 4, textAlign: 'center' }}> |
||||||
|
<Typography variant="body2" color="text.secondary"> |
||||||
|
{filter === 'all'
|
||||||
|
? 'No notifications yet' |
||||||
|
: filter === 'pending' |
||||||
|
? 'No pending notifications' |
||||||
|
: 'No unread notifications' |
||||||
|
} |
||||||
|
</Typography> |
||||||
|
</Box> |
||||||
|
) : ( |
||||||
|
<List sx={{ p: 0 }}> |
||||||
|
{filteredNotifications.map((notification, index) => ( |
||||||
|
<Box key={notification.id}> |
||||||
|
<NotificationItem |
||||||
|
notification={notification} |
||||||
|
onMarkAsRead={onMarkAsRead} |
||||||
|
onAcceptVouch={onAcceptVouch} |
||||||
|
onRejectVouch={onRejectVouch} |
||||||
|
onAcceptPraise={onAcceptPraise} |
||||||
|
onRejectPraise={onRejectPraise} |
||||||
|
onAssignToRCard={onAssignToRCard} |
||||||
|
/> |
||||||
|
{index < filteredNotifications.length - 1 && <Divider />} |
||||||
|
</Box> |
||||||
|
))} |
||||||
|
</List> |
||||||
|
)} |
||||||
|
</Box> |
||||||
|
|
||||||
|
{/* Footer */} |
||||||
|
{summary.total > 0 && ( |
||||||
|
<Box sx={{ p: 2, borderTop: 1, borderColor: 'divider', textAlign: 'center' }}> |
||||||
|
<Button |
||||||
|
variant="text" |
||||||
|
size="small" |
||||||
|
onClick={handleClose} |
||||||
|
sx={{ textTransform: 'none' }} |
||||||
|
> |
||||||
|
View All Notifications |
||||||
|
</Button> |
||||||
|
</Box> |
||||||
|
)} |
||||||
|
</Menu> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default NotificationDropdown; |
||||||
@ -0,0 +1,369 @@ |
|||||||
|
import { useState } from 'react'; |
||||||
|
import { |
||||||
|
ListItem, |
||||||
|
Box, |
||||||
|
Avatar, |
||||||
|
Typography, |
||||||
|
Button, |
||||||
|
Chip, |
||||||
|
IconButton, |
||||||
|
Menu, |
||||||
|
MenuItem, |
||||||
|
Dialog, |
||||||
|
DialogTitle, |
||||||
|
DialogContent, |
||||||
|
DialogActions, |
||||||
|
FormControl, |
||||||
|
InputLabel, |
||||||
|
Select, |
||||||
|
useTheme, |
||||||
|
alpha, |
||||||
|
} from '@mui/material'; |
||||||
|
import { |
||||||
|
ThumbUp, |
||||||
|
StarBorder, |
||||||
|
CheckCircle, |
||||||
|
Cancel, |
||||||
|
Assignment, |
||||||
|
MoreVert, |
||||||
|
Business, |
||||||
|
PersonOutline, |
||||||
|
Groups, |
||||||
|
FamilyRestroom, |
||||||
|
Favorite, |
||||||
|
Home, |
||||||
|
} from '@mui/icons-material'; |
||||||
|
import type { Notification } from '../../types/notification'; |
||||||
|
import { DEFAULT_RCARDS } from '../../types/notification'; |
||||||
|
|
||||||
|
interface NotificationItemProps { |
||||||
|
notification: Notification; |
||||||
|
onMarkAsRead: (notificationId: string) => void; |
||||||
|
onAcceptVouch: (notificationId: string, vouchId: string) => void; |
||||||
|
onRejectVouch: (notificationId: string, vouchId: string) => void; |
||||||
|
onAcceptPraise: (notificationId: string, praiseId: string) => void; |
||||||
|
onRejectPraise: (notificationId: string, praiseId: string) => void; |
||||||
|
onAssignToRCard: (notificationId: string, rCardId: string) => void; |
||||||
|
} |
||||||
|
|
||||||
|
const NotificationItem = ({ |
||||||
|
notification, |
||||||
|
onMarkAsRead, |
||||||
|
onAcceptVouch, |
||||||
|
onRejectVouch, |
||||||
|
onAcceptPraise, |
||||||
|
onRejectPraise, |
||||||
|
onAssignToRCard, |
||||||
|
}: NotificationItemProps) => { |
||||||
|
const theme = useTheme(); |
||||||
|
const [menuAnchor, setMenuAnchor] = useState<null | HTMLElement>(null); |
||||||
|
const [showAssignDialog, setShowAssignDialog] = useState(false); |
||||||
|
const [selectedRCard, setSelectedRCard] = useState(''); |
||||||
|
|
||||||
|
const isMenuOpen = Boolean(menuAnchor); |
||||||
|
|
||||||
|
const handleMenuClick = (event: React.MouseEvent<HTMLElement>) => { |
||||||
|
event.stopPropagation(); |
||||||
|
setMenuAnchor(event.currentTarget); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleMenuClose = () => { |
||||||
|
setMenuAnchor(null); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleAccept = () => { |
||||||
|
if (notification.type === 'vouch' && notification.metadata?.vouchId) { |
||||||
|
onAcceptVouch(notification.id, notification.metadata.vouchId); |
||||||
|
} else if (notification.type === 'praise' && notification.metadata?.praiseId) { |
||||||
|
onAcceptPraise(notification.id, notification.metadata.praiseId); |
||||||
|
} |
||||||
|
handleMenuClose(); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleReject = () => { |
||||||
|
if (notification.type === 'vouch' && notification.metadata?.vouchId) { |
||||||
|
onRejectVouch(notification.id, notification.metadata.vouchId); |
||||||
|
} else if (notification.type === 'praise' && notification.metadata?.praiseId) { |
||||||
|
onRejectPraise(notification.id, notification.metadata.praiseId); |
||||||
|
} |
||||||
|
handleMenuClose(); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleAssignClick = () => { |
||||||
|
setShowAssignDialog(true); |
||||||
|
handleMenuClose(); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleAssignSubmit = () => { |
||||||
|
if (selectedRCard) { |
||||||
|
onAssignToRCard(notification.id, selectedRCard); |
||||||
|
setShowAssignDialog(false); |
||||||
|
setSelectedRCard(''); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const handleMarkAsRead = () => { |
||||||
|
onMarkAsRead(notification.id); |
||||||
|
handleMenuClose(); |
||||||
|
}; |
||||||
|
|
||||||
|
const getNotificationIcon = () => { |
||||||
|
switch (notification.type) { |
||||||
|
case 'vouch': |
||||||
|
return <ThumbUp sx={{ color: 'primary.main' }} />; |
||||||
|
case 'praise': |
||||||
|
return <StarBorder sx={{ color: 'warning.main' }} />; |
||||||
|
default: |
||||||
|
return null; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const getStatusChip = () => { |
||||||
|
switch (notification.status) { |
||||||
|
case 'pending': |
||||||
|
return <Chip label="Pending" size="small" color="warning" />; |
||||||
|
case 'accepted': |
||||||
|
return <Chip label="Accepted" size="small" color="success" />; |
||||||
|
case 'rejected': |
||||||
|
return <Chip label="Declined" size="small" color="error" />; |
||||||
|
case 'completed': |
||||||
|
return <Chip label="Assigned" size="small" color="info" />; |
||||||
|
default: |
||||||
|
return null; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const getRCardIcon = (iconName: string) => { |
||||||
|
switch (iconName) { |
||||||
|
case 'Business': |
||||||
|
return <Business />; |
||||||
|
case 'PersonOutline': |
||||||
|
return <PersonOutline />; |
||||||
|
case 'Groups': |
||||||
|
return <Groups />; |
||||||
|
case 'FamilyRestroom': |
||||||
|
return <FamilyRestroom />; |
||||||
|
case 'Favorite': |
||||||
|
return <Favorite />; |
||||||
|
case 'Home': |
||||||
|
return <Home />; |
||||||
|
default: |
||||||
|
return <PersonOutline />; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const formatTimeAgo = (date: Date) => { |
||||||
|
const now = new Date(); |
||||||
|
const diffInMinutes = Math.floor((now.getTime() - date.getTime()) / (1000 * 60)); |
||||||
|
|
||||||
|
if (diffInMinutes < 1) return 'Just now'; |
||||||
|
if (diffInMinutes < 60) return `${diffInMinutes}m ago`; |
||||||
|
|
||||||
|
const diffInHours = Math.floor(diffInMinutes / 60); |
||||||
|
if (diffInHours < 24) return `${diffInHours}h ago`; |
||||||
|
|
||||||
|
const diffInDays = Math.floor(diffInHours / 24); |
||||||
|
if (diffInDays < 7) return `${diffInDays}d ago`; |
||||||
|
|
||||||
|
return date.toLocaleDateString(); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<ListItem |
||||||
|
sx={{ |
||||||
|
p: 2, |
||||||
|
borderLeft: 4, |
||||||
|
borderLeftColor: notification.isRead ? 'transparent' : 'primary.main', |
||||||
|
backgroundColor: notification.isRead
|
||||||
|
? 'transparent'
|
||||||
|
: alpha(theme.palette.primary.main, 0.02), |
||||||
|
'&:hover': { |
||||||
|
backgroundColor: alpha(theme.palette.action.hover, 0.5), |
||||||
|
}, |
||||||
|
}} |
||||||
|
> |
||||||
|
<Box sx={{ display: 'flex', width: '100%', gap: 2 }}> |
||||||
|
{/* Avatar and Icon */} |
||||||
|
<Box sx={{ position: 'relative' }}> |
||||||
|
<Avatar |
||||||
|
src={notification.fromUserAvatar} |
||||||
|
alt={notification.fromUserName} |
||||||
|
sx={{ width: 48, height: 48 }} |
||||||
|
> |
||||||
|
{notification.fromUserName?.charAt(0) || 'N'} |
||||||
|
</Avatar> |
||||||
|
{getNotificationIcon() && ( |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
position: 'absolute', |
||||||
|
bottom: -4, |
||||||
|
right: -4, |
||||||
|
backgroundColor: 'background.paper', |
||||||
|
borderRadius: '50%', |
||||||
|
p: 0.5, |
||||||
|
border: 2, |
||||||
|
borderColor: 'background.paper', |
||||||
|
}} |
||||||
|
> |
||||||
|
{getNotificationIcon()} |
||||||
|
</Box> |
||||||
|
)} |
||||||
|
</Box> |
||||||
|
|
||||||
|
{/* Content */} |
||||||
|
<Box sx={{ flexGrow: 1, minWidth: 0 }}> |
||||||
|
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 1 }}> |
||||||
|
<Typography variant="subtitle2" sx={{ fontWeight: 600, lineHeight: 1.2 }}> |
||||||
|
{notification.title} |
||||||
|
</Typography> |
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}> |
||||||
|
{getStatusChip()} |
||||||
|
<IconButton size="small" onClick={handleMenuClick}> |
||||||
|
<MoreVert /> |
||||||
|
</IconButton> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
|
||||||
|
<Typography |
||||||
|
variant="body2" |
||||||
|
color="text.secondary" |
||||||
|
sx={{
|
||||||
|
mb: 1, |
||||||
|
display: '-webkit-box', |
||||||
|
WebkitLineClamp: 2, |
||||||
|
WebkitBoxOrient: 'vertical', |
||||||
|
overflow: 'hidden', |
||||||
|
}} |
||||||
|
> |
||||||
|
{notification.message} |
||||||
|
</Typography> |
||||||
|
|
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}> |
||||||
|
<Typography variant="caption" color="text.secondary"> |
||||||
|
{formatTimeAgo(notification.createdAt)} |
||||||
|
</Typography> |
||||||
|
|
||||||
|
{/* Action Buttons */} |
||||||
|
{notification.isActionable && notification.status === 'pending' && ( |
||||||
|
<Box sx={{ display: 'flex', gap: 1 }}> |
||||||
|
<Button |
||||||
|
size="small" |
||||||
|
variant="outlined" |
||||||
|
startIcon={<Cancel />} |
||||||
|
onClick={handleReject} |
||||||
|
sx={{ textTransform: 'none', minWidth: 'auto' }} |
||||||
|
> |
||||||
|
Decline |
||||||
|
</Button> |
||||||
|
<Button |
||||||
|
size="small" |
||||||
|
variant="contained" |
||||||
|
startIcon={<CheckCircle />} |
||||||
|
onClick={handleAccept} |
||||||
|
sx={{ textTransform: 'none', minWidth: 'auto' }} |
||||||
|
> |
||||||
|
Accept |
||||||
|
</Button> |
||||||
|
</Box> |
||||||
|
)} |
||||||
|
|
||||||
|
{notification.status === 'accepted' && !notification.metadata?.rCardId && ( |
||||||
|
<Button |
||||||
|
size="small" |
||||||
|
variant="outlined" |
||||||
|
startIcon={<Assignment />} |
||||||
|
onClick={handleAssignClick} |
||||||
|
sx={{ textTransform: 'none' }} |
||||||
|
> |
||||||
|
Assign to rCard |
||||||
|
</Button> |
||||||
|
)} |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
</ListItem> |
||||||
|
|
||||||
|
{/* Menu */} |
||||||
|
<Menu |
||||||
|
anchorEl={menuAnchor} |
||||||
|
open={isMenuOpen} |
||||||
|
onClose={handleMenuClose} |
||||||
|
PaperProps={{ |
||||||
|
sx: { minWidth: 160 } |
||||||
|
}} |
||||||
|
> |
||||||
|
{!notification.isRead && ( |
||||||
|
<MenuItem onClick={handleMarkAsRead}> |
||||||
|
Mark as read |
||||||
|
</MenuItem> |
||||||
|
)} |
||||||
|
{notification.status === 'accepted' && !notification.metadata?.rCardId && ( |
||||||
|
<MenuItem onClick={handleAssignClick}> |
||||||
|
Assign to rCard |
||||||
|
</MenuItem> |
||||||
|
)} |
||||||
|
{notification.isActionable && notification.status === 'pending' && ( |
||||||
|
<> |
||||||
|
<MenuItem onClick={handleAccept}>Accept</MenuItem> |
||||||
|
<MenuItem onClick={handleReject}>Decline</MenuItem> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</Menu> |
||||||
|
|
||||||
|
{/* Assign to rCard Dialog */} |
||||||
|
<Dialog
|
||||||
|
open={showAssignDialog}
|
||||||
|
onClose={() => setShowAssignDialog(false)} |
||||||
|
maxWidth="sm" |
||||||
|
fullWidth |
||||||
|
> |
||||||
|
<DialogTitle> |
||||||
|
Assign to rCard |
||||||
|
</DialogTitle> |
||||||
|
<DialogContent> |
||||||
|
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}> |
||||||
|
Choose which rCard category to assign this {notification.type} to. This helps organize your connections and endorsements. |
||||||
|
</Typography> |
||||||
|
|
||||||
|
<FormControl fullWidth> |
||||||
|
<InputLabel>Select rCard</InputLabel> |
||||||
|
<Select |
||||||
|
value={selectedRCard} |
||||||
|
label="Select rCard" |
||||||
|
onChange={(e) => setSelectedRCard(e.target.value)} |
||||||
|
> |
||||||
|
{DEFAULT_RCARDS.map((rCard, index) => ( |
||||||
|
<MenuItem key={index} value={`default-${index}`}> |
||||||
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}> |
||||||
|
{getRCardIcon(rCard.icon || 'PersonOutline')} |
||||||
|
<Box> |
||||||
|
<Typography variant="body2" sx={{ fontWeight: 500 }}> |
||||||
|
{rCard.name} |
||||||
|
</Typography> |
||||||
|
<Typography variant="caption" color="text.secondary"> |
||||||
|
{rCard.description} |
||||||
|
</Typography> |
||||||
|
</Box> |
||||||
|
</Box> |
||||||
|
</MenuItem> |
||||||
|
))} |
||||||
|
</Select> |
||||||
|
</FormControl> |
||||||
|
</DialogContent> |
||||||
|
<DialogActions> |
||||||
|
<Button onClick={() => setShowAssignDialog(false)}>Cancel</Button> |
||||||
|
<Button
|
||||||
|
onClick={handleAssignSubmit}
|
||||||
|
variant="contained" |
||||||
|
disabled={!selectedRCard} |
||||||
|
> |
||||||
|
Assign |
||||||
|
</Button> |
||||||
|
</DialogActions> |
||||||
|
</Dialog> |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default NotificationItem; |
||||||
@ -0,0 +1,269 @@ |
|||||||
|
import type {
|
||||||
|
Notification,
|
||||||
|
NotificationSummary,
|
||||||
|
Vouch,
|
||||||
|
Praise |
||||||
|
} from '../types/notification'; |
||||||
|
|
||||||
|
// Mock data for development
|
||||||
|
const mockNotifications: Notification[] = [ |
||||||
|
{ |
||||||
|
id: '1', |
||||||
|
type: 'vouch', |
||||||
|
title: 'New Skill Vouch', |
||||||
|
message: 'Sarah Johnson vouched for your React Development skills at Advanced level', |
||||||
|
fromUserId: 'user-sarah', |
||||||
|
fromUserName: 'Sarah Johnson', |
||||||
|
fromUserAvatar: undefined, |
||||||
|
targetUserId: 'current-user', |
||||||
|
isRead: false, |
||||||
|
isActionable: true, |
||||||
|
status: 'pending', |
||||||
|
metadata: { |
||||||
|
vouchId: 'vouch-1', |
||||||
|
}, |
||||||
|
createdAt: new Date(Date.now() - 1000 * 60 * 30), // 30 minutes ago
|
||||||
|
updatedAt: new Date(Date.now() - 1000 * 60 * 30), |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '2', |
||||||
|
type: 'praise', |
||||||
|
title: 'New Praise', |
||||||
|
message: 'Mike Chen praised your leadership during the Q3 project launch', |
||||||
|
fromUserId: 'user-mike', |
||||||
|
fromUserName: 'Mike Chen', |
||||||
|
fromUserAvatar: undefined, |
||||||
|
targetUserId: 'current-user', |
||||||
|
isRead: false, |
||||||
|
isActionable: true, |
||||||
|
status: 'pending', |
||||||
|
metadata: { |
||||||
|
praiseId: 'praise-1', |
||||||
|
}, |
||||||
|
createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2), // 2 hours ago
|
||||||
|
updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 2), |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '3', |
||||||
|
type: 'vouch', |
||||||
|
title: 'Skill Vouch Accepted', |
||||||
|
message: 'Your TypeScript vouch from Alex Rodriguez has been assigned to Business contacts', |
||||||
|
fromUserId: 'user-alex', |
||||||
|
fromUserName: 'Alex Rodriguez', |
||||||
|
fromUserAvatar: undefined, |
||||||
|
targetUserId: 'current-user', |
||||||
|
isRead: true, |
||||||
|
isActionable: false, |
||||||
|
status: 'completed', |
||||||
|
metadata: { |
||||||
|
vouchId: 'vouch-2', |
||||||
|
rCardId: 'rcard-business', |
||||||
|
}, |
||||||
|
createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24), // 1 day ago
|
||||||
|
updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 12), // Updated 12 hours ago
|
||||||
|
}, |
||||||
|
{ |
||||||
|
id: '4', |
||||||
|
type: 'praise', |
||||||
|
title: 'Teamwork Praise', |
||||||
|
message: 'Jessica Liu praised your collaborative approach on the mobile app redesign', |
||||||
|
fromUserId: 'user-jessica', |
||||||
|
fromUserName: 'Jessica Liu', |
||||||
|
fromUserAvatar: undefined, |
||||||
|
targetUserId: 'current-user', |
||||||
|
isRead: false, |
||||||
|
isActionable: true, |
||||||
|
status: 'accepted', |
||||||
|
metadata: { |
||||||
|
praiseId: 'praise-2', |
||||||
|
}, |
||||||
|
createdAt: new Date(Date.now() - 1000 * 60 * 60 * 6), // 6 hours ago
|
||||||
|
updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 4), // Updated 4 hours ago
|
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const mockVouches: Vouch[] = [ |
||||||
|
{ |
||||||
|
id: 'vouch-1', |
||||||
|
fromUserId: 'user-sarah', |
||||||
|
fromUserName: 'Sarah Johnson', |
||||||
|
fromUserAvatar: undefined, |
||||||
|
toUserId: 'current-user', |
||||||
|
skill: 'React Development', |
||||||
|
description: 'Excellent component architecture and state management. Always writes clean, maintainable code.', |
||||||
|
level: 'advanced', |
||||||
|
endorsementText: 'I worked with this person on multiple React projects and they consistently delivered high-quality solutions.', |
||||||
|
createdAt: new Date(Date.now() - 1000 * 60 * 30), |
||||||
|
updatedAt: new Date(Date.now() - 1000 * 60 * 30), |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'vouch-2', |
||||||
|
fromUserId: 'user-alex', |
||||||
|
fromUserName: 'Alex Rodriguez', |
||||||
|
fromUserAvatar: undefined, |
||||||
|
toUserId: 'current-user', |
||||||
|
skill: 'TypeScript', |
||||||
|
description: 'Strong type safety practices and excellent knowledge of advanced TypeScript features.', |
||||||
|
level: 'expert', |
||||||
|
endorsementText: 'One of the best TypeScript developers I have worked with.', |
||||||
|
createdAt: new Date(Date.now() - 1000 * 60 * 60 * 24), |
||||||
|
updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 24), |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
const mockPraises: Praise[] = [ |
||||||
|
{ |
||||||
|
id: 'praise-1', |
||||||
|
fromUserId: 'user-mike', |
||||||
|
fromUserName: 'Mike Chen', |
||||||
|
fromUserAvatar: undefined, |
||||||
|
toUserId: 'current-user', |
||||||
|
category: 'leadership', |
||||||
|
title: 'Outstanding Project Leadership', |
||||||
|
description: 'Led the Q3 project launch with exceptional coordination and communication. Kept the team motivated and on track.', |
||||||
|
tags: ['project-management', 'team-leadership', 'communication'], |
||||||
|
createdAt: new Date(Date.now() - 1000 * 60 * 60 * 2), |
||||||
|
updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 2), |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 'praise-2', |
||||||
|
fromUserId: 'user-jessica', |
||||||
|
fromUserName: 'Jessica Liu', |
||||||
|
fromUserAvatar: undefined, |
||||||
|
toUserId: 'current-user', |
||||||
|
category: 'teamwork', |
||||||
|
title: 'Collaborative Team Player', |
||||||
|
description: 'Always willing to help teammates and shares knowledge freely. Made the mobile app redesign a huge success.', |
||||||
|
tags: ['collaboration', 'mobile-development', 'mentoring'], |
||||||
|
createdAt: new Date(Date.now() - 1000 * 60 * 60 * 6), |
||||||
|
updatedAt: new Date(Date.now() - 1000 * 60 * 60 * 6), |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
|
export class NotificationService { |
||||||
|
private notifications: Notification[] = [...mockNotifications]; |
||||||
|
private vouches: Vouch[] = [...mockVouches]; |
||||||
|
private praises: Praise[] = [...mockPraises]; |
||||||
|
|
||||||
|
// Get all notifications for a user
|
||||||
|
async getNotifications(userId: string): Promise<Notification[]> { |
||||||
|
// Simulate API delay
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 300)); |
||||||
|
return this.notifications.filter(n => n.targetUserId === userId); |
||||||
|
} |
||||||
|
|
||||||
|
// Get notification summary
|
||||||
|
async getNotificationSummary(userId: string): Promise<NotificationSummary> { |
||||||
|
await new Promise(resolve => setTimeout(resolve, 100)); |
||||||
|
const userNotifications = this.notifications.filter(n => n.targetUserId === userId); |
||||||
|
|
||||||
|
const summary: NotificationSummary = { |
||||||
|
total: userNotifications.length, |
||||||
|
unread: userNotifications.filter(n => !n.isRead).length, |
||||||
|
pending: userNotifications.filter(n => n.status === 'pending' && n.isActionable).length, |
||||||
|
byType: { |
||||||
|
vouch: userNotifications.filter(n => n.type === 'vouch').length, |
||||||
|
praise: userNotifications.filter(n => n.type === 'praise').length, |
||||||
|
connection: userNotifications.filter(n => n.type === 'connection').length, |
||||||
|
group_invite: userNotifications.filter(n => n.type === 'group_invite').length, |
||||||
|
message: userNotifications.filter(n => n.type === 'message').length, |
||||||
|
system: userNotifications.filter(n => n.type === 'system').length, |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
return summary; |
||||||
|
} |
||||||
|
|
||||||
|
// Mark notification as read
|
||||||
|
async markAsRead(notificationId: string): Promise<void> { |
||||||
|
await new Promise(resolve => setTimeout(resolve, 200)); |
||||||
|
const notification = this.notifications.find(n => n.id === notificationId); |
||||||
|
if (notification) { |
||||||
|
notification.isRead = true; |
||||||
|
notification.updatedAt = new Date(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Mark all notifications as read for a user
|
||||||
|
async markAllAsRead(userId: string): Promise<void> { |
||||||
|
await new Promise(resolve => setTimeout(resolve, 300)); |
||||||
|
this.notifications |
||||||
|
.filter(n => n.targetUserId === userId && !n.isRead) |
||||||
|
.forEach(notification => { |
||||||
|
notification.isRead = true; |
||||||
|
notification.updatedAt = new Date(); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// Accept a vouch
|
||||||
|
async acceptVouch(notificationId: string, _vouchId: string): Promise<void> { |
||||||
|
await new Promise(resolve => setTimeout(resolve, 400)); |
||||||
|
const notification = this.notifications.find(n => n.id === notificationId); |
||||||
|
if (notification) { |
||||||
|
notification.status = 'accepted'; |
||||||
|
notification.isActionable = true; // Still actionable for rCard assignment
|
||||||
|
notification.updatedAt = new Date(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Reject a vouch
|
||||||
|
async rejectVouch(notificationId: string, _vouchId: string): Promise<void> { |
||||||
|
await new Promise(resolve => setTimeout(resolve, 400)); |
||||||
|
const notification = this.notifications.find(n => n.id === notificationId); |
||||||
|
if (notification) { |
||||||
|
notification.status = 'rejected'; |
||||||
|
notification.isActionable = false; |
||||||
|
notification.updatedAt = new Date(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Accept praise
|
||||||
|
async acceptPraise(notificationId: string, _praiseId: string): Promise<void> { |
||||||
|
await new Promise(resolve => setTimeout(resolve, 400)); |
||||||
|
const notification = this.notifications.find(n => n.id === notificationId); |
||||||
|
if (notification) { |
||||||
|
notification.status = 'accepted'; |
||||||
|
notification.isActionable = true; // Still actionable for rCard assignment
|
||||||
|
notification.updatedAt = new Date(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Reject praise
|
||||||
|
async rejectPraise(notificationId: string, _praiseId: string): Promise<void> { |
||||||
|
await new Promise(resolve => setTimeout(resolve, 400)); |
||||||
|
const notification = this.notifications.find(n => n.id === notificationId); |
||||||
|
if (notification) { |
||||||
|
notification.status = 'rejected'; |
||||||
|
notification.isActionable = false; |
||||||
|
notification.updatedAt = new Date(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Assign to rCard
|
||||||
|
async assignToRCard(notificationId: string, rCardId: string): Promise<void> { |
||||||
|
await new Promise(resolve => setTimeout(resolve, 300)); |
||||||
|
const notification = this.notifications.find(n => n.id === notificationId); |
||||||
|
if (notification && notification.metadata) { |
||||||
|
notification.metadata.rCardId = rCardId; |
||||||
|
notification.status = 'completed'; |
||||||
|
notification.isActionable = false; |
||||||
|
notification.isRead = true; |
||||||
|
notification.updatedAt = new Date(); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Get vouch details
|
||||||
|
async getVouch(vouchId: string): Promise<Vouch | null> { |
||||||
|
await new Promise(resolve => setTimeout(resolve, 200)); |
||||||
|
return this.vouches.find(v => v.id === vouchId) || null; |
||||||
|
} |
||||||
|
|
||||||
|
// Get praise details
|
||||||
|
async getPraise(praiseId: string): Promise<Praise | null> { |
||||||
|
await new Promise(resolve => setTimeout(resolve, 200)); |
||||||
|
return this.praises.find(p => p.id === praiseId) || null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// Export singleton instance
|
||||||
|
export const notificationService = new NotificationService(); |
||||||
@ -0,0 +1,146 @@ |
|||||||
|
export interface RCard { |
||||||
|
id: string; |
||||||
|
name: string; |
||||||
|
description?: string; |
||||||
|
color?: string; |
||||||
|
icon?: string; |
||||||
|
isDefault: boolean; |
||||||
|
createdAt: Date; |
||||||
|
updatedAt: Date; |
||||||
|
} |
||||||
|
|
||||||
|
export interface Vouch { |
||||||
|
id: string; |
||||||
|
fromUserId: string; |
||||||
|
fromUserName: string; |
||||||
|
fromUserAvatar?: string; |
||||||
|
toUserId: string; |
||||||
|
skill: string; |
||||||
|
description: string; |
||||||
|
level: 'beginner' | 'intermediate' | 'advanced' | 'expert'; |
||||||
|
endorsementText?: string; |
||||||
|
createdAt: Date; |
||||||
|
updatedAt: Date; |
||||||
|
} |
||||||
|
|
||||||
|
export interface Praise { |
||||||
|
id: string; |
||||||
|
fromUserId: string; |
||||||
|
fromUserName: string; |
||||||
|
fromUserAvatar?: string; |
||||||
|
toUserId: string; |
||||||
|
category: 'professional' | 'personal' | 'leadership' | 'teamwork' | 'communication' | 'creativity' | 'other'; |
||||||
|
title: string; |
||||||
|
description: string; |
||||||
|
tags?: string[]; |
||||||
|
createdAt: Date; |
||||||
|
updatedAt: Date; |
||||||
|
} |
||||||
|
|
||||||
|
export interface NotificationAction { |
||||||
|
id: string; |
||||||
|
type: 'accept' | 'reject' | 'assign' | 'view'; |
||||||
|
label: string; |
||||||
|
variant?: 'text' | 'outlined' | 'contained'; |
||||||
|
color?: 'primary' | 'secondary' | 'success' | 'error' | 'warning'; |
||||||
|
} |
||||||
|
|
||||||
|
export interface Notification { |
||||||
|
id: string; |
||||||
|
type: 'vouch' | 'praise' | 'connection' | 'group_invite' | 'message' | 'system'; |
||||||
|
title: string; |
||||||
|
message: string; |
||||||
|
fromUserId?: string; |
||||||
|
fromUserName?: string; |
||||||
|
fromUserAvatar?: string; |
||||||
|
targetUserId: string; |
||||||
|
isRead: boolean; |
||||||
|
isActionable: boolean; |
||||||
|
status: 'pending' | 'accepted' | 'rejected' | 'completed'; |
||||||
|
actions?: NotificationAction[]; |
||||||
|
metadata?: { |
||||||
|
vouchId?: string; |
||||||
|
praiseId?: string; |
||||||
|
groupId?: string; |
||||||
|
messageId?: string; |
||||||
|
rCardId?: string; |
||||||
|
}; |
||||||
|
createdAt: Date; |
||||||
|
updatedAt: Date; |
||||||
|
} |
||||||
|
|
||||||
|
export interface VouchNotification extends Notification { |
||||||
|
type: 'vouch'; |
||||||
|
metadata: { |
||||||
|
vouchId: string; |
||||||
|
rCardId?: string; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export interface PraiseNotification extends Notification { |
||||||
|
type: 'praise'; |
||||||
|
metadata: { |
||||||
|
praiseId: string; |
||||||
|
rCardId?: string; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
export interface NotificationSummary { |
||||||
|
total: number; |
||||||
|
unread: number; |
||||||
|
pending: number; |
||||||
|
byType: { |
||||||
|
vouch: number; |
||||||
|
praise: number; |
||||||
|
connection: number; |
||||||
|
group_invite: number; |
||||||
|
message: number; |
||||||
|
system: number; |
||||||
|
}; |
||||||
|
} |
||||||
|
|
||||||
|
// Default rCard categories
|
||||||
|
export const DEFAULT_RCARDS: Omit<RCard, 'id' | 'createdAt' | 'updatedAt'>[] = [ |
||||||
|
{ |
||||||
|
name: 'Business', |
||||||
|
description: 'Professional business contacts and partnerships', |
||||||
|
color: '#2563eb', |
||||||
|
icon: 'Business', |
||||||
|
isDefault: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Acquaintance', |
||||||
|
description: 'People you know casually or have met briefly', |
||||||
|
color: '#10b981', |
||||||
|
icon: 'PersonOutline', |
||||||
|
isDefault: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Colleague', |
||||||
|
description: 'Current and former work colleagues', |
||||||
|
color: '#8b5cf6', |
||||||
|
icon: 'Groups', |
||||||
|
isDefault: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Family', |
||||||
|
description: 'Extended family members and relatives', |
||||||
|
color: '#f59e0b', |
||||||
|
icon: 'FamilyRestroom', |
||||||
|
isDefault: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Friend', |
||||||
|
description: 'Personal friends and social connections', |
||||||
|
color: '#ef4444', |
||||||
|
icon: 'Favorite', |
||||||
|
isDefault: true, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: 'Close Family', |
||||||
|
description: 'Immediate family members', |
||||||
|
color: '#ec4899', |
||||||
|
icon: 'Home', |
||||||
|
isDefault: true, |
||||||
|
}, |
||||||
|
]; |
||||||
Loading…
Reference in new issue