@tuturuuu/ui 0.9.0 → 0.10.0

package/src/components/ui/tu-do/progress/task-progress-import-panel.tsx

@@ -0,0 +1,60 @@
+import type { UseMutationResult } from '@tanstack/react-query';
+import { BarChart3, Upload } from '@tuturuuu/icons';
+import { Button } from '@tuturuuu/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';
+import { Textarea } from '@tuturuuu/ui/textarea';
+import type { useTranslations } from 'next-intl';
+
+type Translate = ReturnType<typeof useTranslations>;
+
+export function ImportPanel({
+  importMutation,
+  importPreviewCount,
+  importText,
+  setImportText,
+  t,
+}: {
+  importMutation: UseMutationResult<any, unknown, boolean>;
+  importPreviewCount: number;
+  importText: string;
+  setImportText: (value: string) => void;
+  t: Translate;
+}) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>{t('import.title')}</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <Textarea
+          className="min-h-56 font-mono text-sm"
+          onChange={(event) => setImportText(event.target.value)}
+          placeholder={t('import.placeholder')}
+          value={importText}
+        />
+        <div className="flex flex-wrap items-center justify-between gap-3">
+          <div className="text-muted-foreground text-sm">
+            {t('import.preview_count', { count: importPreviewCount })}
+          </div>
+          <div className="flex gap-2">
+            <Button
+              disabled={!importText.trim() || importMutation.isPending}
+              onClick={() => importMutation.mutate(false)}
+              variant="outline"
+            >
+              <BarChart3 className="mr-2 h-4 w-4" />
+              {t('actions.preview')}
+            </Button>
+            <Button
+              disabled={!importText.trim() || importMutation.isPending}
+              onClick={() => importMutation.mutate(true)}
+            >
+              <Upload className="mr-2 h-4 w-4" />
+              {t('actions.commit_import')}
+            </Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/ui/tu-do/progress/task-progress-leaderboards-panel.tsx

@@ -0,0 +1,156 @@
+import type { UseMutationResult } from '@tanstack/react-query';
+import { Trophy } from '@tuturuuu/icons';
+import type { TaskProgressMetric } from '@tuturuuu/internal-api';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@tuturuuu/ui/card';
+import { Input } from '@tuturuuu/ui/input';
+import type { useTranslations } from 'next-intl';
+
+type Translate = ReturnType<typeof useTranslations>;
+const today = () => new Date().toISOString().slice(0, 10);
+
+function MetricSelect({
+  metrics,
+  selectedMetric,
+}: {
+  metrics: TaskProgressMetric[];
+  selectedMetric: TaskProgressMetric | null;
+}) {
+  return (
+    <select
+      className="h-10 rounded-md border bg-background px-3 text-sm"
+      defaultValue={selectedMetric?.id}
+      name="metric_id"
+      required
+    >
+      {metrics.map((metric) => (
+        <option key={metric.id} value={metric.id}>
+          {metric.name}
+        </option>
+      ))}
+    </select>
+  );
+}
+
+export function LeaderboardsPanel(props: {
+  createLeaderboardMutation: UseMutationResult<any, unknown, FormData>;
+  createTeamMutation: UseMutationResult<
+    any,
+    unknown,
+    { formData: FormData; leaderboardId: string }
+  >;
+  leaderboards: any[];
+  metrics: TaskProgressMetric[];
+  selectedMetric: TaskProgressMetric | null;
+  t: Translate;
+}) {
+  const {
+    createLeaderboardMutation,
+    createTeamMutation,
+    leaderboards,
+    metrics,
+    selectedMetric,
+    t,
+  } = props;
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)]">
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('leaderboards.create_leaderboard')}</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form
+            className="grid gap-3"
+            onSubmit={(event) => {
+              event.preventDefault();
+              createLeaderboardMutation.mutate(
+                new FormData(event.currentTarget)
+              );
+              event.currentTarget.reset();
+            }}
+          >
+            <Input
+              name="name"
+              placeholder={t('fields.leaderboard_name')}
+              required
+            />
+            <MetricSelect metrics={metrics} selectedMetric={selectedMetric} />
+            <Input defaultValue={today()} name="period_start" type="date" />
+            <Input name="period_end" type="date" />
+            <Button
+              disabled={!selectedMetric || createLeaderboardMutation.isPending}
+            >
+              <Trophy className="mr-2 h-4 w-4" />
+              {t('actions.add_leaderboard')}
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+      <div className="grid gap-3">
+        {leaderboards.length === 0 ? (
+          <Card>
+            <CardContent className="py-8 text-sm">
+              {t('empty.leaderboards')}
+            </CardContent>
+          </Card>
+        ) : (
+          leaderboards.map((leaderboard) => (
+            <Card key={leaderboard.id}>
+              <CardContent className="space-y-4 py-4">
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <div className="font-semibold">{leaderboard.name}</div>
+                    <div className="text-muted-foreground text-sm">
+                      {leaderboard.metric?.name} · {leaderboard.join_code}
+                    </div>
+                  </div>
+                  <Badge>{leaderboard.rankings?.length ?? 0}</Badge>
+                </div>
+                <div className="space-y-2">
+                  {(leaderboard.rankings ?? [])
+                    .slice(0, 5)
+                    .map((member: any) => (
+                      <div
+                        className="flex items-center justify-between rounded-md border p-2"
+                        key={member.id}
+                      >
+                        <span>
+                          #{member.rank} {member.display_name || member.user_id}
+                        </span>
+                        <strong>
+                          {Number(member.value ?? 0).toLocaleString()}
+                        </strong>
+                      </div>
+                    ))}
+                </div>
+                <form
+                  className="grid gap-2 border-t pt-3 sm:grid-cols-[1fr_7rem_auto]"
+                  onSubmit={(event) => {
+                    event.preventDefault();
+                    createTeamMutation.mutate({
+                      formData: new FormData(event.currentTarget),
+                      leaderboardId: leaderboard.id,
+                    });
+                    event.currentTarget.reset();
+                  }}
+                >
+                  <Input
+                    name="name"
+                    placeholder={t('fields.team_name')}
+                    required
+                  />
+                  <Input name="color" placeholder={t('fields.color')} />
+                  <Button size="sm" variant="outline">
+                    {t('actions.add_team')}
+                  </Button>
+                </form>
+              </CardContent>
+            </Card>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ui/tu-do/progress/task-progress-page.tsx

@@ -0,0 +1,348 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { BarChart3, Flag, Target, TrendingUp, Trophy } from '@tuturuuu/icons';
+import {
+  createTaskLeaderboard,
+  createTaskLeaderboardTeam,
+  createTaskProgressEntry,
+  createTaskProgressGoal,
+  createTaskProgressMetric,
+  getTaskProgressStats,
+  importTaskProgressEntries,
+  isTaskProgressSchemaUnavailable,
+  listTaskLeaderboards,
+  listTaskProgressEntries,
+  listTaskProgressGoals,
+  listTaskProgressMetrics,
+  type TaskProgressMetric,
+} from '@tuturuuu/internal-api';
+import { Button } from '@tuturuuu/ui/button';
+import { Card, CardContent } from '@tuturuuu/ui/card';
+import { toast } from '@tuturuuu/ui/sonner';
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { ImportPanel } from './task-progress-import-panel';
+import { LeaderboardsPanel } from './task-progress-leaderboards-panel';
+import {
+  GoalsPanel,
+  ProgressPanel,
+  StatsPanel,
+  SummaryCard,
+} from './task-progress-panels';
+
+export type TaskProgressView =
+  | 'progress'
+  | 'goals'
+  | 'stats'
+  | 'leaderboards'
+  | 'import';
+
+interface TaskProgressPageProps {
+  routeWsId: string;
+  view: TaskProgressView;
+  wsId: string;
+}
+
+const today = () => new Date().toISOString().slice(0, 10);
+
+function metricOption(metrics: TaskProgressMetric[]) {
+  return metrics.find((metric) => metric.is_default) ?? metrics[0] ?? null;
+}
+
+function parseImportRows(text: string, metrics: TaskProgressMetric[]) {
+  const metricByName = new Map(
+    metrics.map((metric) => [metric.name.trim().toLowerCase(), metric])
+  );
+  const fallbackMetric = metricOption(metrics);
+
+  return text
+    .split(/\r?\n/u)
+    .map((line) => line.trim())
+    .filter(Boolean)
+    .map((line) => {
+      const [entry_date, rawValue, metricName, rawTags, note] = line
+        .split(',')
+        .map((part) => part.trim());
+      const metric =
+        (metricName ? metricByName.get(metricName.toLowerCase()) : null) ??
+        fallbackMetric;
+
+      if (!metric) throw new Error('missing_metric');
+
+      return {
+        entry_date: entry_date || today(),
+        metric_id: metric.id,
+        value: Number(rawValue || 0),
+        tags: rawTags
+          ? rawTags
+              .split('|')
+              .map((tag) => tag.trim())
+              .filter(Boolean)
+          : [],
+        note: note || null,
+      };
+    });
+}
+
+export function TaskProgressPage({
+  routeWsId,
+  view,
+  wsId,
+}: TaskProgressPageProps) {
+  const t = useTranslations('task-progress');
+  const queryClient = useQueryClient();
+  const [importText, setImportText] = useState('');
+  const [importPreviewCount, setImportPreviewCount] = useState(0);
+  const queryRoot = ['task-progress', wsId];
+
+  const metricsQuery = useQuery({
+    queryKey: [...queryRoot, 'metrics'],
+    queryFn: () => listTaskProgressMetrics(wsId),
+  });
+  const metrics =
+    metricsQuery.data?.ok === true ? metricsQuery.data.metrics : [];
+  const selectedMetric = useMemo(() => metricOption(metrics), [metrics]);
+
+  const entriesQuery = useQuery({
+    queryKey: [...queryRoot, 'entries', selectedMetric?.id],
+    queryFn: () =>
+      listTaskProgressEntries(wsId, {
+        metric_id: selectedMetric?.id,
+        pageSize: 25,
+      }),
+    enabled: metrics.length > 0,
+  });
+  const goalsQuery = useQuery({
+    queryKey: [...queryRoot, 'goals'],
+    queryFn: () => listTaskProgressGoals(wsId, { status: 'active' }),
+  });
+  const statsQuery = useQuery({
+    queryKey: [...queryRoot, 'stats', selectedMetric?.id],
+    queryFn: () =>
+      getTaskProgressStats(wsId, { metric_id: selectedMetric?.id }),
+    enabled: metrics.length > 0,
+  });
+  const leaderboardsQuery = useQuery({
+    queryKey: [...queryRoot, 'leaderboards'],
+    queryFn: () => listTaskLeaderboards(wsId, { status: 'active' }),
+  });
+
+  const invalidateProgress = () =>
+    queryClient.invalidateQueries({ queryKey: queryRoot });
+
+  const createMetricMutation = useMutation({
+    mutationFn: (formData: FormData) =>
+      createTaskProgressMetric(wsId, {
+        name: String(formData.get('name') ?? ''),
+        unit_label: String(formData.get('unit_label') ?? ''),
+        unit_kind: 'custom',
+      }),
+    onSuccess: () => {
+      toast.success(t('toast.metric_created'));
+      invalidateProgress();
+    },
+  });
+  const createEntryMutation = useMutation({
+    mutationFn: (formData: FormData) =>
+      createTaskProgressEntry(wsId, {
+        metric_id: String(formData.get('metric_id') ?? ''),
+        entry_date: String(formData.get('entry_date') ?? today()),
+        value: Number(formData.get('value') ?? 0),
+        tags: String(formData.get('tags') ?? '')
+          .split(',')
+          .map((tag) => tag.trim())
+          .filter(Boolean),
+        note: String(formData.get('note') ?? '') || null,
+      }),
+    onSuccess: () => {
+      toast.success(t('toast.entry_created'));
+      invalidateProgress();
+    },
+  });
+  const createGoalMutation = useMutation({
+    mutationFn: (formData: FormData) =>
+      createTaskProgressGoal(wsId, {
+        metric_id: String(formData.get('metric_id') ?? ''),
+        name: String(formData.get('name') ?? ''),
+        target_value: Number(formData.get('target_value') ?? 0),
+        period_start: String(formData.get('period_start') ?? today()),
+        period_end: String(formData.get('period_end') || '') || null,
+        goal_type:
+          String(formData.get('goal_type')) === 'habit' ? 'habit' : 'target',
+      }),
+    onSuccess: () => {
+      toast.success(t('toast.goal_created'));
+      invalidateProgress();
+    },
+  });
+  const createLeaderboardMutation = useMutation({
+    mutationFn: (formData: FormData) =>
+      createTaskLeaderboard(wsId, {
+        metric_id: String(formData.get('metric_id') ?? ''),
+        name: String(formData.get('name') ?? ''),
+        period_start: String(formData.get('period_start') ?? today()),
+        period_end: String(formData.get('period_end') || '') || null,
+      }),
+    onSuccess: () => {
+      toast.success(t('toast.leaderboard_created'));
+      invalidateProgress();
+    },
+  });
+  const createTeamMutation = useMutation({
+    mutationFn: ({
+      formData,
+      leaderboardId,
+    }: {
+      formData: FormData;
+      leaderboardId: string;
+    }) =>
+      createTaskLeaderboardTeam(wsId, leaderboardId, {
+        name: String(formData.get('name') ?? ''),
+        color: String(formData.get('color') || '') || null,
+      }),
+    onSuccess: () => {
+      toast.success(t('toast.team_created'));
+      invalidateProgress();
+    },
+  });
+  const importMutation = useMutation({
+    mutationFn: (commit: boolean) =>
+      importTaskProgressEntries(wsId, {
+        commit,
+        entries: parseImportRows(importText, metrics),
+      }),
+    onSuccess: (response) => {
+      if (response.ok) {
+        setImportPreviewCount(response.summary.entriesCount);
+        toast.success(
+          response.committed
+            ? t('toast.import_committed')
+            : t('toast.import_previewed')
+        );
+      }
+      invalidateProgress();
+    },
+    onError: () => toast.error(t('toast.import_failed')),
+  });
+
+  const hasPendingSchema =
+    isTaskProgressSchemaUnavailable(metricsQuery.data) ||
+    isTaskProgressSchemaUnavailable(statsQuery.data);
+  const entries = entriesQuery.data?.ok ? entriesQuery.data.entries : [];
+  const goals = goalsQuery.data?.ok ? goalsQuery.data.goals : [];
+  const stats = statsQuery.data?.ok ? statsQuery.data : null;
+  const leaderboards = leaderboardsQuery.data?.ok
+    ? leaderboardsQuery.data.leaderboards
+    : [];
+
+  return (
+    <div className="flex flex-col gap-6 p-4 md:p-6">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+        <div className="space-y-2">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-dynamic-blue/10 ring-1 ring-dynamic-blue/20">
+              <TrendingUp className="h-5 w-5 text-dynamic-blue" />
+            </div>
+            <div>
+              <h1 className="font-bold text-2xl tracking-tight">
+                {t(`views.${view}.title`)}
+              </h1>
+              <p className="text-muted-foreground text-sm">
+                {t(`views.${view}.description`)}
+              </p>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-wrap gap-2">
+          {(
+            ['progress', 'goals', 'stats', 'leaderboards', 'import'] as const
+          ).map((tab) => (
+            <Button
+              key={tab}
+              asChild
+              size="sm"
+              variant={tab === view ? 'default' : 'outline'}
+            >
+              <Link href={`/${routeWsId}/tasks/${tab}`}>
+                {t(`tabs.${tab}`)}
+              </Link>
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      {hasPendingSchema ? (
+        <Card>
+          <CardContent className="py-8 text-sm">
+            {t('schema_unavailable')}
+          </CardContent>
+        </Card>
+      ) : null}
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <SummaryCard
+          icon={<BarChart3 className="h-4 w-4" />}
+          label={t('summary.total')}
+          value={stats?.summary.total ?? 0}
+        />
+        <SummaryCard
+          icon={<Flag className="h-4 w-4" />}
+          label={t('summary.entries')}
+          value={stats?.summary.entriesCount ?? entries.length}
+        />
+        <SummaryCard
+          icon={<Target className="h-4 w-4" />}
+          label={t('summary.goals')}
+          value={goals.length}
+        />
+        <SummaryCard
+          icon={<Trophy className="h-4 w-4" />}
+          label={t('summary.streak')}
+          value={stats?.summary.currentStreak ?? 0}
+        />
+      </div>
+
+      {view === 'progress' ? (
+        <ProgressPanel
+          createEntryMutation={createEntryMutation}
+          createMetricMutation={createMetricMutation}
+          entries={entries}
+          metrics={metrics}
+          selectedMetric={selectedMetric}
+          t={t}
+        />
+      ) : null}
+      {view === 'goals' ? (
+        <GoalsPanel
+          createGoalMutation={createGoalMutation}
+          goals={goals}
+          metrics={metrics}
+          selectedMetric={selectedMetric}
+          t={t}
+        />
+      ) : null}
+      {view === 'stats' ? <StatsPanel stats={stats} t={t} /> : null}
+      {view === 'leaderboards' ? (
+        <LeaderboardsPanel
+          createLeaderboardMutation={createLeaderboardMutation}
+          createTeamMutation={createTeamMutation}
+          leaderboards={leaderboards}
+          metrics={metrics}
+          selectedMetric={selectedMetric}
+          t={t}
+        />
+      ) : null}
+      {view === 'import' ? (
+        <ImportPanel
+          importMutation={importMutation}
+          importPreviewCount={importPreviewCount}
+          importText={importText}
+          setImportText={setImportText}
+          t={t}
+        />
+      ) : null}
+    </div>
+  );
+}