taskbot/apps/web/src/routes/app/+page.svelte

<script lang="ts">
	import Card from "$lib/ui/layout/Card.svelte";
	import TaskItem from "$lib/ui/data/TaskItem.svelte";
	import Pagination from "$lib/ui/layout/Pagination.svelte";

	type Task = {
		id: number;
		description: string;
		due_date: string | null;
		group_id: string | null;
		display_code: number | null;
		assignees: string[];
	};

	export let data: {
		userId: string;
		openTasks: Task[];
		recentTasks: (Task & { completed?: boolean; completed_at?: string | null })[];
		unassignedOpen: Task[];
		groupNames: Record<string, string>;
		order: 'due' | 'group';
		page?: number | null;
		hasMore?: boolean | null;
	};

	function buildQuery(params: { order?: 'due' | 'group'; page?: number }) {
		const sp = new URLSearchParams();
		if (params.order) sp.set("order", params.order);
		if (params.page && params.page > 1) sp.set("page", String(params.page));
		return sp.toString();
	}

	function sortByDue(items: Task[]): Task[] {
		return [...items].sort((a, b) => {
			const ad = a.due_date, bd = b.due_date;
			if (ad == null && bd == null) return a.id - b.id;
			if (ad == null) return 1;
			if (bd == null) return -1;
			if (ad < bd) return -1;
			if (ad > bd) return 1;
			return a.id - b.id;
		});
	}

	function groupByGroup(items: Task[]): { id: string; name: string; tasks: Task[] }[] {
		const map = new Map<string, Task[]>();
		for (const it of items) {
			const gid = it.group_id ? String(it.group_id) : "";
			if (!map.has(gid)) map.set(gid, []);
			map.get(gid)!.push(it);
		}
		const groups = Array.from(map.entries()).map(([gid, tasks]) => ({
			id: gid,
			name: gid ? (data.groupNames[gid] || gid) : "Personal",
			tasks
		}));
		// Mantener el orden provisto por el servidor (ya ordenado alfabéticamente con "Personal" al final)
		return groups;
	}
</script>

<svelte:head>
	<title>Tareas</title>
	<meta name="robots" content="noindex,nofollow" />
</svelte:head>

<p class="subtle">Sesión: <strong>{data.userId}</strong></p>

<div class="order-toggle">
	<span>Orden:</span>
	<a
		class:active={data.order === 'due'}
		href={`/app?${buildQuery({ order: 'due', page: data.page ?? 1 })}`}>Fecha</a
	>
	<a
		class:active={data.order === 'group'}
		href={`/app?${buildQuery({ order: 'group', page: data.page ?? 1 })}`}>Grupo</a
	>
</div>

<h2 class="section-title">Mis tareas (abiertas)</h2>
{#if data.openTasks.length === 0}
	<p>No tienes tareas asignadas. Crea o reclama una para empezar.</p>
{:else}
	<Card>
		<ul class="list">
			{#each data.openTasks as t}
				<TaskItem {...t} currentUserId={data.userId} groupName={t.group_id ? (data.groupNames[t.group_id] || t.group_id) : 'Personal'} groupId={t.group_id} />
			{/each}
		</ul>
	</Card>
{/if}

{#if (data.page ?? 1) > 1 || data.hasMore}
	<Pagination
		prevHref={(data.page ?? 1) > 1 ? `/app?${buildQuery({ order: data.order, page: (data.page ?? 1) - 1 })}` : null}
		nextHref={data.hasMore ? `/app?${buildQuery({ order: data.order, page: (data.page ?? 1) + 1 })}` : null}
	/>
{/if}

<h2 class="section-title">Sin responsable de mis grupos</h2>
{#if data.unassignedOpen.length === 0}
	<p>No hay tareas sin responsable en tus grupos. Crea una nueva o invita a tus compañeros.</p>
{:else}
	{#if data.order === 'group'}
		{#each groupByGroup(data.unassignedOpen) as g}
			<h3 class="group-subtitle">{g.name}</h3>
			<Card>
				<ul class="list">
					{#each g.tasks as t}
						<TaskItem {...t} currentUserId={data.userId} groupName={g.name} groupId={t.group_id} />
					{/each}
				</ul>
			</Card>
		{/each}
	{:else}
		<Card>
			<ul class="list">
				{#each data.unassignedOpen as t}
					<TaskItem {...t} currentUserId={data.userId} groupName={t.group_id ? (data.groupNames[t.group_id] || t.group_id) : 'Personal'} groupId={t.group_id} />
				{/each}
			</ul>
		</Card>
	{/if}
{/if}

<h2 class="section-title">Completadas (últimas 24 h)</h2>
{#if data.recentTasks.length === 0}
	<p>No hay tareas completadas recientemente.</p>
{:else}
	<Card>
		<ul class="list">
			{#each data.recentTasks as t}
				<TaskItem
					{...t}
					currentUserId={data.userId}
					groupId={t.group_id}
					completed={true}
					completed_at={t.completed_at ?? null}
					groupName={t.group_id ? (data.groupNames[t.group_id] || t.group_id) : 'Personal'}
				/>
			{/each}
		</ul>
	</Card>
{/if}

<p class="footnote">
	La cookie de sesión se renueva con cada visita (idle timeout).
</p>

<style>
	.subtle {
		color: var(--color-text-muted);
		margin: 0 0 1rem 0;
	}
	.order-toggle {
		display: inline-flex;
		gap: 8px;
		align-items: center;
		margin-bottom: 0.5rem;
	}
	.order-toggle a {
		padding: 2px 8px;
		border: 1px solid var(--color-border);
		border-radius: 999px;
		text-decoration: none;
		color: var(--color-text);
	}
	.order-toggle a.active {
		background: var(--color-primary);
		border-color: var(--color-primary);
		color: #fff;
	}
	.section-title {
		margin: 0.5rem 0;
	}
	.group-subtitle {
		margin: 0.5rem 0 0.25rem 0;
		font-size: 0.95rem;
	}
	.list {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.footnote {
		margin-top: 0.75rem;
		color: var(--color-text-muted);
	}
</style>