Skip to content

Commit d27cce2

Browse files
kanekoshoyukanekoshoyu
committed
update report UI
1 parent 30027c7 commit d27cce2

File tree

1 file changed

+99
-16
lines changed

1 file changed

+99
-16
lines changed

‎src/pages/score/report.astro‎

Lines changed: 99 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const DIRECTUS_URL = "https://directus.bounteer.com";
77
const READ_TOKEN = "5OTK2voWFO_vTptGVMAY2Oxz9XBCDAvn";
88
---
99

10-
<Layout title={`Role Fit Report - Bounteer`}>
10+
<Layout title="Role Fit Score Report - Bounteer">
1111
<Header />
1212

1313
<main class="py-16 bg-white">
@@ -18,23 +18,33 @@ const READ_TOKEN = "5OTK2voWFO_vTptGVMAY2Oxz9XBCDAvn";
1818
const cfg = $el.dataset;
1919
return {
2020
// config
21-
reportId: '', // set in init()
2221
directusUrl: cfg.directusUrl,
2322
readToken: cfg.readToken,
2423
2524
// state
25+
reportId: '',
2626
loading: true,
2727
error: '',
2828
report: null,
2929
30+
// helpers
3031
pretty(obj){ try{ return JSON.stringify(obj, null, 2); } catch { return '—'; } },
31-
score(){ const r = this.report || {}; return r.score ?? r.data?.score ?? r.report?.score ?? '—'; },
32-
highlights(){ const r = this.report || {}; return r.highlights ?? r.data?.highlights ?? r.report?.highlights ?? []; },
32+
score(){ return this.report?.overall_score ?? '—'; },
33+
confidence(){ return this.report?.confidence_level ?? null; },
34+
concernTags(){ return Array.isArray(this.report?.concern_tags) ? this.report.concern_tags : []; },
35+
prosList(){
36+
const raw = this.report?.pros || '';
37+
return raw.split('\n').map(l => l.replace(/^\s*-\s*/, '').trim()).filter(Boolean);
38+
},
39+
consList(){
40+
const raw = this.report?.cons || '';
41+
return raw.split('\n').map(l => l.replace(/^\s*-\s*/, '').trim()).filter(Boolean);
42+
},
3343
3444
async init(){
35-
// ✅ read id from the URL at runtime
45+
// read id from URL at runtime (works on static hosting)
3646
this.reportId = new URLSearchParams(window.location.search).get('id') || '';
37-
if (!this.reportId) return;
47+
if (!this.reportId){ this.loading = false; return; }
3848
await this.fetchReport();
3949
},
4050
@@ -46,27 +56,33 @@ const READ_TOKEN = "5OTK2voWFO_vTptGVMAY2Oxz9XBCDAvn";
4656
const json = await res.json();
4757
if (!res.ok) throw new Error(json?.errors?.[0]?.message || 'Fetch failed');
4858
this.report = json?.data ?? null;
49-
}catch(e){ this.error = e?.message || 'Unexpected error'; }
50-
finally{ this.loading = false; }
59+
}catch(e){
60+
this.error = e?.message || 'Unexpected error';
61+
}finally{
62+
this.loading = false;
63+
}
5164
}
5265
}
5366
})()"
5467
x-init="init()"
5568
data-directus-url={DIRECTUS_URL}
5669
data-read-token={READ_TOKEN}
5770
>
71+
<!-- No ID -->
5872
<template x-if="!reportId">
5973
<div class="text-center py-20 text-gray-500">
6074
<p>
6175
No <code>id</code> provided. Visit as <code
62-
>/score/report?id=123</code
76+
>/score/report?id=10</code
6377
>.
6478
</p>
6579
</div>
6680
</template>
6781

82+
<!-- With ID -->
6883
<template x-if="reportId">
6984
<div>
85+
<!-- Loading overlay -->
7086
<div
7187
x-show="loading"
7288
class="absolute inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-sm"
@@ -98,6 +114,7 @@ const READ_TOKEN = "5OTK2voWFO_vTptGVMAY2Oxz9XBCDAvn";
98114
Report ID: <span x-text="reportId"></span>
99115
</p>
100116

117+
<!-- Error -->
101118
<template x-if="error">
102119
<div
103120
class="mb-6 p-3 rounded-lg bg-red-50 text-red-700 text-sm"
@@ -106,24 +123,90 @@ const READ_TOKEN = "5OTK2voWFO_vTptGVMAY2Oxz9XBCDAvn";
106123
</div>
107124
</template>
108125

126+
<!-- Content -->
109127
<div class="grid gap-6" x-show="!loading && !error && report">
128+
<!-- Score & Confidence -->
129+
<div
130+
class="p-4 rounded-xl border grid grid-cols-1 md:grid-cols-2 gap-4"
131+
>
132+
<div>
133+
<h2 class="font-semibold mb-2">Overall Score</h2>
134+
<p class="text-4xl font-bold" x-text="score()"></p>
135+
</div>
136+
<div>
137+
<h2 class="font-semibold mb-2">Confidence Level</h2>
138+
<p
139+
class="text-3xl font-semibold"
140+
x-text="confidence() !== null ? confidence() + '%' : '—'"
141+
>
142+
</p>
143+
</div>
144+
</div>
145+
146+
<!-- Pros -->
110147
<div class="p-4 rounded-xl border">
111-
<h2 class="font-semibold mb-2">Match Score</h2>
112-
<p class="text-3xl font-bold" x-text="score()"></p>
148+
<h2 class="font-semibold mb-2">Pros</h2>
149+
<ul class="list-disc ml-5 space-y-1">
150+
<template x-for="(p, i) in prosList()" :key="'pro-' + i">
151+
<li x-text="p"></li>
152+
</template>
153+
<template x-if="!prosList().length">
154+
<li class="text-gray-500">No pros listed.</li>
155+
</template>
156+
</ul>
113157
</div>
114158

159+
<!-- Cons -->
115160
<div class="p-4 rounded-xl border">
116-
<h2 class="font-semibold mb-2">Highlights</h2>
161+
<h2 class="font-semibold mb-2">Cons</h2>
117162
<ul class="list-disc ml-5 space-y-1">
118-
<template x-for="(item, idx) in highlights()" :key="idx">
119-
<li x-text="item"></li>
163+
<template x-for="(c, i) in consList()" :key="'con-' + i">
164+
<li x-text="c"></li>
120165
</template>
121-
<template x-if="!highlights()?.length">
122-
<li class="text-gray-500">No highlights available.</li>
166+
<template x-if="!consList().length">
167+
<li class="text-gray-500">No cons listed.</li>
123168
</template>
124169
</ul>
125170
</div>
126171

172+
<!-- Concern tags -->
173+
<div class="p-4 rounded-xl border">
174+
<h2 class="font-semibold mb-3">Concern Tags</h2>
175+
<div class="flex flex-wrap gap-2">
176+
<template x-for="(tag, i) in concernTags()" :key="'tag-' + i">
177+
<span
178+
class="px-3 py-1 rounded-full text-xs font-medium bg-amber-100 text-amber-800"
179+
x-text="tag"></span>
180+
</template>
181+
<template x-if="!concernTags().length">
182+
<span class="text-gray-500 text-sm">None.</span>
183+
</template>
184+
</div>
185+
</div>
186+
187+
<!-- Meta -->
188+
<div
189+
class="p-4 rounded-xl border text-sm text-gray-600 grid grid-cols-1 md:grid-cols-2 gap-2"
190+
>
191+
<div>
192+
<span class="font-medium">Submission:</span>
193+
<span x-text="report?.submission ?? '—'"></span>
194+
</div>
195+
<div x-show="report?.user_created">
196+
<span class="font-medium">User:</span>
197+
<span x-text="report?.user_created"></span>
198+
</div>
199+
<div x-show="report?.date_created">
200+
<span class="font-medium">Created:</span>
201+
<span x-text="report?.date_created"></span>
202+
</div>
203+
<div x-show="report?.date_updated">
204+
<span class="font-medium">Updated:</span>
205+
<span x-text="report?.date_updated"></span>
206+
</div>
207+
</div>
208+
209+
<!-- Raw -->
127210
<div class="p-4 rounded-xl border">
128211
<h2 class="font-semibold mb-2">Raw JSON</h2>
129212
<pre

0 commit comments

Comments
 (0)