[V0_FILE]typescriptreact:file="components/ui/card.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Card = React.forwardRef>(({ className, ...props }, ref) => (

)) Card.displayName = "Card" const CardHeader = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef>( ({ className, ...props }, ref) => (

), ) CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef>( ({ className, ...props }, ref) =>
, ) CardContent.displayName = "CardContent" const CardFooter = React.forwardRef>( ({ className, ...props }, ref) => (
), ) CardFooter.displayName = "CardFooter" export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } [V0_FILE]typescript:file="lib/utils.ts" isMerged="true" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]typescriptreact:file="app/providers.tsx" isMerged="true" "use client" import type React from "react" import { ThemeProvider } from "next-themes" export function Providers({ children }: { children: React.ReactNode }) { return {children} } [V0_FILE]typescriptreact:file="components/ui/button.tsx" isMerged="true" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const buttonVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { default: "bg-primary text-primary-foreground hover:bg-primary/90", destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", sm: "h-9 rounded-md px-3", lg: "h-11 rounded-md px-8", icon: "h-10 w-10", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { const Comp = asChild ? Slot : "button" return }, ) Button.displayName = "Button" export { Button, buttonVariants } [V0_FILE]plaintext:file=".env.local" isMerged="true" NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_YWJsZS1lbGYtMTQuY2xlcmsuYWNjb3VudHMuZGV2JA CLERK_SECRET_KEY=sk_test_t78SE5x4iTM2cWodeELnSSJgJNFzCIoczeCMpUEKNj [V0_FILE]typescriptreact:file="app/tracker/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Sidebar from "@/components/Sidebar" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Check, Plus, ChevronLeft, ChevronRight } from "lucide-react" import { format, addDays, startOfWeek, subWeeks, addWeeks } from "date-fns" import type { UserProduct } from "@/types/products" import Link from "next/link" // This would typically come from an API or database const userProducts: UserProduct[] = [ { id: 1, name: "Better Biotin Gummies", image: "/products/biotin-gummies.jpg", recommendedTime: "8:00 AM", defaultCadence: "daily", cadence: "daily", selectedDays: [1, 2, 3, 4, 5], isAdded: true, }, { id: 2, name: "Better Caffeine Shampoo", image: "/products/caffeine-shampoo.jpg", recommendedTime: "7:00 AM", defaultCadence: "daily", cadence: "alternate_days", selectedDays: [1, 3, 5], isAdded: true, }, { id: 3, name: "Better Rosemary Oil", image: "/products/rosemary-oil.jpg", recommendedTime: "9:00 PM", defaultCadence: "twice_weekly", cadence: "twice_weekly", selectedDays: [2, 5], isAdded: true, }, { id: 4, name: "Better Aromatherapy Shower Head", image: "/products/aromatherapy-shower-head.jpg", recommendedTime: "7:00 AM", defaultCadence: "none", cadence: "none", selectedDays: [], isAdded: true, }, { id: 5, name: "Better Water Filter", image: "/products/water-filter.jpg", recommendedTime: "All Day", defaultCadence: "monthly", cadence: "monthly", selectedDays: [], isAdded: true, }, { id: 6, name: "Better Aroma Pack", image: "/products/aroma-pack.jpg", recommendedTime: "8:00 PM", defaultCadence: "monthly", cadence: "monthly", selectedDays: [], isAdded: true, }, ] export default function Tracker() { const [selectedDate, setSelectedDate] = useState(new Date()) const [completedProducts, setCompletedProducts] = useState<{ [key: string]: number[] }>({}) const weekStart = startOfWeek(selectedDate) const weekDates = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i)) const shouldShowProduct = (product: UserProduct, date: Date) => { const dayOfWeek = date.getDay() if (!product.isAdded) return false if (product.cadence === "none") return false if (!product.selectedDays.includes(dayOfWeek)) return false switch (product.cadence) { case "daily": return true case "alternate_days": // Show on every other day starting from the first selected day const firstSelectedDay = product.selectedDays[0] const daysSinceFirst = Math.floor( (date.getTime() - addDays(weekStart, firstSelectedDay).getTime()) / (1000 * 60 * 60 * 24), ) return daysSinceFirst % 2 === 0 case "twice_weekly": return product.selectedDays.includes(dayOfWeek) case "monthly": // Show on the 1st of each month return date.getDate() === 1 default: return false } } const toggleProduct = (productId: number, date: Date) => { const dateStr = format(date, "yyyy-MM-dd") setCompletedProducts((prev) => { const completed = prev[dateStr] || [] if (completed.includes(productId)) { return { ...prev, [dateStr]: completed.filter((id) => id !== productId), } } return { ...prev, [dateStr]: [...completed, productId], } }) } const isProductCompleted = (productId: number, date: Date) => { const dateStr = format(date, "yyyy-MM-dd") return completedProducts[dateStr]?.includes(productId) } const navigateWeek = (direction: "prev" | "next") => { setSelectedDate((currentDate) => (direction === "prev" ? subWeeks(currentDate, 1) : addWeeks(currentDate, 1))) } return (

Product Tracker

{format(selectedDate, "MMMM yyyy")}

{weekDates.map((date) => ( ))}

{userProducts .filter((product) => shouldShowProduct(product, selectedDate)) .map((product) => (

{product.name}

{product.recommendedTime}

))}

) } [V0_FILE]typescriptreact:file="types/products.ts" isMerged="true" export type CadenceType = "daily" | "alternate_days" | "twice_weekly" | "monthly" | "none" export interface Product { id: number name: string image: string recommendedTime: string defaultCadence: CadenceType } export interface UserProduct extends Product { cadence: CadenceType selectedDays: number[] // 0-6 for Sunday-Saturday isAdded: boolean } [V0_FILE]typescriptreact:file="components/day-selector-dialog.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog" import { useState } from "react" const DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"] interface DaySelectorDialogProps { open: boolean onOpenChange: (open: boolean) => void selectedDays: number[] onSave: (days: number[]) => void } export function DaySelectorDialog({ open, onOpenChange, selectedDays: initialSelectedDays, onSave, }: DaySelectorDialogProps) { const [selectedDays, setSelectedDays] = useState(initialSelectedDays) const toggleDay = (dayIndex: number) => { setSelectedDays((current) => current.includes(dayIndex) ? current.filter((d) => d !== dayIndex) : [...current, dayIndex], ) } return ( Select Days
{DAYS.map((day, index) => ( ))}
) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import Link from "next/link" import Image from "next/image" import { Button } from "@/components/ui/button" export default function Home() { return (

Unlocking the Better you

Track your hair care journey, manage products, and see your progress over time.

) } [V0_FILE]typescriptreact:file="app/globals.css" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return ( ) }) Textarea.displayName = "Textarea" export { Textarea } [V0_FILE]typescriptreact:file="components/KnowledgeBits.tsx" isQuickEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight } from "lucide-react" import { useState } from "react" const hairFacts = [ "Hair grows an average of 0.5 inches (1.25 cm) per month.", "The average person has about 100,000 hair follicles on their head.", "Hair is made up of a protein called keratin, which is also found in nails and skin.", "Scalp hair grows for 2-6 years before falling out and being replaced by new hair.", "Blonde hair typically has more individual strands than other hair colors.", "Hair can absorb up to 30% of its weight in water.", "The natural oil in your hair (sebum) helps to keep it healthy and shiny.", "Hair is the second fastest growing tissue in the body after bone marrow.", ] export function KnowledgeBits() { const [currentFactIndex, setCurrentFactIndex] = useState(0) const nextFact = () => { setCurrentFactIndex((prevIndex) => (prevIndex + 1) % hairFacts.length) } const prevFact = () => { setCurrentFactIndex((prevIndex) => (prevIndex - 1 + hairFacts.length) % hairFacts.length) } return ( <Card className="h-full flex flex-col"> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-sm font-medium">Knowledge Bits</CardTitle> <div className="flex space-x-2"> <Button variant="outline" size="icon" onClick={prevFact}> <ChevronLeft className="h-4 w-4" /> </Button> <Button variant="outline" size="icon" onClick={nextFact}> <ChevronRight className="h-4 w-4" /> </Button> </div> </CardHeader> <CardContent className="flex-grow flex items-center justify-center"> <p className="text-sm text-muted-foreground text-center">{hairFacts[currentFactIndex]}</p> </CardContent> </Card> ) } [V0_FILE]typescriptreact:file="app/settings/page.tsx" isMerged="true" "use client" import { useState } from "react" import Sidebar from "@/components/Sidebar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" export default function Settings() { const [emailReminders, setEmailReminders] = useState(true) const [whatsappReminders, setWhatsappReminders] = useState(false) const [securityNotifications, setSecurityNotifications] = useState(true) const [productNotifications, setProductNotifications] = useState(true) return ( <div className="flex h-screen"> <Sidebar /> <main className="flex-1 p-8 overflow-auto"> <h1 className="text-3xl font-bold mb-8">Settings</h1> <div className="space-y-6"> <Card> <CardHeader> <CardTitle>Email Reminders</CardTitle> </CardHeader> <CardContent className="space-y-4"> <div className="flex items-center justify-between"> <Label htmlFor="email-reminders">Enable Email Reminders</Label> <Switch id="email-reminders" checked={emailReminders} onCheckedChange={setEmailReminders} /> </div> <div> <Label htmlFor="reminder-email">Reminder Email</Label> <Input id="reminder-email" type="email" placeholder="your@email.com" /> </div> </CardContent> </Card> <Card> <CardHeader> <CardTitle>WhatsApp Reminders</CardTitle> </CardHeader> <CardContent className="space-y-4"> <div className="flex items-center justify-between"> <Label htmlFor="whatsapp-reminders">Enable WhatsApp Reminders</Label> <Switch id="whatsapp-reminders" checked={whatsappReminders} onCheckedChange={setWhatsappReminders} /> </div> <div> <Label htmlFor="whatsapp-number">WhatsApp Number</Label> <Input id="whatsapp-number" type="tel" placeholder="+1234567890" /> </div> </CardContent> </Card> <Card> <CardHeader> <CardTitle>Security Settings</CardTitle> </CardHeader> <CardContent className="space-y-4"> <div className="flex items-center justify-between"> <Label htmlFor="security-notifications">Security Notifications</Label> <Switch id="security-notifications" checked={securityNotifications} onCheckedChange={setSecurityNotifications} /> </div> <Button variant="outline">Change Password</Button> <Button variant="outline">Enable Two-Factor Authentication</Button> </CardContent> </Card> <Card> <CardHeader> <CardTitle>Notification Settings</CardTitle> </CardHeader> <CardContent className="space-y-4"> <div className="flex items-center justify-between"> <Label htmlFor="product-notifications">Product Notifications</Label> <Switch id="product-notifications" checked={productNotifications} onCheckedChange={setProductNotifications} /> </div> </CardContent> </Card> </div> </main> </div> ) } [V0_FILE]typescriptreact:file="app/profile/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Sidebar from "@/components/Sidebar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" export default function Profile() { const [avatar, setAvatar] = useState("/placeholder-avatar.png") const [name, setName] = useState("John Doe") const [email, setEmail] = useState("john.doe@example.com") const [phone, setPhone] = useState("+1234567890") const [bio, setBio] = useState("I'm passionate about hair care and always looking for ways to improve my routine.") const handleAvatarChange = (event: React.ChangeEvent<HTMLInputElement>) => { const file = event.target.files?.[0] if (file) { const reader = new FileReader() reader.onloadend = () => { setAvatar(reader.result as string) } reader.readAsDataURL(file) } } return ( <div className="flex h-screen"> <Sidebar /> <main className="flex-1 p-8 overflow-auto"> <h1 className="text-3xl font-bold mb-8">Profile</h1> <Card> <CardHeader> <CardTitle>Your Profile</CardTitle> </CardHeader> <CardContent className="space-y-6"> <div className="flex items-center space-x-4"> <Avatar className="w-24 h-24"> <AvatarImage src={avatar} alt={name} /> <AvatarFallback> {name .split(" ") .map((n) => n[0]) .join("")} </AvatarFallback> </Avatar> <div> <Input id="avatar-upload" type="file" accept="image/" className="hidden" onChange={handleAvatarChange} /> <Label htmlFor="avatar-upload" className="cursor-pointer"> <Button variant="outline" type="button"> Change Avatar </Button> </Label> </div> </div> <div className="space-y-2"> <Label htmlFor="name">Name</Label> <Input id="name" value={name} onChange={(e) => setName(e.target.value)} /> </div> <div className="space-y-2"> <Label htmlFor="email">Email</Label> <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} /> </div> <div className="space-y-2"> <Label htmlFor="phone">Phone</Label> <Input id="phone" type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} /> </div> <div className="space-y-2"> <Label htmlFor="bio">Bio</Label> <Textarea id="bio" value={bio} onChange={(e) => setBio(e.target.value)} rows={4} /> </div> <Button>Save Changes</Button> </CardContent> </Card> </main> </div> ) } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" "use client" import as React from "react" import * as AvatarPrimitive from "@radix-ui/react-avatar" import { cn } from "@/lib/utils" const Avatar = React.forwardRef< React.ElementRef<typeof AvatarPrimitive.Root>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> >(({ className, ...props }, ref) => ( <AvatarPrimitive.Root ref={ref} className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)} {...props} /> )) Avatar.displayName = AvatarPrimitive.Root.displayName const AvatarImage = React.forwardRef< React.ElementRef<typeof AvatarPrimitive.Image>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> >(({ className, ...props }, ref) => ( <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} /> )) AvatarImage.displayName = AvatarPrimitive.Image.displayName const AvatarFallback = React.forwardRef< React.ElementRef<typeof AvatarPrimitive.Fallback>, React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> >(({ className, ...props }, ref) => ( <AvatarPrimitive.Fallback ref={ref} className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)} {...props} /> )) AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="app/achievements/page.tsx" isMerged="true" "use client" import { useState } from "react" import Sidebar from "@/components/Sidebar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" type Achievement = { id: string name: string description: string icon: string unlocked: boolean benefit: string } const achievements: Achievement[] = [ { id: "profile_update", name: "Profile Pro", description: "Updated your profile information", icon: "👤", unlocked: true, benefit: "10% off your next purchase", }, { id: "all_reminders", name: "Reminder Master", description: "Turned on all reminders", icon: "🔔", unlocked: false, benefit: "Free shipping on your next order", }, { id: "biotin_1week", name: "Biotin Beginner", description: "Completed 1 week of Biotin", icon: "💊", unlocked: true, benefit: "15% off Biotin products", }, { id: "shampoo_1week", name: "Shampoo Star", description: "Completed 1 week of Shampoo", icon: "🧴", unlocked: true, benefit: "Free travel-size shampoo", }, { id: "rosemary_1week", name: "Rosemary Rookie", description: "Completed 1 week of Rosemary Oil", icon: "🌿", unlocked: true, benefit: "20% off Rosemary Oil", }, { id: "biotin_2weeks", name: "Biotin Booster", description: "Completed 2 weeks of Biotin", icon: "💪", unlocked: false, benefit: "25% off Biotin products", }, { id: "shampoo_2weeks", name: "Shampoo Sensation", description: "Completed 2 weeks of Shampoo", icon: "✨", unlocked: false, benefit: "Free full-size shampoo", }, { id: "rosemary_2weeks", name: "Rosemary Enthusiast", description: "Completed 2 weeks of Rosemary Oil", icon: "🌱", unlocked: false, benefit: "30% off Rosemary Oil", }, { id: "biotin_4weeks", name: "Biotin Boss", description: "Completed 4 weeks of Biotin", icon: "👑", unlocked: false, benefit: "Buy one, get one free on Biotin products", }, { id: "shampoo_4weeks", name: "Shampoo Superstar", description: "Completed 4 weeks of Shampoo", icon: "🌟", unlocked: false, benefit: "Free luxury hair towel", }, { id: "rosemary_4weeks", name: "Rosemary Ruler", description: "Completed 4 weeks of Rosemary Oil", icon: "🏆", unlocked: false, benefit: "50% off Rosemary Oil", }, { id: "biotin_3months", name: "Biotin Veteran", description: "Completed 3 months of Biotin", icon: "🎖️", unlocked: false, benefit: "3-month supply of Biotin for free", }, { id: "shampoo_3months", name: "Shampoo Sage", description: "Completed 3 months of Shampoo", icon: "🧠", unlocked: false, benefit: "Free hair consultation with an expert", }, { id: "rosemary_3months", name: "Rosemary Guru", description: "Completed 3 months of Rosemary Oil", icon: "🧘", unlocked: false, benefit: "Free diffuser for essential oils", }, { id: "biotin_6months", name: "Biotin Legend", description: "Completed 6 months of Biotin", icon: "🏅", unlocked: false, benefit: "6-month supply of Biotin for free", }, { id: "shampoo_6months", name: "Shampoo Champion", description: "Completed 6 months of Shampoo", icon: "🏆", unlocked: false, benefit: "Free premium hair care set", }, { id: "rosemary_6months", name: "Rosemary Master", description: "Completed 6 months of Rosemary Oil", icon: "🎓", unlocked: false, benefit: "Free year supply of Rosemary Oil", }, { id: "progress_tracker", name: "Progress Paparazzi", description: "Uploaded progress images for all milestones", icon: "📸", unlocked: false, benefit: "Professional photo shoot for your hair transformation", }, { id: "product_collector", name: "Product Collector", description: "Added all available products to your routine", icon: "🛍️", unlocked: false, benefit: "25% off your next purchase, site-wide", }, { id: "consistency_king", name: "Consistency King", description: "Used all your products consistently for a month", icon: "👑", unlocked: false, benefit: "Free 3-month subscription to our premium plan", }, { id: "hair_guru", name: "Hair Care Guru", description: "Unlocked all other achievements", icon: "🧙", unlocked: false, benefit: "Lifetime 20% discount on all products", }, ] export default function Achievements() { const [userAchievements, setUserAchievements] = useState<Achievement[]>(achievements) return ( <div className="flex h-screen"> <Sidebar /> <main className="flex-1 p-8 overflow-auto"> <h1 className="text-3xl font-bold mb-8">Achievements</h1> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> {userAchievements.map((achievement) => ( <TooltipProvider key={achievement.id}> <Tooltip> <TooltipTrigger asChild> <Card className={`cursor-pointer ${achievement.unlocked ? "bg-green-50" : "bg-gray-100"}`}> <CardHeader className="pb-2"> <CardTitle className="text-lg flex items-center"> <span className="text-2xl mr-2">{achievement.icon}</span> {achievement.name} </CardTitle> </CardHeader> <CardContent> <p className="text-sm text-gray-600 mb-2">{achievement.description}</p> <Badge className={`mb-2 ${achievement.unlocked ? "bg-green-500" : "bg-gray-500"}`}> {achievement.unlocked ? "Unlocked" : "Locked"} </Badge> <div className="text-sm font-medium text-indigo-600 mt-2">Benefit: {achievement.benefit}</div> </CardContent> </Card> </TooltipTrigger> <TooltipContent> <p> {achievement.unlocked ? `Congratulations! You've earned: ${achievement.benefit}` : "Keep going to unlock this achievement and its benefit!"} </p> </TooltipContent> </Tooltip> </TooltipProvider> ))} </div> </main> </div> ) } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {} function Badge({ className, variant, ...props }: BadgeProps) { return <div className={cn(badgeVariants({ variant }), className)} {...props} /> } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/tooltip.tsx" isMerged="true" "use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" const TooltipProvider = TooltipPrimitive.Provider const Tooltip = TooltipPrimitive.Root const TooltipTrigger = TooltipPrimitive.Trigger const TooltipContent = React.forwardRef< React.ElementRef<typeof TooltipPrimitive.Content>, React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> >(({ className, sideOffset = 4, ...props }, ref) => ( <TooltipPrimitive.Content ref={ref} sideOffset={sideOffset} className={cn( "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, )} {...props} /> )) TooltipContent.displayName = TooltipPrimitive.Content.displayName export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } [V0_FILE]typescriptreact:file="app/referrals/page.tsx" isMerged="true" "use client" import { useState } from "react" import Sidebar from "@/components/Sidebar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Progress } from "@/components/ui/progress" type Referral = { name: string email: string purchaseDate: string purchaseAmount: number } type DiscountTier = { referrals: number discount: number } const discountTiers: DiscountTier[] = [ { referrals: 1, discount: 10 }, { referrals: 3, discount: 20 }, { referrals: 5, discount: 30 }, { referrals: 10, discount: 50 }, { referrals: 20, discount: 75 }, { referrals: 30, discount: 100 }, ] export default function Referrals() { const [referralCode] = useState("JOHN123") const [referrals, setReferrals] = useState<Referral[]>([ { name: "Alice Smith", email: "alice@example.com", purchaseDate: "2023-06-01", purchaseAmount: 150 }, { name: "Bob Johnson", email: "bob@example.com", purchaseDate: "2023-06-05", purchaseAmount: 200 }, { name: "Carol Williams", email: "carol@example.com", purchaseDate: "2023-06-10", purchaseAmount: 100 }, ]) const totalReferrals = referrals.length const currentTier = discountTiers.reduce((prev, curr) => (totalReferrals >= curr.referrals ? curr : prev)) const nextTier = discountTiers.find((tier) => tier.referrals > totalReferrals) || currentTier const progress = (totalReferrals / nextTier.referrals) * 100 const calculateDiscount = (discount: number) => { const maxDiscount = 500 // AED return Math.min(discount, maxDiscount) } const copyReferralCode = () => { navigator.clipboard.writeText(referralCode) alert("Referral code copied to clipboard!") } return ( <div className="flex h-screen"> <Sidebar /> <main className="flex-1 p-8 overflow-auto"> <h1 className="text-3xl font-bold mb-8">Referral Program</h1> <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8"> <Card> <CardHeader> <CardTitle>Your Referral Code</CardTitle> </CardHeader> <CardContent> <div className="flex items-center justify-between bg-gray-100 p-4 rounded-md"> <span className="text-2xl font-bold">{referralCode}</span> <Button onClick={copyReferralCode}>Copy</Button> </div> <p className="mt-4 text-sm text-gray-600">Share this code with your friends and earn discounts!</p> </CardContent> </Card> <Card> <CardHeader> <CardTitle>Your Discount</CardTitle> </CardHeader> <CardContent> <div className="text-4xl font-bold mb-2">{currentTier.discount}% OFF</div> <p className="text-sm text-gray-600 mb-4">Up to {calculateDiscount(currentTier.discount)} AED discount</p> <Progress value={progress} className="mb-2" /> <p className="text-sm text-gray-600"> {totalReferrals} / {nextTier.referrals} referrals to next tier </p> </CardContent> </Card> </div> <Card className="mb-8"> <CardHeader> <CardTitle>Discount Tiers</CardTitle> </CardHeader> <CardContent> <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4"> {discountTiers.map((tier, index) => ( <div key={index} className={`p-4 rounded-md text-center ${ totalReferrals >= tier.referrals ? "bg-green-100" : "bg-gray-100" }`} > <div className="text-2xl font-bold">{tier.discount}%</div> <div className="text-sm">{tier.referrals} referrals</div> </div> ))} </div> </CardContent> </Card> <Card> <CardHeader> <CardTitle>Referral Purchases</CardTitle> </CardHeader> <CardContent> <Table> <TableHeader> <TableRow> <TableHead>Name</TableHead> <TableHead>Email</TableHead> <TableHead>Purchase Date</TableHead> <TableHead>Purchase Amount (AED)</TableHead> </TableRow> </TableHeader> <TableBody> {referrals.map((referral, index) => ( <TableRow key={index}> <TableCell>{referral.name}</TableCell> <TableCell>{referral.email}</TableCell> <TableCell>{referral.purchaseDate}</TableCell> <TableCell>{referral.purchaseAmount}</TableCell> </TableRow> ))} </TableBody> </Table> </CardContent> </Card> </main> </div> ) } [V0_FILE]typescriptreact:file="components/ui/progress.tsx" isMerged="true" "use client" import * as React from "react" import * as ProgressPrimitive from "@radix-ui/react-progress" import { cn } from "@/lib/utils" const Progress = React.forwardRef< React.ElementRef<typeof ProgressPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> >(({ className, value, ...props }, ref) => ( <ProgressPrimitive.Root ref={ref} className={cn("relative h-4 w-full overflow-hidden rounded-full bg-secondary", className)} {...props} > <ProgressPrimitive.Indicator className="h-full w-full flex-1 bg-primary transition-all" style={{ transform: `translateX(-${100 - (value || 0)}%)` }} /> </ProgressPrimitive.Root> )) Progress.displayName = ProgressPrimitive.Root.displayName export { Progress } [V0_FILE]typescriptreact:file="components/ui/table.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>( ({ className, ...props }, ref) => ( <div className="w-full overflow-auto"> <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} /> </div> ), ) Table.displayName = "Table" const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>( ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />, ) TableHeader.displayName = "TableHeader" const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>( ({ className, ...props }, ref) => ( <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} /> ), ) TableBody.displayName = "TableBody" const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>( ({ className, ...props }, ref) => ( <tfoot ref={ref} className={cn("bg-primary font-medium text-primary-foreground", className)} {...props} /> ), ) TableFooter.displayName = "TableFooter" const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>( ({ className, ...props }, ref) => ( <tr ref={ref} className={cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className)} {...props} /> ), ) TableRow.displayName = "TableRow" const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>( ({ className, ...props }, ref) => ( <th ref={ref} className={cn( "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className, )} {...props} /> ), ) TableHead.displayName = "TableHead" const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>( ({ className, ...props }, ref) => ( <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} /> ), ) TableCell.displayName = "TableCell" const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>( ({ className, ...props }, ref) => ( <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} /> ), ) TableCaption.displayName = "TableCaption" export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption } [V0_FILE]typescriptreact:file="components/ui/checkbox.tsx" isMerged="true" "use client" import * as React from "react" import * as CheckboxPrimitive from "@radix-ui/react-checkbox" import { Check } from "lucide-react" import { cn } from "@/lib/utils" const Checkbox = React.forwardRef< React.ElementRef<typeof CheckboxPrimitive.Root>, React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> >(({ className, ...props }, ref) => ( <CheckboxPrimitive.Root ref={ref} className={cn( "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className, )} {...props} > <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}> <Check className="h-4 w-4" /> </CheckboxPrimitive.Indicator> </CheckboxPrimitive.Root> )) Checkbox.displayName = CheckboxPrimitive.Root.displayName export { Checkbox } [V0_FILE]typescriptreact:file="components/ui/input.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {} const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, ...props }, ref) => { return ( <input type={type} className={cn( "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className, )} ref={ref} {...props} /> ) }) Input.displayName = "Input" export { Input } [V0_FILE]typescriptreact:file="app/onboarding/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Textarea } from "@/components/ui/textarea" import Image from "next/image" const steps = [ "Basic Information", "Health & Wellness Goals", "Current Product Usage", "Lifestyle & Habits", "Feedback", "Consent & Preferences", ] export default function OnboardingForm() { const router = useRouter() const [currentStep, setCurrentStep] = useState(0) const [formData, setFormData] = useState({ fullName: "", email: "", dateOfBirth: "", gender: "", location: "", healthGoals: [], heardFrom: "", currentProducts: [], usageFrequency: "", reminders: "", otherSupplements: "", otherSupplementsList: "", preferredForm: "", biggestChallenge: "", perfectSupplement: "", improvementSuggestion: "", shareData: false, participateSurveys: "", }) const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleCheckboxChange = (name: string, checked: boolean) => { setFormData((prev) => { if (Array.isArray(prev[name])) { if (checked) { return { ...prev, [name]: [...prev[name], name] } } else { return { ...prev, [name]: prev[name].filter((item) => item !== name) } } } return { ...prev, [name]: checked } }) } const handleNext = () => { setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1)) } const handlePrevious = () => { setCurrentStep((prev) => Math.max(prev - 1, 0)) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("Form submitted:", formData) // Here you would typically send the data to your backend // After successful submission, redirect to dashboard router.push("/dashboard") } const renderStep = () => { switch (currentStep) { case 0: return ( <> <div className="space-y-4"> <div> <Label htmlFor="fullName">Full Name (Optional)</Label> <Input id="fullName" name="fullName" value={formData.fullName} onChange={handleInputChange} placeholder="Enter your full name" /> </div> <div> <Label htmlFor="email">Email Address</Label> <Input id="email" name="email" type="email" value={formData.email} onChange={handleInputChange} placeholder="Enter your email address" required /> </div> <div> <Label htmlFor="dateOfBirth">Date of Birth</Label> <Input id="dateOfBirth" name="dateOfBirth" type="date" value={formData.dateOfBirth} onChange={handleInputChange} required /> </div> <div> <Label>Gender</Label> <RadioGroup name="gender" value={formData.gender} onValueChange={(value) => handleSelectChange("gender", value)} > <div className="flex items-center space-x-2"> <RadioGroupItem value="male" id="male" /> <Label htmlFor="male">Male</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="female" id="female" /> <Label htmlFor="female">Female</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="non-binary" id="non-binary" /> <Label htmlFor="non-binary">Non-binary</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="prefer-not-to-say" id="prefer-not-to-say" /> <Label htmlFor="prefer-not-to-say">Prefer not to say</Label> </div> </RadioGroup> </div> <div> <Label htmlFor="location">Where do you live?</Label> <Input id="location" name="location" value={formData.location} onChange={handleInputChange} placeholder="Enter your country/city" /> </div> </div> </> ) case 1: return ( <> <div className="space-y-4"> <div> <Label>What are your main health goals?</Label> <div className="space-y-2"> {[ "Improve gut health", "Boost vitality", "Enhance hair health", "Support mental focus/calmness", "Better sleep", "Weight management", ].map((goal) => ( <div key={goal} className="flex items-center space-x-2"> <Checkbox id={goal} checked={formData.healthGoals.includes(goal)} onCheckedChange={(checked) => handleCheckboxChange(goal, checked as boolean)} /> <Label htmlFor={goal}>{goal}</Label> </div> ))} <div className="flex items-center space-x-2"> <Checkbox id="otherGoal" checked={formData.healthGoals.includes("Other")} onCheckedChange={(checked) => handleCheckboxChange("Other", checked as boolean)} /> <Label htmlFor="otherGoal">Other</Label> <Input placeholder="Specify other goal" disabled={!formData.healthGoals.includes("Other")} onChange={(e) => handleInputChange({ target: { name: "otherGoal", value: e.target.value }, } as React.ChangeEvent<HTMLInputElement>) } /> </div> </div> </div> <div> <Label htmlFor="heardFrom">How did you hear about Better?</Label> <Select name="heardFrom" onValueChange={(value) => handleSelectChange("heardFrom", value)}> <SelectTrigger> <SelectValue placeholder="Select an option" /> </SelectTrigger> <SelectContent> <SelectItem value="Social Media">Social Media</SelectItem> <SelectItem value="Friends/Family">Friends/Family</SelectItem> <SelectItem value="Ads">Ads</SelectItem> <SelectItem value="Influencers">Influencers</SelectItem> <SelectItem value="Other">Other</SelectItem> </SelectContent> </Select> {formData.heardFrom === "Other" && ( <Input className="mt-2" placeholder="Please specify" onChange={(e) => handleInputChange({ target: { name: "heardFromOther", value: e.target.value }, } as React.ChangeEvent<HTMLInputElement>) } /> )} </div> </div> </> ) case 2: return ( <> <div className="space-y-4"> <div> <Label>Which Better products are you currently using?</Label> <div className="space-y-2"> {[ "Biotin Gummies", "Caffeine Shampoo", "Rosemary Oil", "Better Seed (Prenatal Pills)", "Better Wingman (Sachets)", "Better Focus / Calm / Sleep (Chewables)", "Not using any yet", ].map((product) => ( <div key={product} className="flex items-center space-x-2"> <Checkbox id={product} checked={formData.currentProducts.includes(product)} onCheckedChange={(checked) => handleCheckboxChange(product, checked as boolean)} /> <Label htmlFor={product}>{product}</Label> </div> ))} <div className="flex items-center space-x-2"> <Checkbox id="otherProduct" checked={formData.currentProducts.includes("Other")} onCheckedChange={(checked) => handleCheckboxChange("Other", checked as boolean)} /> <Label htmlFor="otherProduct">Other</Label> <Input placeholder="Specify other product" disabled={!formData.currentProducts.includes("Other")} onChange={(e) => handleInputChange({ target: { name: "otherProduct", value: e.target.value }, } as React.ChangeEvent<HTMLInputElement>) } /> </div> </div> </div> <div> <Label htmlFor="usageFrequency">How often do you intend to use these products?</Label> <Select name="usageFrequency" onValueChange={(value) => handleSelectChange("usageFrequency", value)}> <SelectTrigger> <SelectValue placeholder="Select frequency" /> </SelectTrigger> <SelectContent> <SelectItem value="Daily">Daily</SelectItem> <SelectItem value="A few times a week">A few times a week</SelectItem> <SelectItem value="Occasionally">Occasionally</SelectItem> <SelectItem value="Not sure yet">Not sure yet</SelectItem> </SelectContent> </Select> </div> <div> <Label>Would you like to receive reminders to take your supplements?</Label> <RadioGroup name="reminders" value={formData.reminders} onValueChange={(value) => handleSelectChange("reminders", value)} > <div className="flex items-center space-x-2"> <RadioGroupItem value="Yes, daily reminders" id="daily-reminders" /> <Label htmlFor="daily-reminders">Yes, daily reminders</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="Yes, weekly check-ins" id="weekly-check-ins" /> <Label htmlFor="weekly-check-ins">Yes, weekly check-ins</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="No reminders needed" id="no-reminders" /> <Label htmlFor="no-reminders">No reminders needed</Label> </div> </RadioGroup> </div> </div> </> ) case 3: return ( <> <div className="space-y-4"> <div> <Label>Do you currently take any other health supplements?</Label> <RadioGroup name="otherSupplements" value={formData.otherSupplements} onValueChange={(value) => handleSelectChange("otherSupplements", value)} > <div className="flex items-center space-x-2"> <RadioGroupItem value="Yes" id="other-supplements-yes" /> <Label htmlFor="other-supplements-yes">Yes</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="No" id="other-supplements-no" /> <Label htmlFor="other-supplements-no">No</Label> </div> </RadioGroup> </div> {formData.otherSupplements === "Yes" && ( <div> <Label htmlFor="otherSupplementsList">Which ones?</Label> <Input id="otherSupplementsList" name="otherSupplementsList" value={formData.otherSupplementsList} onChange={handleInputChange} placeholder="List other supplements" /> </div> )} <div> <Label htmlFor="preferredForm">How do you prefer consuming health supplements?</Label> <Select name="preferredForm" onValueChange={(value) => handleSelectChange("preferredForm", value)}> <SelectTrigger> <SelectValue placeholder="Select preferred form" /> </SelectTrigger> <SelectContent> <SelectItem value="Gummies">Gummies</SelectItem> <SelectItem value="Pills/Capsules">Pills/Capsules</SelectItem> <SelectItem value="Powders">Powders</SelectItem> <SelectItem value="Drinks/Sachets">Drinks/Sachets</SelectItem> <SelectItem value="Chewables">Chewables</SelectItem> <SelectItem value="Other">Other</SelectItem> </SelectContent> </Select> {formData.preferredForm === "Other" && ( <Input className="mt-2" placeholder="Please specify" onChange={(e) => handleInputChange({ target: { name: "preferredFormOther", value: e.target.value }, } as React.ChangeEvent<HTMLInputElement>) } /> )} </div> <div> <Label htmlFor="biggestChallenge"> What's the biggest challenge you face with taking supplements regularly? </Label> <Select name="biggestChallenge" onValueChange={(value) => handleSelectChange("biggestChallenge", value)} > <SelectTrigger> <SelectValue placeholder="Select biggest challenge" /> </SelectTrigger> <SelectContent> <SelectItem value="Forgetting to take them">Forgetting to take them</SelectItem> <SelectItem value="Not seeing quick results">Not seeing quick results</SelectItem> <SelectItem value="Taste or texture issues">Taste or texture issues</SelectItem> <SelectItem value="Complicated routines">Complicated routines</SelectItem> <SelectItem value="Cost">Cost</SelectItem> <SelectItem value="Other">Other</SelectItem> </SelectContent> </Select> {formData.biggestChallenge === "Other" && ( <Input className="mt-2" placeholder="Please specify" onChange={(e) => handleInputChange({ target: { name: "biggestChallengeOther", value: e.target.value }, } as React.ChangeEvent<HTMLInputElement>) } /> )} </div> </div> </> ) case 4: return ( <> <div className="space-y-4"> <div> <Label htmlFor="perfectSupplement"> If you could create the perfect health supplement, what would it help you with? </Label> <Textarea id="perfectSupplement" name="perfectSupplement" value={formData.perfectSupplement} onChange={handleInputChange} placeholder="Describe your perfect supplement" /> </div> <div> <Label htmlFor="improvementSuggestion"> What's one thing you'd improve about health supplements in general? </Label> <Textarea id="improvementSuggestion" name="improvementSuggestion" value={formData.improvementSuggestion} onChange={handleInputChange} placeholder="Suggest an improvement" /> </div> </div> </> ) case 5: return ( <> <div className="space-y-4"> <div className="flex items-center space-x-2"> <Checkbox id="shareData" checked={formData.shareData} onCheckedChange={(checked) => handleCheckboxChange("shareData", checked as boolean)} /> <Label htmlFor="shareData"> Do you agree to share anonymous usage data to help improve our products? </Label> </div> <div> <Label>Would you like to participate in occasional surveys for early product testing?</Label> <RadioGroup name="participateSurveys" value={formData.participateSurveys} onValueChange={(value) => handleSelectChange("participateSurveys", value)} > <div className="flex items-center space-x-2"> <RadioGroupItem value="Yes, count me in!" id="surveys-yes" /> <Label htmlFor="surveys-yes">Yes, count me in!</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="Maybe later" id="surveys-maybe" /> <Label htmlFor="surveys-maybe">Maybe later</Label> </div> <div className="flex items-center space-x-2"> <RadioGroupItem value="No, thanks" id="surveys-no" /> <Label htmlFor="surveys-no">No, thanks</Label> </div> </RadioGroup> </div> </div> </> ) default: return null } } return ( <div className="min-h-screen bg-gray-100 flex items-center justify-center"> <Card className="w-full max-w-2xl"> <div className="flex justify-center mb-6 mt-6"> <Image src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Logo-dark-CUizWlZBCvc6Dpc7jMQFyE3gs94uWa.png" alt="Better Logo" width={120} height={40} priority /> </div> <form onSubmit={handleSubmit}> <CardHeader> <CardTitle> Step {currentStep + 1}: {steps[currentStep]} </CardTitle> </CardHeader> <CardContent>{renderStep()}</CardContent> <CardFooter className="flex justify-between"> <Button type="button" onClick={handlePrevious} disabled={currentStep === 0} className="bg-[#BEE510] text-[#0D4225] hover:bg-[#a8cd0e]" > Previous </Button> {currentStep === steps.length - 1 ? ( <Button type="submit" className="bg-[#BEE510] text-[#0D4225] hover:bg-[#a8cd0e]"> Submit </Button> ) : ( <Button type="button" onClick={handleNext} className="bg-[#BEE510] text-[#0D4225] hover:bg-[#a8cd0e]"> Next </Button> )} </CardFooter> </form> </Card> </div> ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import "./globals.css" import { Inter } from "next/font/google" import type React from "react" const inter = Inter({ subsets: ["latin"] }) export const metadata = { title: "Better Tracker", description: "Track your hair care products and progress", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body className={inter.className}>{children}</body> </html> ) } [V0_FILE]typescriptreact:file="components/ui/multi-select.tsx" isMerged="true" "use client" import * as React from "react" import { X } from "lucide-react" import { Badge } from "@/components/ui/badge" import { Command as CommandPrimitive } from "cmdk" type Option = { value: string label: string } type MultiSelectProps = { options: Option[] selected: string[] onChange: (selected: string[]) => void placeholder?: string } export function MultiSelect({ options, selected, onChange, placeholder }: MultiSelectProps) { const inputRef = React.useRef<HTMLInputElement>(null) const [open, setOpen] = React.useState(false) const [inputValue, setInputValue] = React.useState("") const handleUnselect = (option: Option) => { onChange(selected.filter((s) => s !== option.value)) } const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => { const input = inputRef.current if (input) { if (e.key === "Delete" || e.key === "Backspace") { if (input.value === "") { const newSelected = [...selected] newSelected.pop() onChange(newSelected) } } if (e.key === "Escape") { input.blur() } } } const selectables = options.filter((option) => !selected.includes(option.value)) return ( <CommandPrimitive onKeyDown={handleKeyDown} className="overflow-visible bg-transparent"> <div className="group border border-input px-3 py-2 text-sm ring-offset-background rounded-md focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2"> <div className="flex gap-1 flex-wrap"> {selected.map((selectedValue) => { const option = options.find((o) => o.value === selectedValue) if (!option) return null return ( <Badge key={option.value} variant="secondary"> {option.label} <button className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" onKeyDown={(e) => { if (e.key === "Enter") { handleUnselect(option) } }} onMouseDown={(e) => { e.preventDefault() e.stopPropagation() }} onClick={() => handleUnselect(option)} > <X className="h-3 w-3 text-muted-foreground hover:text-foreground" /> </button> </Badge> ) })} <CommandPrimitive.Input ref={inputRef} value={inputValue} onValueChange={setInputValue} onBlur={() => setOpen(false)} onFocus={() => setOpen(true)} placeholder={placeholder} className="ml-2 bg-transparent outline-none placeholder:text-muted-foreground flex-1" /> </div> </div> <div className="relative mt-2"> {open && selectables.length > 0 ? ( <div className="absolute w-full z-10 top-0 rounded-md border bg-popover text-popover-foreground shadow-md outline-none animate-in"> <CommandPrimitive.Group className="h-full overflow-auto"> {selectables.map((option) => { return ( <CommandPrimitive.Item key={option.value} onMouseDown={(e) => { e.preventDefault() e.stopPropagation() }} onSelect={() => { setInputValue("") onChange([...selected, option.value]) }} className={"cursor-pointer p-2 hover:bg-accent hover:text-accent-foreground"} > {option.label} </CommandPrimitive.Item> ) })} </CommandPrimitive.Group> </div> ) : null} </div> </CommandPrimitive> ) } [V0_FILE]typescriptreact:file="app/progress/page.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Link from "next/link" import Sidebar from "@/components/Sidebar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { PlusCircle, MoreHorizontal, Trash, ChevronRight } from "lucide-react" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { MultiSelect } from "@/components/ui/multi-select" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" type Product = { id: number name: string } type ProgressType = { id: number title: string products: Product[] cadences: string[] } type ProgressEntry = { id: number typeId: number date: string image: string note: string } const products: Product[] = [ { id: 1, name: "Better Biotin Gummies" }, { id: 2, name: "Better Caffeine Shampoo" }, { id: 3, name: "Better Rosemary Oil" }, { id: 4, name: "Better Aromatherapy Shower Head" }, { id: 5, name: "Better Water Filter" }, { id: 6, name: "Better Aroma Pack" }, ] const cadenceOptions = [ { value: "daily", label: "Daily" }, { value: "weekly", label: "Weekly" }, { value: "biweekly", label: "Bi-weekly" }, { value: "monthly", label: "Monthly" }, { value: "quarterly", label: "Quarterly" }, ] export default function Progress() { const [progressTypes, setProgressTypes] = useState<ProgressType[]>([]) const [progressEntries, setProgressEntries] = useState<ProgressEntry[]>([]) const [isAddTypeDialogOpen, setIsAddTypeDialogOpen] = useState(false) const [isAddEntryDialogOpen, setIsAddEntryDialogOpen] = useState(false) const [newProgressType, setNewProgressType] = useState<Omit<ProgressType, "id">>({ title: "", products: [], cadences: [], }) const [newProgressEntry, setNewProgressEntry] = useState<Omit<ProgressEntry, "id">>({ typeId: 0, date: "", image: "", note: "", }) const handleAddProgressType = () => { const newType: ProgressType = { id: progressTypes.length + 1, ...newProgressType, } setProgressTypes([...progressTypes, newType]) setNewProgressType({ title: "", products: [], cadences: [] }) setIsAddTypeDialogOpen(false) } const handleAddProgressEntry = () => { const newEntry: ProgressEntry = { id: progressEntries.length + 1, ...newProgressEntry, } setProgressEntries([...progressEntries, newEntry]) setNewProgressEntry({ typeId: 0, date: "", image: "", note: "" }) setIsAddEntryDialogOpen(false) } const handleDeleteProgressType = (id: number) => { setProgressTypes(progressTypes.filter((type) => type.id !== id)) setProgressEntries(progressEntries.filter((entry) => entry.typeId !== id)) } const handleDeleteProgressEntry = (id: number) => { setProgressEntries(progressEntries.filter((entry) => entry.id !== id)) } return ( <div className="flex h-screen"> <Sidebar /> <main className="flex-1 p-8 overflow-auto"> <h1 className="text-3xl font-bold mb-8">Progress</h1> <div className="mb-8"> <Dialog open={isAddTypeDialogOpen} onOpenChange={setIsAddTypeDialogOpen}> <DialogTrigger asChild> <Button> <PlusCircle className="mr-2 h-4 w-4" /> Add Progress Type </Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Add New Progress Type</DialogTitle> </DialogHeader> <div className="grid gap-4 py-4"> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="title" className="text-right"> Title </Label> <Input id="title" value={newProgressType.title} onChange={(e) => setNewProgressType({ ...newProgressType, title: e.target.value })} className="col-span-3" /> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="products" className="text-right"> Products </Label> <div className="col-span-3"> <MultiSelect options={products.map((product) => ({ value: product.id.toString(), label: product.name }))} selected={newProgressType.products.map((p) => p.id.toString())} onChange={(selected) => { const selectedProducts = products.filter((p) => selected.includes(p.id.toString())) setNewProgressType({ ...newProgressType, products: selectedProducts }) }} placeholder="Select products" /> </div> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="cadences" className="text-right"> Cadences </Label> <div className="col-span-3"> <MultiSelect options={cadenceOptions} selected={newProgressType.cadences} onChange={(selected) => setNewProgressType({ ...newProgressType, cadences: selected })} placeholder="Select cadences" /> </div> </div> </div> <Button onClick={handleAddProgressType}>Add Progress Type</Button> </DialogContent> </Dialog> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {progressTypes.map((type) => ( <Card key={type.id}> <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2"> <CardTitle className="text-sm font-medium">{type.title}</CardTitle> <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" className="h-8 w-8 p-0"> <span className="sr-only">Open menu</span> <MoreHorizontal className="h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem onClick={() => handleDeleteProgressType(type.id)}> <Trash className="mr-2 h-4 w-4" /> <span>Delete</span> </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </CardHeader> <CardContent> <div className="text-xs text-muted-foreground mb-2">Products:</div> <div className="flex flex-wrap gap-2 mb-4"> {type.products.map((product) => ( <Badge key={product.id} variant="secondary"> {product.name} </Badge> ))} </div> <div className="text-xs text-muted-foreground mb-2">Cadences:</div> <div className="flex flex-wrap gap-2 mb-4"> {type.cadences.map((cadence) => ( <Badge key={cadence} variant="secondary"> {cadenceOptions.find((option) => option.value === cadence)?.label} </Badge> ))} </div> <Link href={`/progress/${type.id}`} passHref> <Button className="w-full"> View Details <ChevronRight className="ml-2 h-4 w-4" /> </Button> </Link> </CardContent> </Card> ))} </div> </main> </div> ) } [V0_FILE]typescriptreact:file="app/progress/[id]/page.tsx" isMerged="true" import { Suspense } from "react" import Link from "next/link" import Sidebar from "@/components/Sidebar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ChevronLeft } from "lucide-react" import { Badge } from "@/components/ui/badge" import ProgressEntries from "./ProgressEntries" type ProgressType = { id: number title: string products: { id: number; name: string }[] cadences: string[] } const cadenceOptions = [ { value: "weekly", label: "Weekly" }, { value: "monthly", label: "Monthly" }, ] async function getProgressType(id: string): Promise<ProgressType> { // In a real application, you would fetch this data from an API // For this example, we'll return mock data return { id: Number(id), title: "Hair Growth Progress", products: [ { id: 1, name: "Better Biotin Gummies" }, { id: 2, name: "Better Caffeine Shampoo" }, ], cadences: ["weekly", "monthly"], } } export default async function ProgressDetail({ params }: { params: { id: string } }) { const progressType = await getProgressType(params.id) return ( <div className="flex h-screen"> <Sidebar /> <main className="flex-1 p-8 overflow-auto"> <div className="flex items-center mb-8"> <Link href="/progress" passHref> <Button variant="ghost"> <ChevronLeft className="mr-2 h-4 w-4" /> Back to Progress Types </Button> </Link> <h1 className="text-3xl font-bold ml-4">{progressType.title}</h1> </div> <Card className="mb-8"> <CardHeader> <CardTitle>Progress Type Details</CardTitle> </CardHeader> <CardContent> <div className="mb-4"> <h3 className="text-sm font-medium mb-2">Products:</h3> <div className="flex flex-wrap gap-2"> {progressType.products.map((product) => ( <Badge key={product.id} variant="secondary"> {product.name} </Badge> ))} </div> </div> <div> <h3 className="text-sm font-medium mb-2">Cadences:</h3> <div className="flex flex-wrap gap-2"> {progressType.cadences.map((cadence) => ( <Badge key={cadence} variant="secondary"> {cadenceOptions.find((option) => option.value === cadence)?.label} </Badge> ))} </div> </div> </CardContent> </Card> <Suspense fallback={<div>Loading progress entries...</div>}> <ProgressEntries progressTypeId={progressType.id} /> </Suspense> </main> </div> ) } [V0_FILE]typescriptreact:file="app/progress/[id]/ProgressEntries.tsx" isMerged="true" "use client" import { useState } from "react" import Image from "next/image" import { format, parseISO } from "date-fns" import { Card, CardContent } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { PlusCircle, MoreHorizontal, Trash } from "lucide-react" import { Textarea } from "@/components/ui/textarea" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" type ProgressEntry = { id: number typeId: number date: string image: string note: string } export default function ProgressEntries({ progressTypeId }: { progressTypeId: number }) { const [progressEntries, setProgressEntries] = useState<ProgressEntry[]>([ { id: 1, typeId: progressTypeId, date: "2023-06-01", image: "/placeholder.svg", note: "Starting to see some improvement in hair thickness.", }, { id: 2, typeId: progressTypeId, date: "2023-07-01", image: "/placeholder.svg", note: "Noticeable increase in hair growth rate.", }, ]) const [isAddEntryDialogOpen, setIsAddEntryDialogOpen] = useState(false) const [newProgressEntry, setNewProgressEntry] = useState<Omit<ProgressEntry, "id">>({ typeId: progressTypeId, date: "", image: "", note: "", }) const handleAddProgressEntry = () => { const newEntry: ProgressEntry = { id: progressEntries.length + 1, ...newProgressEntry, } setProgressEntries([...progressEntries, newEntry]) setNewProgressEntry({ typeId: progressTypeId, date: "", image: "", note: "" }) setIsAddEntryDialogOpen(false) } const handleDeleteProgressEntry = (entryId: number) => { setProgressEntries(progressEntries.filter((entry) => entry.id !== entryId)) } const formatDate = (dateString: string) => { const date = parseISO(dateString) return format(date, "MMMM d, yyyy") } return ( <> <div className="mb-8"> <h2 className="text-2xl font-semibold mb-4">Progress Entries</h2> <Dialog open={isAddEntryDialogOpen} onOpenChange={setIsAddEntryDialogOpen}> <DialogTrigger asChild> <Button> <PlusCircle className="mr-2 h-4 w-4" /> Add Progress Entry </Button> </DialogTrigger> <DialogContent> <DialogHeader> <DialogTitle>Add New Progress Entry</DialogTitle> </DialogHeader> <div className="grid gap-4 py-4"> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="date" className="text-right"> Date </Label> <Input id="date" type="date" value={newProgressEntry.date} onChange={(e) => setNewProgressEntry({ ...newProgressEntry, date: e.target.value })} className="col-span-3" /> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="image" className="text-right"> Image </Label> <Input id="image" type="file" onChange={(e) => { const file = e.target.files?.[0] if (file) { const reader = new FileReader() reader.onloadend = () => { setNewProgressEntry({ ...newProgressEntry, image: reader.result as string }) } reader.readAsDataURL(file) } }} className="col-span-3" /> </div> <div className="grid grid-cols-4 items-center gap-4"> <Label htmlFor="note" className="text-right"> Note </Label> <Textarea id="note" value={newProgressEntry.note} onChange={(e) => setNewProgressEntry({ ...newProgressEntry, note: e.target.value })} className="col-span-3" /> </div> </div> <Button onClick={handleAddProgressEntry}>Add Progress Entry</Button> </DialogContent> </Dialog> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {progressEntries.map((entry) => ( <Card key={entry.id}> <CardContent className="p-4"> <div className="flex justify-between items-start mb-2"> <div className="text-sm font-medium">{formatDate(entry.date)}</div> <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" className="h-8 w-8 p-0"> <span className="sr-only">Open menu</span> <MoreHorizontal className="h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem onClick={() => handleDeleteProgressEntry(entry.id)}> <Trash className="mr-2 h-4 w-4" /> <span>Delete</span> </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </div> {entry.image && ( <div className="relative w-full h-40 mb-2"> <Image src={entry.image || "/placeholder.svg"} alt="Progress" layout="fill" objectFit="cover" className="rounded-md" /> </div> )} <p className="text-sm text-muted-foreground">{entry.note}</p> </CardContent> </Card> ))} </div> </> ) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import Sidebar from "@/components/Sidebar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { ChevronLeft, ChevronRight, PlusCircle, Upload, MoreHorizontal, Pencil, Trash } from "lucide-react" import Image from "next/image" import { KnowledgeBits } from "@/components/KnowledgeBits" import { Textarea } from "@/components/ui/textarea" import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import Link from "next/link" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" const products = [ { name: "Better Biotin Gummies", lastUsed: "2 days ago", restockIn: 14, stockLeft: 5, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Biotin%20Gummies-DjnRycmtfnGPzb4AxdKXcZu8tlFkNL.png", isAdded: true, }, { name: "Better Caffeine Shampoo", lastUsed: "1 day ago", restockIn: 7, stockLeft: 2, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Caffeine%20Shampoo-kjyn3rxLSkoIR3vHCCmUfRTBPd1SUW.png", isAdded: true, }, { name: "Better Rosemary Oil", lastUsed: "3 days ago", restockIn: 21, stockLeft: 8, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Rosemary%20Oil-5zOzbsjZtIEvVoctmAKpefQbqXUfeK.png", isAdded: false, }, { name: "Better Aromatherapy Shower Head", lastUsed: "5 days ago", restockIn: 60, stockLeft: 20, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Aromatherapy%20Shower%20Head-5PXqTGgRHYSeME6utkWiLyAPzuScVT.png", isAdded: false, }, { name: "Better Water Filter", lastUsed: "1 day ago", restockIn: 30, stockLeft: 10, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Water%20Filter-YIzC89BLDK5jvzgNLOv5zvajrfDlVt.png", isAdded: true, }, { name: "Better Aroma Pack", lastUsed: "4 days ago", restockIn: 3, stockLeft: 1, image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Aroma%20Pack-ybY1pS0N6nWDNFokvkwBMErknt4GSY.png", isAdded: false, }, ] const progressMilestones = [ { progressTypeId: 1, label: "1 Week", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1%20Week-sgRzm1t5ZrgdhDA49PD13NDLltOTb8.png", alt: "Hair progress after 1 week of treatment", date: "January 7, 2024", time: "9:30 AM", note: "Starting to see some minor improvements in texture. Using the biotin gummies daily.", }, { progressTypeId: 1, label: "2 Weeks", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2%20Weeks-zRauyFVI2dnrMLgb0zWeF345ZryOIK.png", alt: "Hair progress after 2 weeks of treatment", date: "January 14, 2024", time: "9:45 AM", note: "Hair feels stronger. Consistent with the treatment plan.", }, { progressTypeId: 1, label: "4 Weeks", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4%20Weeks-rFwOWwlRCUzMdUaQbFCe7bl75ncqav.png", alt: "Hair progress after 4 weeks of treatment", date: "January 28, 2024", time: "10:00 AM", note: "Noticeable improvement in density. Very happy with the progress!", }, { progressTypeId: 1, label: "3 Months", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3%20Months-5o2pFgJ0SmFtErGtGdbgYfwFpkf0jP.png", alt: "Hair progress after 3 months of treatment", date: "March 28, 2024", time: "9:15 AM", note: "Significant improvement in coverage. Following routine strictly.", }, { progressTypeId: 1, label: "6 Months", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6%20Months-gfia2GNSOldQabkG62T5AJPOxPb4J8.png", alt: "Hair progress after 6 months of treatment", date: "June 28, 2024", time: "9:00 AM", note: "Amazing results! Hair density has improved dramatically.", }, ] const progressTypes = [ { id: 1, name: "Hair Growth" }, { id: 2, name: "Skin Health" }, { id: 3, name: "Nail Strength" }, ] function AddProgressDialog() { return ( <DialogContent className="sm:max-w-[425px]"> <DialogHeader> <DialogTitle>Add Progress Photo</DialogTitle> </DialogHeader> <div className="grid gap-4 py-4"> <div className="grid gap-2"> <Label htmlFor="milestone">Milestone</Label> <select id="milestone" className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background" > <option value="1-week">1 Week</option> <option value="2-weeks">2 Weeks</option> <option value="4-weeks">4 Weeks</option> <option value="3-months">3 Months</option> <option value="6-months">6 Months</option> <option value="custom">Custom Milestone</option> </select> </div> <div className="grid gap-2"> <Label htmlFor="photo">Photo</Label> <div className="flex items-center justify-center w-full"> <label className="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100"> <div className="flex flex-col items-center justify-center pt-5 pb-6"> <Upload className="w-8 h-8 mb-4 text-gray-500" /> <p className="mb-2 text-sm text-gray-500"> <span className="font-semibold">Click to upload</span> or drag and drop </p> <p className="text-xs text-gray-500">PNG, JPG or JPEG (MAX. 800x400px)</p> </div> <input id="photo" type="file" className="hidden" accept="image/" /> </label> </div> </div> <div className="grid gap-2"> <Label htmlFor="note">Note</Label> <Textarea id="note" placeholder="Add a note about your progress... (200 characters max)" className="resize-none" maxLength={200} /> <div className="text-xs text-muted-foreground text-right"> <span id="noteCount">0</span>/200 characters </div> </div> </div> <div className="flex justify-end"> <Button type="submit">Save Progress</Button> </div> </DialogContent> ) } export default function Dashboard() { const [selectedProgressType, setSelectedProgressType] = useState<string>(progressTypes[0].id.toString()) const addedProducts = products.filter((product) => product.isAdded) const filteredProgressMilestones = progressMilestones.filter( (milestone) => milestone.progressTypeId === Number.parseInt(selectedProgressType), ) return ( <div className="flex h-screen"> <Sidebar /> <main className="flex-1 p-8 overflow-auto"> <h1 className="text-3xl font-bold mb-8">Hi Hasanain</h1> <section className="mb-8"> <div className="flex justify-between items-center mb-4"> <h2 className="text-2xl font-semibold">Products</h2> <div className="flex gap-2"> <Button variant="outline" size="icon" className="rounded-full"> <ChevronLeft className="h-4 w-4" /> </Button> <Button variant="outline" size="icon" className="rounded-full"> <ChevronRight className="h-4 w-4" /> </Button> </div> </div> <div className="relative"> {addedProducts.length > 0 ? ( <div className="flex gap-4 overflow-x-auto pb-4 scrollbar-hide"> {addedProducts.map((product, index) => ( <Card key={index} className="w-[280px] flex-shrink-0"> <div className="p-4"> <div className="flex gap-4 items-center mb-3"> <div className="relative w-16 h-16"> <Image src={product.image || "/placeholder.svg"} alt={product.name} layout="fill" objectFit="cover" className="rounded-lg" /> </div> <div className="flex-1 min-w-0"> <h3 className="font-medium text-sm truncate">{product.name}</h3> <p className="text-xs text-muted-foreground">Last used: {product.lastUsed}</p> </div> </div> <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden"> <div className={`h-full ${product.stockLeft <= 3 ? "bg-red-500" : "bg-green-500"}`} style={{ width: `${(product.stockLeft / 30) 100}%` }} /> </div> <p className="text-xs text-muted-foreground mt-2">Stock left: {product.stockLeft} days</p> </div> </Card> ))} </div> ) : ( <Card className="p-6 text-center"> <p className="text-muted-foreground mb-4">No products added yet.</p> <Link href="/products"> <Button>Add Products</Button> </Link> </Card> )} </div> </section> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8"> <section> <h2 className="text-2xl font-semibold mb-4">Restock Reminders</h2> <div className="space-y-4"> {addedProducts .filter((product) => product.stockLeft < 5) .map((product, index) => ( <Card key={index} className="overflow-hidden"> <div className="p-4"> <div className="flex items-center gap-4 mb-4"> <div className="relative w-16 h-16 flex-shrink-0"> <Image src={product.image || "/placeholder.svg"} alt={product.name} layout="fill" objectFit="cover" className="rounded-md" /> </div> <div> <CardTitle className="text-lg mb-1 line-clamp-1">{product.name}</CardTitle> <p className="text-sm font-medium"> Stock left: <span className="font-bold text-red-500">{product.stockLeft} days</span> </p> </div> </div> <Button className="w-full bg-red-500 hover:bg-red-600 text-white">Restock Now</Button> </div> </Card> ))} {addedProducts.filter((product) => product.stockLeft < 5).length === 0 && ( <Card className="p-6"> <p className="text-center text-muted-foreground">No items need restocking at this time.</p> </Card> )} </div> </section> <section> <h2 className="text-2xl font-semibold mb-4">Knowledge Bits</h2> <KnowledgeBits /> </section> </div> <section className="mb-8"> <div className="flex justify-between items-center mb-4"> <h2 className="text-2xl font-semibold">Progress</h2> <Select value={selectedProgressType} onValueChange={setSelectedProgressType}> <SelectTrigger className="w-[200px]"> <SelectValue placeholder="Select progress type" /> </SelectTrigger> <SelectContent> {progressTypes.map((type) => ( <SelectItem key={type.id} value={type.id.toString()}> {type.name} </SelectItem> ))} </SelectContent> </Select> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <Dialog> <DialogTrigger asChild> <Card className="overflow-hidden cursor-pointer hover:border-primary transition-colors"> <CardHeader className="p-4"> <CardTitle className="text-lg">Add Progress</CardTitle> </CardHeader> <CardContent className="p-0"> <div className="aspect-square relative bg-muted flex items-center justify-center"> <div className="flex flex-col items-center gap-2 text-muted-foreground"> <PlusCircle className="h-8 w-8" /> <span className="text-sm font-medium">Upload Photo</span> </div> </div> </CardContent> </Card> </DialogTrigger> <AddProgressDialog /> </Dialog> {filteredProgressMilestones.map((milestone, index) => ( <Card key={index} className="overflow-hidden"> <CardHeader className="p-4 flex flex-row items-center justify-between"> <div> <CardTitle className="text-lg">{milestone.label}</CardTitle> <p className="text-sm text-muted-foreground"> {milestone.date} at {milestone.time} </p> </div> <DropdownMenu> <DropdownMenuTrigger asChild> <Button variant="ghost" className="h-8 w-8 p-0"> <span className="sr-only">Open menu</span> <MoreHorizontal className="h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuItem onClick={() => console.log("Edit", milestone)}> <Pencil className="mr-2 h-4 w-4" /> <span>Edit</span> </DropdownMenuItem> <DropdownMenuItem onClick={() => console.log("Delete", milestone)}> <Trash className="mr-2 h-4 w-4" /> <span>Delete</span> </DropdownMenuItem> </DropdownMenuContent> </DropdownMenu> </CardHeader> <CardContent className="p-0"> <div className="aspect-square relative"> <Image src={milestone.image || "/placeholder.svg"} alt={milestone.alt} layout="fill" objectFit="cover" className="hover:scale-105 transition-transform duration-200" /> </div> {milestone.note && ( <div className="p-4 border-t"> <p className="text-sm text-muted-foreground line-clamp-2">{milestone.note}</p> </div> )} </CardContent> </Card> ))} </div> </section> </main> </div> ) } [V0_FILE]typescriptreact:file="components/Sidebar.tsx" isQuickEdit="true" isMerged="true" import Link from "next/link" import { Home, Calendar, LucideImage, Package, Settings, User, LogOut, Award, Share2 } from "lucide-react" import { Button } from "@/components/ui/button" import Image from "next/image" const Sidebar = () => { return ( <div className="flex flex-col h-screen w-64 bg-gray-200 p-4"> <div className="mb-8"> <Image src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Logo-dark-CUizWlZBCvc6Dpc7jMQFyE3gs94uWa.png" alt="Better Logo" width={120} height={40} priority /> </div> <nav className="flex-1"> <ul className="space-y-2"> <li> <Link href="/dashboard" className="flex items-center p-2 hover:bg-gray-200 rounded"> <Home className="mr-2" /> Dashboard </Link> </li> <li> <Link href="/products" className="flex items-center p-2 hover:bg-gray-200 rounded"> <Package className="mr-2" /> Products </Link> </li> <li> <Link href="/tracker" className="flex items-center p-2 hover:bg-gray-200 rounded"> <Calendar className="mr-2" /> Tracker </Link> </li> <li> <Link href="/progress" className="flex items-center p-2 hover:bg-gray-200 rounded"> <LucideImage className="mr-2" /> Progress </Link> </li> <li> <Link href="/achievements" className="flex items-center p-2 hover:bg-gray-200 rounded"> <Award className="mr-2" /> Achievements </Link> </li> <li> <Link href="/referrals" className="flex items-center p-2 hover:bg-gray-200 rounded"> <Share2 className="mr-2" /> Referrals </Link> </li> </ul> </nav> <div className="mt-auto space-y-2"> <Link href="/settings" className="flex items-center p-2 hover:bg-gray-200 rounded"> <Settings className="mr-2" /> Settings </Link> <Link href="/profile" className="flex items-center p-2 hover:bg-gray-200 rounded"> <User className="mr-2" /> Profile </Link> <Link href="/"> <Button variant="ghost" className="w-full justify-start"> <LogOut className="mr-2" /> Logout </Button> </Link> </div> </div> ) } export default Sidebar [V0_FILE]typescriptreact:file="app/products/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import Image from "next/image" import Sidebar from "@/components/Sidebar" import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { DaySelectorDialog } from "@/components/day-selector-dialog" import { Badge } from "@/components/ui/badge" // Import Badge component import type { CadenceType, Product, UserProduct } from "@/types/products" const allProducts: Product[] = [ { id: 1, name: "Better Biotin Gummies", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Biotin%20Gummies-DjnRycmtfnGPzb4AxdKXcZu8tlFkNL.png", description: "Daily gummies for stronger hair and nails.", recommendedTime: "8:00 AM", defaultCadence: "daily", category: "Hair", conditions: ["dry scalp", "brittle hair"], }, { id: 2, name: "Better Caffeine Shampoo", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Caffeine%20Shampoo-kjyn3rxLSkoIR3vHCCmUfRTBPd1SUW.png", description: "Stimulating shampoo for hair growth.", recommendedTime: "7:00 AM", defaultCadence: "daily", category: "Hair", conditions: ["hair loss", "oily scalp"], }, { id: 3, name: "Better Rosemary Oil", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Rosemary%20Oil-5zOzbsjZtIEvVoctmAKpefQbqXUfeK.png", description: "Nourishing oil for scalp health.", recommendedTime: "9:00 PM", defaultCadence: "twice_weekly", category: "Hair", conditions: ["dry scalp", "flaky scalp"], }, { id: 4, name: "Better Aromatherapy Shower Head", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Aromatherapy%20Shower%20Head-5PXqTGgRHYSeME6utkWiLyAPzuScVT.png", description: "Infuse your shower with essential oils.", recommendedTime: "7:00 AM", defaultCadence: "none", category: "Mind", conditions: ["stress", "anxiety"], }, { id: 5, name: "Better Water Filter", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Water%20Filter-YIzC89BLDK5jvzgNLOv5zvajrfDlVt.png", description: "Purify your water for healthier hair.", recommendedTime: "All Day", defaultCadence: "monthly", category: "Vitality", conditions: ["dehydration", "toxin buildup"], }, { id: 6, name: "Better Aroma Pack", image: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Better%20Aroma%20Pack-ybY1pS0N6nWDNFokvkwBMErknt4GSY.png", description: "Monthly selection of essential oils.", recommendedTime: "8:00 PM", defaultCadence: "monthly", category: "Mind", conditions: ["stress", "insomnia"], }, { id: 7, name: "Better Gut Health Capsules", image: "/placeholder.svg", description: "Probiotics for improved gut health.", recommendedTime: "9:00 AM", defaultCadence: "daily", category: "Gut", conditions: ["bloating", "digestive issues"], }, { id: 8, name: "Better Skin Elixir", image: "/placeholder.svg", description: "Nourishing serum for radiant skin.", recommendedTime: "10:00 PM", defaultCadence: "daily", category: "Skin", conditions: ["dry skin", "fine lines"], }, ] const CADENCE_LABELS = { daily: "Daily", alternate_days: "Alternate Days", twice_weekly: "Twice Weekly", monthly: "Monthly", none: "No Tracking", } const categories = ["Hair", "Gut", "Vitality", "Mind", "Skin"] const conditions = [ "dry scalp", "oily scalp", "flaky scalp", "hair loss", "brittle hair", "dry skin", "oily skin", "fine lines", "stress", "anxiety", "insomnia", "bloating", "digestive issues", "dehydration", "toxin buildup", ] export default function Products() { const [userProducts, setUserProducts] = useState<UserProduct[]>( allProducts.map((product) => ({ ...product, isAdded: false, cadence: product.defaultCadence, selectedDays: [1, 2, 3, 4, 5], // Default to weekdays })), ) const [selectedProductId, setSelectedProductId] = useState<number | null>(null) const [isDaySelectorOpen, setIsDaySelectorOpen] = useState(false) const [searchTerm, setSearchTerm] = useState("") const [selectedCategory, setSelectedCategory] = useState<string | null>(null) const [selectedConditions, setSelectedConditions] = useState<string[]>([]) const handleAddProduct = (product: UserProduct) => { setUserProducts((current) => current.map((p) => (p.id === product.id ? { ...p, isAdded: true } : p))) } const handleRemoveProduct = (product: UserProduct) => { setUserProducts((current) => current.map((p) => (p.id === product.id ? { ...p, isAdded: false } : p))) } const handleCadenceChange = (productId: number, cadence: CadenceType) => { setUserProducts((current) => current.map((p) => (p.id === productId ? { ...p, cadence } : p))) } const openDaySelector = (productId: number) => { setSelectedProductId(productId) setIsDaySelectorOpen(true) } const handleDaysSave = (days: number[]) => { if (selectedProductId) { setUserProducts((current) => current.map((p) => (p.id === selectedProductId ? { ...p, selectedDays: days } : p))) } } const handleConditionToggle = (condition: string) => { setSelectedConditions((current) => current.includes(condition) ? current.filter((c) => c !== condition) : [...current, condition], ) } const filteredProducts = userProducts.filter((product) => { const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase()) || product.description.toLowerCase().includes(searchTerm.toLowerCase()) const matchesCategory = !selectedCategory || product.category === selectedCategory const matchesConditions = selectedConditions.length === 0 || selectedConditions.some((condition) => product.conditions.includes(condition)) return matchesSearch && matchesCategory && matchesConditions }) return ( <div className="flex h-screen"> <Sidebar /> <main className="flex-1 p-8 overflow-auto"> <h1 className="text-3xl font-bold mb-8">Products</h1> <div className="mb-8 space-y-4"> <Input type="text" placeholder="Search products..." value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} className="max-w-md" /> <div className="flex space-x-4"> <Select value={selectedCategory || ""} onValueChange={(value) => setSelectedCategory(value || null)}> <SelectTrigger className="w-[180px]"> <SelectValue placeholder="Select category" /> </SelectTrigger> <SelectContent> <SelectItem value="all">All Categories</SelectItem> {/* Added value prop */} {categories.map((category) => ( <SelectItem key={category} value={category}> {category} </SelectItem> ))} </SelectContent> </Select> <div className="flex-1 border rounded-md p-4 max-h-40 overflow-y-auto"> <h3 className="font-semibold mb-2">Conditions</h3> <div className="grid grid-cols-2 gap-2"> {conditions.map((condition) => ( <div key={condition} className="flex items-center space-x-2"> <Checkbox id={condition} checked={selectedConditions.includes(condition)} onCheckedChange={() => handleConditionToggle(condition)} /> <Label htmlFor={condition}>{condition}</Label> </div> ))} </div> </div> </div> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {filteredProducts.map((product) => ( <Card key={product.id} className="flex flex-col"> <div className="aspect-square relative"> <Image src={product.image || "/placeholder.svg"} alt={product.name} layout="fill" objectFit="cover" /> </div> <CardHeader> <CardTitle>{product.name}</CardTitle> </CardHeader> <CardContent> <p className="text-sm text-muted-foreground mb-4">{product.description}</p> <div className="flex flex-wrap gap-2 mb-4"> <Badge>{product.category}</Badge> {product.conditions.map((condition) => ( <Badge key={condition} variant="secondary"> {condition} </Badge> ))} </div> {product.isAdded && ( <div className="space-y-4"> <div className="flex items-center gap-2"> <span className="text-sm font-medium">Tracking:</span> <Select value={product.cadence} onValueChange={(value: CadenceType) => handleCadenceChange(product.id, value)} > <SelectTrigger className="w-[140px]"> <SelectValue placeholder="Select cadence" /> </SelectTrigger> <SelectContent> {Object.entries(CADENCE_LABELS).map(([value, label]) => ( <SelectItem key={value} value={value}> {label} </SelectItem> ))} </SelectContent> </Select> </div> {(product.cadence === "daily" || product.cadence === "alternate_days" || product.cadence === "twice_weekly") && ( <Button variant="outline" size="sm" onClick={() => openDaySelector(product.id)}> Select Days </Button> )} {product.selectedDays.length > 0 && ( <div className="text-sm text-muted-foreground"> Tracking on:{" "} {product.selectedDays .map((d) => ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][d]) .join(", ")} </div> )} </div> )} </CardContent> <CardFooter className="mt-auto flex flex-col gap-2"> <Button variant="secondary" className="w-full bg-[#BEE510] text-[#0D4225] hover:bg-[#a8cd0e]"> View / Buy Product </Button> {!product.isAdded && ( <Button className="w-full bg-[#BEE510] text-[#0D4225] hover:bg-[#a8cd0e]" onClick={() => handleAddProduct(product)} > Add Product </Button> )} {product.isAdded && ( <Button variant="destructive" className="w-full bg-[#BEE510] text-[#0D4225] hover:bg-[#a8cd0e]" onClick={() => handleRemoveProduct(product)} > Remove </Button> )} </CardFooter> </Card> ))} </div> <DaySelectorDialog open={isDaySelectorOpen} onOpenChange={setIsDaySelectorOpen} selectedDays={ selectedProductId ? userProducts.find((p) => p.id === selectedProductId)?.selectedDays || [] : [] } onSave={handleDaysSave} /> </main> </div> ) } </article></body></html>