Create admin page

package.json

@@ -37,6 +37,7 @@
 	},
 	"scripts": {
 		"dev": "vite",
+		"mock-admin-api": "node scripts/mock-admin-api.mjs",
 		"build": "vite build",
 		"preview": "vite preview",
 		"test": "vitest",

src/App.tsx

@@ -10,6 +10,7 @@ import CityPage from './pages/CityPage';
 import ModelPage from './pages/ModelPage';
 import Header from './components/templates/Header/Header';
 import Footer from './components/templates/footer/Footer';
+import AdminRoute from './components/auth/AdminRoute';
 
 import './i18n';
 import './App.css';
@@ -20,6 +21,7 @@ const Login = lazy(() => import('./components/auth/Login'));
 const Register = lazy(() => import('./components/auth/Register'));
 const Profile = lazy(() => import('./components/auth/Profile'));
 const LoginPopupRedirect = lazy(() => import('./components/auth/LoginPopupRedirect'));
+const AdminPage = lazy(() => import('./pages/AdminPage'));
 
 const styles = {
   app: {
@@ -95,6 +97,14 @@ function App() {
 							<Route path='/register' element={<Register />} />
 							<Route path='/profile' element={<Profile />} />
 							<Route path='/login-popup-redirect' element={<LoginPopupRedirect />} />
+							<Route
+								path='/admin'
+								element={
+									<AdminRoute>
+										<AdminPage />
+									</AdminRoute>
+								}
+							/>
 						</Routes>
 					</div>
 					<Footer />

src/components/admin/GrantChangesModal.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Button, Modal } from 'react-bootstrap';
+
+interface GrantChangesModalProps {
+	show: boolean;
+	userEmail?: string;
+	addedGrants: string[];
+	removedGrants: string[];
+	saving: boolean;
+	onHide: () => void;
+	onConfirm: () => void;
+}
+
+const GrantChangesModal: React.FC<GrantChangesModalProps> = ({
+	show,
+	userEmail,
+	addedGrants,
+	removedGrants,
+	saving,
+	onHide,
+	onConfirm,
+}) => (
+	<Modal show={show} onHide={onHide} centered dir='ltr' dialogClassName='admin-modal'>
+		<Modal.Header>
+			<Modal.Title>Confirm grant changes</Modal.Title>
+			<button
+				type='button'
+				className='btn-close'
+				aria-label='Close'
+				onClick={onHide}
+				style={{ marginLeft: 'auto', marginRight: 0 }}
+			/>
+		</Modal.Header>
+		<Modal.Body>
+			<p>
+				Update grants for <strong>{userEmail}</strong>?
+			</p>
+			{addedGrants.length > 0 && (
+				<>
+					<p className='mb-1 fw-semibold'>Add:</p>
+					<ul>
+						{addedGrants.map((name) => (
+							<li key={`add-${name}`}>{name}</li>
+						))}
+					</ul>
+				</>
+			)}
+			{removedGrants.length > 0 && (
+				<>
+					<p className='mb-1 fw-semibold'>Remove:</p>
+					<ul>
+						{removedGrants.map((name) => (
+							<li key={`remove-${name}`}>{name}</li>
+						))}
+					</ul>
+				</>
+			)}
+			{addedGrants.length === 0 && removedGrants.length === 0 && (
+				<p className='text-muted mb-0'>No changes detected.</p>
+			)}
+		</Modal.Body>
+		<Modal.Footer>
+			<Button variant='secondary' onClick={onHide}>
+				Cancel
+			</Button>
+			<Button variant='primary' onClick={onConfirm} disabled={saving}>
+				{saving ? 'Saving...' : 'Apply Changes'}
+			</Button>
+		</Modal.Footer>
+	</Modal>
+);
+
+export default GrantChangesModal;

src/components/admin/GrantChecklist.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Alert, Button, Form } from 'react-bootstrap';
+import { AdminUserInfo } from '../../types/adminUserInfo';
+import { Grant } from '../../types/grant';
+
+interface GrantChecklistProps {
+	user: AdminUserInfo;
+	grants: Grant[];
+	selectedGrantNames: string[];
+	hasChanges: boolean;
+	saving: boolean;
+	onToggle: (grantName: string) => void;
+	onReview: () => void;
+}
+
+const GrantChecklist: React.FC<GrantChecklistProps> = ({
+	user,
+	grants,
+	selectedGrantNames,
+	hasChanges,
+	saving,
+	onToggle,
+	onReview,
+}) => (
+	<>
+		<Alert variant='light' className='border user-info-alert'>
+			<strong>{user.email}</strong>
+			{(user.first_name || user.last_name) && (
+				<div className='text-muted'>
+					({[user.first_name, user.last_name].filter(Boolean).join(' ')})
+				</div>
+			)}
+		</Alert>
+
+		<h5 className='mb-3'>Grants</h5>
+		{grants.map((grant) => (
+			<Form.Check
+				key={grant.id}
+				type='checkbox'
+				id={`user-grant-${grant.id}`}
+				className='mb-2'
+				label={
+					<span className='grant-check-label'>
+						<strong className='grant-check-name'>{grant.name}</strong>
+						<span className='text-muted grant-check-description'>{grant.description}</span>
+					</span>
+				}
+				checked={selectedGrantNames.includes(grant.name)}
+				onChange={() => onToggle(grant.name)}
+			/>
+		))}
+
+		<div className='mt-4'>
+			<Button variant='primary' onClick={onReview} disabled={!hasChanges || saving}>
+				{saving ? 'Saving...' : 'Review Changes'}
+			</Button>
+		</div>
+	</>
+);
+
+export default GrantChecklist;

src/components/admin/UserGrantsTab.tsx

@@ -0,0 +1,128 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Alert, Spinner } from 'react-bootstrap';
+import { useStore } from '../../stores/storeConfig';
+import GrantChangesModal from './GrantChangesModal';
+import GrantChecklist from './GrantChecklist';
+import UserSearchForm from './UserSearchForm';
+
+const UserGrantsTab: React.FC = observer(() => {
+	const { grantStore } = useStore();
+	const {
+		grants,
+		loading,
+		selectedUser,
+		userSearchLoading,
+		userSearchError,
+		savingUserGrants,
+		searchUserByEmail,
+		setUserGrants,
+		clearSelectedUser,
+	} = grantStore;
+
+	const [emailInput, setEmailInput] = useState('');
+	const [draftGrantNames, setDraftGrantNames] = useState<string[]>([]);
+	const [showConfirmModal, setShowConfirmModal] = useState(false);
+
+	useEffect(() => {
+		if (selectedUser) {
+			setDraftGrantNames([...selectedUser.grants]);
+		} else {
+			setDraftGrantNames([]);
+		}
+	}, [selectedUser]);
+
+	const savedGrantNames = selectedUser?.grants ?? [];
+	const hasChanges = useMemo(() => {
+		if (draftGrantNames.length !== savedGrantNames.length) return true;
+		const saved = new Set(savedGrantNames);
+		return draftGrantNames.some((name) => !saved.has(name));
+	}, [draftGrantNames, savedGrantNames]);
+
+	const addedGrants = draftGrantNames.filter((name) => !savedGrantNames.includes(name));
+	const removedGrants = savedGrantNames.filter((name) => !draftGrantNames.includes(name));
+
+	const handleSearch = async (e: React.FormEvent) => {
+		e.preventDefault();
+		await searchUserByEmail(emailInput);
+	};
+
+	const handleClear = () => {
+		setEmailInput('');
+		clearSelectedUser();
+	};
+
+	const toggleGrant = (grantName: string) => {
+		setDraftGrantNames((current) =>
+			current.includes(grantName)
+				? current.filter((name) => name !== grantName)
+				: [...current, grantName],
+		);
+	};
+
+	const handleSave = () => {
+		if (!selectedUser || !hasChanges) return;
+		setShowConfirmModal(true);
+	};
+
+	const handleConfirmSave = async () => {
+		if (!selectedUser) return;
+		const success = await setUserGrants(selectedUser.email, draftGrantNames);
+		if (success) {
+			setShowConfirmModal(false);
+		}
+	};
+
+	if (loading) {
+		return <Spinner animation='border' className='mt-3' />;
+	}
+
+	if (grants.length === 0) {
+		return (
+			<Alert variant='info' className='mt-3'>
+				No grants available. Create a grant in the Grants tab first.
+			</Alert>
+		);
+	}
+
+	return (
+		<div className='mt-3'>
+			<h4 className='mb-3'>Manage grants for a user</h4>
+
+			<UserSearchForm
+				email={emailInput}
+				loading={userSearchLoading}
+				showClear={Boolean(selectedUser)}
+				onEmailChange={setEmailInput}
+				onSubmit={handleSearch}
+				onClear={handleClear}
+			/>
+
+			{userSearchError && <Alert variant='danger'>{userSearchError}</Alert>}
+
+			{selectedUser && (
+				<GrantChecklist
+					user={selectedUser}
+					grants={grants}
+					selectedGrantNames={draftGrantNames}
+					hasChanges={hasChanges}
+					saving={savingUserGrants}
+					onToggle={toggleGrant}
+					onReview={handleSave}
+				/>
+			)}
+
+			<GrantChangesModal
+				show={showConfirmModal}
+				userEmail={selectedUser?.email}
+				addedGrants={addedGrants}
+				removedGrants={removedGrants}
+				saving={savingUserGrants}
+				onHide={() => setShowConfirmModal(false)}
+				onConfirm={handleConfirmSave}
+			/>
+		</div>
+	);
+});
+
+export default UserGrantsTab;

src/components/admin/UserSearchForm.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button, Form } from 'react-bootstrap';
+
+interface UserSearchFormProps {
+	email: string;
+	loading: boolean;
+	showClear: boolean;
+	onEmailChange: (email: string) => void;
+	onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+	onClear: () => void;
+}
+
+const UserSearchForm: React.FC<UserSearchFormProps> = ({
+	email,
+	loading,
+	showClear,
+	onEmailChange,
+	onSubmit,
+	onClear,
+}) => (
+	<Form onSubmit={onSubmit} className='mb-4'>
+		<Form.Group className='mb-3'>
+			<Form.Label>User Email</Form.Label>
+			<div className='d-flex gap-2'>
+				<Form.Control
+					type='email'
+					className='user-email-input'
+					value={email}
+					onChange={(event) => onEmailChange(event.target.value)}
+					placeholder='user@example.com'
+					required
+				/>
+				<Button type='submit' variant='primary' disabled={loading}>
+					{loading ? 'Searching...' : 'Search'}
+				</Button>
+				{showClear && (
+					<Button type='button' variant='outline-secondary' onClick={onClear}>
+						Clear
+					</Button>
+				)}
+			</div>
+		</Form.Group>
+	</Form>
+);
+
+export default UserSearchForm;

src/components/auth/AdminRoute.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { Button } from 'react-bootstrap';
+import { observer } from 'mobx-react-lite';
+import { useStore } from '../../stores/storeConfig';
+import { Loader } from '../common';
+
+interface AdminRouteProps {
+	children: React.ReactNode;
+}
+
+const AdminRoute: React.FC<AdminRouteProps> = observer(({ children }) => {
+	const { userStore } = useStore();
+
+	if (userStore.isLoading) {
+		return <Loader />;
+	}
+
+	if (!userStore.isAuthenticated) {
+		return (
+			<div
+				className='d-flex flex-column align-items-center justify-content-center'
+				style={{ minHeight: '400px', gap: '20px' }}
+			>
+				<span style={{ fontSize: '1.5rem', fontWeight: 'bold', color: 'var(--bs-body-color)' }}>
+					Admin access requires login
+				</span>
+				<Button variant='success' onClick={() => userStore.login()}>
+					Login with Google
+				</Button>
+			</div>
+		);
+	}
+
+	if (!userStore.isAdmin) {
+		return <Navigate to='/' replace />;
+	}
+
+	return <>{children}</>;
+});
+
+export default AdminRoute;