add: added projectsHEADmain

1 files changed, 452 insertions, 0 deletions

diff --git a/ping/frontend/src/routes/dashboard/settings/+page.svelte b/ping/frontend/src/routes/dashboard/settings/+page.svelte
new file mode 100644
index 0000000..99c5d8f
--- /dev/null
+++ b/ping/frontend/src/routes/dashboard/settings/+page.svelte
@@ -0,0 +1,452 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	let { data }: { data: PageData } = $props();
+	
+	let userProfile = {
+		name: 'Baptiste',
+		email: 'baptiste@ping.com',
+		company: 'Ping Analytics',
+		phone: '+33 6 12 34 56 78'
+	};
+
+	let notifications = {
+		emailAlerts: true,
+		portfolioUpdates: true,
+		esgAlerts: true,
+		marketNews: false,
+		weeklyReports: true
+	};
+
+	let security = {
+		twoFactorAuth: false,
+		sessionTimeout: '30',
+		dataEncryption: true
+	};
+
+	let display = {
+		theme: 'dark',
+		language: 'fr',
+		currency: 'EUR',
+		dateFormat: 'DD/MM/YYYY'
+	};
+
+	let currentPassword = '';
+	let newPassword = '';
+	let confirmPassword = '';
+
+	function saveProfile() {
+		console.log('Saving profile:', userProfile);
+	}
+
+	function saveNotifications() {
+		console.log('Saving notifications:', notifications);
+	}
+
+	function saveSecurity() {
+		console.log('Saving security settings:', security);
+	}
+
+	function saveDisplay() {
+		console.log('Saving display settings:', display);
+	}
+
+	function changePassword() {
+		if (newPassword !== confirmPassword) {
+			alert('Les mots de passe ne correspondent pas');
+			return;
+		}
+		console.log('Changing password');
+		currentPassword = '';
+		newPassword = '';
+		confirmPassword = '';
+	}
+
+	function exportData() {
+		console.log('Exporting user data');
+	}
+
+	function deleteAccount() {
+		if (confirm('Êtes-vous sûr de vouloir supprimer votre compte ? Cette action est irréversible.')) {
+			console.log('Deleting account');
+		}
+	}
+</script>
+
+<section id="settings">
+	<div class="settings-container">
+		<div class="settings-header">
+			<h1>Paramètres</h1>
+		</div>
+
+		<div class="settings-layout">
+			<div class="settings-section card">
+				<h2>👤 Profil utilisateur</h2>
+				<form on:submit|preventDefault={saveProfile}>
+					<div class="form-row">
+						<div class="form-group">
+							<label for="name">Nom complet</label>
+							<input type="text" id="name" bind:value={userProfile.name} />
+						</div>
+						<div class="form-group">
+							<label for="email">Email</label>
+							<input type="email" id="email" bind:value={userProfile.email} />
+						</div>
+					</div>
+					<div class="form-row">
+						<div class="form-group">
+							<label for="company">Entreprise</label>
+							<input type="text" id="company" bind:value={userProfile.company} />
+						</div>
+						<div class="form-group">
+							<label for="phone">Téléphone</label>
+							<input type="tel" id="phone" bind:value={userProfile.phone} />
+						</div>
+					</div>
+					<button type="submit" class="btn">💾 Sauvegarder le profil</button>
+				</form>
+			</div>
+
+			<div class="settings-section card">
+				<h2>🔔 Notifications</h2>
+				<form on:submit|preventDefault={saveNotifications}>
+					<div class="checkbox-group">
+						<label class="checkbox-label">
+							<input type="checkbox" bind:checked={notifications.emailAlerts} />
+							<span>Alertes par email</span>
+						</label>
+						<label class="checkbox-label">
+							<input type="checkbox" bind:checked={notifications.portfolioUpdates} />
+							<span>Mises à jour du portefeuille</span>
+						</label>
+						<label class="checkbox-label">
+							<input type="checkbox" bind:checked={notifications.esgAlerts} />
+							<span>Alertes ESG</span>
+						</label>
+						<label class="checkbox-label">
+							<input type="checkbox" bind:checked={notifications.marketNews} />
+							<span>Actualités du marché</span>
+						</label>
+						<label class="checkbox-label">
+							<input type="checkbox" bind:checked={notifications.weeklyReports} />
+							<span>Rapports hebdomadaires</span>
+						</label>
+					</div>
+					<button type="submit" class="btn">💾 Sauvegarder les notifications</button>
+				</form>
+			</div>
+
+			<div class="settings-section card">
+				<h2>🔒 Sécurité</h2>
+				<form on:submit|preventDefault={saveSecurity}>
+					<div class="form-group">
+						<label class="checkbox-label">
+							<input type="checkbox" bind:checked={security.twoFactorAuth} />
+							<span>Authentification à deux facteurs</span>
+						</label>
+					</div>
+					<div class="form-group">
+						<label for="sessionTimeout">Délai d'expiration de session (minutes)</label>
+						<select id="sessionTimeout" bind:value={security.sessionTimeout}>
+							<option value="15">15 minutes</option>
+							<option value="30">30 minutes</option>
+							<option value="60">1 heure</option>
+							<option value="120">2 heures</option>
+						</select>
+					</div>
+					<div class="form-group">
+						<label class="checkbox-label">
+							<input type="checkbox" bind:checked={security.dataEncryption} disabled />
+							<span>Chiffrement des données (toujours activé)</span>
+						</label>
+					</div>
+					<button type="submit" class="btn">💾 Sauvegarder la sécurité</button>
+				</form>
+
+				<div class="password-section">
+					<h3>Changer le mot de passe</h3>
+					<form on:submit|preventDefault={changePassword}>
+						<div class="form-group">
+							<label for="currentPassword">Mot de passe actuel</label>
+							<input type="password" id="currentPassword" bind:value={currentPassword} />
+						</div>
+						<div class="form-group">
+							<label for="newPassword">Nouveau mot de passe</label>
+							<input type="password" id="newPassword" bind:value={newPassword} />
+						</div>
+						<div class="form-group">
+							<label for="confirmPassword">Confirmer le nouveau mot de passe</label>
+							<input type="password" id="confirmPassword" bind:value={confirmPassword} />
+						</div>
+						<button type="submit" class="btn">🔑 Changer le mot de passe</button>
+					</form>
+				</div>
+			</div>
+
+			<div class="settings-section card">
+				<h2>🎨 Affichage</h2>
+				<form on:submit|preventDefault={saveDisplay}>
+					<div class="form-row">
+						<div class="form-group">
+							<label for="theme">Thème</label>
+							<select id="theme" bind:value={display.theme}>
+								<option value="dark">Sombre</option>
+								<option value="light">Clair</option>
+								<option value="auto">Automatique</option>
+							</select>
+						</div>
+						<div class="form-group">
+							<label for="language">Langue</label>
+							<select id="language" bind:value={display.language}>
+								<option value="fr">Français</option>
+								<option value="en">English</option>
+								<option value="es">Español</option>
+							</select>
+						</div>
+					</div>
+					<div class="form-row">
+						<div class="form-group">
+							<label for="currency">Devise</label>
+							<select id="currency" bind:value={display.currency}>
+								<option value="EUR">EUR (€)</option>
+								<option value="USD">USD ($)</option>
+								<option value="GBP">GBP (£)</option>
+							</select>
+						</div>
+						<div class="form-group">
+							<label for="dateFormat">Format de date</label>
+							<select id="dateFormat" bind:value={display.dateFormat}>
+								<option value="DD/MM/YYYY">DD/MM/YYYY</option>
+								<option value="MM/DD/YYYY">MM/DD/YYYY</option>
+								<option value="YYYY-MM-DD">YYYY-MM-DD</option>
+							</select>
+						</div>
+					</div>
+					<button type="submit" class="btn">💾 Sauvegarder l'affichage</button>
+				</form>
+			</div>
+
+			<div class="settings-section card">
+				<h2>📊 Gestion des données</h2>
+				<div class="data-actions">
+					<div class="action-item">
+						<div class="action-info">
+							<h3>Exporter mes données</h3>
+							<p>Téléchargez toutes vos données personnelles dans un fichier JSON</p>
+						</div>
+						<button class="btn" on:click={exportData}>📥 Exporter</button>
+					</div>
+					<div class="action-item danger">
+						<div class="action-info">
+							<h3>Supprimer mon compte</h3>
+							<p>Supprimez définitivement votre compte et toutes vos données</p>
+						</div>
+						<button class="btn danger" on:click={deleteAccount}>🗑️ Supprimer</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
+
+<style>
+	#settings {
+		padding: 16px;
+		background-color: var(--bg-secondary);
+		color: white;
+		min-height: calc(100vh - 72px);
+	}
+
+	.settings-container {
+		max-width: 1200px;
+	}
+
+	.settings-header {
+		margin-bottom: 16px;
+	}
+
+	h1 {
+		color: var(--text-lime);
+		font-size: 32px;
+		margin: 0;
+		font-weight: 600;
+	}
+
+	h2 {
+		color: var(--text-lime);
+		font-size: 24px;
+		margin: 0 0 20px 0;
+		font-weight: 600;
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	h3 {
+		color: white;
+		font-size: 18px;
+		margin: 20px 0 12px 0;
+		font-weight: 500;
+	}
+
+	.settings-layout {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+	}
+
+	.settings-section {
+		background-color: var(--bg-primary);
+		border-radius: 8px;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+		padding: 16px;
+		margin: 16px;
+		color: white;
+		width: calc(100% - 32px);
+	}
+
+	.form-row {
+		display: flex;
+		gap: 20px;
+		margin-bottom: 16px;
+	}
+
+	.form-group {
+		flex: 1;
+		margin-bottom: 16px;
+	}
+
+	label {
+		display: block;
+		margin-bottom: 8px;
+		font-size: 14px;
+		color: white;
+		font-weight: 500;
+	}
+
+	input[type="text"],
+	input[type="email"],
+	input[type="tel"],
+	input[type="password"],
+	select {
+		width: 100%;
+		background-color: var(--bg-secondary);
+		border: none;
+		border-bottom: 2px solid var(--text-lime);
+		padding: 8px;
+		border-radius: 8px 8px 0 0;
+		color: white;
+		font-size: 14px;
+		box-sizing: border-box;
+	}
+
+	input:focus,
+	select:focus {
+		outline: none;
+		border-bottom-color: var(--text-lime);
+	}
+
+	input::placeholder {
+		color: #888888;
+	}
+
+	.checkbox-group {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+		margin-bottom: 20px;
+	}
+
+	.checkbox-label {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		cursor: pointer;
+		font-size: 14px;
+	}
+
+	input[type="checkbox"] {
+		width: 18px;
+		height: 18px;
+		accent-color: var(--text-lime);
+	}
+
+	input[type="checkbox"]:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	.btn {
+		background-color: var(--btn-primary);
+		color: white;
+		border: none;
+		padding: 8px 16px;
+		border-radius: 4px;
+		cursor: pointer;
+		text-decoration: none;
+		transition-duration: 0.2s;
+		font-weight: 600;
+		font-size: 14px;
+	}
+
+	.btn:hover {
+		background-color: var(--btn-primary-hover);
+		transform: scale(1.025);
+	}
+
+	.btn.danger {
+		background-color: #dc2626;
+	}
+
+	.btn.danger:hover {
+		background-color: #b91c1c;
+	}
+
+	.password-section {
+		border-top: 1px solid var(--btn-primary);
+		padding-top: 20px;
+		margin-top: 20px;
+	}
+
+	.data-actions {
+		display: flex;
+		flex-direction: column;
+		gap: 20px;
+	}
+
+	.action-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 16px;
+		background-color: var(--bg-secondary);
+		border-radius: 8px;
+	}
+
+	.action-item.danger {
+		border-left: 4px solid #dc2626;
+	}
+
+	.action-info h3 {
+		margin: 0 0 4px 0;
+		font-size: 16px;
+	}
+
+	.action-info p {
+		margin: 0;
+		font-size: 14px;
+		color: #888888;
+	}
+
+	@media (max-width: 768px) {
+		.form-row {
+			flex-direction: column;
+		}
+		
+		.action-item {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 12px;
+		}
+	}
+</style>