prjct-cli 0.13.3 → 0.15.0

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

@@ -0,0 +1,187 @@
+'use client'
+
+import { Rocket, CheckCircle2, Bug, Activity } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { formatDateRange } from '@/lib/generate-week-report'
+import type { WeekData } from '@/lib/generate-week-report'
+
+interface ReportPreviewCardProps {
+  weekData: WeekData[]
+  className?: string
+}
+
+export function ReportPreviewCard({ weekData, className }: ReportPreviewCardProps) {
+  if (weekData.length === 0) {
+    return (
+      <div className={cn('rounded-xl border bg-card p-6', className)}>
+        <p className="text-muted-foreground text-center">Select a week to preview</p>
+      </div>
+    )
+  }
+
+  // Aggregate data from all selected weeks
+  const allShipped = weekData.flatMap(w => w.shipped)
+  const uniqueShipsMap = new Map<string, typeof allShipped[0]>()
+  for (const ship of allShipped) {
+    if (!uniqueShipsMap.has(ship.name)) {
+      uniqueShipsMap.set(ship.name, ship)
+    }
+  }
+  // Sort by date descending (most recent first)
+  const uniqueShips = Array.from(uniqueShipsMap.values())
+    .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+
+  // Group ships by date for display
+  const shipsByDate = new Map<string, typeof uniqueShips>()
+  for (const ship of uniqueShips) {
+    const dateKey = ship.date
+    if (!shipsByDate.has(dateKey)) {
+      shipsByDate.set(dateKey, [])
+    }
+    shipsByDate.get(dateKey)!.push(ship)
+  }
+
+  const totalTasks = weekData.reduce((sum, w) => sum + w.tasksCompleted, 0)
+  const totalBugs = weekData.reduce((sum, w) => sum + w.bugsFixed, 0)
+  const totalSyncs = weekData.reduce((sum, w) => sum + w.syncs, 0)
+  const totalDays = weekData.reduce((sum, w) => sum + w.activeDays, 0)
+
+  // Date range header
+  const firstWeek = weekData[0]
+  const lastWeek = weekData[weekData.length - 1]
+  const dateRangeStr = weekData.length === 1
+    ? `Week ${firstWeek.week} · ${formatDateRange(firstWeek.startDate, firstWeek.endDate)}`
+    : `Weeks ${firstWeek.week}-${lastWeek.week} · ${formatDateRange(firstWeek.startDate, lastWeek.endDate)}`
+
+  const hasNoData = uniqueShips.length === 0 && totalTasks === 0 && totalBugs === 0 && totalDays === 0
+
+  return (
+    <div className={cn('rounded-xl border bg-card overflow-hidden', className)}>
+      {/* Header */}
+      <div className="px-6 py-4 border-b bg-muted/30">
+        <h3 className="font-semibold text-lg">{dateRangeStr}</h3>
+      </div>
+
+      {hasNoData ? (
+        <div className="p-6">
+          <p className="text-muted-foreground text-center">No activity this week</p>
+        </div>
+      ) : (
+        <div className="p-6 space-y-6">
+          {/* Stats row */}
+          <div className="grid grid-cols-4 gap-4">
+            <StatCard
+              icon={Rocket}
+              value={uniqueShips.length}
+              label="shipped"
+              color="text-foreground"
+              bgColor="bg-muted"
+            />
+            <StatCard
+              icon={CheckCircle2}
+              value={totalTasks}
+              label="tasks"
+              color="text-foreground"
+              bgColor="bg-muted"
+            />
+            <StatCard
+              icon={Bug}
+              value={totalBugs}
+              label="bugs"
+              color="text-foreground"
+              bgColor="bg-muted"
+            />
+            <StatCard
+              icon={Activity}
+              value={totalDays}
+              label="days"
+              color="text-foreground"
+              bgColor="bg-muted"
+            />
+          </div>
+
+          {/* Shipped list grouped by date */}
+          {uniqueShips.length > 0 && (
+            <div>
+              <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+                Shipped
+              </h4>
+              <div className="space-y-4">
+                {Array.from(shipsByDate.entries()).map(([date, ships]) => (
+                  <div key={date}>
+                    <p className="text-xs text-muted-foreground mb-2">
+                      {new Date(date).toLocaleDateString('es-MX', {
+                        weekday: 'short',
+                        month: 'short',
+                        day: 'numeric'
+                      })}
+                    </p>
+                    <ul className="space-y-1.5 pl-2 border-l-2 border-muted-foreground/30">
+                      {ships.map((ship, i) => (
+                        <li key={i} className="flex items-start gap-2 pl-2">
+                          <span className="flex-1">
+                            {ship.name}
+                            {ship.version && (
+                              <span className="text-muted-foreground ml-1 text-sm">({ship.version})</span>
+                            )}
+                          </span>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Activity summary */}
+          {(totalTasks > 0 || totalBugs > 0 || totalSyncs > 0) && (
+            <div>
+              <h4 className="text-xs font-medium text-muted-foreground uppercase tracking-wider mb-3">
+                Activity
+              </h4>
+              <ul className="space-y-1 text-sm text-muted-foreground">
+                {totalTasks > 0 && (
+                  <li className="flex items-center gap-2">
+                    <CheckCircle2 className="h-3.5 w-3.5 text-muted-foreground" />
+                    {totalTasks} task{totalTasks !== 1 ? 's' : ''} completed
+                  </li>
+                )}
+                {totalBugs > 0 && (
+                  <li className="flex items-center gap-2">
+                    <Bug className="h-3.5 w-3.5 text-muted-foreground" />
+                    {totalBugs} bug{totalBugs !== 1 ? 's' : ''} fixed
+                  </li>
+                )}
+                {totalSyncs > 0 && (
+                  <li className="flex items-center gap-2">
+                    <Activity className="h-3.5 w-3.5 text-muted-foreground" />
+                    {totalSyncs} sync{totalSyncs !== 1 ? 's' : ''}
+                  </li>
+                )}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+interface StatCardProps {
+  icon: React.ElementType
+  value: number
+  label: string
+  color: string
+  bgColor: string
+}
+
+function StatCard({ icon: Icon, value, label, color, bgColor }: StatCardProps) {
+  return (
+    <div className={cn('rounded-xl p-4 text-center', bgColor)}>
+      <Icon className={cn('h-5 w-5 mx-auto mb-1', color)} />
+      <div className="text-2xl font-bold tabular-nums">{value}</div>
+      <div className="text-xs text-muted-foreground">{label}</div>
+    </div>
+  )
+}

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

@@ -0,0 +1,288 @@
+'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

@@ -0,0 +1,149 @@
+'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

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

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

@@ -1,13 +1,25 @@
+'use client'
+
 import { SparklineChart } from '@/components/SparklineChart'
 import type { WeeklySparklineProps } from './WeeklySparkline.types'
 
-export function WeeklySparkline({ data }: WeeklySparklineProps) {
+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="w-full sm:w-32">
-      <p className="text-[10px] uppercase tracking-wider text-muted-foreground mb-1 md:text-right">
+    <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>
-      <SparklineChart data={data} height={40} />
+      <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,3 +1,4 @@
 export interface WeeklySparklineProps {
   data: number[]
+  size?: 'sm' | 'md' | 'lg'
 }