VSN-2589 — Migrate all staff profile pages to shadcn/Tailwind
Summary
Profile Information (/dashboard/staff/profil/information) — 6 files
-
Profile card: Dark purple gradient background (
#362E74→#6C5CE7), white avatar with dark initials, horizontal layout with avatar/name/badges/divider/contact inline, glass-morphic role and schedule badges -
Secondary details: Purple
bg-[#EDE9FB]card with left border, compact white rows for Outlook/WhatsApp/Birthday, inline editing with check/X icon buttons, Pencil edit trigger - Teams card: Matching purple background, white inner rows with gradient team avatars, purple hover effects
-
Main view: Asymmetric 3/5 + 2/5 grid layout,
max-w-[1400px]centered, loading pill badge - Schedule modal: shadcn Dialog with purple header, 7-column weekly grid, color-coded leaves list with staggered animations
- Settings dialog: shadcn Dialog placeholder
Work Status (/dashboard/staff/profil/status) — 1 file
- Status grid with colored icon buttons,
shadow-sm+ purple hover on cards - shadcn
Select/Checkbox/Button,sonnerreplacing MUISnackbar - Lucide icons replacing MUI icons (
Building2,Home,Car,UserX, etc.)
Notifications (/dashboard/staff/profil/notifications) — 6 files
- Glass-morphic main card with
animate-card-reveal - Desktop notification banner with
Monitoricon and shadcnButton - shadcn
Selectfor notification/email channels, shadcnCheckboxfor settings - Lucide icons (
Bell,Mail,AtSign,RefreshCw,Reply) replacing MUI icons - 3-column CSS grid layout for notification settings
Password (/dashboard/staff/profil/password) — 3 files
- Glass-morphic card with
KeyRound/ShieldCheckLucide icons - Tailwind progress bar for password strength (replacing MUI
LinearProgress) - shadcn
FormField/ActionButtons,sonnerreplacingnotistack - Reset mode with code input, timer, and resend button
Language & Region (/dashboard/staff/profil/languesandregion) — 2 files
- Glass-morphic card with
Globeicon header - View mode: info rows with Lucide icons in
bg-[hsl(var(--p-100))]boxes - Edit mode: shadcn
FormFieldgrid withActionButtons - Removed FontAwesome icon imports from form field config
Session History (/dashboard/staff/profil/sessionHistorique) — 3 files
- CSS grid table with
#DBD7F9purple header row - Session rows with Lucide device icons (
Laptop,Monitor,Smartphone,Tablet) - shadcn
ButtonwithLogOuticon for disconnect action - Green highlight for current session,
Shieldicon page header - Info banner with security message, shadcn
TablePagination
Files modified (19)
information/view/all-information-view.tsxinformation/components/big-card-infos.tsxinformation/components/secondary-details.tsxinformation/components/teams-card.tsxinformation/components/Account-schedule-modal.tsxinformation/components/account-schedule/WeeklySchedulePreview.tsxinformation/components/account-schedule/LeavesList.tsxinformation/components/account-schedule/SettingsDialog.tsxstatus/components/work-status-principal.tsxnotifications/view/notifications-view.tsxnotifications/components/notifications-header.tsxnotifications/components/desktop-notification-banner.tsxnotifications/components/notifications-channels.tsxnotifications/components/notification-setting-item.tsxnotifications/components/notifications-setting-section.tsxpassword/view/password-profile-view.tsxpassword/components/password-form.tsxpassword/components/password-strength-indicator.tsxLanguesEtRegion/views/language-settings-view.tsxLanguesEtRegion/utils/form-fields-language.tssessionHistory/view/session-history-list.tsxsessionHistory/components/session-history-row.tsxsessionHistory/utils/functions-helpers.tsx
Closes VSN-2589