[V0_FILE]typescriptreact:file="components/ui/toggle-group.tsx" isMerged="true" "use client" import * as React from "react" import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group" import { type VariantProps, cva } from "class-variance-authority" import { cn } from "@/lib/utils" const toggleGroupItemVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-sm text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground", { variants: { variant: { default: "bg-transparent", outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground", }, size: { default: "h-10 px-3", sm: "h-8 px-2", lg: "h-11 px-5", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) const ToggleGroup = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName const ToggleGroupItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, size, ...props }, ref) => ( )) ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName export { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants } [V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, indigo: { "50": "#eef2ff", "100": "#e0e7ff", "200": "#c7d2fe", "300": "#a5b4fc", "400": "#818cf8", "500": "#6366f1", "600": "#4f46e5", "700": "#4338ca", "800": "#3730a3", "900": "#312e81", "950": "#1e1b4b", }, purple: { "50": "#faf5ff", "100": "#f3e8ff", "200": "#e9d5ff", "300": "#d8b4fe", "400": "#c084fc", "500": "#a855f7", "600": "#9333ea", "700": "#7e22ce", "800": "#6b21a8", "900": "#581c87", "950": "#3b0764", }, orange: { "50": "#fff7ed", "100": "#ffedd5", "200": "#fed7aa", "300": "#fdba74", "400": "#fb923c", "500": "#f97316", "600": "#ea580c", "700": "#c2410c", "800": "#9a3412", "900": "#7c2d12", "950": "#431407", }, pink: { "50": "#fdf2f8", "100": "#fce7f3", "200": "#fbcfe8", "300": "#f9a8d4", "400": "#f472b6", "500": "#ec4899", "600": "#db2777", "700": "#be185d", "800": "#9d174d", "900": "#831843", "950": "#500724", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { format, subWeeks, subDays, parseISO } from "date-fns" import { Calendar, RefreshCw, TrendingDown, Zap, Target, Filter, LayoutGrid, LayoutList, Flame } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" // Generate sample weekly data const generateWeeklyData = (seed = 1) => { const startDate = subWeeks(new Date(), 12) const data = [] let currentWeight = 85.5 + (seed % 3) // Add some variation based on seed for (let i = 0; i < 3; i++) { const weekStartDate = subWeeks(new Date(), 11 - i) // Random weight change between -0.8 and -0.2 kg (weight loss) const weightChange = -(Math.random() * 0.6 + 0.2).toFixed(1) const newWeight = Number.parseFloat((currentWeight + Number.parseFloat(weightChange)).toFixed(1)) data.push({ date: weekStartDate, averageWeight: newWeight, weightChange: Number.parseFloat(weightChange), percentageChange: ((Number.parseFloat(weightChange) / currentWeight) * 100).toFixed(2), calorieDeficit: Math.round(Number.parseFloat(weightChange) * -7700), // Rough estimate: 1kg = 7700 calories }) currentWeight = newWeight } return data } // Generate sample daily data const generateDailyData = (seed = 1) => { const data = [] let currentWeight = 85.5 + (seed % 3) // Add some variation based on seed // Generate 84 days (12 weeks) of data for (let i = 0; i < 84; i++) { const date = subDays(new Date(), 83 - i) // Random daily fluctuation (-0.3 to +0.2) const randomFactor = Math.random() * 0.5 - 0.3 let dailyChange = Number.parseFloat(randomFactor.toFixed(2)) // Add a stronger downward trend every few days if (i % 3 === 0) { dailyChange -= 0.2 } const weightChange = Number.parseFloat(dailyChange.toFixed(2)) const newWeight = Number.parseFloat((currentWeight + weightChange).toFixed(1)) data.push({ date, averageWeight: newWeight, weightChange, percentageChange: ((weightChange / currentWeight) * 100).toFixed(2), calorieDeficit: weightChange < 0 ? Math.round(weightChange * -7700) : 0, // Only count deficit when losing weight }) currentWeight = newWeight } return data } // Motivational messages based on progress const getMotivationalMessage = (totalLost) => { const messages = [ { threshold: 0, message: "Every journey begins with a single step!" }, { threshold: 1, message: "You're making progress! Keep it up!" }, { threshold: 2, message: "Fantastic work! You're on a roll!" }, { threshold: 3, message: "Amazing progress! You're crushing it!" }, { threshold: 4, message: "Incredible transformation happening!" }, { threshold: 5, message: "You're unstoppable! Look at those results!" }, ] // Find the highest threshold that the user has passed const applicableMessages = messages.filter((m) => Math.abs(totalLost) >= m.threshold) return applicableMessages[applicableMessages.length - 1]?.message || messages[0].message } // Get color based on weight change const getWeightChangeColor = (change) => { if (change < -0.5) return "text-emerald-500 font-bold" if (change < 0) return "text-green-500" if (change === 0) return "text-amber-500" return "text-red-500" } // Get background color intensity based on calorie deficit const getCalorieIntensity = (calories) => { if (calories <= 0) return "bg-transparent" if (calories < 500) return "bg-primary/5" if (calories < 1000) return "bg-primary/10" if (calories < 1500) return "bg-primary/15" return "bg-primary/20" } export default function WeightTracker({ searchParams }) { // Parse search parameters const filterType = searchParams?.filterType || "weeks" const weeksFilter = searchParams?.weeksFilter || "12" const dateFrom = searchParams?.dateFrom || format(subWeeks(new Date(), 12), "yyyy-MM-dd") const dateTo = searchParams?.dateTo || format(new Date(), "yyyy-MM-dd") const refreshSeed = Number.parseInt(searchParams?.refreshSeed || "1") const viewType = searchParams?.viewType || "weekly" const currentGoal = searchParams?.goal || "losing-fat" // Generate data based on view type const rawData = viewType === "weekly" ? generateWeeklyData(refreshSeed) : generateDailyData(refreshSeed) // Filter data based on filter type const filteredData = rawData.filter((entry) => { const entryDate = entry.date if (filterType === "weeks") { return entryDate >= subWeeks(new Date(), Number.parseInt(weeksFilter)) } else { return entryDate >= parseISO(dateFrom) && entryDate <= parseISO(dateTo) } }) // Calculate statistics const totalWeightLost = filteredData.length > 0 ? filteredData[filteredData.length - 1].averageWeight - filteredData[0].averageWeight : 0 const totalCaloriesBurned = filteredData.reduce( (total, entry) => total + (entry.calorieDeficit > 0 ? entry.calorieDeficit : 0), 0, ) const motivationalMessage = getMotivationalMessage(totalWeightLost) // Goal options and their display names const goals = [ { id: "losing-fat", name: "Losing Fat" }, { id: "building-muscle", name: "Building Muscle" }, { id: "maintaining", name: "Maintaining" }, ] // Get current goal display name const currentGoalName = goals.find((g) => g.id === currentGoal)?.name || "Losing Fat" return (

Weight Tracker Track your weight changes and calorie deficit

{goals.map((goal) => ( {goal.name} ))}

{/* View Type Toggle */}

View:

{/* Filter Tabs */} Filter by Weeks Filter by Date Range {/* Summary Card */}

{viewType === "weekly" ? (

Weight Loss Summary over {filterType === "weeks" ? `${weeksFilter} weeks` : `selected period`}

Current Goal: {currentGoalName}

{/* Total Weight Loss */}

Total Weight Loss

{Math.abs(totalWeightLost).toFixed(2)} kg

{/* Average Weekly Loss */}

Average Weekly Loss

{(Math.abs(totalWeightLost) / (filteredData.length > 0 ? filteredData.length : 1)).toFixed(2)}{" "} kg

{/* Average Calorie Deficit */}

Average Calorie Deficit

{Math.round( totalCaloriesBurned / (filteredData.length > 0 ? filteredData.length : 1), ).toLocaleString()} per week

{/* Average % Change */}

Average % Body Change

{( filteredData.reduce( (sum, entry) => sum + Math.abs(Number.parseFloat(entry.percentageChange)), 0, ) / (filteredData.length > 0 ? filteredData.length : 1) ).toFixed(2)} %

{motivationalMessage}

) : (

Total weight lost over {filterType === "weeks" ? `${weeksFilter} weeks` : `selected period`}

Current Goal: {currentGoalName}

{Math.abs(totalWeightLost).toFixed(2)} kg

{totalCaloriesBurned.toLocaleString()} calories

{motivationalMessage}

)}

{/* Data Table */}

{viewType === "weekly" ? "Week Starting" : "Date"} Weight (kg) Change (kg) Change (%) Est. Calorie Deficit {filteredData.map((entry, index) => ( {format(entry.date, viewType === "weekly" ? "MMM d, yyyy" : "EEE, MMM d, yyyy")} {entry.averageWeight}

{entry.weightChange < 0 && } {entry.weightChange.toFixed(1)}

{entry.percentageChange}% {entry.calorieDeficit > 0 ? (

{entry.calorieDeficit.toLocaleString()}

) : ( 0 )} ))}

) }