Finished off profile page

src/app/api/update-user/route.ts

@@ -13,7 +13,17 @@ export async function POST(req: Request) {
 		if ("user" in authResult === false) return authResult;
 
 		const { user } = authResult;
-		const { email, name, password } = await req.json();
+		// todo handle requestedRole
+		const { userId, email, name, password } = await req.json();
+
+		// Trying to update a different user than themselves
+		// Only available to admins
+		// todo add senior scientists being able to update their juniors
+		if (userId && userId !== user.id) {
+			if (user.role !== "ADMIN") {
+				return NextResponse.json({ message: "Not authorised" }, { status: 401 });
+			}
+		}
 
 		// Check if email is already in use by another user
 		if (email && email !== user.email) {
@@ -25,6 +35,7 @@ export async function POST(req: Request) {
 			}
 		}
 
+		// todo move to dedicated function
 		// Validate password strength if provided
 		let passwordHash = user.passwordHash;
 		if (password) {
@@ -47,9 +58,8 @@ export async function POST(req: Request) {
 			passwordHash = await bcryptjs.hash(password, 10);
 		}
 
-		// Update user in database
 		const updatedUser = await prisma.user.update({
-			where: { id: user.id },
+			where: { id: userId || user.id },
 			data: {
 				name: name || user.name,
 				email: email || user.email,
@@ -57,7 +67,7 @@ export async function POST(req: Request) {
 			},
 		});
 
-		// Link orders with matching email to the updated user
+		// Link non-account orders with matching email to the updated user
 		if (email && email !== user.email) {
 			await prisma.order.updateMany({
 				where: {

src/app/api/user/route.ts

@@ -31,7 +31,8 @@ export async function GET() {
 		});
 
 		if (user) {
-			return NextResponse.json({ message: "Got user successfully", user }, { status: 200 });
+			const { passwordHash: _, ...userSansHash } = user;
+			return NextResponse.json({ message: "Got user successfully", user: userSansHash }, { status: 200 });
 		} else {
 			cookieStore.delete("jwt"); // Delete JWT cookie if user not found            }
 			return NextResponse.json({ message: "Failed to get user" }, { status: 401 });

src/app/profile/page.tsx

@@ -1,210 +1,399 @@
 "use client";
+import { useStoreState } from "@hooks/store";
 import axios, { AxiosError } from "axios";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
-import { FaSignOutAlt } from "react-icons/fa";
 import { FaUser } from "react-icons/fa6";
-
 import { User } from "@appTypes/Prisma";
 import { useStoreActions } from "@hooks/store";
 
-// todo add previous orders list
+function CustomRoleDropdown({
+	value,
+	onChange,
+	disabled,
+}: {
+	value: string;
+	onChange: (role: string) => void;
+	disabled: boolean;
+}) {
+	const [isOpen, setIsOpen] = useState(false);
+	const dropdownRef = useRef<HTMLDivElement>(null);
+	const roles = ["ADMIN", "SCIENTIST", "GUEST"] as const;
+
+	useEffect(() => {
+		function handleClickOutside(event: MouseEvent) {
+			if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+				setIsOpen(false);
+			}
+		}
+		document.addEventListener("mousedown", handleClickOutside);
+		return () => document.removeEventListener("mousedown", handleClickOutside);
+	}, []);
+
+	return (
+		<div className="relative" ref={dropdownRef}>
+			<button
+				type="button"
+				className={`w-full p-2 border border-neutral-300 rounded-md text-left text-sm bg-white ${
+					disabled ? "opacity-50 cursor-not-allowed" : "hover:bg-neutral-100"
+				}`}
+				onClick={() => !disabled && setIsOpen(!isOpen)}
+				disabled={disabled}
+			>
+				{value || "Select a role"}
+			</button>
+			{isOpen && (
+				<div className="absolute top-full mt-1 w-40 bg-white border border-neutral-300 rounded-lg overflow-hidden shadow-lg z-40">
+					<ul>
+						{roles.map((role) => (
+							<li key={role}>
+								<button
+									className={`block w-full text-left px-4 py-2 text-sm hover:bg-neutral-100 ${
+										value === role ? "bg-neutral-100" : ""
+									}`}
+									onClick={() => {
+										onChange(role);
+										setIsOpen(false);
+									}}
+								>
+									{role}
+								</button>
+							</li>
+						))}
+					</ul>
+				</div>
+			)}
+		</div>
+	);
+}
 
 export default function Profile() {
 	const router = useRouter();
-	const setUser = useStoreActions((actions) => actions.setUser) as (user: User | null) => void;
+	const user = useStoreState((state) => state.user);
-	const [user, setUserState] = useState<User | null>(null);
+	const setUser = useStoreActions((actions) => actions.setUser);
-	const [name, setName] = useState("");
+	const [activeTab, setActiveTab] = useState<"profile" | "orders" | "account">("profile");
-	const [email, setEmail] = useState("");
-	const [password, setPassword] = useState("");
-	const [confirmPassword, setConfirmPassword] = useState("");
-	const [role, setRole] = useState("");
-	const [error, setError] = useState("");
-	const [isSubmitting, setIsSubmitting] = useState(false);
 
-	useEffect(() => {
+	async function handleLogout() {
-		const fetchUser = async () => {
-			try {
-				const userData: User = {
-					id: 1,
-					createdAt: new Date(),
-					name: "John Doe",
-					email: "john.doe@example.com",
-					passwordHash: "hashed_password",
-					role: "SCIENTIST",
-					scientist: undefined,
-					purchasedArtefacts: [],
-				};
-				setUserState(userData);
-				setName(userData.name);
-				setEmail(userData.email);
-				setRole(userData.role);
-			} catch {
-				setError("Failed to load user data.");
-			}
-		};
-		fetchUser();
-	}, []);
-
-	const handleSave = async () => {
-		if (!name || !email) {
-			setError("Name and email are required.");
-			return;
-		}
-		setIsSubmitting(true);
-		try {
-			// todo create receiving api route
-			// todo handle sending fields to api route
-			await new Promise((resolve) => setTimeout(resolve, 500));
-			setUserState({ ...user!, name, email, role });
-			alert("Profile updated successfully.");
-			setError("");
-		} catch {
-			setError("Failed to update profile. Please try again.");
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	const handleLogout = async () => {
 		try {
 			const res = await axios.get("/api/logout");
 			if (res.status === 200) {
 				setUser(null);
 				router.push("/");
-			} else {
-				console.error("Failed to logout", res.data);
 			}
 		} catch (error) {
 			const axiosError = error as AxiosError<{ message: string }>;
 			if (axiosError.response && axiosError.response.status === 400) {
 				setUser(null);
 				router.push("/");
-			} else {
-				console.error("Error during logout", axiosError);
 			}
 		}
-	};
+	}
 
-	return (
+	useEffect(() => {
-		<div className="flex h-full justify-center bg-neutral-50">
+		!user && router.push("/");
-			<div className="w-1/2 flex flex-col">
+	}, []);
-				<div className="mt-4">
+
-					<button
+	function ProfileTab() {
-						onClick={handleLogout}
+		if (!user) return <p className="text-neutral-600">No user data available</p>;
-						className="float-right py-2 px-4 bg-red-500 text-white rounded-md hover:bg-red-700 transition-colors duration-200"
+
-						aria-label="Log out"
+		const isScientistOrAdmin = user.role === "SCIENTIST" || user.role === "ADMIN";
-						title="Log out"
+
-					>
+		const stats = [
-						{/* <FaSignOutAlt className="h-5 w-5" /> */}
+			...(isScientistOrAdmin
-						Log Out
+				? [
-					</button>
+						{ label: "Earthquakes Logged", value: user.earthquakes.length },
+						{ label: "Observatories Logged", value: user.observatories.length },
+						{ label: "Artefacts Logged", value: user.artefacts.length },
+				  ]
+				: []),
+			{ label: "Orders Placed", value: user.purchasedOrders.length },
+		];
+
+		return (
+			<div className="bg-neutral-100 rounded-md border border-neutral-200 p-8">
+				<div className="flex justify-between items-center mb-6">
+					<h3 className="text-xl font-semibold text-neutral-800">Profile Overview</h3>
+					{user.role !== "GUEST" && <p className="text-sm text-neutral-600">{user.role}</p>}
 				</div>
-				<h2 className="mt-10 text-2xl font-semibold text-neutral-800">User Profile</h2>
+				<div className="space-y-6">
-				<div className="w-full mt-4 bg-neutral-100 rounded-md border border-neutral-200">
+					<p>User since {new Date(user.createdAt).toLocaleDateString("en-GB")}</p>
-					<div className="p-8 justify-center flex">
+					<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-						{error && <p className="text-red-600 text-sm mb-2 text-center">{error}</p>}
+						{stats.map((stat) => (
-						<div className="flex flex-col py-6 justify-center w-full max-w-md">
+							<div key={stat.label} className="bg-white border border-neutral-200 rounded-md p-4 text-center shadow-sm">
-							<div className="flex justify-center items-center h-20 w-20 rounded-full bg-neutral-200">
+								<p className="text-xs text-neutral-600">{stat.label}</p>
-								<FaUser className="h-10 w-10"></FaUser>
+								<p className="text-lg font-semibold text-neutral-800">{stat.value}</p>
 							</div>
-							<div className="mt-8 space-y-3 w-full">
+						))}
-								<div>
+					</div>
-									<label className="text-sm text-neutral-600 block mb-1">Name</label>
+					{user.scientist && (
-									<input
+						<div className="mt-4 border-t pt-4">
-										type="text"
+							<h4 className="font-semibold text-neutral-700 mb-4">Scientist Details</h4>
-										value={name}
+							<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
-										onChange={(e) => setName(e.target.value)}
+								<div className="bg-white border border-neutral-200 rounded-md p-4 text-center shadow-sm">
-										className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 text-sm"
+									<p className="text-sm text-neutral-600">Level</p>
-										aria-label="User Name"
+									<p className="text-lg font-semibold text-neutral-800">{user.scientist.level}</p>
-										disabled={isSubmitting}
-									/>
 								</div>
-								<div>
+								<div className="bg-white border border-neutral-200 rounded-md p-4 text-center shadow-sm">
-									<label className="text-sm text-neutral-600 block mb-1">Email</label>
+									<p className="text-sm text-neutral-600">Superior</p>
-									<input
+									<p className="text-lg font-semibold text-neutral-800">{user.scientist.superior?.name || "None"}</p>
-										type="email"
-										value={email}
-										onChange={(e) => setEmail(e.target.value)}
-										className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 text-sm"
-										aria-label="User Email"
-										disabled={isSubmitting}
-									/>
 								</div>
-								<div>
+								<div className="bg-white border border-neutral-200 rounded-md p-4 text-center shadow-sm">
-									<label className="text-sm text-neutral-600 block mb-1">Role</label>
+									<p className="text-sm text-neutral-600">Subordinates</p>
-									<input
+									<p className="text-lg font-semibold text-neutral-800">{user.scientist.subordinates.length}</p>
-										type="text"
-										value={role}
-										className="w-full p-2 border border-neutral-300 rounded-md bg-neutral-100 text-sm text-neutral-600 cursor-not-allowed"
-										aria-label="User Role"
-										disabled
-									/>
-								</div>
-								<div>
-									<label className="text-sm text-neutral-600 block mb-1">New Password</label>
-									<input
-										type="password"
-										value={password}
-										onChange={(e) => setPassword(e.target.value)}
-										className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 text-sm"
-										disabled={isSubmitting}
-									/>
-								</div>
-								<div>
-									<label className="text-sm text-neutral-600 block mb-1">Confirm Password</label>
-									<input
-										type="password"
-										value={confirmPassword}
-										onChange={(e) => setConfirmPassword(e.target.value)}
-										className="w-full p-2 border border-neutral-300 rounded-md placeholder-neutral-400 focus:ring-2 focus:ring-blue-500 text-sm"
-										disabled={isSubmitting}
-									/>
-								</div>
-							</div>
-							<div className="mt-10">
-								<div className="float-right flex">
-									<button
-										// onClick={handleSave}
-										className={`mr-4 px-4 py-2  bg-neutral-300 text-neutral-800 rounded-md hover:bg-neutral-400 flex items-center gap-2 font-medium ${
-											isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"
-										}`}
-										disabled={isSubmitting}
-									>
-										Clear Changes
-									</button>
-									<button
-										onClick={handleSave}
-										className={`px-4 py-2 bg-blue-600 text-white rounded-md font-medium flex items-center gap-2 ${
-											isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"
-										}`}
-										disabled={isSubmitting}
-									>
-										{isSubmitting ? (
-											<>
-												<svg
-													className="animate-spin h-5 w-5 text-white"
-													xmlns="http://www.w3.org/2000/svg"
-													fill="none"
-													viewBox="0 0 24 24"
-												>
-													<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-													<path
-														className="opacity-75"
-														fill="currentColor"
-														d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-													></path>
-												</svg>
-												Saving...
-											</>
-										) : (
-											"Save Changes"
-										)}
-									</button>
 								</div>
 							</div>
 						</div>
-						<div className="flex justify-end mt-4"></div>
+					)}
+				</div>
+			</div>
+		);
+	}
+
+	function OrdersTab() {
+		return (
+			<div className="bg-neutral-100 rounded-md border border-neutral-200 p-8">
+				<h3 className="text-xl font-semibold text-neutral-800 mb-6">Previous Orders</h3>
+				{user!.purchasedOrders.length === 0 ? (
+					<p className="text-neutral-600">No previous orders.</p>
+				) : (
+					<ul className="space-y-2">
+						{user!.purchasedOrders.map((order) => (
+							<li key={order.id} className="text-neutral-700">
+								Order #{order.id}
+							</li>
+						))}
+					</ul>
+				)}
+			</div>
+		);
+	}
+
+	function AccountTab() {
+		const [name, setName] = useState("");
+		const [email, setEmail] = useState("");
+		const [password, setPassword] = useState("");
+		const [confirmPassword, setConfirmPassword] = useState("");
+		const [requestedRole, setRequestedRole] = useState("");
+		const [isSubmitting, setIsSubmitting] = useState(false);
+		const [isDeleting, setIsDeleting] = useState(false);
+		const [error, setError] = useState("");
+		const [successMessage, setSuccessMessage] = useState("");
+		const router = useRouter();
+
+		useEffect(() => {
+			if (user) {
+				setName(user.name);
+				setEmail(user.email);
+			}
+		}, [user]);
+
+		async function handleSave() {
+			setError("");
+			setSuccessMessage("");
+			if (!name || !email) {
+				setError("Name and email are required.");
+				return;
+			}
+			if (password && password !== confirmPassword) {
+				setError("Passwords do not match.");
+				return;
+			}
+			setIsSubmitting(true);
+			try {
+				const res = await axios.post(
+					"/api/update-user",
+					{ name, email, password, requestedRole },
+					{ headers: { "Content-Type": "application/json" } }
+				);
+				if (res.status === 200) {
+					setUser(res.data.user);
+					setSuccessMessage("Account updated successfully.");
+					if (requestedRole) {
+						setSuccessMessage("Account updated and role change request submitted.");
+						setRequestedRole("");
+					}
+				} else {
+					setError("Unexpected error occurred");
+				}
+			} catch (error) {
+				const axiosError = error as AxiosError<{ message: string }>;
+				setError(axiosError.response?.data?.message || "Network error occurred");
+			} finally {
+				setIsSubmitting(false);
+			}
+		}
+
+		async function handleDeleteAccount() {
+			if (!confirm("Are you sure you want to delete your account? This action cannot be undone.")) {
+				return;
+			}
+			setIsDeleting(true);
+			try {
+				const res = await axios.post(
+					"/api/delete-user",
+					{ userId: user!.id },
+					{ headers: { "Content-Type": "application/json" } }
+				);
+				if (res.status === 200) {
+					setUser(null);
+					router.push("/");
+				} else {
+					setError("Failed to delete account");
+				}
+			} catch (error) {
+				setError("Error deleting account");
+			} finally {
+				setIsDeleting(false);
+			}
+		}
+
+		function handleClear() {
+			setName(user?.name || "");
+			setEmail(user?.email || "");
+			setPassword("");
+			setConfirmPassword("");
+			setRequestedRole("");
+			setError("");
+			setSuccessMessage("");
+		}
+
+		return (
+			<div className="bg-neutral-100 rounded-md border border-neutral-200 p-8">
+				<h3 className="text-xl font-semibold text-neutral-800 mb-6">Account Settings</h3>
+				{successMessage && <p className="text-green-600 text-sm mb-4">{successMessage}</p>}
+				{error && <p className="text-red-600 text-sm mb-4">{error}</p>}
+				<div className="space-y-8">
+					<div className="space-y-4 mx-auto max-w-md">
+						<div>
+							<label className="text-sm text-neutral-600 block mb-1">Name</label>
+							<input
+								type="text"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+								className="w-full p-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-blue-500 text-sm"
+								disabled={isSubmitting}
+							/>
+						</div>
+						<div>
+							<label className="text-sm text-neutral-600 block mb-1">Email</label>
+							<input
+								type="email"
+								value={email}
+								onChange={(e) => setEmail(e.target.value)}
+								className="w-full p-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-blue-500 text-sm"
+								disabled={isSubmitting}
+							/>
+						</div>
+						<div>
+							<label className="text-sm text-neutral-600 block mb-1">New Password</label>
+							<input
+								type="password"
+								value={password}
+								onChange={(e) => setPassword(e.target.value)}
+								className="w-full p-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-blue-500 text-sm"
+								disabled={isSubmitting}
+							/>
+						</div>
+						<div>
+							<label className="text-sm text-neutral-600 block mb-1">Confirm Password</label>
+							<input
+								type="password"
+								value={confirmPassword}
+								onChange={(e) => setConfirmPassword(e.target.value)}
+								className="w-full p-2 border border-neutral-300 rounded-md focus:ring-2 focus:ring-blue-500 text-sm"
+								disabled={isSubmitting}
+							/>
+						</div>
+						<div>
+							<label className="text-sm text-neutral-600 block mb-1">Request Role Change</label>
+							<CustomRoleDropdown value={requestedRole} onChange={setRequestedRole} disabled={isSubmitting} />
+						</div>
+					</div>
+					<div className="flex justify-end gap-4">
+						<button
+							onClick={handleClear}
+							className={`py-2 px-4 bg-neutral-300 text-neutral-800 rounded-md hover:bg-neutral-400 font-medium ${
+								isSubmitting ? "opacity-50 cursor-not-allowed" : ""
+							}`}
+							disabled={isSubmitting}
+						>
+							Clear Changes
+						</button>
+						<button
+							onClick={handleSave}
+							className={`py-2 px-4 bg-blue-600 text-white rounded-md font-medium ${
+								isSubmitting ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700"
+							}`}
+							disabled={isSubmitting}
+						>
+							{isSubmitting ? "Saving..." : "Save Changes"}
+						</button>
+					</div>
+					<div className="border-t border-neutral-300 pt-6">
+						<button
+							onClick={handleDeleteAccount}
+							className={`w-40 py-2 px-4 bg-red-500 text-white rounded-md font-medium ${
+								isDeleting ? "opacity-50 cursor-not-allowed" : "hover:bg-red-700"
+							}`}
+							disabled={isDeleting}
+						>
+							{isDeleting ? "Deleting..." : "Delete Account"}
+						</button>
+					</div>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="relative min-h-full bg-neutral-50">
+			<div className="absolute top-4 right-4">
+				<button
+					onClick={handleLogout}
+					className="py-2 px-4 bg-red-500 text-white rounded-md hover:bg-red-700"
+					aria-label="Log out"
+					title="Log out"
+				>
+					Log Out
+				</button>
+			</div>
+			<div className="flex items-center justify-center min-h-full">
+				<div className="max-w-4xl mx-auto flex flex-col p-4 mt-20">
+					<h2 className="text-3xl font-semibold text-neutral-800 mb-10">Hello {user?.name}</h2>
+					<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+						<div className="col-span-1">
+							<div className="space-y-2">
+								<button
+									onClick={() => setActiveTab("profile")}
+									className={`w-full text-left p-2 rounded-md ${
+										activeTab === "profile" ? "bg-blue-100 text-blue-700" : "text-neutral-600 hover:bg-neutral-200"
+									}`}
+								>
+									Profile
+								</button>
+								<button
+									onClick={() => setActiveTab("orders")}
+									className={`w-full text-left p-2 rounded-md ${
+										activeTab === "orders" ? "bg-blue-100 text-blue-700" : "text-neutral-600 hover:bg-neutral-200"
+									}`}
+								>
+									Orders
+								</button>
+								<button
+									onClick={() => setActiveTab("account")}
+									className={`w-full text-left p-2 rounded-md ${
+										activeTab === "account" ? "bg-blue-100 text-blue-700" : "text-neutral-600 hover:bg-neutral-200"
+									}`}
+								>
+									Account
+								</button>
+							</div>
+						</div>
+						<div className="col-span-3">
+							{activeTab === "profile" && <ProfileTab />}
+							{activeTab === "orders" && <OrdersTab />}
+							{activeTab === "account" && <AccountTab />}
+						</div>
 					</div>
 				</div>
 			</div>

src/app/user/page.tsx

@@ -1,7 +0,0 @@
-export default function User() {
-	return (
-		<div className="w-full h-full">
-			<p>User</p>
-		</div>
-	);
-}

src/types/ApiTypes.ts

@@ -1,8 +1,22 @@
-import { Artefact } from "@prismaclient";
+import { Artefact, Earthquake, Observatory, Order, Request, Scientist, User } from "@prismaclient";
 
 interface ExtendedArtefact extends Artefact {
 	location: string;
 	date: Date;
 }
 
-export type { ExtendedArtefact };
+interface ExtendedScientist extends Scientist {
+	superior?: Scientist;
+	subordinates: Scientist[];
+}
+
+interface ExtendedUser extends User {
+	earthquakes: Earthquake[];
+	observatories: Observatory[];
+	artefacts: Artefact[];
+	purchasedOrders: Order[];
+	requests: Request[];
+	scientist: ExtendedScientist;
+}
+
+export type { ExtendedArtefact, ExtendedUser };

src/types/Prisma.ts

@@ -1,3 +1,5 @@
+import type { User as PrismaUser } from "@prismaclient";
+
 interface Scientist {
 	id: number;
 	createdAt: Date;
@@ -25,11 +27,7 @@ interface Artefact {
 	dateAdded: string;
 }
 
-interface User {
+interface User extends PrismaUser {
-	id: number;
-	createdAt: Date;
-	name: string;
-	email: string;
 	passwordHash: string;
 	role: string;
 	scientist: Scientist | undefined;

src/types/StoreModel.ts

@@ -1,6 +1,7 @@
 import { Action } from "easy-peasy";
-// import type { User } from "@prismaclient";
+import type { User } from "@prismaclient";
-import { User } from "@appTypes/Prisma";
+import { ExtendedUser } from "@appTypes/ApiTypes";
+// import { User } from "@appTypes/Prisma";
 
 type Currency = "GBP" | "USD" | "EUR";
 
@@ -14,8 +15,8 @@ interface CurrencyModel {
 
 interface StoreModel {
 	currency: CurrencyModel;
-	user: User | null;
+	user: ExtendedUser | null;
-	setUser: Action<StoreModel, User | null>;
+	setUser: Action<StoreModel, ExtendedUser | null>;
 }
 
 export type { StoreModel, Currency };