@tuturuuu/ui 0.17.0 → 0.19.0

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

@@ -1,382 +0,0 @@
-'use client';
-
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { BarChart3, Flag, Target, Trophy, Upload } 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 [selectedMetricId, setSelectedMetricId] = useState<string | null>(null);
-  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(
-    () =>
-      metrics.find((metric) => metric.id === selectedMetricId) ??
-      metricOption(metrics),
-    [metrics, selectedMetricId]
-  );
-
-  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
-    : [];
-  const tabs = [
-    { icon: Flag, value: 'progress' },
-    { icon: Target, value: 'goals' },
-    { icon: BarChart3, value: 'stats' },
-    { icon: Trophy, value: 'leaderboards' },
-    { icon: Upload, value: 'import' },
-  ] as const;
-
-  return (
-    <div className="mx-auto flex w-full max-w-[1600px] flex-col gap-6 p-4 md:p-6 lg:p-8">
-      <section className="overflow-hidden rounded-2xl border bg-card/60 shadow-sm backdrop-blur">
-        <div className="flex flex-col gap-4 p-5 md:flex-row md:items-center md:justify-between md:p-6">
-          <div className="max-w-2xl">
-            <h1 className="font-bold text-2xl tracking-tight md:text-3xl">
-              {t('views.progress.title')}
-            </h1>
-            <p className="mt-1 text-muted-foreground text-sm md:text-base">
-              {t(`views.${view}.description`)}
-            </p>
-          </div>
-          <div className="shrink-0">
-            {metrics.length > 0 ? (
-              <label className="flex min-w-56 items-center justify-between gap-3 rounded-xl border bg-background px-3 py-2 text-sm shadow-sm">
-                <span className="text-muted-foreground">
-                  {t('fields.metric_name')}
-                </span>
-                <select
-                  className="min-w-28 bg-transparent text-right font-medium outline-none"
-                  onChange={(event) => setSelectedMetricId(event.target.value)}
-                  value={selectedMetric?.id ?? ''}
-                >
-                  {metrics.map((metric) => (
-                    <option key={metric.id} value={metric.id}>
-                      {metric.name}
-                    </option>
-                  ))}
-                </select>
-              </label>
-            ) : null}
-          </div>
-        </div>
-        <nav className="flex max-w-full gap-1 overflow-x-auto border-t bg-muted/20 p-2">
-          {tabs.map(({ icon: TabIcon, value: tab }) => (
-            <Button
-              key={tab}
-              asChild
-              className="shrink-0 gap-2 rounded-lg"
-              size="sm"
-              variant={tab === view ? 'secondary' : 'ghost'}
-            >
-              <Link
-                href={
-                  tab === 'progress'
-                    ? `/${routeWsId}/progress`
-                    : `/${routeWsId}/progress/${tab}`
-                }
-              >
-                <TabIcon className="size-4" />
-                {t(`tabs.${tab}`)}
-              </Link>
-            </Button>
-          ))}
-        </nav>
-      </section>
-
-      {hasPendingSchema ? (
-        <Card>
-          <CardContent className="py-8 text-sm">
-            {t('schema_unavailable')}
-          </CardContent>
-        </Card>
-      ) : null}
-
-      <div className="grid gap-3 sm:grid-cols-2 xl: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>
-  );
-}

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

@@ -1,303 +0,0 @@
-import type { UseMutationResult } from '@tanstack/react-query';
-import { Plus, Target } 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 { Textarea } from '@tuturuuu/ui/textarea';
-import type { useTranslations } from 'next-intl';
-import type { ReactNode } from 'react';
-
-type Translate = ReturnType<typeof useTranslations>;
-const today = () => new Date().toISOString().slice(0, 10);
-
-export function SummaryCard({
-  icon,
-  label,
-  value,
-}: {
-  icon: ReactNode;
-  label: string;
-  value: number;
-}) {
-  return (
-    <Card className="group overflow-hidden transition-all hover:-translate-y-0.5 hover:shadow-md">
-      <CardHeader className="pb-2">
-        <CardTitle className="flex items-center gap-2 text-muted-foreground text-sm">
-          <span className="flex h-8 w-8 items-center justify-center rounded-lg bg-dynamic-blue/10 text-dynamic-blue transition-transform group-hover:scale-110">
-            {icon}
-          </span>
-          {label}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className="font-bold text-3xl tracking-tight">
-          {Number(value).toLocaleString()}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-
-function MetricSelect({
-  metrics,
-  name = 'metric_id',
-  selectedMetric,
-}: {
-  metrics: TaskProgressMetric[];
-  name?: string;
-  selectedMetric: TaskProgressMetric | null;
-}) {
-  return (
-    <select
-      className="h-11 w-full rounded-xl border bg-background px-3 text-sm shadow-sm outline-none transition focus:border-dynamic-blue focus:ring-2 focus:ring-dynamic-blue/15"
-      defaultValue={selectedMetric?.id}
-      name={name}
-      required
-    >
-      {metrics.map((metric) => (
-        <option key={metric.id} value={metric.id}>
-          {metric.name}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-export function ProgressPanel(props: {
-  createEntryMutation: UseMutationResult<any, unknown, FormData>;
-  createMetricMutation: UseMutationResult<any, unknown, FormData>;
-  entries: any[];
-  metrics: TaskProgressMetric[];
-  selectedMetric: TaskProgressMetric | null;
-  t: Translate;
-}) {
-  const {
-    createEntryMutation,
-    createMetricMutation,
-    entries,
-    metrics,
-    selectedMetric,
-    t,
-  } = props;
-
-  return (
-    <div className="grid gap-4 xl:grid-cols-[minmax(20rem,0.75fr)_minmax(0,1.25fr)]">
-      <Card className="h-fit xl:sticky xl:top-6">
-        <CardHeader>
-          <CardTitle>{t('progress.log_entry')}</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <form
-            className="grid gap-3"
-            onSubmit={(event) => {
-              event.preventDefault();
-              createEntryMutation.mutate(new FormData(event.currentTarget));
-              event.currentTarget.reset();
-            }}
-          >
-            <MetricSelect metrics={metrics} selectedMetric={selectedMetric} />
-            <Input defaultValue={today()} name="entry_date" type="date" />
-            <Input
-              name="value"
-              placeholder={t('fields.value')}
-              required
-              type="number"
-            />
-            <Input name="tags" placeholder={t('fields.tags')} />
-            <Textarea name="note" placeholder={t('fields.note')} />
-            <Button disabled={!selectedMetric || createEntryMutation.isPending}>
-              <Plus className="mr-2 h-4 w-4" />
-              {t('actions.add_entry')}
-            </Button>
-          </form>
-          <form
-            className="mt-6 grid gap-3 border-t pt-4"
-            onSubmit={(event) => {
-              event.preventDefault();
-              createMetricMutation.mutate(new FormData(event.currentTarget));
-              event.currentTarget.reset();
-            }}
-          >
-            <Input name="name" placeholder={t('fields.metric_name')} required />
-            <Input name="unit_label" placeholder={t('fields.unit')} required />
-            <Button disabled={createMetricMutation.isPending} variant="outline">
-              {t('actions.add_metric')}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
-      <Card>
-        <CardHeader>
-          <CardTitle>{t('progress.recent_entries')}</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          {entries.length === 0 ? (
-            <p className="text-muted-foreground text-sm">
-              {t('empty.entries')}
-            </p>
-          ) : (
-            entries.map((entry) => (
-              <div
-                className="flex items-start justify-between gap-3 rounded-xl border bg-background p-4 transition-colors hover:bg-muted/30"
-                key={entry.id}
-              >
-                <div>
-                  <div className="font-medium">{entry.entry_date}</div>
-                  <div className="text-muted-foreground text-sm">
-                    {entry.note || entry.metric?.name}
-                  </div>
-                  <div className="mt-2 flex flex-wrap gap-1">
-                    {(entry.tags ?? []).map((tag: string) => (
-                      <Badge key={tag} variant="secondary">
-                        {tag}
-                      </Badge>
-                    ))}
-                  </div>
-                </div>
-                <div className="text-right font-semibold">
-                  {Number(entry.value).toLocaleString()}{' '}
-                  {entry.metric?.unit_label}
-                </div>
-              </div>
-            ))
-          )}
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
-
-export function GoalsPanel(props: {
-  createGoalMutation: UseMutationResult<any, unknown, FormData>;
-  goals: any[];
-  metrics: TaskProgressMetric[];
-  selectedMetric: TaskProgressMetric | null;
-  t: Translate;
-}) {
-  const { createGoalMutation, goals, metrics, selectedMetric, t } = props;
-
-  return (
-    <div className="grid gap-4 xl:grid-cols-[minmax(20rem,0.75fr)_minmax(0,1.25fr)]">
-      <Card className="h-fit xl:sticky xl:top-6">
-        <CardHeader>
-          <CardTitle>{t('goals.create_goal')}</CardTitle>
-        </CardHeader>
-        <CardContent>
-          <form
-            className="grid gap-3"
-            onSubmit={(event) => {
-              event.preventDefault();
-              createGoalMutation.mutate(new FormData(event.currentTarget));
-              event.currentTarget.reset();
-            }}
-          >
-            <Input name="name" placeholder={t('fields.goal_name')} required />
-            <MetricSelect metrics={metrics} selectedMetric={selectedMetric} />
-            <Input
-              name="target_value"
-              placeholder={t('fields.target')}
-              required
-              type="number"
-            />
-            <Input defaultValue={today()} name="period_start" type="date" />
-            <Input name="period_end" type="date" />
-            <select
-              className="h-11 rounded-xl border bg-background px-3 text-sm shadow-sm outline-none focus:border-dynamic-blue focus:ring-2 focus:ring-dynamic-blue/15"
-              name="goal_type"
-            >
-              <option value="target">{t('goal_types.target')}</option>
-              <option value="habit">{t('goal_types.habit')}</option>
-            </select>
-            <Button disabled={!selectedMetric || createGoalMutation.isPending}>
-              <Target className="mr-2 h-4 w-4" />
-              {t('actions.add_goal')}
-            </Button>
-          </form>
-        </CardContent>
-      </Card>
-      <div className="grid gap-3">
-        {goals.length === 0 ? (
-          <Card>
-            <CardContent className="py-8 text-sm">
-              {t('empty.goals')}
-            </CardContent>
-          </Card>
-        ) : (
-          goals.map((goal) => (
-            <Card key={goal.id}>
-              <CardContent className="space-y-3 py-4">
-                <div className="flex items-start justify-between gap-3">
-                  <div>
-                    <div className="font-semibold">{goal.name}</div>
-                    <div className="text-muted-foreground text-sm">
-                      {goal.period_start}
-                      {goal.period_end ? ` - ${goal.period_end}` : ''}
-                    </div>
-                  </div>
-                  <Badge variant="secondary">{goal.goal_type}</Badge>
-                </div>
-                <div className="h-2 overflow-hidden rounded-full bg-muted">
-                  <div
-                    className="h-full bg-dynamic-green"
-                    style={{
-                      width: `${Math.min(Number(goal.percent ?? 0), 100)}%`,
-                    }}
-                  />
-                </div>
-                <div className="text-muted-foreground text-sm">
-                  {Number(goal.progress ?? 0).toLocaleString()} /{' '}
-                  {Number(goal.target_value ?? 0).toLocaleString()}{' '}
-                  {goal.metric?.unit_label}
-                </div>
-              </CardContent>
-            </Card>
-          ))
-        )}
-      </div>
-    </div>
-  );
-}
-
-export function StatsPanel({ stats, t }: { stats: any; t: Translate }) {
-  const maxValue = Math.max(
-    ...(stats?.daily ?? []).map((day: any) => day.value),
-    1
-  );
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('stats.daily_progress')}</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {(stats?.daily ?? []).length === 0 ? (
-          <p className="text-muted-foreground text-sm">{t('empty.stats')}</p>
-        ) : (
-          <div className="space-y-2">
-            {stats.daily.slice(-30).map((day: any) => (
-              <div
-                className="grid grid-cols-[6.5rem_1fr_5rem] items-center gap-3"
-                key={day.date}
-              >
-                <div className="text-muted-foreground text-xs">{day.date}</div>
-                <div className="h-2 overflow-hidden rounded-full bg-muted">
-                  <div
-                    className="h-full bg-dynamic-blue"
-                    style={{
-                      width: `${(Number(day.value) / maxValue) * 100}%`,
-                    }}
-                  />
-                </div>
-                <div className="text-right text-sm">
-                  {Number(day.value).toLocaleString()}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </CardContent>
-    </Card>
-  );
-}

package/src/components/ui/tu-do/projects/components/index.ts

@@ -1,11 +0,0 @@
-export {
-  HealthStatusBadge,
-  PriorityBadge,
-  StatusBadge,
-} from './project-badges';
-export { ProjectGridCard } from './project-grid-card';
-export { ProjectListItem } from './project-list-item';
-export { ProjectMetrics } from './project-metrics';
-export { ProjectsEmptyState } from './projects-empty-state';
-export { ProjectsLoadingState } from './projects-loading-state';
-export { ProjectsToolbar } from './projects-toolbar';