- {wantsToLog === null ? (
+ {step === 'select' ? (
- Did you just have {substanceLabel}?
+ What are you logging?
-
+
+
) : (
-
diff --git a/src/components/UsageTrendGraph.tsx b/src/components/UsageTrendGraph.tsx
new file mode 100644
index 0000000..548805d
--- /dev/null
+++ b/src/components/UsageTrendGraph.tsx
@@ -0,0 +1,134 @@
+'use client';
+
+import { useMemo } from 'react';
+import {
+ LineChart,
+ Line,
+ XAxis,
+ YAxis,
+ CartesianGrid,
+ Tooltip,
+ ResponsiveContainer,
+ Area,
+ AreaChart,
+} from 'recharts';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { UsageEntry } from '@/lib/storage';
+
+interface UsageTrendGraphProps {
+ usageData: UsageEntry[];
+ substance: 'nicotine' | 'weed';
+}
+
+export function UsageTrendGraph({ usageData, substance }: UsageTrendGraphProps) {
+ const chartData = useMemo(() => {
+ const substanceData = usageData.filter((e) => e.substance === substance);
+ const today = new Date();
+ const last30Days: { date: string; count: number; label: string }[] = [];
+
+ for (let i = 29; i >= 0; i--) {
+ const date = new Date(today);
+ date.setDate(date.getDate() - i);
+ const dateStr = date.toISOString().split('T')[0];
+ const entry = substanceData.find((e) => e.date === dateStr);
+ last30Days.push({
+ date: dateStr,
+ count: entry?.count ?? 0,
+ label: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }),
+ });
+ }
+
+ return last30Days;
+ }, [usageData, substance]);
+
+ const substanceColor = substance === 'nicotine' ? '#ef4444' : '#22c55e';
+ const substanceLabel = substance === 'nicotine' ? 'Nicotine' : 'Marijuana';
+
+ const average = useMemo(() => {
+ const total = chartData.reduce((sum, d) => sum + d.count, 0);
+ const daysWithData = chartData.filter((d) => d.count > 0).length;
+ return daysWithData > 0 ? Math.round(total / daysWithData) : 0;
+ }, [chartData]);
+
+ const trend = useMemo(() => {
+ const firstHalf = chartData.slice(0, 15);
+ const secondHalf = chartData.slice(15);
+ const firstAvg = firstHalf.reduce((sum, d) => sum + d.count, 0) / 15;
+ const secondAvg = secondHalf.reduce((sum, d) => sum + d.count, 0) / 15;
+
+ if (secondAvg < firstAvg * 0.9) return 'decreasing';
+ if (secondAvg > firstAvg * 1.1) return 'increasing';
+ return 'stable';
+ }, [chartData]);
+
+ return (
+
+
+
+ {substanceLabel} Usage Trend
+
+ Last 30 days
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{average}
+
Daily Average
+
+
+
{trend}
+
+ {trend === 'decreasing' ? '📉 Great progress!' : trend === 'increasing' ? '📈 Stay strong!' : '➡️ Holding steady'}
+
+
+
+ );
+}
diff --git a/src/components/UserHeader.tsx b/src/components/UserHeader.tsx
index 617de1c..61465d5 100644
--- a/src/components/UserHeader.tsx
+++ b/src/components/UserHeader.tsx
@@ -2,9 +2,18 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
import { User } from '@/lib/session';
import { fetchPreferences } from '@/lib/storage';
import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Cigarette, Leaf, LogOut, Home } from 'lucide-react';
interface UserHeaderProps {
user: User;
@@ -12,6 +21,7 @@ interface UserHeaderProps {
export function UserHeader({ user }: UserHeaderProps) {
const [userName, setUserName] = useState
(null);
+ const router = useRouter();
useEffect(() => {
const loadUserName = async () => {
@@ -37,7 +47,12 @@ export function UserHeader({ user }: UserHeaderProps) {
}}>
-
QuitTraq
+
router.push('/')}
+ >
+ QuitTraq
+
{userName && (
Welcome {userName}, you got this!
@@ -46,18 +61,36 @@ export function UserHeader({ user }: UserHeaderProps) {
-
-
- {initials}
-
-
+
+
+
+
+
+ router.push('/')} className="cursor-pointer">
+
+ Dashboard
+
+
+ router.push('/track/nicotine')} className="cursor-pointer">
+
+ Track Nicotine Usage
+
+ router.push('/track/marijuana')} className="cursor-pointer">
+
+ Track Marijuana Usage
+
+
+
+
+ Sign out
+
+
+
{userName && (
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..ff0ef8f
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,65 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { cn } from "@/lib/utils"
+
+const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+
+const DropdownMenuContent = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, sideOffset = 4, ...props }, ref) => (
+
+
+
+))
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+
+const DropdownMenuItem = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef & {
+ inset?: boolean
+ }
+>(({ className, inset, ...props }, ref) => (
+
+))
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+
+const DropdownMenuSeparator = React.forwardRef<
+ React.ElementRef,
+ React.ComponentPropsWithoutRef
+>(({ className, ...props }, ref) => (
+
+))
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+
+export {
+ DropdownMenu,
+ DropdownMenuTrigger,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+}