2025-09-04 10:49:05 +02:00
4 changed files with 258 additions and 79 deletions
--- a/my-app/src/components/ParticipantsSelector.jsx
+++ b/my-app/src/components/ParticipantsSelector.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect } from 'react';
-import { PEOPLE } from '../constants/bookingConstants';
+import { PEOPLE, USER } from '../constants/bookingConstants';
 import { useBookingContext } from '../context/BookingContext';
 import styles from './ParticipantsSelector.module.css';

@@ -9,9 +9,9 @@ export function ParticipantsSelector() {
 	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
 	const [focusedIndex, setFocusedIndex] = useState(-1);
 	const [recentSearches, setRecentSearches] = useState([
-		{ id: 1, name: 'Arjohn Emilsson', email: 'arjohn.emilsson@dsv.su.se' },
-		{ id: 3, name: 'Hedvig Engelmark', email: 'hedvig.engelmark@dsv.su.se' },
-		{ id: 5, name: 'Victor Magnusson', email: 'victor.magnusson@dsv.su.se' }
+		{ id: 1, name: 'Arjohn Emilsson', username: 'arem1532', email: 'arjohn.emilsson@dsv.su.se' },
+		{ id: 3, name: 'Hedvig Engelmark', username: 'heen9876', email: 'hedvig.engelmark@dsv.su.se' },
+		{ id: 5, name: 'Victor Magnusson', username: 'vima8734', email: 'victor.magnusson@dsv.su.se' }
 	]);
 	const inputRef = useRef(null);
 	const dropdownRef = useRef(null);
@@ -19,6 +19,7 @@ export function ParticipantsSelector() {
 	// Filter people based on search term
 	const filteredPeople = PEOPLE.filter(person => 
 		person.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+		person.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
 		person.email.toLowerCase().includes(searchTerm.toLowerCase())
 	);

@@ -29,10 +30,15 @@ export function ParticipantsSelector() {
 	const displayPeople = filteredPeople;
 	
 	// Helper function to check if person is already selected
-	const isPersonSelected = (personName) => booking.participants.includes(personName);
+	const isPersonSelected = (personName) => booking.participants.find(p => p.name === personName);
 	
 	// Get all available options for keyboard navigation
 	const allOptions = showRecentSearches ? recentSearches : (showAllPeople ? displayPeople : []);
+	
+	// Helper function to get person's initials
+	const getInitials = (name) => {
+		return name.split(' ').map(word => word[0]).join('').toUpperCase();
+	};

 	useEffect(() => {
 		const handleClickOutside = (event) => {
@@ -175,12 +181,21 @@ export function ParticipantsSelector() {
 										role="option"
 										aria-selected={isPersonSelected(person.name)}
 									>
+										<div className={styles.personAvatar}>
+											{person.profilePicture ? (
+												<img src={person.profilePicture} alt={person.name} className={styles.avatarImage} />
+											) : (
+												<div className={styles.avatarInitials}>
+													{getInitials(person.name)}
+												</div>
+											)}
+										</div>
 										<div className={styles.personInfo}>
 											<div className={styles.personName}>
 												{person.name}
 												{isPersonSelected(person.name) && <span className={styles.selectedIndicator}>✓</span>}
 											</div>
-											<div className={styles.personEmail}>{person.email}</div>
+											<div className={styles.personUsername}>{person.username}</div>
 										</div>
 									</div>
 								))}
@@ -201,12 +216,21 @@ export function ParticipantsSelector() {
 											role="option"
 											aria-selected={isPersonSelected(person.name)}
 										>
+											<div className={styles.personAvatar}>
+												{person.profilePicture ? (
+													<img src={person.profilePicture} alt={person.name} className={styles.avatarImage} />
+												) : (
+													<div className={styles.avatarInitials}>
+														{getInitials(person.name)}
+													</div>
+												)}
+											</div>
 											<div className={styles.personInfo}>
 												<div className={styles.personName}>
 													{person.name}
 													{isPersonSelected(person.name) && <span className={styles.selectedIndicator}>✓</span>}
 												</div>
-												<div className={styles.personEmail}>{person.email}</div>
+												<div className={styles.personUsername}>{person.username}</div>
 											</div>
 										</div>
 									))}
@@ -222,26 +246,27 @@ export function ParticipantsSelector() {
 			</div>
 			
 			{/* Selected Participants */}
-			{booking.participants.length > 0 && (
-				<div className={styles.selectedParticipants}>
-					{booking.participants.map((participant, index) => (
-						<div key={index} className={styles.participantChip}>
-							<span className={styles.participantName}>{participant}</span>
-							<button 
-								className={styles.removeButton}
-								onClick={() => handleRemoveParticipant(participant)}
-								onFocus={(e) => e.target.closest(`.${styles.participantChip}`).classList.add(styles.chipFocused)}
-								onBlur={(e) => e.target.closest(`.${styles.participantChip}`).classList.remove(styles.chipFocused)}
-								type="button"
-								title={`Remove ${participant}`}
-								aria-label={`Remove ${participant} from participants`}
-							>
-								×
-							</button>
-						</div>
-					))}
-				</div>
-			)}
+			<div className={styles.selectedParticipants}>
+				{/* Default User (Non-deletable) */}
+				<div className={`${styles.participantChip} ${styles.defaultUserChip}`}>
+					<span className={styles.participantName}>{USER.name}</span>
+				</div>		
+				
+				{/* Additional Participants (Deletable) */}
+				{booking.participants.map((participant, index) => (
+					<button 
+						key={index} 
+						className={`${styles.participantChip} ${styles.clickableChip}`}
+						onClick={() => handleRemoveParticipant(participant)}
+						type="button"
+						title={`Remove ${participant.name}`}
+						aria-label={`Remove ${participant.name} from participants`}
+					>
+						<span className={styles.participantName}>{participant.name}</span>
+						<span className={styles.removeIcon}>×</span>
+					</button>
+				))}
+			</div>
 		</div>
 	);
 }
--- a/my-app/src/components/ParticipantsSelector.module.css
+++ b/my-app/src/components/ParticipantsSelector.module.css
@@ -17,7 +17,6 @@
 	display: flex;
 	flex-wrap: wrap;
 	gap: 0.5rem;
-	margin-top: 0.75rem;
 	padding: 0;
 }

@@ -35,48 +34,55 @@
 	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }

-.participantChip:hover {
-	background-color: #E0F2FE;
-	border-color: #BAE6FD;
-}

 .participantName {
 	font-weight: 500;
 }

-.removeButton {
-	background: rgba(37, 99, 235, 0.1);
-	border: none;
-	color: #2563EB;
+.clickableChip {
 	cursor: pointer;
-	font-size: 0.875rem;
-	line-height: 1;
-	padding: 0;
-	width: 1.25rem;
-	height: 1.25rem;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	border-radius: 50%;
 	transition: all 0.2s ease;
+	width: fit-content;
+	min-width: auto;
 }

-.removeButton:hover {
-	background-color: rgba(37, 99, 235, 0.2);
-	transform: scale(1.1);
+.clickableChip:hover {
+	background-color: #E0F2FE;
+	border-color: #BAE6FD;
 }

-.removeButton:focus {
-	outline: 2px solid var(--focus-ring-color, #3B82F6);
+.clickableChip:focus {
+	outline: 2px solid #2563EB;
 	outline-offset: 2px;
-	background-color: rgba(37, 99, 235, 0.3);
 }

-.chipFocused {
-	box-shadow: 0 0 0 2px var(--focus-ring-color, #3B82F6) !important;
-	border-color: var(--focus-ring-color, #3B82F6) !important;
+.clickableChip:active {
+	background-color: #BFDBFE;
+	transform: scale(0.98);
 }

+
+.removeIcon {
+	color: #2563EB;
+	font-size: 0.875rem;
+	font-weight: bold;
+	margin-left: 0.25rem;
+}
+
+.defaultUserChip {
+	background-color: #F3F4F6;
+	border-color: #D1D5DB;
+	color: #374151;
+}
+
+.defaultUserChip:hover {
+	background-color: #F3F4F6;
+	border-color: #D1D5DB;
+	color: #374151;
+	cursor: default;
+}
+
+
 .searchContainer {
 	position: relative;
 	width: 100%;
@@ -100,9 +106,9 @@
 }

 .searchInput:focus {
-	outline: 2px solid var(--focus-ring-color, #3e70ec);
+	outline: 2px solid #2563EB;
 	outline-offset: -1px;
-	border-color: var(--focus-ring-color, #3e70ec);
+	border-color: #2563EB;
 }

 .dropdown {
@@ -117,7 +123,7 @@
 	z-index: 1000;
 	max-height: 300px;
 	overflow-y: auto;
-	margin-top: -10px;
+	margin-top: 0rem;
 }

 .section {
@@ -143,10 +149,18 @@
 	cursor: pointer;
 	transition: background-color 0.2s;
 	border: none;
+	border-bottom: 1px solid #F1F3F4;
 	background: none;
 	width: 100%;
 	text-align: left;
 	font-family: inherit;
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+}
+
+.dropdownItem:last-child {
+	border-bottom: none;
 }

 .dropdownItem:hover {
@@ -157,10 +171,38 @@
 	background-color: #E8F0FE;
 }

+.personAvatar {
+	width: 2rem;
+	height: 2rem;
+	border-radius: 50%;
+	flex-shrink: 0;
+}
+
+.avatarImage {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	object-fit: cover;
+}
+
+.avatarInitials {
+	width: 100%;
+	height: 100%;
+	border-radius: 50%;
+	background-color: #2563EB;
+	color: white;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 0.75rem;
+	font-weight: 600;
+}
+
 .personInfo {
 	display: flex;
 	flex-direction: column;
 	gap: 0.125rem;
+	flex: 1;
 }

 .personName {
@@ -172,7 +214,7 @@
 	justify-content: space-between;
 }

-.personEmail {
+.personUsername {
 	font-size: 0.75rem;
 	color: #5F6368;
 }
@@ -204,7 +246,7 @@
 }

 .focusedItem {
-	background-color: #3B82F6 !important;
+	background-color: #2563EB !important;
 	color: white !important;
 }

@@ -212,7 +254,7 @@
 	color: white !important;
 }

-.focusedItem .personEmail {
+.focusedItem .personUsername {
 	color: rgba(255, 255, 255, 0.8) !important;
 }

@@ -220,6 +262,11 @@
 	color: white !important;
 }

+.focusedItem .avatarInitials {
+	background-color: rgba(255, 255, 255, 0.2);
+	color: white;
+}
+
 .noResults {
 	padding: 1rem;
 	text-align: center;
--- a/my-app/src/constants/bookingConstants.js
+++ b/my-app/src/constants/bookingConstants.js
@@ -19,23 +19,130 @@ export const SMALL_GROUP_ROOMS = Array.from({ length: 15 }, (_, i) => ({
 }));

 export const PEOPLE = [
-	{ id: 1, name: 'Arjohn Emilsson', email: 'arjohn.emilsson@dsv.su.se' },
-	{ id: 2, name: 'Filip Norgren', email: 'filip.norgren@dsv.su.se' },
-	{ id: 3, name: 'Hedvig Engelmark', email: 'hedvig.engelmark@dsv.su.se' },
-	{ id: 4, name: 'Elin Rudling', email: 'elin.rudling@dsv.su.se' },
-	{ id: 5, name: 'Victor Magnusson', email: 'victor.magnusson@dsv.su.se' },
-	{ id: 6, name: 'Ellen Britschgi', email: 'ellen.britschgi@dsv.su.se' },
-	{ id: 7, name: 'Anna Andersson', email: 'anna.andersson@dsv.su.se' },
-	{ id: 8, name: 'Erik Larsson', email: 'erik.larsson@dsv.su.se' },
-	{ id: 9, name: 'Sofia Karlsson', email: 'sofia.karlsson@dsv.su.se' },
-	{ id: 10, name: 'Magnus Nilsson', email: 'magnus.nilsson@dsv.su.se' },
-	{ id: 11, name: 'Emma Johansson', email: 'emma.johansson@dsv.su.se' },
-	{ id: 12, name: 'Oskar Pettersson', email: 'oskar.pettersson@dsv.su.se' },
-	{ id: 13, name: 'Linda Svensson', email: 'linda.svensson@dsv.su.se' },
-	{ id: 14, name: 'Jonas Gustafsson', email: 'jonas.gustafsson@dsv.su.se' },
-	{ id: 15, name: 'Maria Olsson', email: 'maria.olsson@dsv.su.se' }
+	{ id: 1, name: 'Arjohn Emilsson', username: 'arem1532', email: 'arjohn.emilsson@dsv.su.se' },
+	{ id: 2, name: 'Filip Norgren', username: 'fino2341', email: 'filip.norgren@dsv.su.se' },
+	{ id: 3, name: 'Hedvig Engelmark', username: 'heen9876', email: 'hedvig.engelmark@dsv.su.se' },
+	{ id: 4, name: 'Elin Rudling', username: 'elru4521', email: 'elin.rudling@dsv.su.se' },
+	{ id: 5, name: 'Victor Magnusson', username: 'vima8734', email: 'victor.magnusson@dsv.su.se' },
+	{ id: 6, name: 'Ellen Britschgi', username: 'elbr5623', email: 'ellen.britschgi@dsv.su.se' },
+	{ id: 7, name: 'Anna Andersson', username: 'anan3457', email: 'anna.andersson@dsv.su.se' },
+	{ id: 8, name: 'Erik Larsson', username: 'erla7892', email: 'erik.larsson@dsv.su.se' },
+	{ id: 9, name: 'Sofia Karlsson', username: 'soka1245', email: 'sofia.karlsson@dsv.su.se' },
+	{ id: 10, name: 'Magnus Nilsson', username: 'mani6789', email: 'magnus.nilsson@dsv.su.se' },
+	{ id: 11, name: 'Emma Johansson', username: 'emjo4512', email: 'emma.johansson@dsv.su.se' },
+	{ id: 12, name: 'Oskar Pettersson', username: 'ospe3698', email: 'oskar.pettersson@dsv.su.se' },
+	{ id: 13, name: 'Linda Svensson', username: 'lisv2174', email: 'linda.svensson@dsv.su.se' },
+	{ id: 14, name: 'Jonas Gustafsson', username: 'jogu8523', email: 'jonas.gustafsson@dsv.su.se' },
+	{ id: 15, name: 'Maria Olsson', username: 'maol7456', email: 'maria.olsson@dsv.su.se' },
+	{ id: 16, name: 'Andreas Berg', username: 'anbe9832', email: 'andreas.berg@dsv.su.se' },
+	{ id: 17, name: 'Lina Dahlberg', username: 'lida2165', email: 'lina.dahlberg@dsv.su.se' },
+	{ id: 18, name: 'Marcus Forsberg', username: 'mafo6754', email: 'marcus.forsberg@dsv.su.se' },
+	{ id: 19, name: 'Julia Hedström', username: 'juhe4921', email: 'julia.hedström@dsv.su.se' },
+	{ id: 20, name: 'Daniel Lindqvist', username: 'dali8374', email: 'daniel.lindqvist@dsv.su.se' },
+	{ id: 21, name: 'Sara Blomqvist', username: 'sabl1598', email: 'sara.blomqvist@dsv.su.se' },
+	{ id: 22, name: 'Henrik Lundberg', username: 'helu7263', email: 'henrik.lundberg@dsv.su.se' },
+	{ id: 23, name: 'Frida Engström', username: 'fren3847', email: 'frida.engström@dsv.su.se' },
+	{ id: 24, name: 'Tobias Sjöberg', username: 'tosj5691', email: 'tobias.sjöberg@dsv.su.se' },
+	{ id: 25, name: 'Amanda Wallin', username: 'amwa9254', email: 'amanda.wallin@dsv.su.se' },
+	{ id: 26, name: 'Mattias Holm', username: 'maho8173', email: 'mattias.holm@dsv.su.se' },
+	{ id: 27, name: 'Emelie Sandberg', username: 'emsa4629', email: 'emelie.sandberg@dsv.su.se' },
+	{ id: 28, name: 'Robin Åberg', username: 'roab7485', email: 'robin.åberg@dsv.su.se' },
+	{ id: 29, name: 'Caroline Ekström', username: 'caek2916', email: 'caroline.ekström@dsv.su.se' },
+	{ id: 30, name: 'Alexander Nyström', username: 'alny6387', email: 'alexander.nyström@dsv.su.se' },
+	{ id: 31, name: 'Lisa Berggren', username: 'libe5142', email: 'lisa.berggren@dsv.su.se' },
+	{ id: 32, name: 'David Holmberg', username: 'daho8764', email: 'david.holmberg@dsv.su.se' },
+	{ id: 33, name: 'Maja Lindström', username: 'mali3571', email: 'maja.lindström@dsv.su.se' },
+	{ id: 34, name: 'Johan Carlsson', username: 'joca6928', email: 'johan.carlsson@dsv.su.se' },
+	{ id: 35, name: 'Rebecka Svensson', username: 'resv4816', email: 'rebecka.svensson@dsv.su.se' },
+	{ id: 36, name: 'Niklas Hedberg', username: 'nihe7395', email: 'niklas.hedberg@dsv.su.se' },
+	{ id: 37, name: 'Ida Persson', username: 'idpe2583', email: 'ida.persson@dsv.su.se' },
+	{ id: 38, name: 'Martin Öberg', username: 'maöb5947', email: 'martin.öberg@dsv.su.se' },
+	{ id: 39, name: 'Therese Löfgren', username: 'thlo8162', email: 'therese.löfgren@dsv.su.se' },
+	{ id: 40, name: 'Stefan Martinsson', username: 'stma4739', email: 'stefan.martinsson@dsv.su.se' },
+	{ id: 41, name: 'Johanna Stenberg', username: 'jost6254', email: 'johanna.stenberg@dsv.su.se' },
+	{ id: 42, name: 'Peter Wikström', username: 'pewi9481', email: 'peter.wikström@dsv.su.se' },
+	{ id: 43, name: 'Mikaela Fransson', username: 'mifr3825', email: 'mikaela.fransson@dsv.su.se' },
+	{ id: 44, name: 'Christian Lindgren', username: 'chli7694', email: 'christian.lindgren@dsv.su.se' },
+	{ id: 45, name: 'Evelina Norberg', username: 'evno2147', email: 'evelina.norberg@dsv.su.se' },
+	{ id: 46, name: 'Andreas Strömberg', username: 'anst5863', email: 'andreas.strömberg@dsv.su.se' },
+	{ id: 47, name: 'Klara Danielsson', username: 'klda8429', email: 'klara.danielsson@dsv.su.se' },
+	{ id: 48, name: 'Simon Eklund', username: 'siek6175', email: 'simon.eklund@dsv.su.se' },
+	{ id: 49, name: 'Elsa Lundgren', username: 'ellu4892', email: 'elsa.lundgren@dsv.su.se' },
+	{ id: 50, name: 'Mikael Höglund', username: 'mihö7316', email: 'mikael.höglund@dsv.su.se' },
+	{ id: 51, name: 'Jennie Söderberg', username: 'jesö3754', email: 'jennie.söderberg@dsv.su.se' },
+	{ id: 52, name: 'Fredrik Åström', username: 'frås9128', email: 'fredrik.åström@dsv.su.se' },
+	{ id: 53, name: 'Cornelia Sundberg', username: 'cosu5683', email: 'cornelia.sundberg@dsv.su.se' },
+	{ id: 54, name: 'Emil Palmberg', username: 'empa8297', email: 'emil.palmberg@dsv.su.se' },
+	{ id: 55, name: 'Josefin Ringström', username: 'jori4612', email: 'josefin.ringström@dsv.su.se' },
+	{ id: 56, name: 'Christofer Åkesson', username: 'chåk7548', email: 'christofer.åkesson@dsv.su.se' },
+	{ id: 57, name: 'Agnes Håkansson', username: 'aghå2971', email: 'agnes.håkansson@dsv.su.se' },
+	{ id: 58, name: 'Sebastian Blomberg', username: 'sebl6394', email: 'sebastian.blomberg@dsv.su.se' },
+	{ id: 59, name: 'Felicia Gunnarsson', username: 'fegu8756', email: 'felicia.gunnarsson@dsv.su.se' },
+	{ id: 60, name: 'Jesper Lindahl', username: 'jeli3182', email: 'jesper.lindahl@dsv.su.se' },
+	{ id: 61, name: 'Sandra Backström', username: 'saba7425', email: 'sandra.backström@dsv.su.se' },
+	{ id: 62, name: 'William Viklund', username: 'wivi5697', email: 'william.viklund@dsv.su.se' },
+	{ id: 63, name: 'Lova Arvidsson', username: 'loar9231', email: 'lova.arvidsson@dsv.su.se' },
+	{ id: 64, name: 'Gabriel Öhman', username: 'gaöh4568', email: 'gabriel.öhman@dsv.su.se' },
+	{ id: 65, name: 'Isabelle Eriksson', username: 'iser8143', email: 'isabelle.eriksson@dsv.su.se' },
+	{ id: 66, name: 'Anton Ström', username: 'anst2976', email: 'anton.ström@dsv.su.se' },
+	{ id: 67, name: 'Wilma Ljungberg', username: 'wilj6314', email: 'wilma.ljungberg@dsv.su.se' },
+	{ id: 68, name: 'Lucas Sundström', username: 'lusu9587', email: 'lucas.sundström@dsv.su.se' },
+	{ id: 69, name: 'Hanna Åslund', username: 'haås4729', email: 'hanna.åslund@dsv.su.se' },
+	{ id: 70, name: 'Pontus Rydberg', username: 'pory8152', email: 'pontus.rydberg@dsv.su.se' },
+	{ id: 71, name: 'Olivia Nyman', username: 'olny3675', email: 'olivia.nyman@dsv.su.se' },
+	{ id: 72, name: 'Viktor Östberg', username: 'viös7493', email: 'viktor.östberg@dsv.su.se' },
+	{ id: 73, name: 'Tilda Forslund', username: 'tifo5128', email: 'tilda.forslund@dsv.su.se' },
+	{ id: 74, name: 'Carl Holmström', username: 'caho8916', email: 'carl.holmström@dsv.su.se' },
+	{ id: 75, name: 'Matilda Bengtsson', username: 'mabe4382', email: 'matilda.bengtsson@dsv.su.se' },
+	{ id: 76, name: 'Alvin Berglund', username: 'albe7654', email: 'alvin.berglund@dsv.su.se' },
+	{ id: 77, name: 'Saga Nordström', username: 'sano2496', email: 'saga.nordström@dsv.su.se' },
+	{ id: 78, name: 'Linus Hedström', username: 'lihe6847', email: 'linus.hedström@dsv.su.se' },
+	{ id: 79, name: 'Elina Jakobsson', username: 'elja9173', email: 'elina.jakobsson@dsv.su.se' },
+	{ id: 80, name: 'Casper Nordin', username: 'cano3521', email: 'casper.nordin@dsv.su.se' },
+	{ id: 81, name: 'Nova Malmberg', username: 'noma8765', email: 'nova.malmberg@dsv.su.se' },
+	{ id: 82, name: 'Isac Björk', username: 'isbj5194', email: 'isac.björk@dsv.su.se' },
+	{ id: 83, name: 'Ebba Sandström', username: 'ebsa7428', email: 'ebba.sandström@dsv.su.se' },
+	{ id: 84, name: 'Melvin Åberg', username: 'meåb2683', email: 'melvin.åberg@dsv.su.se' },
+	{ id: 85, name: 'Astrid Nordahl', username: 'asno6159', email: 'astrid.nordahl@dsv.su.se' },
+	{ id: 86, name: 'Noel Sjögren', username: 'nosj8437', email: 'noel.sjögren@dsv.su.se' },
+	{ id: 87, name: 'Linnéa Borg', username: 'libo4826', email: 'linnéa.borg@dsv.su.se' },
+	{ id: 88, name: 'Adrian Rosén', username: 'adro7195', email: 'adrian.rosén@dsv.su.se' },
+	{ id: 89, name: 'Smilla Lindberg', username: 'smli3564', email: 'smilla.lindberg@dsv.su.se' },
+	{ id: 90, name: 'Leon Hammar', username: 'leha9821', email: 'leon.hammar@dsv.su.se' },
+	{ id: 91, name: 'Ellen Sjöström', username: 'elsj6247', email: 'ellen.sjöström@dsv.su.se' },
+	{ id: 92, name: 'Tim Hedlund', username: 'tihe4573', email: 'tim.hedlund@dsv.su.se' },
+	{ id: 93, name: 'Vera Blomgren', username: 'vebl8912', email: 'vera.blomgren@dsv.su.se' },
+	{ id: 94, name: 'Theodor Larsson', username: 'thla2738', email: 'theodor.larsson@dsv.su.se' },
+	{ id: 95, name: 'Stella Lundström', username: 'stlu6495', email: 'stella.lundström@dsv.su.se' },
+	{ id: 96, name: 'Benjamin Engberg', username: 'been8164', email: 'benjamin.engberg@dsv.su.se' },
+	{ id: 97, name: 'Alicia Rydberg', username: 'alry4827', email: 'alicia.rydberg@dsv.su.se' },
+	{ id: 98, name: 'Hugo Nordgren', username: 'huno7392', email: 'hugo.nordgren@dsv.su.se' },
+	{ id: 99, name: 'Moa Stenberg', username: 'most5618', email: 'moa.stenberg@dsv.su.se' },
+	{ id: 100, name: 'Neo Lindahl', username: 'neli9456', email: 'neo.lindahl@dsv.su.se' },
+	{ id: 101, name: 'Tess Holm', username: 'teho3274', email: 'tess.holm@dsv.su.se' },
+	{ id: 102, name: 'Vincent Lundberg', username: 'vilu8593', email: 'vincent.lundberg@dsv.su.se' },
+	{ id: 103, name: 'Tove Nyberg', username: 'tony6127', email: 'tove.nyberg@dsv.su.se' },
+	{ id: 104, name: 'Edvin Kvist', username: 'edkv4851', email: 'edvin.kvist@dsv.su.se' },
+	{ id: 105, name: 'Sigrid Fransson', username: 'sifr7436', email: 'sigrid.fransson@dsv.su.se' },
+	{ id: 106, name: 'Lovis Hedberg', username: 'lohe2984', email: 'lovis.hedberg@dsv.su.se' },
+	{ id: 107, name: 'Arvid Stenberg', username: 'arst5627', email: 'arvid.stenberg@dsv.su.se' },
+	{ id: 108, name: 'June Holmgren', username: 'juho8315', email: 'june.holmgren@dsv.su.se' },
+	{ id: 109, name: 'Milo Svensson', username: 'misv4762', email: 'milo.svensson@dsv.su.se' },
+	{ id: 110, name: 'Alice Rosén', username: 'alro6948', email: 'alice.rosén@dsv.su.se' },
+	{ id: 111, name: 'Viggo Lindström', username: 'vili3591', email: 'viggo.lindström@dsv.su.se' },
+	{ id: 112, name: 'Thea Östlund', username: 'thös8274', email: 'thea.östlund@dsv.su.se' },
+	{ id: 113, name: 'Nils Hedström', username: 'nihe5416', email: 'nils.hedström@dsv.su.se' },
+	{ id: 114, name: 'Signe Dahlberg', username: 'sida7829', email: 'signe.dahlberg@dsv.su.se' },
+	{ id: 115, name: 'Axel Nordström', username: 'axno2653', email: 'axel.nordström@dsv.su.se' }
 ];

+export const USER = {
+	id: 1,
+	name: 'Jacob Reinikainen',
+	username: 'jare2473',
+	email: 'jacob.reinikainen@dsv.su.se'
+};
+
 export const DEFAULT_DISABLED_OPTIONS = {
 	1: false,
 	2: false,
--- a/my-app/src/hooks/useBookingState.js
+++ b/my-app/src/hooks/useBookingState.js
@@ -101,12 +101,12 @@ export function useBookingState(addBooking) {
 	const handleParticipantChange = useCallback((participantId) => {
 		console.log('handleParticipantChange called with:', participantId);
 		if (participantId !== null && participantId !== undefined) {
-			// Find the person by ID and add their name
+			// Find the person by ID and add the full person object
 			const person = PEOPLE.find(p => p.id === participantId);
 			console.log('Found person:', person);
-			if (person && !participants.includes(person.name)) {
+			if (person && !participants.find(p => p.id === person.id)) {
 				console.log('Adding participant:', person.name);
-				setParticipants(prev => [...prev, person.name]);
+				setParticipants(prev => [...prev, person]);
 			} else {
 				console.log('Participant already exists or person not found');
 			}
@@ -115,7 +115,7 @@ export function useBookingState(addBooking) {
 	}, [participants]);

 	const handleRemoveParticipant = useCallback((participantToRemove) => {
-		setParticipants(prev => prev.filter(p => p !== participantToRemove));
+		setParticipants(prev => prev.filter(p => p.id !== participantToRemove.id));
 	}, []);

 	// Memoize the return object to prevent unnecessary re-renders