refactor(ui): simplify dashboard headers and actions

This commit is contained in:
poyrazavsever
2026-07-17 22:13:20 +03:00
parent 49c4c370c8
commit c6eecf29ed
5 changed files with 32 additions and 59 deletions
+7 -24
View File
@@ -81,9 +81,6 @@ export function JournalClient({ logs }: JournalClientProps) {
<h1 className="text-3xl font-semibold tracking-normal text-foreground">
Mood ve enerji
</h1>
<p className="mt-1 max-w-2xl text-sm text-muted-foreground">
Günlük ruh hali, enerji ve çalışma memnuniyetini takip ederek kişisel kapasite trendini gör.
</p>
</div>
<div className="flex flex-col gap-2 sm:flex-row">
@@ -233,7 +230,7 @@ function DailyLogRow({ log }: { log: DailyLogItem }) {
<DailyLogDialog mode="edit" log={log} />
<form action={deleteDailyLogRecord}>
<input type="hidden" name="id" value={log.id} />
<Button type="submit" variant="outline" className="h-9 gap-2 text-rose-600">
<Button effect="shine" type="submit" variant="secondary" className="gap-2 text-rose-600">
<Trash2 className="h-4 w-4" />
Sil
</Button>
@@ -269,7 +266,7 @@ function DailyLogDialog({ mode, log }: { mode: "create" | "edit"; log?: DailyLog
return (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button variant={mode === "create" ? "default" : "outline"} className="h-9 gap-2">
<Button effect="shine" variant={mode === "create" ? "default" : "secondary"} className="gap-2">
{mode === "create" ? <Plus className="h-4 w-4" /> : <Pencil className="h-4 w-4" />}
{mode === "create" ? "Günlük ekle" : "Düzenle"}
</Button>
@@ -289,7 +286,7 @@ function DailyLogDialog({ mode, log }: { mode: "create" | "edit"; log?: DailyLog
</div>
<DialogFooter className="shrink-0 border-t border-border bg-background p-5">
<Button type="submit" disabled={isSubmitting} className="w-full gap-2 sm:w-auto">
<Button variant="default" effect="shine" type="submit" disabled={isSubmitting} className="w-full gap-2 sm:w-auto">
{isSubmitting ? "Kaydediliyor" : mode === "create" ? "Kaydı ekle" : "Değişiklikleri kaydet"}
</Button>
</DialogFooter>
@@ -320,21 +317,18 @@ function DailyLogFormFields({ log }: { log?: DailyLogItem }) {
label="Mood skoru"
value={moodScore}
onChange={setMoodScore}
tone="primary"
/>
<ScorePicker
name="energy_score"
label="Enerji skoru"
value={energyScore}
onChange={setEnergyScore}
tone="green"
/>
<ScorePicker
name="work_satisfaction_score"
label="Çalışma memnuniyeti"
value={satisfactionScore}
onChange={setSatisfactionScore}
tone="blue"
/>
<div className="grid gap-2">
@@ -355,13 +349,11 @@ function ScorePicker({
label,
value,
onChange,
tone,
}: {
name: string;
label: string;
value: number;
onChange: (value: number) => void;
tone: "primary" | "green" | "blue";
}) {
return (
<div className="grid gap-2">
@@ -372,18 +364,15 @@ function ScorePicker({
<input type="hidden" name={name} value={value} />
<div className="grid grid-cols-5 gap-2">
{[1, 2, 3, 4, 5].map((score) => (
<button
<Button
effect="shine"
key={score}
type="button"
variant={value === score ? "default" : "secondary"}
onClick={() => onChange(score)}
className={`h-10 rounded-sm border text-sm font-semibold transition-colors ${
value === score
? getScoreActiveClass(tone)
: "border-border bg-background text-muted-foreground hover:border-primary/40"
}`}
>
{score}
</button>
</Button>
))}
</div>
</div>
@@ -446,12 +435,6 @@ function average(values: number[]) {
return values.reduce((sum, value) => sum + value, 0) / values.length;
}
function getScoreActiveClass(tone: "primary" | "green" | "blue") {
if (tone === "green") return "border-emerald-600 bg-emerald-600 text-white";
if (tone === "blue") return "border-blue-600 bg-blue-600 text-white";
return "border-primary bg-primary text-primary-foreground";
}
function formatDate(value: string) {
return new Intl.DateTimeFormat("tr-TR", {
day: "2-digit",