on admin dashboard header create a user icon where i can manage admin us
This commit is contained in:
Leon Serfaty G
@@ -1,5 +1,6 @@
|
||||
|
||||
import * as React from 'react';
|
||||
import Link from 'next/link';
|
||||
import {
|
||||
Sidebar,
|
||||
SidebarContent,
|
||||
@@ -15,15 +16,34 @@ import {
|
||||
SidebarTrigger,
|
||||
SidebarFooter,
|
||||
} from '@/components/ui/sidebar';
|
||||
import { LayoutDashboard, LogOut, Settings, Mail } from 'lucide-react';
|
||||
import { signOut } from '@/lib/auth';
|
||||
import { LayoutDashboard, LogOut, Settings, Mail, User as UserIcon } from 'lucide-react';
|
||||
import { signOut, getSession } from '@/lib/auth';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import type { User } from '@/lib/types';
|
||||
|
||||
export default function AdminLayout({
|
||||
|
||||
export default async function AdminLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
const session = (await getSession()) as User | null;
|
||||
const userInitials = session?.name
|
||||
? session.name
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
: '';
|
||||
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<Sidebar>
|
||||
@@ -47,6 +67,12 @@ export default function AdminLayout({
|
||||
Settings
|
||||
</SidebarMenuButton>
|
||||
<SidebarMenuSub>
|
||||
<SidebarMenuSubItem>
|
||||
<SidebarMenuSubButton href="/admin/settings/user" >
|
||||
<UserIcon />
|
||||
User
|
||||
</SidebarMenuSubButton>
|
||||
</SidebarMenuSubItem>
|
||||
<SidebarMenuSubItem>
|
||||
<SidebarMenuSubButton href="/admin/settings/email" >
|
||||
<Mail />
|
||||
@@ -73,11 +99,39 @@ export default function AdminLayout({
|
||||
</SidebarFooter>
|
||||
</Sidebar>
|
||||
<SidebarInset>
|
||||
<header className="flex h-12 items-center justify-between border-b bg-background p-2 px-4">
|
||||
<SidebarTrigger />
|
||||
<h1 className="text-lg font-semibold">Dashboard</h1>
|
||||
<header className="flex h-14 items-center justify-between border-b bg-background px-4 lg:h-[60px] lg:px-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<SidebarTrigger className="md:hidden"/>
|
||||
<h1 className="text-lg font-semibold md:text-2xl">Dashboard</h1>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="secondary" size="icon" className="rounded-full">
|
||||
<Avatar>
|
||||
<AvatarImage src={`https://placehold.co/100x100.png`} alt={session?.name ?? ''} />
|
||||
<AvatarFallback>{userInitials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="sr-only">Toggle user menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/admin/settings/user">Settings</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<form action={signOut} className="w-full">
|
||||
<DropdownMenuItem asChild>
|
||||
<button type="submit" className="w-full">
|
||||
Sign Out
|
||||
</button>
|
||||
</DropdownMenuItem>
|
||||
</form>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</header>
|
||||
<main className="flex-1 p-4">{children}</main>
|
||||
<main className="flex-1 p-4 lg:p-6">{children}</main>
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
|
||||
"use client";
|
||||
|
||||
import { useForm, type SubmitHandler } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { z } from "zod";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { useEffect, useTransition } from "react";
|
||||
import { getUser, updateUser } from "@/lib/actions/user";
|
||||
import { User } from "@/lib/types";
|
||||
|
||||
const userProfileSchema = z.object({
|
||||
name: z.string().min(1, "Name is required"),
|
||||
email: z.string().email("Invalid email address"),
|
||||
password: z.string().min(6, "Password must be at least 6 characters").optional().or(z.literal('')),
|
||||
confirmPassword: z.string().optional(),
|
||||
}).refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Passwords don't match",
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
type UserProfileFormValues = z.infer<typeof userProfileSchema>;
|
||||
|
||||
export default function UserProfilePage() {
|
||||
const { toast } = useToast();
|
||||
const [isSaving, startSavingTransition] = useTransition();
|
||||
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
} = useForm<UserProfileFormValues>({
|
||||
resolver: zodResolver(userProfileSchema),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchUser() {
|
||||
const user = await getUser();
|
||||
if (user) {
|
||||
reset({ name: user.name, email: user.email });
|
||||
}
|
||||
}
|
||||
fetchUser();
|
||||
}, [reset]);
|
||||
|
||||
const onSubmit: SubmitHandler<UserProfileFormValues> = async (data) => {
|
||||
startSavingTransition(async () => {
|
||||
const result = await updateUser({
|
||||
name: data.name,
|
||||
email: data.email,
|
||||
password: data.password || undefined,
|
||||
});
|
||||
|
||||
if (result.success) {
|
||||
toast({
|
||||
title: "Profile Updated",
|
||||
description: "Your profile has been updated successfully.",
|
||||
});
|
||||
// Clear password fields after successful submission
|
||||
reset({ ...data, password: '', confirmPassword: '' });
|
||||
} else {
|
||||
toast({
|
||||
title: "Update Failed",
|
||||
description: result.error || "An unknown error occurred.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="max-w-2xl">
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<CardHeader>
|
||||
<CardTitle>My Account</CardTitle>
|
||||
<CardDescription>
|
||||
Update your account details. Leave password fields blank to keep the current password.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-6">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input id="name" {...register("name")} />
|
||||
{errors.name && <p className="text-sm text-destructive">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input id="email" type="email" {...register("email")} />
|
||||
{errors.email && <p className="text-sm text-destructive">{errors.email.message}</p>}
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="password">New Password</Label>
|
||||
<Input id="password" type="password" {...register("password")} />
|
||||
{errors.password && <p className="text-sm text-destructive">{errors.password.message}</p>}
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="confirmPassword">Confirm New Password</Label>
|
||||
<Input id="confirmPassword" type="password" {...register("confirmPassword")} />
|
||||
{errors.confirmPassword && <p className="text-sm text-destructive">{errors.confirmPassword.message}</p>}
|
||||
</div>
|
||||
</CardContent>
|
||||
<CardFooter className="flex justify-end">
|
||||
<Button type="submit" disabled={isSaving}>
|
||||
{isSaving ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</CardFooter>
|
||||
</form>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
|
||||
'use server';
|
||||
|
||||
import db from '@/lib/db';
|
||||
import { User } from '@/lib/types';
|
||||
import { z } from 'zod';
|
||||
import { getSession } from '../auth';
|
||||
|
||||
const UserUpdateSchema = z.object({
|
||||
name: z.string().min(1, 'Name is required'),
|
||||
email: z.string().email('Invalid email address'),
|
||||
password: z.string().optional(),
|
||||
});
|
||||
|
||||
export async function getUser(): Promise<User | null> {
|
||||
const session = await getSession();
|
||||
if (!session?.userId) {
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
const stmt = db.prepare('SELECT id, name, email FROM users WHERE id = ?');
|
||||
const user = stmt.get(session.userId) as User | undefined;
|
||||
return user ?? null;
|
||||
} catch (error) {
|
||||
console.error('Failed to get user:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export async function updateUser(
|
||||
data: z.infer<typeof UserUpdateSchema>
|
||||
): Promise<{ success: boolean; error?: string }> {
|
||||
const session = await getSession();
|
||||
if (!session?.userId) {
|
||||
return { success: false, error: 'Not authenticated' };
|
||||
}
|
||||
|
||||
const validated = UserUpdateSchema.safeParse(data);
|
||||
if (!validated.success) {
|
||||
return { success: false, error: 'Invalid data' };
|
||||
}
|
||||
|
||||
const { name, email, password } = validated.data;
|
||||
|
||||
try {
|
||||
if (password) {
|
||||
// In a real application, hash the password
|
||||
const stmt = db.prepare(
|
||||
'UPDATE users SET name = ?, email = ?, password = ? WHERE id = ?'
|
||||
);
|
||||
stmt.run(name, email, password, session.userId);
|
||||
} else {
|
||||
const stmt = db.prepare('UPDATE users SET name = ?, email = ? WHERE id = ?');
|
||||
stmt.run(name, email, session.userId);
|
||||
}
|
||||
return { success: true };
|
||||
} catch (error: any) {
|
||||
console.error('Failed to update user:', error);
|
||||
if (error.code === 'SQLITE_CONSTRAINT_UNIQUE') {
|
||||
return { success: false, error: 'Email already in use.' };
|
||||
}
|
||||
return { success: false, error: 'Failed to update user profile.' };
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user