prjct-cli 0.18.2 → 0.20.0

package/packages/web/components/WeeklyReports/WeekCalendar.tsx

@@ -1,288 +0,0 @@
-'use client'
-
-import { useRef, useEffect, useState } from 'react'
-import { ChevronLeft, ChevronRight } from 'lucide-react'
-import { cn } from '@/lib/utils'
-import { getCurrentYearWeek, getWeekDateRange, formatDateRange } from '@/lib/generate-week-report'
-
-export type ActivityLevel = 'none' | 'low' | 'medium' | 'high'
-
-interface WeekCalendarProps {
-  year: number
-  selectedWeeks: number[]
-  activityLevels: Map<number, ActivityLevel>
-  onWeekSelect: (weeks: number[]) => void
-  onYearChange: (year: number) => void
-}
-
-const DAYS = ['M', 'T', 'W', 'T', 'F'] // Mon-Fri
-
-export function WeekCalendar({
-  year,
-  selectedWeeks,
-  activityLevels,
-  onWeekSelect,
-  onYearChange,
-}: WeekCalendarProps) {
-  const { year: currentYear, week: currentWeek } = getCurrentYearWeek()
-  const isCurrentYear = year === currentYear
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const [canScrollLeft, setCanScrollLeft] = useState(false)
-  const [canScrollRight, setCanScrollRight] = useState(true)
-
-  // Generate 52 weeks
-  const weeks = Array.from({ length: 52 }, (_, i) => i + 1)
-
-  // Drag to scroll state
-  const [isDragging, setIsDragging] = useState(false)
-  const [startX, setStartX] = useState(0)
-  const [scrollLeftStart, setScrollLeftStart] = useState(0)
-  const [hasMoved, setHasMoved] = useState(false)
-
-  // Handle mouse down - start potential drag
-  const handleMouseDown = (e: React.MouseEvent) => {
-    if (!scrollRef.current) return
-    setIsDragging(true)
-    setStartX(e.pageX)
-    setScrollLeftStart(scrollRef.current.scrollLeft)
-    setHasMoved(false)
-  }
-
-  // Handle mouse move - scroll if dragging
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isDragging || !scrollRef.current) return
-
-    const diff = e.pageX - startX
-    // Only count as drag if moved more than 5px
-    if (Math.abs(diff) > 5) {
-      setHasMoved(true)
-      e.preventDefault()
-      scrollRef.current.scrollLeft = scrollLeftStart - diff
-    }
-  }
-
-  // Handle mouse up - end drag
-  const handleMouseUp = () => {
-    setIsDragging(false)
-  }
-
-  // Handle week click (only if not dragging)
-  const handleWeekClick = (week: number, e: React.MouseEvent) => {
-    // Ignore click if we were dragging
-    if (hasMoved) {
-      e.preventDefault()
-      return
-    }
-
-    const isFuture = isCurrentYear && week > currentWeek
-    if (isFuture) return
-
-    if (selectedWeeks.includes(week)) {
-      onWeekSelect(selectedWeeks.filter(w => w !== week))
-    } else {
-      onWeekSelect([...selectedWeeks, week].sort((a, b) => a - b))
-    }
-  }
-
-  // Check scroll state
-  const updateScrollState = () => {
-    if (scrollRef.current) {
-      const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current
-      setCanScrollLeft(scrollLeft > 0)
-      setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10)
-    }
-  }
-
-  useEffect(() => {
-    updateScrollState()
-    // Scroll to current week on mount
-    if (scrollRef.current && isCurrentYear) {
-      const weekElement = scrollRef.current.querySelector(`[data-week="${currentWeek}"]`)
-      if (weekElement) {
-        weekElement.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' })
-      }
-    }
-  }, [currentWeek, isCurrentYear])
-
-  const scroll = (direction: 'left' | 'right') => {
-    if (scrollRef.current) {
-      const scrollAmount = 400
-      scrollRef.current.scrollBy({
-        left: direction === 'left' ? -scrollAmount : scrollAmount,
-        behavior: 'smooth'
-      })
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Year header */}
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-2">
-          <button
-            onClick={() => onYearChange(year - 1)}
-            className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </button>
-
-          <span className="text-4xl font-bold tabular-nums">{year}</span>
-
-          <button
-            onClick={() => onYearChange(year + 1)}
-            disabled={year >= currentYear}
-            className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
-          >
-            <ChevronRight className="h-4 w-4" />
-          </button>
-        </div>
-
-        <span className="text-sm text-muted-foreground">
-          {selectedWeeks.length === 0
-            ? 'Select weeks'
-            : selectedWeeks.length === 1
-              ? `W${selectedWeeks[0]}`
-              : `${selectedWeeks.length} wks`
-          }
-        </span>
-      </div>
-
-      {/* Horizontal week strip */}
-      <div className="relative -mx-2">
-        {/* Scroll buttons */}
-        {canScrollLeft && (
-          <button
-            onClick={() => scroll('left')}
-            className="absolute left-0 top-1/2 -translate-y-1/2 z-10 p-2 bg-background/80 backdrop-blur rounded-full shadow-lg border hover:bg-muted transition-colors"
-          >
-            <ChevronLeft className="h-4 w-4" />
-          </button>
-        )}
-        {canScrollRight && (
-          <button
-            onClick={() => scroll('right')}
-            className="absolute right-0 top-1/2 -translate-y-1/2 z-10 p-2 bg-background/80 backdrop-blur rounded-full shadow-lg border hover:bg-muted transition-colors"
-          >
-            <ChevronRight className="h-4 w-4" />
-          </button>
-        )}
-
-        {/* Scrollable week cards - drag to scroll */}
-        <div
-          ref={scrollRef}
-          onScroll={updateScrollState}
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseUp}
-          className={cn(
-            'flex gap-3 overflow-x-auto scrollbar-hide py-2 px-2',
-            isDragging && hasMoved ? 'cursor-grabbing' : 'cursor-grab'
-          )}
-          style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
-        >
-          {weeks.map((week) => {
-            const isSelected = selectedWeeks.includes(week)
-            const isCurrent = isCurrentYear && week === currentWeek
-            const activityLevel = activityLevels.get(week) ?? 'none'
-            const isFuture = isCurrentYear && week > currentWeek
-            const { start, end } = getWeekDateRange(year, week)
-
-            // Get month name
-            const monthName = start.toLocaleDateString('en-US', { month: 'short' })
-            const dayStart = start.getDate()
-            const dayEnd = end.getDate()
-
-            return (
-              <div
-                key={week}
-                data-week={week}
-                onClick={(e) => handleWeekClick(week, e)}
-                className={cn(
-                  'flex-shrink-0 w-28 rounded-2xl transition-all duration-200 select-none',
-                  'flex flex-col overflow-hidden',
-                  'border',
-                  isFuture && 'opacity-30',
-                  // Selected state
-                  isSelected
-                    ? 'bg-foreground text-background border-foreground shadow-lg scale-105'
-                    : 'bg-card hover:bg-muted border-border',
-                  isCurrent && !isSelected && 'ring-2 ring-primary ring-offset-2 ring-offset-background',
-                )}
-              >
-                {/* Week header */}
-                <div className={cn(
-                  'px-3 py-2 text-left border-b',
-                  isSelected ? 'border-background/20' : 'border-border'
-                )}>
-                  <div className="flex items-baseline gap-0.5">
-                    <span className={cn(
-                      'text-xs font-medium',
-                      isSelected ? 'text-background/60' : 'text-muted-foreground'
-                    )}>
-                      W
-                    </span>
-                    <span className="text-2xl font-bold tabular-nums">{week}</span>
-                  </div>
-                  <p className={cn(
-                    'text-xs mt-0.5',
-                    isSelected ? 'text-background/70' : 'text-muted-foreground'
-                  )}>
-                    {monthName} {dayStart}-{dayEnd}
-                  </p>
-                </div>
-
-                {/* Days grid - Mon to Fri with GitHub-style activity levels */}
-                <div className="px-3 py-2">
-                  <div className="flex justify-between gap-1">
-                    {DAYS.map((day, i) => {
-                      // Generate activity level per day based on week activity
-                      // This simulates varying activity levels across the week
-                      let dayActivityLevel: 0 | 1 | 2 | 3 | 4 = 0
-
-                      if (activityLevel === 'high') {
-                        // High activity: most days are 3-4
-                        dayActivityLevel = [4, 3, 4, 3, 2][i] as 0 | 1 | 2 | 3 | 4
-                      } else if (activityLevel === 'medium') {
-                        // Medium: mix of 2-3
-                        dayActivityLevel = [2, 3, 2, 1, 2][i] as 0 | 1 | 2 | 3 | 4
-                      } else if (activityLevel === 'low') {
-                        // Low: mostly 0-1
-                        dayActivityLevel = [1, 0, 1, 0, 0][i] as 0 | 1 | 2 | 3 | 4
-                      }
-
-                      // GitHub-style green gradients
-                      const activityColors = {
-                        0: isSelected ? 'bg-background/10' : 'bg-muted',
-                        1: isSelected ? 'bg-background/30' : 'bg-emerald-500/30',
-                        2: isSelected ? 'bg-background/50' : 'bg-emerald-500/50',
-                        3: isSelected ? 'bg-background/75' : 'bg-emerald-500/75',
-                        4: isSelected ? 'bg-background' : 'bg-emerald-500',
-                      }
-
-                      return (
-                        <div key={i} className="flex flex-col items-center gap-1">
-                          <span className={cn(
-                            'text-[10px] font-medium',
-                            isSelected ? 'text-background/50' : 'text-muted-foreground'
-                          )}>
-                            {day}
-                          </span>
-                          <div className={cn(
-                            'w-3 h-3 rounded-sm',
-                            activityColors[dayActivityLevel]
-                          )} />
-                        </div>
-                      )
-                    })}
-                  </div>
-                </div>
-              </div>
-            )
-          })}
-        </div>
-      </div>
-
-    </div>
-  )
-}

package/packages/web/components/WeeklyReports/WeeklyReports.tsx

@@ -1,149 +0,0 @@
-'use client'
-
-import { useState, useMemo } from 'react'
-import { useParams } from 'next/navigation'
-import Link from 'next/link'
-import { RotateCcw, Copy, Check, Printer } from 'lucide-react'
-import { WeekCalendar, type ActivityLevel } from './WeekCalendar'
-import { ReportPreviewCard } from './ReportPreviewCard'
-import {
-  getCurrentYearWeek,
-  filterDataByWeek,
-  generateReportText,
-  getWeekActivityLevel,
-} from '@/lib/generate-week-report'
-import type { StatsResult } from '@/lib/services/stats.server'
-import { cn } from '@/lib/utils'
-
-interface WeeklyReportsProps {
-  stats: StatsResult
-  projectName: string
-}
-
-export function WeeklyReports({ stats, projectName }: WeeklyReportsProps) {
-  const params = useParams()
-  const projectId = params.id as string
-  const { year: currentYear, week: currentWeek } = getCurrentYearWeek()
-
-  const [year, setYear] = useState(currentYear)
-  const [selectedWeeks, setSelectedWeeks] = useState<number[]>([currentWeek])
-  const [copied, setCopied] = useState(false)
-
-  // Build print URL with selected weeks
-  const printUrl = `/project/${projectId}/reports/print?weeks=${selectedWeeks.join(',')}&year=${year}`
-
-  const activityLevels = useMemo(() => {
-    const levels = new Map<number, ActivityLevel>()
-    for (let w = 1; w <= 52; w++) {
-      levels.set(w, getWeekActivityLevel(stats, year, w))
-    }
-    return levels
-  }, [stats, year])
-
-  const handleReset = () => {
-    setYear(currentYear)
-    setSelectedWeeks([currentWeek])
-  }
-
-  const weekDataList = useMemo(() => {
-    return selectedWeeks.map(w => filterDataByWeek(stats, year, w))
-  }, [stats, year, selectedWeeks])
-
-  const reportText = useMemo(() => {
-    if (weekDataList.length === 0) return ''
-    return generateReportText(weekDataList, projectName)
-  }, [weekDataList, projectName])
-
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(reportText)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch (err) {
-      console.error('Failed to copy:', err)
-    }
-  }
-
-  return (
-    <div className="space-y-6">
-      {/* Calendar */}
-      <div className="relative overflow-hidden rounded-xl border bg-card p-6">
-        <WeekCalendar
-          year={year}
-          selectedWeeks={selectedWeeks}
-          activityLevels={activityLevels}
-          onWeekSelect={setSelectedWeeks}
-          onYearChange={setYear}
-        />
-
-        {/* Actions */}
-        <div className="flex items-center justify-between mt-6 pt-4 border-t">
-          <button
-            onClick={handleReset}
-            className="inline-flex items-center gap-2 px-3 py-2 text-sm text-muted-foreground hover:text-foreground hover:bg-muted rounded-lg transition-colors"
-          >
-            <RotateCcw className="h-4 w-4" />
-            Reset
-          </button>
-
-          <div className="flex items-center gap-2">
-            <Link
-              href={printUrl}
-              target="_blank"
-              className={cn(
-                'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all',
-                'border border-foreground/20 text-foreground hover:bg-muted',
-                selectedWeeks.length === 0 && 'opacity-50 pointer-events-none'
-              )}
-            >
-              <Printer className="h-4 w-4" />
-              Print / PDF
-            </Link>
-
-            <button
-              onClick={handleCopy}
-              disabled={selectedWeeks.length === 0}
-              className={cn(
-                'inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-all',
-                copied
-                  ? 'bg-emerald-500 text-white'
-                  : 'bg-foreground text-background hover:bg-foreground/90',
-                selectedWeeks.length === 0 && 'opacity-50 cursor-not-allowed'
-              )}
-            >
-              {copied ? (
-                <>
-                  <Check className="h-4 w-4" />
-                  Copied!
-                </>
-              ) : (
-                <>
-                  <Copy className="h-4 w-4" />
-                  Copy
-                </>
-              )}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      {/* Report Preview Card */}
-      <ReportPreviewCard weekData={weekDataList} />
-
-      {/* Copy Text Preview (collapsed) */}
-      {selectedWeeks.length > 0 && reportText && (
-        <details className="group">
-          <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground flex items-center gap-2">
-            <span className="group-open:rotate-90 transition-transform">▶</span>
-            View copy text
-          </summary>
-          <div className="mt-3 relative overflow-hidden rounded-xl border bg-muted/30 p-4">
-            <pre className="whitespace-pre-wrap text-sm font-mono text-muted-foreground">
-              {reportText}
-            </pre>
-          </div>
-        </details>
-      )}
-    </div>
-  )
-}

package/packages/web/components/WeeklyReports/index.ts

@@ -1,4 +0,0 @@
-export { WeeklyReports } from './WeeklyReports'
-export { WeekCalendar } from './WeekCalendar'
-export { ReportPreviewCard } from './ReportPreviewCard'
-export { PrintableReport } from './PrintableReport'

package/packages/web/components/WeeklySparkline/WeeklySparkline.tsx

@@ -1,25 +0,0 @@
-'use client'
-
-import { SparklineChart } from '@/components/SparklineChart'
-import type { WeeklySparklineProps } from './WeeklySparkline.types'
-
-const sizeConfig = {
-  sm: { width: 'w-full', height: 32 },
-  md: { width: 'w-full', height: 40 },
-  lg: { width: 'w-full', height: 56 },
-}
-
-export function WeeklySparkline({ data, size = 'md' }: WeeklySparklineProps) {
-  const config = sizeConfig[size]
-
-  return (
-    <div className={`${config.width} min-w-0`}>
-      <p className="text-xs uppercase tracking-wider text-muted-foreground mb-1 md:text-right">
-        7-day activity
-      </p>
-      <div className="w-full min-w-0 overflow-hidden">
-        <SparklineChart data={data} height={config.height} />
-      </div>
-    </div>
-  )
-}

package/packages/web/components/WeeklySparkline/WeeklySparkline.types.ts

@@ -1,4 +0,0 @@
-export interface WeeklySparklineProps {
-  data: number[]
-  size?: 'sm' | 'md' | 'lg'
-}

package/packages/web/components/WeeklySparkline/index.ts

@@ -1,2 +0,0 @@
-export { WeeklySparkline } from './WeeklySparkline'
-export type { WeeklySparklineProps } from './WeeklySparkline.types'

package/packages/web/components/charts/SessionsChart.tsx

@@ -1,175 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts'
-import { useQuery } from '@tanstack/react-query'
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from '@/components/ui/card'
-import {
-  ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from '@/components/ui/chart'
-
-const chartConfig = {
-  views: {
-    label: 'Activity',
-  },
-  tasks: {
-    label: 'Tasks Completed',
-    color: 'var(--chart-1)',
-  },
-  ships: {
-    label: 'Features Shipped',
-    color: 'var(--chart-2)',
-  },
-} satisfies ChartConfig
-
-interface ChartDataPoint {
-  date: string
-  tasks: number
-  ships: number
-}
-
-interface SessionsHistoryResponse {
-  success: boolean
-  data: {
-    chartData: ChartDataPoint[]
-    totals: {
-      tasks: number
-      ships: number
-    }
-    dateRange: {
-      start: string
-      end: string
-    }
-  }
-}
-
-export function SessionsChart() {
-  const [activeChart, setActiveChart] =
-    React.useState<'tasks' | 'ships'>('tasks')
-
-  const { data: response, isLoading } = useQuery<SessionsHistoryResponse>({
-    queryKey: ['sessions-history'],
-    queryFn: async () => {
-      const res = await fetch('/api/sessions/history')
-      return res.json()
-    },
-  })
-
-  const chartData = response?.data?.chartData || []
-  const totals = response?.data?.totals || { tasks: 0, ships: 0 }
-
-  if (isLoading) {
-    return (
-      <Card>
-        <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
-          <div className="flex flex-1 flex-col justify-center gap-1 px-4 py-3 sm:px-5 sm:py-4">
-            <CardTitle>Session Activity</CardTitle>
-            <CardDescription>Loading...</CardDescription>
-          </div>
-        </CardHeader>
-        <CardContent className="px-2 sm:p-4">
-          <div className="h-[250px] flex items-center justify-center">
-            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary" />
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  return (
-    <Card>
-      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
-        <div className="flex flex-1 flex-col justify-center gap-1 px-4 py-3 sm:px-5 sm:py-4">
-          <CardTitle>Session Activity</CardTitle>
-          <CardDescription>
-            Last 30 days across all projects
-          </CardDescription>
-        </div>
-        <div className="flex">
-          {(['tasks', 'ships'] as const).map((key) => {
-            return (
-              <button
-                key={key}
-                data-active={activeChart === key}
-                className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-4 py-3 text-left even:border-l data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6 sm:py-4"
-                onClick={() => setActiveChart(key)}
-              >
-                <span className="text-xs text-muted-foreground">
-                  {chartConfig[key].label}
-                </span>
-                <span className="text-lg font-bold leading-none sm:text-3xl">
-                  {totals[key].toLocaleString()}
-                </span>
-              </button>
-            )
-          })}
-        </div>
-      </CardHeader>
-      <CardContent className="px-2 sm:p-4">
-        {chartData.length === 0 ? (
-          <div className="h-[250px] flex items-center justify-center text-muted-foreground">
-            No session data yet
-          </div>
-        ) : (
-          <ChartContainer
-            config={chartConfig}
-            className="aspect-auto h-[250px] w-full"
-          >
-            <BarChart
-              accessibilityLayer
-              data={chartData}
-              margin={{
-                left: 12,
-                right: 12,
-              }}
-            >
-              <CartesianGrid vertical={false} />
-              <XAxis
-                dataKey="date"
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                minTickGap={32}
-                tickFormatter={(value: string) => {
-                  const date = new Date(value)
-                  return date.toLocaleDateString('en-US', {
-                    month: 'short',
-                    day: 'numeric',
-                  })
-                }}
-              />
-              <ChartTooltip
-                content={({ active, payload, label }) => (
-                  <ChartTooltipContent
-                    active={active}
-                    payload={payload as Parameters<typeof ChartTooltipContent>[0]['payload']}
-                    label={label as string}
-                    className="w-[150px]"
-                    nameKey="views"
-                    labelFormatter={(value) => {
-                      return new Date(value).toLocaleDateString('en-US', {
-                        month: 'short',
-                        day: 'numeric',
-                        year: 'numeric',
-                      })
-                    }}
-                  />
-                )}
-              />
-              <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
-            </BarChart>
-          </ChartContainer>
-        )}
-      </CardContent>
-    </Card>
-  )
-}