From 1e8dbb801939cd0325b8e75c4cc40cddd6c05c85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Balogh=20Barnab=C3=A1s?= Date: Mon, 29 Dec 2025 13:07:38 +0100 Subject: [PATCH 1/2] Add project status progress bar --- .../dashboard/projects/[id]/+page.svelte | 116 ++++++++++++++++++ 1 file changed, 116 insertions(+) diff --git a/src/routes/dashboard/projects/[id]/+page.svelte b/src/routes/dashboard/projects/[id]/+page.svelte index 6b0993c..6223979 100644 --- a/src/routes/dashboard/projects/[id]/+page.svelte +++ b/src/routes/dashboard/projects/[id]/+page.svelte @@ -41,7 +41,123 @@ + +

{data.project.name}

+
+

+ Created + + {relativeDate(data.project.createdAt)} + + ∙ Updated + + {relativeDate(data.project.updatedAt)} + + ∙ {Math.floor(data.project.timeSpent / 60)}h {data.project.timeSpent % 60}min +

+
+ +
+ {#key data.project.status} + {#if data.project.status === 'rejected' || data.project.status === 'rejected_locked'} +
+
+
+
+ + + Rejected + +
+ {:else} +
+
+
+
+
+ {#each [ + { key: 'submitted', label: 'Submitted', color: 'bg-indigo-400' }, + { key: 't1_approved', label: 'On print queue', color: 'bg-yellow-400' }, + { key: 'printing', label: 'Being printed', color: 'bg-emerald-400' }, + { key: 'printed', label: 'Printed', color: 'bg-blue-400' }, + { key: 'finalized', label: 'Payout', color: 'bg-green-200' } + ] as step, i (step.key)} +
+
= i} + class:bg-gray-200={[ + 'submitted', + 't1_approved', + 'printing', + 'printed', + 'finalized' + ].indexOf(data.project.status) < i} + class:border-primary-500={[ + 'submitted', + 't1_approved', + 'printing', + 'printed', + 'finalized' + ].indexOf(data.project.status) >= i} + class:border-gray-300={[ + 'submitted', + 't1_approved', + 'printing', + 'printed', + 'finalized' + ].indexOf(data.project.status) < i} + class:{step.color}={true} + style="box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);" + >
+
+ {/each} +
+
+ {#each [ + { key: 'submitted', label: 'Submitted' }, + { key: 't1_approved', label: 'On print queue' }, + { key: 'printing', label: 'Being printed' }, + { key: 'printed', label: 'Printed' }, + { key: 'finalized', label: 'Payout' } + ] as step, i (step.key)} +
+ = i} + class:text-gray-400={[ + 'submitted', + 't1_approved', + 'printing', + 'printed', + 'finalized' + ].indexOf(data.project.status) < i} + >{step.label} +
+ {/each} +
+
+ {/if} + {/key} +
From 2bf28d2a6d883904504f99d8e51ddd7ce86ad7f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Balogh=20Barnab=C3=A1s?= Date: Fri, 2 Jan 2026 14:42:22 +0100 Subject: [PATCH 2/2] Refactor project progress bar for maintainability --- .../dashboard/projects/[id]/+page.svelte | 165 ++++++------------ 1 file changed, 57 insertions(+), 108 deletions(-) diff --git a/src/routes/dashboard/projects/[id]/+page.svelte b/src/routes/dashboard/projects/[id]/+page.svelte index 6223979..d71a582 100644 --- a/src/routes/dashboard/projects/[id]/+page.svelte +++ b/src/routes/dashboard/projects/[id]/+page.svelte @@ -14,6 +14,16 @@ const clamp = (num: number, min: number, max: number) => Math.min(Math.max(num, min), max); + const PROJECT_STATUSES = ['submitted', 't1_approved', 'printing', 'printed', 'finalized'] as const; + + const PROGRESS_STEPS = [ + { key: 'submitted', label: 'Submitted' }, + { key: 't1_approved', label: 'On print queue' }, + { key: 'printing', label: 'Being printed' }, + { key: 'printed', label: 'Printed' }, + { key: 'finalized', label: 'Payout' } + ] as const; + let { data, form }: PageProps = $props(); let sortDropdownValue = $state('descending'); let sortDevlogsAscending = $derived.by(() => sortDropdownValue == 'ascending'); @@ -36,6 +46,11 @@ ); } + function getStatusIndex(status: string): number { + const index = PROJECT_STATUSES.indexOf(status as never); + return index >= 0 ? index : 0; + } + let formPending = $state(false); @@ -56,124 +71,58 @@ ∙ {Math.floor(data.project.timeSpent / 60)}h {data.project.timeSpent % 60}min

+

Status: {projectStatuses[data.project.status]}

- {#key data.project.status} - {#if data.project.status === 'rejected' || data.project.status === 'rejected_locked'} -
-
-
-
- - - Rejected - + {#if data.project.status !== 'rejected' && data.project.status !== 'rejected_locked'} +
+
+
+
- {:else} -
-
-
-
-
- {#each [ - { key: 'submitted', label: 'Submitted', color: 'bg-indigo-400' }, - { key: 't1_approved', label: 'On print queue', color: 'bg-yellow-400' }, - { key: 'printing', label: 'Being printed', color: 'bg-emerald-400' }, - { key: 'printed', label: 'Printed', color: 'bg-blue-400' }, - { key: 'finalized', label: 'Payout', color: 'bg-green-200' } - ] as step, i (step.key)} -
-
= i} - class:bg-gray-200={[ - 'submitted', - 't1_approved', - 'printing', - 'printed', - 'finalized' - ].indexOf(data.project.status) < i} - class:border-primary-500={[ - 'submitted', - 't1_approved', - 'printing', - 'printed', - 'finalized' - ].indexOf(data.project.status) >= i} - class:border-gray-300={[ - 'submitted', - 't1_approved', - 'printing', - 'printed', - 'finalized' - ].indexOf(data.project.status) < i} - class:{step.color}={true} - style="box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);" - >
-
- {/each} + {#each PROGRESS_STEPS as step, i (step.key)} +
+
= i} + class:bg-gray-200={getStatusIndex(data.project.status) < i} + class:border-primary-500={getStatusIndex(data.project.status) >= i} + class:border-gray-300={getStatusIndex(data.project.status) < i} + style="box-shadow: 0 2px 8px 0 rgba(0,0,0,0.07);" + >
-
- {#each [ - { key: 'submitted', label: 'Submitted' }, - { key: 't1_approved', label: 'On print queue' }, - { key: 'printing', label: 'Being printed' }, - { key: 'printed', label: 'Printed' }, - { key: 'finalized', label: 'Payout' } - ] as step, i (step.key)} -
- = i} - class:text-gray-400={[ - 'submitted', - 't1_approved', - 'printing', - 'printed', - 'finalized' - ].indexOf(data.project.status) < i} - >{step.label} -
- {/each} + {/each} +
+
+ {#each PROGRESS_STEPS as step, i (step.key)} +
+ = i} + class:text-gray-400={getStatusIndex(data.project.status) < i} + > + {step.label} +
-
- {/if} - {/key} + {/each} +
+
+{/if}
-

- Created - - {relativeDate(data.project.createdAt)} - - ∙ Updated - - {relativeDate(data.project.updatedAt)} - - ∙ {Math.floor(data.project.timeSpent / 60)}h {data.project.timeSpent % 60}min -

-

Status: {projectStatuses[data.project.status]}

-