Add support for spending, budgets, categories and movements

my-app/src/routes/budgets/[[id=integer]]/+page.server.ts

@@ -0,0 +1,36 @@
+import { error, fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { post } from '$lib/api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+	let budget: Budget = { id: 0, amount: 0 };
+	const id = params.id;
+	if (id) {
+		// TODO: load real budget
+	}
+	return { budget };
+};
+
+export const actions: Actions = {
+	default: async ({ cookies, request, params }) => {
+		const data = await request.formData();
+		const amount = data.get('amount');
+
+		if (!amount) {
+			throw error(400, 'Amount is required');
+		}
+
+		const token = cookies.get('jwt')!;
+		const path = ''; // TODO: Replace with real path
+		const body = await post(path, { amount }, { 'x-user': token });
+
+		if (body.errors) {
+			throw fail(400, body);
+		}
+
+		const value = body.id;
+
+		return { success: true };
+	}
+};

my-app/src/routes/budgets/[[id=integer]]/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { title } from '$lib';
+</script>
+
+<svelte:head>
+	<title>{title} - Nuevo Presupuesto</title>
+</svelte:head>
+
+<h2>Nuevo Presupuesto</h2>
+<form method="POST">
+	<fieldset>
+		<label>
+			Ingrese un monto para el presupuesto
+			<input type="number" name="amount" placeholder="Monto" required />
+		</label>
+		<button>Crear</button>
+		<button type="button" class="outline" on:click={() => history.back()}>Cancelar</button>
+	</fieldset>
+</form>

my-app/src/routes/categories/[[id=integer]]/+page.server.ts

@@ -0,0 +1,36 @@
+import { error, fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { post } from '$lib/api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+	let category: Category = { id: 0, name: '' };
+	const id = params.id;
+	if (id) {
+		// TODO: load real category
+	}
+	return { category };
+};
+
+export const actions: Actions = {
+	default: async ({ cookies, request, params }) => {
+		const data = await request.formData();
+		const name = data.get('name');
+
+		if (!name) {
+			throw error(400, 'Name is required');
+		}
+
+		const token = cookies.get('jwt')!;
+		const path = ''; // TODO: replace with real path
+		const body = await post(path, { name }, { 'x-user': token });
+
+		if (body.errors) {
+			throw fail(400, body);
+		}
+
+		const value = body.id;
+
+		return { success: true };
+	}
+};

my-app/src/routes/categories/[[id=integer]]/+page.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { title } from '$lib';
+</script>
+
+<svelte:head>
+	<title>{title} - Nueva Categoría</title>
+</svelte:head>
+
+<h2>Nueva Categoría</h2>
+<form method="POST">
+	<fieldset>
+		<label>
+			Ingrese un nombre para la categoría
+			<input type="text" name="name" placeholder="Nombre" required />
+		</label>
+		<button>Crear</button>
+		<button type="button" class="outline" on:click={() => history.back()}>Cancelar</button>
+	</fieldset>
+</form>

my-app/src/routes/groups/+page.svelte

@@ -11,7 +11,10 @@
 
 <header class="row">
 	<h2>Grupos</h2>
-	<a href="/groups/details" role="button">Nuevo grupo</a>
+	<div>
+		<a href="/groups/details" role="button">Nuevo grupo</a>
+		<a href="/spendings" class="outline" role="button">Nuevo gasto</a>
+	</div>
 </header>
 <main>
 	{#if !data.groups.length}
@@ -24,7 +27,8 @@
 		<article>
 			<header>{group.name}</header>
 			<p>{group.description}</p>
-			<a href="/groups/details/{group.id}">Ver en detalle</a>
+			<a href="/groups/details/{group.id}" role="button" class="">Editar</a>
+			<a href="/groups/movements/{group.id}" role="button" class="outline">Moovimientos</a>
 		</article>
 	{/each}
 </main>

my-app/src/routes/groups/movements/[id=integer]/+page.server.ts

@@ -0,0 +1,34 @@
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+	const id = Number(params.id);
+	// TODO: load real group
+	const group: Group = {
+		id,
+		name: 'Grupo de Prueba',
+		description: 'Este es un grupo de prueba',
+		owner_id: 0
+	};
+	// TODO: load real spendings
+	const spendings: Spending[] = [
+		{
+			id: 1,
+			description: 'Entradas de Taylor Swift',
+			amount: 100_000,
+			date: new Date()
+		},
+		{
+			id: 2,
+			description: 'Entradas de Tan Biónica',
+			amount: 20_000,
+			date: new Date()
+		},
+		{
+			id: 3,
+			description: 'Entradas de Boca-River',
+			amount: 180_000,
+			date: new Date()
+		}
+	];
+	return { group, spendings };
+};

my-app/src/routes/groups/movements/[id=integer]/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { title } from '$lib';
+	import type { PageServerData } from './$types';
+
+	export let data: PageServerData;
+</script>
+
+<svelte:head>
+	<title>{title} - {data.group.name}</title>
+</svelte:head>
+
+<header>
+	<h2>{data.group.name}</h2>
+	<p>{data.group.description}</p>
+</header>
+{#each data.spendings as spending}
+	<article>
+		<header class="row">
+			<p>{spending.description}</p>
+			<p>$ {spending.amount.toLocaleString()}</p>
+		</header>
+		{spending.date.toLocaleString()}
+	</article>
+{/each}
+
+<style>
+	.row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+</style>

my-app/src/routes/spendings/[[id=integer]]/+page.server.ts

@@ -0,0 +1,41 @@
+import { error, fail } from '@sveltejs/kit';
+import type { Actions } from './$types';
+import { post } from '$lib/api';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ params }) => {
+	let spending: Spending = { id: 0, description: '', amount: 0 };
+	const id = params.id;
+	if (id) {
+		// TODO: load real spending
+	}
+	return { spending };
+};
+
+export const actions: Actions = {
+	default: async ({ cookies, request, params }) => {
+		const data = await request.formData();
+		const description = data.get('description');
+		const amount = data.get('amount');
+
+		if (!description) {
+			throw error(400, 'Description is required');
+		}
+
+		if (!amount) {
+			throw error(400, 'Amount is required');
+		}
+
+		const token = cookies.get('jwt')!;
+		const path = ''; // TODO: replace with real path
+		const body = await post(path, { description, amount }, { 'x-user': token });
+
+		if (body.errors) {
+			throw fail(400, body);
+		}
+
+		const value = body.id;
+
+		return { success: true };
+	}
+};

my-app/src/routes/spendings/[[id=integer]]/+page.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { title } from '$lib';
+</script>
+
+<svelte:head>
+	<title>{title} - Nuevo Gasto</title>
+</svelte:head>
+
+<h2>Nuevo Gasto</h2>
+<form method="POST">
+	<fieldset>
+		<label>
+			Ingrese una descripción para el gasto
+			<input type="text" name="description" placeholder="Descripcion" required />
+		</label>
+		<label>
+			Ingrese un monto para el gasto
+			<input type="text" name="amount" placeholder="Monto" required />
+		</label>
+		<button>Crear</button>
+		<button type="button" class="outline" on:click={() => history.back()}>Cancelar</button>
+	</fieldset>
+</form>

my-app/src/types.d.ts

@@ -5,6 +5,20 @@ declare global {
 		name: String;
 		description: String;
 	};
+	type Category = {
+		id: number;
+		name: String;
+	};
+	type Budget = {
+		id: number;
+		amount: number;
+	};
+	type Spending = {
+		id: number;
+		description: String;
+		amount: number;
+		date: Date;
+	};
 }
 
 export {};