Update environment configuration and enhance user management features

- Changed VITE_SUPABASE_URL in .env.example for deployment consistency.
- Added new user management functionality to reset user passwords in UserManagement component.
- Updated supabase.ts to include first and last name fields in user profiles and added password reset functionality.
- Enhanced DashboardLayout to include a user profile view and improved user display in TopNavbar.
- Updated seed.sql to create additional users with roles for testing purposes.
This commit is contained in:
salirezav
2025-09-22 11:20:15 -04:00
parent 0ba385eebc
commit 44c8c3f6dd
23 changed files with 1398 additions and 31 deletions

View File

@@ -7,6 +7,7 @@ interface TopNavbarProps {
currentView?: string
onToggleSidebar?: () => void
isSidebarOpen?: boolean
onNavigateToProfile?: () => void
}
export function TopNavbar({
@@ -14,7 +15,8 @@ export function TopNavbar({
onLogout,
currentView = 'dashboard',
onToggleSidebar,
isSidebarOpen = false
isSidebarOpen = false,
onNavigateToProfile
}: TopNavbarProps) {
const [isUserMenuOpen, setIsUserMenuOpen] = useState(false)
@@ -145,11 +147,16 @@ export function TopNavbar({
>
<span className="mr-3 overflow-hidden rounded-full h-11 w-11">
<div className="w-11 h-11 bg-brand-500 rounded-full flex items-center justify-center text-white text-sm font-medium">
{user.email.charAt(0).toUpperCase()}
{(user.first_name || user.email).charAt(0).toUpperCase()}
</div>
</span>
<span className="block mr-1 font-medium text-theme-sm">{user.email.split('@')[0]}</span>
<span className="block mr-1 font-medium text-theme-sm">
{user.first_name && user.last_name
? `${user.first_name} ${user.last_name}`
: user.email.split('@')[0]
}
</span>
<svg
className={`stroke-gray-500 dark:stroke-gray-400 transition-transform duration-200 ${isUserMenuOpen ? "rotate-180" : ""
}`}
@@ -174,7 +181,10 @@ export function TopNavbar({
<div className="absolute right-0 mt-[17px] flex w-[260px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark z-50">
<div>
<span className="block font-medium text-gray-700 text-theme-sm dark:text-gray-400">
{user.email.split('@')[0]}
{user.first_name && user.last_name
? `${user.first_name} ${user.last_name}`
: user.email.split('@')[0]
}
</span>
<span className="mt-0.5 block text-theme-xs text-gray-500 dark:text-gray-400">
{user.email}
@@ -183,7 +193,13 @@ export function TopNavbar({
<ul className="flex flex-col gap-1 pt-4 pb-3 border-b border-gray-200 dark:border-gray-800">
<li>
<div className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm dark:text-gray-400">
<button
onClick={() => {
setIsUserMenuOpen(false)
onNavigateToProfile?.()
}}
className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300 w-full text-left"
>
<svg
className="fill-gray-500 dark:fill-gray-400"
width="24"
@@ -200,7 +216,7 @@ export function TopNavbar({
/>
</svg>
Profile
</div>
</button>
</li>
<li>
<div className="flex items-center gap-3 px-3 py-2 font-medium text-gray-700 rounded-lg text-theme-sm dark:text-gray-400">