Milas Holsting
8e02f673ca
Some checks failed
Build and Push Container Image / build-and-push (push) Failing after 3m49s
105 lines
4.1 KiB
Svelte
105 lines
4.1 KiB
Svelte
<script lang="ts">
|
|
import { onMount } from 'svelte';
|
|
import type { PageServerData } from './$types';
|
|
|
|
let { data }: { data: PageServerData } = $props();
|
|
|
|
onMount(() => {
|
|
const events = new EventSource('/api/events');
|
|
events.onmessage = () => {
|
|
window.location.reload();
|
|
};
|
|
return () => events.close();
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>Taskarr</title>
|
|
</svelte:head>
|
|
|
|
<main class="mx-auto flex min-h-screen max-w-6xl flex-col gap-8 px-6 py-10">
|
|
<header class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
|
|
<div class="flex flex-col gap-2">
|
|
<p class="text-sm uppercase tracking-[0.3em] text-slate-500">Taskarr</p>
|
|
<h1 class="text-4xl font-bold text-slate-900">Projects, tasks, and synced issues in one place</h1>
|
|
<p class="max-w-2xl text-slate-600">A compact SvelteKit workspace for tracking progress, handling tasks, and keeping GitHub or Gitea issues close to the work.</p>
|
|
</div>
|
|
<div class="flex gap-3">
|
|
<a class="rounded-md border border-slate-300 px-4 py-2 text-slate-900" href="/projects">Projects</a>
|
|
<a class="rounded-md bg-blue-600 px-4 py-2 text-white" href="/integrations">Install GitHub App</a>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="grid gap-4 md:grid-cols-3">
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
|
<p class="text-sm text-slate-500">Projects</p>
|
|
<p class="mt-2 text-3xl font-semibold">{data.projects.length}</p>
|
|
</div>
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
|
<p class="text-sm text-slate-500">Recent tasks</p>
|
|
<p class="mt-2 text-3xl font-semibold">{data.recentTasks.length}</p>
|
|
</div>
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
|
<p class="text-sm text-slate-500">Recent issues</p>
|
|
<p class="mt-2 text-3xl font-semibold">{data.recentIssues.length}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="grid gap-6 lg:grid-cols-2">
|
|
<div class="rounded-2xl border border-blue-200 bg-blue-50 p-5 shadow-sm">
|
|
<h2 class="text-lg font-semibold text-slate-900">Connect GitHub</h2>
|
|
<p class="mt-2 text-sm text-slate-600">Install the GitHub App to link repositories and sync issues into your projects.</p>
|
|
<a class="mt-4 inline-flex rounded-md bg-slate-900 px-4 py-2 text-white" href="/integrations">Go to integrations</a>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
|
<h2 class="text-lg font-semibold">Projects</h2>
|
|
<div class="mt-4 space-y-3">
|
|
{#each data.projects as project}
|
|
<div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
|
|
<div class="flex items-center justify-between gap-4">
|
|
<div>
|
|
<p class="font-medium text-slate-900">{project.name}</p>
|
|
<p class="text-sm text-slate-500">{project.description}</p>
|
|
</div>
|
|
<span class="text-sm text-slate-500">{project.progress}%</span>
|
|
</div>
|
|
<div class="mt-3 h-2 rounded-full bg-slate-200">
|
|
<div class="h-2 rounded-full bg-blue-600" style={`width: ${project.progress}%`}></div>
|
|
</div>
|
|
<p class="mt-2 text-xs text-slate-500">{project.taskCount} tasks · {project.issueCount} issues · {project.status}</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-6">
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
|
<h2 class="text-lg font-semibold">Recent tasks</h2>
|
|
<div class="mt-4 space-y-3">
|
|
{#each data.recentTasks as task}
|
|
<div class="flex items-center justify-between rounded-xl bg-slate-50 p-4">
|
|
<div>
|
|
<p class="font-medium text-slate-900">{task.title}</p>
|
|
<p class="text-sm text-slate-500">Priority {task.priority} · {task.status}</p>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
|
|
<h2 class="text-lg font-semibold">Recent issues</h2>
|
|
<div class="mt-4 space-y-3">
|
|
{#each data.recentIssues as item}
|
|
<div class="rounded-xl bg-slate-50 p-4">
|
|
<p class="font-medium text-slate-900">{item.title}</p>
|
|
<p class="text-sm text-slate-500">{item.provider} · {item.state}</p>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|