1 files changed, 165 insertions, 0 deletions
diff --git a/ping/frontend/src/lib/components/dashboard/transactions/TransactionModal.svelte b/ping/frontend/src/lib/components/dashboard/transactions/TransactionModal.svelte
new file mode 100644
index 0000000..b9f0224
--- /dev/null
+++ b/ping/frontend/src/lib/components/dashboard/transactions/TransactionModal.svelte
@@ -0,0 +1,165 @@
+<script lang="ts">
+	import { authFetch } from '$lib/stores/auth';
+	import { onMount } from 'svelte';
+
+	interface IProps {
+		isOpen: boolean;
+		onCreate: (transaction: any) => void;
+	}
+
+	let { isOpen = $bindable(false), onCreate = () => {} }: IProps = $props(); // Changed default to false
+
+	let amount: number = $state(0);
+	let currency: string = $state('USD');
+	let label: string = $state('');
+	let receiverLabel: string = $state('');
+	let receiverIban: string = $state('');
+	let operationDate: string = $state('');
+
+	function closeDialog() {
+		isOpen = false;
+	}
+
+	async function createTransaction(event: Event) {
+		event.preventDefault();
+
+		const transaction = {
+			amount,
+			currency,
+			label,
+			receiverLabel,
+			receiverIban,
+			operationDate
+		};
+
+		try {
+			const response = await authFetch('/api/transactions', {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json'
+				},
+				body: JSON.stringify(transaction)
+			});
+
+			if (!response.ok) {
+				const error = await response.json();
+				alert('Erreur lors de la création de la transaction: ' + error);
+				return;
+			}
+
+			onCreate(await response.json());
+
+			closeDialog();
+		} catch (err) {
+			alert('Erreur réseau lors de la création de la transaction');
+		}
+	}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+{#if isOpen}
+	<div class="backdrop" onclick={closeDialog}>
+		<dialog open onclick={(e) => e.stopPropagation()}>
+			<h2>Créer une nouvelle transaction</h2>
+			<form class="flex flex-col gap-2">
+				<label>
+					<span>Montant</span>
+					<input type="number" step="0.01" min="0" bind:value={amount} required />
+				</label>
+				<label>
+					<span>Devise</span>
+					<select bind:value={currency} required>
+						<option selected value="USD" data-symbol="$" data-name="Dollar américain"
+							>USD - Dollar américain</option
+						>
+						<option value="EUR" data-symbol="€" data-name="Euro">EUR - Euro</option>
+						<option value="GBP" data-symbol="£" data-name="Livre sterling"
+							>GBP - Livre sterling</option
+						>
+						<option value="JPY" data-symbol="¥" data-name="Yen japonais">JPY - Yen japonais</option>
+						<option value="CHF" data-symbol="Fr" data-name="Franc suisse">CHF - Franc suisse</option
+						>
+						<option value="CAD" data-symbol="$" data-name="Dollar canadien"
+							>CAD - Dollar canadien</option
+						>
+						<option value="AUD" data-symbol="$" data-name="Dollar australien"
+							>AUD - Dollar australien</option
+						>
+						<option value="CNY" data-symbol="¥" data-name="Yuan chinois">CNY - Yuan chinois</option>
+					</select>
+				</label>
+				<label>
+					<span>Libellé</span>
+					<input type="text" bind:value={label} required />
+				</label>
+				<label>
+					<span>Libellé du bénéficiaire</span>
+					<input type="text" bind:value={receiverLabel} required />
+				</label>
+				<label>
+					<span>IBAN du bénéficiaire</span>
+					<input type="text" bind:value={receiverIban} required />
+				</label>
+				<label>
+					<span>Date de l'opération</span>
+					<input type="datetime-local" bind:value={operationDate} required />
+				</label>
+				<button class="btn" onclick={createTransaction}>➕ Créer</button>
+			</form>
+		</dialog>
+	</div>
+{/if}
+
+<style>
+	.backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100vw;
+		height: 100vh;
+		background: rgba(0, 0, 0, 0.4);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1000;
+	}
+
+	dialog {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		max-width: 90vw;
+		max-height: 90vh;
+		border: none;
+		border-radius: 8px;
+		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.2);
+		padding: 2rem;
+		background: var(--bg-primary);
+		outline: none;
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		align-items: center;
+		justify-content: center;
+		color: white;
+	}
+
+	h2 {
+		font-weight: 600;
+		font-size: 32px;
+		color: var(--text-lime);
+	}
+
+	form {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	label {
+		display: flex;
+		flex-direction: column;
+	}
+</style>