[V0_FILE]typescript:file="lib/supabase/client.ts" isMerged="true" import { createBrowserClient } from "@supabase/ssr" export function createClient() { return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!) } [V0_FILE]typescript:file="lib/supabase/server.ts" isMerged="true" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" /** * Especially important if using Fluid compute: Don't put this client in a * global variable. Always create a new client within each function when using * it. */ export async function createClient() { const cookieStore = await cookies() return createServerClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return cookieStore.getAll() }, setAll(cookiesToSet) { try { cookiesToSet.forEach(({ name, value, options }) => cookieStore.set(name, value, options)) } catch { // The "setAll" method was called from a Server Component. // This can be ignored if you have middleware refreshing // user sessions. } }, }, }) } [V0_FILE]typescript:file="middleware.ts" isMerged="true" import { updateSession } from "@/lib/supabase/middleware" import type { NextRequest } from "next/server" export async function middleware(request: NextRequest) { return await updateSession(request) } export const config = { matcher: [ /* * Match all request paths except: * - _next/static (static files) * - _next/image (image optimization files) * - favicon.ico (favicon file) * - images - .svg, .png, .jpg, .jpeg, .gif, .webp * Feel free to modify this pattern to include more paths. */ "/((?!_next/static|_next/image|favicon.ico|.*.(?:svg|png|jpg|jpeg|gif|webp)$).*)", ], } [V0_FILE]typescriptreact:file="app/auth/sign-up-success/page.tsx" isMerged="true" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" export default function Page() { return (

Thank you for signing up! Check your email to confirm

You've successfully signed up. Please check your email to confirm your account before signing in.

) } [V0_FILE]typescriptreact:file="app/auth/error/page.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" export default async function Page({ searchParams, }: { searchParams: Promise<{ error: string }> }) { const params = await searchParams return (

Sorry, something went wrong. {params?.error ? (

Code error: {params.error}

) : (

An unspecified error occurred.

)}

) } [V0_FILE]sql:file="scripts/001_create_tables.sql" isMerged="true" -- Create projects table CREATE TABLE IF NOT EXISTS projects ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, name TEXT NOT NULL, color TEXT NOT NULL, created_at TIMESTAMPTZ DEFAULT NOW() ); -- Enable RLS on projects ALTER TABLE projects ENABLE ROW LEVEL SECURITY; -- RLS policies for projects CREATE POLICY "Users can view their own projects" ON projects FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own projects" ON projects FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own projects" ON projects FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own projects" ON projects FOR DELETE USING (auth.uid() = user_id); -- Create goals table CREATE TABLE IF NOT EXISTS goals ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), project_id UUID NOT NULL REFERENCES projects(id) ON DELETE CASCADE, frequency TEXT NOT NULL CHECK (frequency IN ('daily', 'weekly', 'monthly', 'custom')), custom_days INTEGER, social_media TEXT[], created_at TIMESTAMPTZ DEFAULT NOW() ); -- Enable RLS on goals ALTER TABLE goals ENABLE ROW LEVEL SECURITY; -- RLS policies for goals (check ownership through projects) CREATE POLICY "Users can view goals for their projects" ON goals FOR SELECT USING ( EXISTS ( SELECT 1 FROM projects WHERE projects.id = goals.project_id AND projects.user_id = auth.uid() ) ); CREATE POLICY "Users can insert goals for their projects" ON goals FOR INSERT WITH CHECK ( EXISTS ( SELECT 1 FROM projects WHERE projects.id = goals.project_id AND projects.user_id = auth.uid() ) ); CREATE POLICY "Users can update goals for their projects" ON goals FOR UPDATE USING ( EXISTS ( SELECT 1 FROM projects WHERE projects.id = goals.project_id AND projects.user_id = auth.uid() ) ); CREATE POLICY "Users can delete goals for their projects" ON goals FOR DELETE USING ( EXISTS ( SELECT 1 FROM projects WHERE projects.id = goals.project_id AND projects.user_id = auth.uid() ) ); -- Create scheduled_posts table CREATE TABLE IF NOT EXISTS scheduled_posts ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), project_id UUID NOT NULL REFERENCES projects(id) ON DELETE CASCADE, user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE, scheduled_date DATE NOT NULL, title TEXT, notes TEXT, completed BOOLEAN DEFAULT FALSE, created_at TIMESTAMPTZ DEFAULT NOW() ); -- Enable RLS on scheduled_posts ALTER TABLE scheduled_posts ENABLE ROW LEVEL SECURITY; -- RLS policies for scheduled_posts CREATE POLICY "Users can view their own scheduled posts" ON scheduled_posts FOR SELECT USING (auth.uid() = user_id); CREATE POLICY "Users can insert their own scheduled posts" ON scheduled_posts FOR INSERT WITH CHECK (auth.uid() = user_id); CREATE POLICY "Users can update their own scheduled posts" ON scheduled_posts FOR UPDATE USING (auth.uid() = user_id); CREATE POLICY "Users can delete their own scheduled posts" ON scheduled_posts FOR DELETE USING (auth.uid() = user_id); -- Create index for faster queries CREATE INDEX IF NOT EXISTS idx_projects_user_id ON projects(user_id); CREATE INDEX IF NOT EXISTS idx_goals_project_id ON goals(project_id); CREATE INDEX IF NOT EXISTS idx_scheduled_posts_user_id ON scheduled_posts(user_id); CREATE INDEX IF NOT EXISTS idx_scheduled_posts_project_id ON scheduled_posts(project_id); CREATE INDEX IF NOT EXISTS idx_scheduled_posts_date ON scheduled_posts(scheduled_date); [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" export default async function HomePage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } redirect("/dashboard") } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "@supabase/ssr": "0.7.0", "color": "5.0.2", "radix-ui": "1.4.3" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/projects-list.tsx" isMerged="true" "use client" import { ProjectCard } from "./project-card" interface Project { id: string name: string color: string created_at: string } interface ProjectsListProps { projects: Project[] } export function ProjectsList({ projects }: ProjectsListProps) { if (projects.length === 0) { return (

No projects yet

Create your first project to get started

) } return (

{projects.map((project) => ( ))}

) } [V0_FILE]typescriptreact:file="components/create-project-button.tsx" isMerged="true" "use client" import { useState } from "react" import { Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { CreateProjectDialog } from "./create-project-dialog" export function CreateProjectButton() { const [open, setOpen] = useState(false) return ( <> ) } [V0_FILE]typescript:file="app/actions/projects.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use server" import { createClient } from "@/lib/supabase/server" import { revalidatePath } from "next/cache" export async function createProject(data: { name: string; color: string }) { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { throw new Error("Unauthorized") } const { data: projects, error: fetchError } = await supabase.from("projects").select("id").eq("user_id", user.id) console.log("[v0] Server-side project count:", projects?.length) if (fetchError) { console.error("[v0] Error fetching projects:", fetchError) throw fetchError } if (projects && projects.length >= 3) { console.log("[v0] Project limit reached, blocking creation") throw new Error("Project limit reached. You can only create up to 3 projects.") } const { error } = await supabase.from("projects").insert({ name: data.name, color: data.color, user_id: user.id, }) if (error) { console.error("[v0] Error inserting project:", error) throw error } console.log("[v0] Project created successfully") revalidatePath("/dashboard") } export async function updateProject(id: string, data: { name: string; color: string }) { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { throw new Error("Unauthorized") } const { error } = await supabase.from("projects").update(data).eq("id", id).eq("user_id", user.id) if (error) { throw error } revalidatePath("/dashboard") } export async function deleteProject(id: string) { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { throw new Error("Unauthorized") } const { error } = await supabase.from("projects").delete().eq("id", id).eq("user_id", user.id) if (error) { throw error } revalidatePath("/dashboard") } [V0_FILE]typescript:file="app/actions/goals.ts" isMerged="true" "use server" import { createClient } from "@/lib/supabase/server" import { revalidatePath } from "next/cache" interface SetGoalData { projectId: string goalId?: string frequency: string customDays: number | null socialMedia: string[] | null } export async function setGoal(data: SetGoalData) { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { throw new Error("Unauthorized") } // Verify project ownership const { data: project } = await supabase .from("projects") .select("id") .eq("id", data.projectId) .eq("user_id", user.id) .single() if (!project) { throw new Error("Project not found") } const goalData = { project_id: data.projectId, frequency: data.frequency, custom_days: data.customDays, social_media: data.socialMedia, } if (data.goalId) { // Update existing goal const { error } = await supabase.from("goals").update(goalData).eq("id", data.goalId) if (error) { throw error } } else { // Create new goal const { error } = await supabase.from("goals").insert(goalData) if (error) { throw error } } revalidatePath("/dashboard") } [V0_FILE]typescriptreact:file="app/calendar/page.tsx" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { Calendar } from "@/components/calendar" export default async function CalendarPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const { data: projects } = await supabase.from("projects").select("*") const { data: scheduledPosts } = await supabase .from("scheduled_posts") .select( ` *, projects ( name, color ) `, ) .order("scheduled_date", { ascending: true }) return (

) } [V0_FILE]typescript:file="app/actions/posts.ts" isEdit="true" isQuickEdit="true" isMerged="true" "use server" import { createClient } from "@/lib/supabase/server" import { revalidatePath } from "next/cache" interface SchedulePostData { projectId: string scheduledDate: string title: string | null notes: string | null } interface UpdatePostData { projectId: string scheduledDate: string title: string | null notes: string | null completed: boolean } export async function schedulePost(data: SchedulePostData) { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { throw new Error("Unauthorized") } // Verify project ownership const { data: project } = await supabase .from("projects") .select("id") .eq("id", data.projectId) .eq("user_id", user.id) .single() if (!project) { throw new Error("Project not found") } const { data: existingPosts, error: fetchError } = await supabase .from("scheduled_posts") .select("id") .eq("project_id", data.projectId) .eq("user_id", user.id) if (fetchError) { throw fetchError } if (existingPosts && existingPosts.length >= 5) { throw new Error("Post limit reached. You can only schedule up to 5 posts per project.") } const { error } = await supabase.from("scheduled_posts").insert({ project_id: data.projectId, user_id: user.id, scheduled_date: data.scheduledDate, title: data.title, notes: data.notes, completed: false, }) if (error) { throw error } revalidatePath("/calendar") } export async function updatePost(postId: string, data: UpdatePostData) { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { throw new Error("Unauthorized") } // Verify project ownership const { data: project } = await supabase .from("projects") .select("id") .eq("id", data.projectId) .eq("user_id", user.id) .single() if (!project) { throw new Error("Project not found") } const { error } = await supabase .from("scheduled_posts") .update({ project_id: data.projectId, scheduled_date: data.scheduledDate, title: data.title, notes: data.notes, completed: data.completed, }) .eq("id", postId) .eq("user_id", user.id) if (error) { throw error } revalidatePath("/calendar") } export async function deletePost(postId: string) { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { throw new Error("Unauthorized") } const { error } = await supabase.from("scheduled_posts").delete().eq("id", postId).eq("user_id", user.id) if (error) { throw error } revalidatePath("/calendar") } [V0_FILE]typescript:file="app/auth/callback/route.ts" isEdit="true" isMerged="true" import { createClient } from "@/lib/supabase/server" import { NextResponse } from "next/server" export async function GET(request: Request) { const requestUrl = new URL(request.url) const code = requestUrl.searchParams.get("code") const origin = requestUrl.origin if (code) { const supabase = await createClient() await supabase.auth.exchangeCodeForSession(code) } // Redirect to dashboard after successful OAuth login return NextResponse.redirect(`${origin}/dashboard`) } [V0_FILE]typescriptreact:file="components/ui/kibo-ui/color-picker.tsx" isMerged="true" "use client" import { ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerSelection, } from "@/components/ui/kibo-ui/color-picker" const Example = () => (

) export default Example [V0_FILE]typescriptreact:file="components/edit-project-dialog.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { updateProject } from "@/app/actions/projects" import { Pipette } from "lucide-react" import { ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHue, ColorPickerOutput, ColorPickerSelection, } from "@/components/ui/color-picker" import Color from "color" interface Project { id: string name: string color: string } interface EditProjectDialogProps { project: Project open: boolean onOpenChange: (open: boolean) => void } const PRESET_COLORS = [ "#ef4444", // red "#f97316", // orange "#eab308", // yellow "#22c55e", // green "#06b6d4", // cyan "#3b82f6", // blue "#8b5cf6", // violet "#ec4899", // pink ] export function EditProjectDialog({ project, open, onOpenChange }: EditProjectDialogProps) { const [name, setName] = useState(project.name) const [color, setColor] = useState(project.color) const [isLoading, setIsLoading] = useState(false) const [colorPickerOpen, setColorPickerOpen] = useState(false) const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { await updateProject(project.id, { name, color }) onOpenChange(false) router.refresh() } catch (error) { console.error("Failed to update project:", error) alert("Failed to update project") } finally { setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/ui/color-picker.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import Color from "color" import { PipetteIcon } from "lucide-react" import { Slider } from "radix-ui" import { type ComponentProps, createContext, type HTMLAttributes, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { cn } from "@/lib/utils" interface ColorPickerContextValue { hue: number saturation: number lightness: number alpha: number mode: string setHue: (hue: number) => void setSaturation: (saturation: number) => void setLightness: (lightness: number) => void setAlpha: (alpha: number) => void setMode: (mode: string) => void } const ColorPickerContext = createContext(undefined) export const useColorPicker = () => { const context = useContext(ColorPickerContext) if (!context) { throw new Error("useColorPicker must be used within a ColorPickerProvider") } return context } export type ColorPickerProps = HTMLAttributes & { value?: Parameters[0] defaultValue?: Parameters[0] onChange?: (value: Parameters[0]) => void } export const ColorPicker = ({ value, defaultValue = "#000000", onChange, className, ...props }: ColorPickerProps) => { const selectedColor = value ? Color(value) : Color(defaultValue) const defaultColor = Color(defaultValue) const [hue, setHue] = useState(selectedColor.hue() || defaultColor.hue() || 0) const [saturation, setSaturation] = useState(selectedColor.saturationl() || defaultColor.saturationl() || 100) const [lightness, setLightness] = useState(selectedColor.lightness() || defaultColor.lightness() || 50) const [alpha, setAlpha] = useState(selectedColor.alpha() * 100 || defaultColor.alpha() * 100) const [mode, setMode] = useState("hex") useEffect(() => { if (value) { try { const color = Color(value) const [h, s, l] = color.hsl().array() setHue(h || 0) setSaturation(s || 0) setLightness(l || 0) setAlpha((color.alpha() || 1) * 100) } catch (error) { console.error("[v0] Failed to parse color value:", value, error) } } }, [value]) // Notify parent of changes useEffect(() => { if (onChange) { const color = Color.hsl(hue, saturation, lightness).alpha(alpha / 100) const rgba = color.rgb().array() onChange([rgba[0], rgba[1], rgba[2], alpha / 100]) } }, [hue, saturation, lightness, alpha, onChange]) return (

) } export type ColorPickerSelectionProps = HTMLAttributes export const ColorPickerSelection = memo(({ className, ...props }: ColorPickerSelectionProps) => { const containerRef = useRef(null) const [isDragging, setIsDragging] = useState(false) const [positionX, setPositionX] = useState(0) const [positionY, setPositionY] = useState(0) const { hue, setSaturation, setLightness } = useColorPicker() const backgroundGradient = useMemo(() => { return `linear-gradient(0deg, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)), hsl(${hue}, 100%, 50%)` }, [hue]) const handlePointerMove = useCallback( (event: PointerEvent) => { if (!(isDragging && containerRef.current)) { return } const rect = containerRef.current.getBoundingClientRect() const x = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width)) const y = Math.max(0, Math.min(1, (event.clientY - rect.top) / rect.height)) setPositionX(x) setPositionY(y) setSaturation(x * 100) const topLightness = x < 0.01 ? 100 : 50 + 50 * (1 - x) const lightness = topLightness * (1 - y) setLightness(lightness) }, [isDragging, setSaturation, setLightness], ) useEffect(() => { const handlePointerUp = () => setIsDragging(false) if (isDragging) { window.addEventListener("pointermove", handlePointerMove) window.addEventListener("pointerup", handlePointerUp) } return () => { window.removeEventListener("pointermove", handlePointerMove) window.removeEventListener("pointerup", handlePointerUp) } }, [isDragging, handlePointerMove]) return (

{ e.preventDefault() setIsDragging(true) handlePointerMove(e.nativeEvent) }} ref={containerRef} style={{ background: backgroundGradient, }} {...props} >

) }) ColorPickerSelection.displayName = "ColorPickerSelection" export type ColorPickerHueProps = ComponentProps export const ColorPickerHue = ({ className, ...props }: ColorPickerHueProps) => { const { hue, setHue } = useColorPicker() return ( setHue(hue)} step={1} value={[hue]} {...props} > ) } export type ColorPickerAlphaProps = ComponentProps export const ColorPickerAlpha = ({ className, ...props }: ColorPickerAlphaProps) => { const { alpha, setAlpha } = useColorPicker() return ( setAlpha(alpha)} step={1} value={[alpha]} {...props} >

) } export type ColorPickerEyeDropperProps = ComponentProps export const ColorPickerEyeDropper = ({ className, ...props }: ColorPickerEyeDropperProps) => { const { setHue, setSaturation, setLightness, setAlpha } = useColorPicker() const handleEyeDropper = async () => { try { // @ts-expect-error - EyeDropper API is experimental const eyeDropper = new EyeDropper() const result = await eyeDropper.open() const color = Color(result.sRGBHex) const [h, s, l] = color.hsl().array() setHue(h) setSaturation(s) setLightness(l) setAlpha(100) } catch (error) { console.error("EyeDropper failed:", error) } } return ( ) } export type ColorPickerOutputProps = ComponentProps const formats = ["hex", "rgb", "css", "hsl"] export const ColorPickerOutput = ({ className, ...props }: ColorPickerOutputProps) => { const { mode, setMode } = useColorPicker() return ( ) } type PercentageInputProps = ComponentProps const PercentageInput = ({ className, ...props }: PercentageInputProps) => { return (

) } export type ColorPickerFormatProps = HTMLAttributes export const ColorPickerFormat = ({ className, ...props }: ColorPickerFormatProps) => { const { hue, saturation, lightness, alpha, mode } = useColorPicker() const color = Color.hsl(hue, saturation, lightness, alpha / 100) if (mode === "hex") { const hex = color.hex() return (

) } if (mode === "rgb") { const rgb = color .rgb() .array() .map((value) => Math.round(value)) return (

{rgb.map((value, index) => ( ))}

) } if (mode === "css") { const rgb = color .rgb() .array() .map((value) => Math.round(value)) return (

) } if (mode === "hsl") { const hsl = color .hsl() .array() .map((value) => Math.round(value)) return (

{hsl.map((value, index) => ( ))}

) } return null } [V0_FILE]typescriptreact:file="components/ui/contribution-graph.tsx" isMerged="true" "use client" import type { Day as WeekDay } from "date-fns" import { differenceInCalendarDays, eachDayOfInterval, formatISO, getDay, getMonth, getYear, nextDay, parseISO, subWeeks, } from "date-fns" import { type CSSProperties, createContext, Fragment, type HTMLAttributes, type ReactNode, useContext, useMemo, } from "react" import { cn } from "@/lib/utils" export type Activity = { date: string count: number level: number } type Week = Array export type Labels = { months?: string[] weekdays?: string[] totalCount?: string legend?: { less?: string more?: string } } type MonthLabel = { weekIndex: number label: string } const DEFAULT_MONTH_LABELS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] const DEFAULT_LABELS: Labels = { months: DEFAULT_MONTH_LABELS, weekdays: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], totalCount: "{{count}} activities in {{year}}", legend: { less: "Less", more: "More", }, } type ContributionGraphContextType = { data: Activity[] weeks: Week[] blockMargin: number blockRadius: number blockSize: number fontSize: number labels: Labels labelHeight: number maxLevel: number totalCount: number weekStart: WeekDay year: number width: number height: number } const ContributionGraphContext = createContext(null) const useContributionGraph = () => { const context = useContext(ContributionGraphContext) if (!context) { throw new Error("ContributionGraph components must be used within a ContributionGraph") } return context } const fillHoles = (activities: Activity[]): Activity[] => { if (activities.length === 0) { return [] } const sortedActivities = [...activities].sort((a, b) => a.date.localeCompare(b.date)) const calendar = new Map(activities.map((a) => [a.date, a])) const firstActivity = sortedActivities[0] as Activity const lastActivity = sortedActivities.at(-1) if (!lastActivity) { return [] } return eachDayOfInterval({ start: parseISO(firstActivity.date), end: parseISO(lastActivity.date), }).map((day) => { const date = formatISO(day, { representation: "date" }) if (calendar.has(date)) { return calendar.get(date) as Activity } return { date, count: 0, level: 0, } }) } const groupByWeeks = (activities: Activity[], weekStart: WeekDay = 0): Week[] => { if (activities.length === 0) { return [] } const normalizedActivities = fillHoles(activities) const firstActivity = normalizedActivities[0] as Activity const firstDate = parseISO(firstActivity.date) const firstCalendarDate = getDay(firstDate) === weekStart ? firstDate : subWeeks(nextDay(firstDate, weekStart), 1) const paddedActivities = [ ...(new Array(differenceInCalendarDays(firstDate, firstCalendarDate)).fill(undefined) as Activity[]), ...normalizedActivities, ] const numberOfWeeks = Math.ceil(paddedActivities.length / 7) return new Array(numberOfWeeks) .fill(undefined) .map((_, weekIndex) => paddedActivities.slice(weekIndex * 7, weekIndex * 7 + 7)) } const getMonthLabels = (weeks: Week[], monthNames: string[] = DEFAULT_MONTH_LABELS): MonthLabel[] => { return weeks .reduce((labels, week, weekIndex) => { const firstActivity = week.find((activity) => activity !== undefined) if (!firstActivity) { throw new Error(`Unexpected error: Week ${weekIndex + 1} is empty: [${week}].`) } const month = monthNames[getMonth(parseISO(firstActivity.date))] if (!month) { const monthName = new Date(firstActivity.date).toLocaleString("en-US", { month: "short", }) throw new Error(`Unexpected error: undefined month label for ${monthName}.`) } const prevLabel = labels.at(-1) if (weekIndex === 0 || !prevLabel || prevLabel.label !== month) { return labels.concat({ weekIndex, label: month }) } return labels }, []) .filter(({ weekIndex }, index, labels) => { const minWeeks = 3 if (index === 0) { return labels[1] && labels[1].weekIndex - weekIndex >= minWeeks } if (index === labels.length - 1) { return weeks.slice(weekIndex).length >= minWeeks } return true }) } export type ContributionGraphProps = HTMLAttributes & { data: Activity[] blockMargin?: number blockRadius?: number blockSize?: number fontSize?: number labels?: Labels maxLevel?: number style?: CSSProperties totalCount?: number weekStart?: WeekDay children: ReactNode className?: string } export const ContributionGraph = ({ data, blockMargin = 4, blockRadius = 2, blockSize = 12, fontSize = 14, labels: labelsProp = undefined, maxLevel: maxLevelProp = 4, style = {}, totalCount: totalCountProp = undefined, weekStart = 0, className, children, ...props }: ContributionGraphProps) => { const maxLevel = Math.max(1, maxLevelProp) const weeks = useMemo(() => groupByWeeks(data, weekStart), [data, weekStart]) const LABEL_MARGIN = 8 const labels = { ...DEFAULT_LABELS, ...labelsProp } const labelHeight = fontSize + LABEL_MARGIN const year = data.length > 0 ? getYear(parseISO(data[0].date)) : new Date().getFullYear() const totalCount = typeof totalCountProp === "number" ? totalCountProp : data.reduce((sum, activity) => sum + activity.count, 0) const width = weeks.length * (blockSize + blockMargin) - blockMargin const height = labelHeight + (blockSize + blockMargin) * 7 - blockMargin if (data.length === 0) { return null } return (

{children}

) } export type ContributionGraphBlockProps = HTMLAttributes & { activity: Activity dayIndex: number weekIndex: number } export const ContributionGraphBlock = ({ activity, dayIndex, weekIndex, className, ...props }: ContributionGraphBlockProps) => { const { blockSize, blockMargin, blockRadius, labelHeight, maxLevel } = useContributionGraph() if (activity.level < 0 || activity.level > maxLevel) { throw new RangeError( `Provided activity level ${activity.level} for ${activity.date} is out of range. It must be between 0 and ${maxLevel}.`, ) } return ( ) } export type ContributionGraphCalendarProps = Omit, "children"> & { hideMonthLabels?: boolean className?: string children: (props: { activity: Activity dayIndex: number weekIndex: number }) => ReactNode } export const ContributionGraphCalendar = ({ hideMonthLabels = false, className, children, ...props }: ContributionGraphCalendarProps) => { const { weeks, width, height, blockSize, blockMargin, labels } = useContributionGraph() const monthLabels = useMemo(() => getMonthLabels(weeks, labels.months), [weeks, labels.months]) return (

) } export type ContributionGraphFooterProps = HTMLAttributes export const ContributionGraphFooter = ({ className, ...props }: ContributionGraphFooterProps) => (

) export type ContributionGraphTotalCountProps = Omit, "children"> & { children?: (props: { totalCount: number; year: number }) => ReactNode } export const ContributionGraphTotalCount = ({ className, children, ...props }: ContributionGraphTotalCountProps) => { const { totalCount, year, labels } = useContributionGraph() if (children) { return <>{children({ totalCount, year })} } return (

{labels.totalCount ? labels.totalCount.replace("{{count}}", String(totalCount)).replace("{{year}}", String(year)) : `${totalCount} activities in ${year}`}

) } export type ContributionGraphLegendProps = Omit, "children"> & { children?: (props: { level: number }) => ReactNode } export const ContributionGraphLegend = ({ className, children, ...props }: ContributionGraphLegendProps) => { const { labels, maxLevel, blockSize, blockRadius } = useContributionGraph() return (

{labels.legend?.less || "Less"} {new Array(maxLevel + 1).fill(undefined).map((_, level) => children ? ( {children({ level })} ) : ( ), )} {labels.legend?.more || "More"}

) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" isEdit="true" isMerged="true" import { redirect } from "next/navigation" import { createClient } from "@/lib/supabase/server" import { CreateProjectButton } from "@/components/create-project-button" import { DashboardContent } from "@/components/dashboard-content" import { Button } from "@/components/ui/button" import { Calendar } from "lucide-react" import Link from "next/link" export default async function DashboardPage() { const supabase = await createClient() const { data: { user }, } = await supabase.auth.getUser() if (!user) { redirect("/auth/login") } const { data: projects } = await supabase .from("projects") .select( ` *, goals (*) `, ) .order("created_at", { ascending: false }) return (

Content Goal Tracker

) } [V0_FILE]typescriptreact:file="components/dashboard-content.tsx" isMerged="true" "use client" import { useState } from "react" import { ProjectsList } from "./projects-list" import { ProjectContributionGraph } from "./project-contribution-graph" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" interface Goal { id: string frequency: string custom_days: number | null } interface Project { id: string name: string color: string created_at: string goals: Goal[] } interface DashboardContentProps { projects: Project[] } export function DashboardContent({ projects }: DashboardContentProps) { const [selectedProjectId, setSelectedProjectId] = useState(projects.length > 0 ? projects[0].id : null) const selectedProject = projects.find((p) => p.id === selectedProjectId) if (projects.length === 0) { return (

No projects yet

Create your first project to get started

) } return (

Progress Overview

{selectedProject && (

)}

Your Projects

) } [V0_FILE]typescriptreact:file="app/auth/login/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/client" 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 Link from "next/link" import { useRouter } from "next/navigation" import { useState, useEffect } from "react" export default function Page() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState(null) const [emailError, setEmailError] = useState(null) const [passwordError, setPasswordError] = useState(null) const [isLoading, setIsLoading] = useState(false) const [lastAuthMethod, setLastAuthMethod] = useState(null) const router = useRouter() useEffect(() => { const lastMethod = localStorage.getItem("lastAuthMethod") setLastAuthMethod(lastMethod) }, []) const validateForm = (): boolean => { let isValid = true setEmailError(null) setPasswordError(null) if (!email.trim()) { setEmailError("Email is required") isValid = false } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setEmailError("Please enter a valid email address") isValid = false } if (!password) { setPasswordError("Password is required") isValid = false } return isValid } const handleLogin = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) { return } const supabase = createClient() setIsLoading(true) setError(null) try { const { error } = await supabase.auth.signInWithPassword({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/dashboard`, }, }) if (error) throw error localStorage.setItem("lastAuthMethod", "email") router.push("/dashboard") } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } const handleOAuthLogin = async (provider: "google" | "github") => { const supabase = createClient() setError(null) try { localStorage.setItem("lastAuthMethod", provider) const { error } = await supabase.auth.signInWithOAuth({ provider, options: { redirectTo: `${window.location.origin}/auth/callback`, }, }) if (error) throw error } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } } return (

Email {lastAuthMethod === "email" && Last used}

setEmail(e.target.value)} className={emailError ? "border-red-500 focus-visible:ring-red-500" : ""} /> {emailError &&

{emailError}

}

Password setPassword(e.target.value)} className={passwordError ? "border-red-500 focus-visible:ring-red-500" : ""} /> {passwordError &&

{passwordError}

}

{error &&

{error}

}

Or continue with

{lastAuthMethod === "google" && ( Last used )}

{lastAuthMethod === "github" && ( Last used )}

Don't have an account?{" "} Sign up

) } [V0_FILE]typescriptreact:file="app/auth/sign-up/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { createClient } from "@/lib/supabase/client" 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 Link from "next/link" import { useRouter } from "next/navigation" import { useState } from "react" export default function Page() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [repeatPassword, setRepeatPassword] = useState("") const [error, setError] = useState(null) const [emailError, setEmailError] = useState(null) const [passwordError, setPasswordError] = useState(null) const [repeatPasswordError, setRepeatPasswordError] = useState(null) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const validateForm = (): boolean => { let isValid = true setEmailError(null) setPasswordError(null) setRepeatPasswordError(null) if (!email.trim()) { setEmailError("Email is required") isValid = false } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setEmailError("Please enter a valid email address") isValid = false } if (!password) { setPasswordError("Password is required") isValid = false } else if (password.length < 6) { setPasswordError("Password must be at least 6 characters") isValid = false } if (!repeatPassword) { setRepeatPasswordError("Please confirm your password") isValid = false } else if (password !== repeatPassword) { setRepeatPasswordError("Passwords do not match") isValid = false } return isValid } const handleSignUp = async (e: React.FormEvent) => { e.preventDefault() if (!validateForm()) { return } const supabase = createClient() setIsLoading(true) setError(null) try { const { error } = await supabase.auth.signUp({ email, password, options: { emailRedirectTo: process.env.NEXT_PUBLIC_DEV_SUPABASE_REDIRECT_URL || `${window.location.origin}/dashboard`, }, }) if (error) throw error router.push("/auth/sign-up-success") } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } finally { setIsLoading(false) } } const handleOAuthSignUp = async (provider: "google" | "github") => { const supabase = createClient() setError(null) try { const { error } = await supabase.auth.signInWithOAuth({ provider, options: { redirectTo: `${window.location.origin}/auth/callback`, }, }) if (error) throw error } catch (error: unknown) { setError(error instanceof Error ? error.message : "An error occurred") } } return (

Email setEmail(e.target.value)} className={emailError ? "border-red-500 focus-visible:ring-red-500" : ""} /> {emailError &&

{emailError}

}

Password

setPassword(e.target.value)} className={passwordError ? "border-red-500 focus-visible:ring-red-500" : ""} /> {passwordError &&

{passwordError}

}

Repeat Password

setRepeatPassword(e.target.value)} className={repeatPasswordError ? "border-red-500 focus-visible:ring-red-500" : ""} /> {repeatPasswordError &&

{repeatPasswordError}

}

{error &&

{error}

}

Or continue with

Already have an account?{" "} Login

) } [V0_FILE]typescript:file="lib/supabase/middleware.ts" isEdit="true" isMerged="true" import { createServerClient } from "@supabase/ssr" import { NextResponse, type NextRequest } from "next/server" export async function updateSession(request: NextRequest) { let supabaseResponse = NextResponse.next({ request, }) // With Fluid compute, don't put this client in a global environment // variable. Always create a new one on each request. const supabase = createServerClient( process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, { cookies: { getAll() { return request.cookies.getAll() }, setAll(cookiesToSet) { cookiesToSet.forEach(({ name, value }) => request.cookies.set(name, value)) supabaseResponse = NextResponse.next({ request, }) cookiesToSet.forEach(({ name, value, options }) => supabaseResponse.cookies.set(name, value, options)) }, }, }, ) // Do not run code between createServerClient and // supabase.auth.getUser(). A simple mistake could make it very hard to debug // issues with users being randomly logged out. // IMPORTANT: If you remove getUser() and you use server-side rendering // with the Supabase client, your users may be randomly logged out. const { data: { user }, } = await supabase.auth.getUser() const pathname = request.nextUrl.pathname // Define public routes that don't require authentication const publicRoutes = ["/", "/auth/login", "/auth/sign-up", "/auth/callback", "/auth/error", "/auth/sign-up-success"] // Define auth pages that authenticated users shouldn't access const authPages = ["/auth/login", "/auth/sign-up"] // If user is authenticated and trying to access auth pages, redirect to dashboard if (user && authPages.includes(pathname)) { const url = request.nextUrl.clone() url.pathname = "/dashboard" return NextResponse.redirect(url) } // If user is not authenticated and trying to access protected routes, redirect to login if (!user && !publicRoutes.includes(pathname)) { const url = request.nextUrl.clone() url.pathname = "/auth/login" return NextResponse.redirect(url) } // IMPORTANT: You *must* return the supabaseResponse object as it is. // If you're creating a new response object with NextResponse.next() make sure to: // 1. Pass the request in it, like so: // const myNewResponse = NextResponse.next({ request }) // 2. Copy over the cookies, like so: // myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll()) // 3. Change the myNewResponse object to fit your needs, but avoid changing // the cookies! // 4. Finally: // return myNewResponse // If this is not done, you may be causing the browser and server to go out // of sync and terminate the user's session prematurely! return supabaseResponse } [V0_FILE]typescriptreact:file="components/set-goal-dialog.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" import { setGoal } from "@/app/actions/goals" interface Goal { id: string frequency: string custom_days: number | null social_media: string[] | null } interface Project { id: string name: string } interface SetGoalDialogProps { project: Project goal?: Goal open: boolean onOpenChange: (open: boolean) => void } const SOCIAL_MEDIA_PLATFORMS = [ "Instagram", "Twitter/X", "Facebook", "LinkedIn", "TikTok", "YouTube", "Pinterest", "Threads", ] export function SetGoalDialog({ project, goal, open, onOpenChange }: SetGoalDialogProps) { const [frequency, setFrequency] = useState(goal?.frequency || "daily") const [selectedPlatforms, setSelectedPlatforms] = useState(goal?.social_media || []) const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handlePlatformToggle = (platform: string) => { setSelectedPlatforms((prev) => (prev.includes(platform) ? prev.filter((p) => p !== platform) : [...prev, platform])) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) try { await setGoal({ projectId: project.id, goalId: goal?.id, frequency, customDays: null, socialMedia: selectedPlatforms.length > 0 ? selectedPlatforms : null, }) onOpenChange(false) router.refresh() } catch (error) { console.error("Failed to set goal:", error) alert("Failed to set goal") } finally { setIsLoading(false) } } return ( ) } [V0_FILE]typescriptreact:file="components/project-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { MoreVertical, Pencil, Trash2, Target } from "lucide-react" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { EditProjectDialog } from "./edit-project-dialog" import { SetGoalDialog } from "./set-goal-dialog" import { deleteProject } from "@/app/actions/projects" import { useRouter } from "next/navigation" interface Goal { id: string frequency: string custom_days: number | null social_media: string[] | null } interface Project { id: string name: string color: string created_at: string goals?: Goal[] } interface ProjectCardProps { project: Project } export function ProjectCard({ project }: ProjectCardProps) { const [isEditOpen, setIsEditOpen] = useState(false) const [isGoalOpen, setIsGoalOpen] = useState(false) const [isDeleting, setIsDeleting] = useState(false) const router = useRouter() const goal = project.goals?.[0] const handleDelete = async () => { if ( !confirm("Are you sure you want to delete this project? This will also delete all associated goals and posts.") ) { return } setIsDeleting(true) try { await deleteProject(project.id) router.refresh() } catch (error) { console.error("Failed to delete project:", error) alert("Failed to delete project") } finally { setIsDeleting(false) } } const getFrequencyText = () => { if (!goal) return "No goal set" return `${goal.frequency.charAt(0).toUpperCase() + goal.frequency.slice(1)}` } return ( <>

{project.name}

setIsGoalOpen(true)}> {goal ? "Edit Goal" : "Set Goal"} setIsEditOpen(true)}> Edit {isDeleting ? "Deleting..." : "Delete"}

{getFrequencyText()}

{goal?.social_media && goal.social_media.length > 0 && (

{goal.social_media.map((platform) => ( {platform} ))}

)}

) } [V0_FILE]typescriptreact:file="components/post-details-dialog.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState, useEffect } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" import { updatePost, deletePost } from "@/app/actions/posts" import { Trash2 } from "lucide-react" import { toast } from "sonner" import { createClient } from "@/lib/supabase/client" interface Project { id: string name: string color: string } interface ScheduledPost { id: string project_id: string scheduled_date: string title: string | null notes: string | null completed: boolean projects: { name: string color: string } } interface PostDetailsDialogProps { post: ScheduledPost projects: Project[] open: boolean onOpenChange: (open: boolean) => void } export function PostDetailsDialog({ post, projects, open, onOpenChange }: PostDetailsDialogProps) { const [projectId, setProjectId] = useState(post.project_id) const [date, setDate] = useState(post.scheduled_date) const [title, setTitle] = useState(post.title || "") const [notes, setNotes] = useState(post.notes || "") const [completed, setCompleted] = useState(post.completed) const [isLoading, setIsLoading] = useState(false) const [isDeleting, setIsDeleting] = useState(false) const router = useRouter() useEffect(() => { if (open && post) { setProjectId(post.project_id) setDate(post.scheduled_date) setTitle(post.title || "") setNotes(post.notes || "") setCompleted(post.completed) } }, [post, open]) const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() if (projectId !== post.project_id) { const supabase = createClient() const { data: posts } = await supabase.from("scheduled_posts").select("id").eq("project_id", projectId) if (posts && posts.length >= 5) { toast.error("Post limit reached. The target project already has 5 posts scheduled.") return } } setIsLoading(true) try { await updatePost(post.id, { projectId, scheduledDate: date, title: title || null, notes: notes || null, completed, }) onOpenChange(false) router.refresh() toast.success("Post updated successfully!") } catch (error) { console.error("Failed to update post:", error) const errorMessage = error instanceof Error ? error.message : "Failed to update post" toast.error(errorMessage) } finally { setIsLoading(false) } } const handleDelete = async () => { setIsDeleting(true) try { await deletePost(post.id) onOpenChange(false) router.refresh() toast.success("Post deleted successfully!") } catch (error) { console.error("Failed to delete post:", error) toast.error("Failed to delete post") } finally { setIsDeleting(false) } } return (

About

Tags

Share

About

Tags

Share

More from juandadev

About

Tags

Share

About

Tags

Share

More from juandadev