src/ai/dev.

ts
import { config } from 'dotenv';
config();

import '@/lib/firebase-admin'; // Initialize Firebase Admin

import '@/ai/flows/[Link]';
import '@/ai/flows/[Link]';
import '@/ai/flows/[Link]';
import '@/ai/flows/[Link]';
import '@/ai/flows/[Link]';
import '@/ai/flows/[Link]';
Explanation not written yet, but this file contributes to the app's functionality.
src/ai/[Link]
import {genkit} from 'genkit';
import {googleAI} from '@genkit-ai/googleai';

export const ai = genkit({

plugins: [googleAI()],
model: 'googleai/gemini-2.5-flash',
});
Explanation not written yet, but this file contributes to the app's functionality.
src/ai/flows/[Link]
'use server';

/**
* @fileOverview A flow that answers a user's health-related question.
*
* - answerUserQuery - A function that answers a user's question based on their health data.
* - AnswerUserQueryInput - The input type for the answerUserQuery function.
* - AnswerUserQueryOutput - The return type for the answerUserQuery function.
*/

import {ai} from '@/ai/genkit';

import {z} from 'genkit';

const AnswerUserQueryInputSchema = [Link]({

userId: [Link]().describe('The ID of the user.'),
vitalsData: z
.string()
.describe('A JSON string containing the user vitals data {type, value, ts}.'),
bmi: [Link]().describe('The Body Mass Index of the user.'),
bmr: [Link]().describe('The Basal Metabolic Rate of the user.'),
userQuery: [Link]().describe('The user\'s question.'),
});
export type AnswerUserQueryInput = [Link]<typeof AnswerUserQueryInputSchema>;

const AnswerUserQueryOutputSchema = [Link]({

answer: z
.string()
.describe('The answer to the user\'s question.'),
});
export type AnswerUserQueryOutput = [Link]<
typeof AnswerUserQueryOutputSchema
>;

export async function answerUserQuery(

input: AnswerUserQueryInput
): Promise<AnswerUserQueryOutput> {
return answerUserQueryFlow(input);
}

const prompt = [Link]({

name: 'answerUserQueryPrompt',
input: {schema: AnswerUserQueryInputSchema},
output: {schema: AnswerUserQueryOutputSchema},
prompt: `You are SenAssist, a frank, friendly, and helpful AI health assistant. Your personality is ap

If the user asks who you are or what your name is, you must respond: "My name is <b>SenAssist</b>, and I

Based on the user's data, provide clear answers to their questions. If their question is related to thei

For very common and non-critical symptoms (like a mild headache or a common cold), you can suggest basic

Here is some context about the user, use it to inform your answer:
- Vitals Data: {{vitalsData}}
- BMI: {{bmi}}
- BMR: {{bmr}}

Here is the user's question:

"{{userQuery}}"

Keep your answer concise and easy for a layperson to understand. Provide only the answer to the question

IMPORTANT: When you mention a specific vital sign name (e.g., Heart Rate, SpO2), a reading (e.g., 120/80
`,
});

const answerUserQueryFlow = [Link](

{
name: 'answerUserQueryFlow',
inputSchema: AnswerUserQueryInputSchema,
 outputSchema: AnswerUserQueryOutputSchema,
},
async input => {
const {output} = await prompt(input);
return output!;
}
);
Explanation not written yet, but this file contributes to the app's functionality.
src/ai/flows/[Link]
'use server';
/**
* @fileOverview A calorie calculation AI agent.
*
* - calculateCalories - A function that handles the calorie calculation process.
* - CalculateCaloriesInput - The input type for the calculateCalories function.
* - CalculateCaloriesOutput - The return type for the calculateCalories function.
*/

import {ai} from '@/ai/genkit';

import {z} from 'genkit';

const CalculateCaloriesInputSchema = [Link]({

photoDataUri: z
.string()
.describe(
"A photo of food, as a data URI that must include a MIME type and use Base64 encoding. Expected fo
),
});
export type CalculateCaloriesInput = [Link]<typeof CalculateCaloriesInputSchema>;

const CalculateCaloriesOutputSchema = [Link]({

foodName: [Link]().describe('The name of the food identified in the photo.'),
calories: [Link]().describe('The estimated number of calories for the food.'),
servingSize: [Link]().describe('The estimated serving size.'),
});
export type CalculateCaloriesOutput = [Link]<typeof CalculateCaloriesOutputSchema>;

export async function calculateCalories(input: CalculateCaloriesInput): Promise<CalculateCaloriesOutput>

return calculateCaloriesFlow(input);
}

const prompt = [Link]({

name: 'calculateCaloriesPrompt',
input: {schema: CalculateCaloriesInputSchema},
output: {schema: CalculateCaloriesOutputSchema},
prompt: `You are an expert nutritionist. Analyze the image of the food provided and identify it. Estim

Photo: {{media url=photoDataUri}}`,

config: {
temperature: 0.2,
},
});

const calculateCaloriesFlow = [Link](

{
name: 'calculateCaloriesFlow',
inputSchema: CalculateCaloriesInputSchema,
outputSchema: CalculateCaloriesOutputSchema,
},
async input => {
const {output} = await prompt(input);
return output!;
}
);
Explanation not written yet, but this file contributes to the app's functionality.
src/ai/flows/[Link]
'use server';

/**
* @fileOverview A health recommendation AI agent.
*
* - generateHealthRecommendations - A function that generates health recommendations based on vital rea
* - GenerateHealthRecommendationsInput - The input type for the generateHealthRecommendations function.
* - GenerateHealthRecommendationsOutput - The return type for the generateHealthRecommendations functio
*/

import {ai} from '@/ai/genkit';

import {z} from 'genkit';
import { firestore } from '@/lib/firebase-admin';

const VitalReadingSchema = [Link]({

type: [Link](['bpm', 'spo2', 'temp', 'bp', 'calories', 'ecg', 'eyeStrain', 'Heart Rate', 'SpO2', 'Body
value: [Link](),
unit: [Link](),
});

const GenerateHealthRecommendationsInputSchema = [Link]({

userId: [Link]().describe('The ID of the user for whom the recommendations are generated.'),
readings: [Link](VitalReadingSchema).describe('An array of vital readings to be analyzed.'),
bmi: [Link]().describe('The user BMI (Body Mass Index)'),
bmr: [Link]().describe('The user BMR (Basal Metabolic Rate)'),
});

export type GenerateHealthRecommendationsInput = [Link]<typeof GenerateHealthRecommendationsInputSchema

const RecommendationItemSchema = [Link]({

type: [Link](['diet', 'medicine', 'lifestyle']),
text: [Link]().describe('The recommendation text.'),
createdAt: [Link]().describe('Relative timestamp, e.g., "2 hours ago".'),
});

const GenerateHealthRecommendationsOutputSchema = [Link]({

items: [Link](RecommendationItemSchema).describe('An array of recommendation items.'),
});

export type GenerateHealthRecommendationsOutput = [Link]<typeof GenerateHealthRecommendationsOutputSche

export async function generateHealthRecommendations(

input: GenerateHealthRecommendationsInput
): Promise<GenerateHealthRecommendationsOutput> {
return generateHealthRecommendationsFlow(input);
}

const prompt = [Link]({

name: 'generateHealthRecommendationsPrompt',
input: {schema: GenerateHealthRecommendationsInputSchema},
output: {schema: GenerateHealthRecommendationsOutputSchema},
prompt: `You are an AI-powered health assistant that provides personalized recommendations. Your goal

Analyze the user's data and compare it against these standard health guidelines:
- **Heart Rate**: Normal resting is 60-100 bpm.
- **SpO2**: Normal is 95-100%. Below 92% is a concern.
- **Blood Pressure**: Normal is below 120/80 mmHg.
- **Body Temperature**: Normal is 36.5°C-37.5°C.
- **Blood Sugar (Fasting)**: Normal is 70-100 mg/dL.

User's Vitals:
{{#each readings}}
- **{{type}}**: {{value}} {{unit}}
{{/each}}

User's Metrics:
- **BMI**: {{bmi}}
- **BMR**: {{bmr}}
Based on this data, provide up to 3 specific recommendations.
 1. **Prioritize abnormalities**: Only generate a recommendation if a vital sign is outside the normal r
2. **Be specific and actionable**: Instead of "eat healthier," suggest "Consider adding a serving of le
3. **Keep it concise**: Each recommendation's text must be under 140 characters.
4. **Categorize correctly**: Assign 'diet', 'lifestyle', or 'medicine' to each item. For 'medicine', su
5. **Set a timestamp**: Use a human-readable relative timestamp for 'createdAt' (e.g., "Just now").

Generate your response as a JSON object containing an array of recommendation items.

`,
});

const generateHealthRecommendationsFlow = [Link](

{
name: 'generateHealthRecommendationsFlow',
inputSchema: GenerateHealthRecommendationsInputSchema,
outputSchema: GenerateHealthRecommendationsOutputSchema,
},
async input => {
const {output} = await prompt(input);
// if (output) {
// // Store the generated recommendations in Firestore
// const recommendationsCollection = [Link]('recommendations');
// await [Link]({
// userId: [Link],
// items: [Link],
// source: 'gemini',
// createdAt: [Link](),
// });
// }
return output!;
}
);
Explanation not written yet, but this file contributes to the app's functionality.
src/ai/flows/[Link]
'use server';
/**
* @fileOverview A flow to help users handle cravings during rehabilitation.
*
* - handleCraving - A function that provides coping strategies for cravings.
* - HandleCravingInput - The input type for the handleCraving function.
* - HandleCravingOutput - The return type for the handleCraving function.
*/

import {ai} from '@/ai/genkit';

import {z} from 'genkit';

const HandleCravingInputSchema = [Link]({

emotion: [Link]().describe('The emotion the user is currently feeling.'),
trigger: [Link]().describe('The trigger for the user\'s craving.'),
isHungry: [Link]().describe('Whether the user is feeling hungry.'),
isThirsty: [Link]().describe('Whether the user is feeling thirsty.'),
habit: [Link]().describe('The habit the user is trying to overcome (e.g., smoking).'),
});
export type HandleCravingInput = [Link]<typeof HandleCravingInputSchema>;

const HandleCravingOutputSchema = [Link]({

advice: z
.string()
.describe('Supportive and actionable advice to help the user manage their craving.'),
});
export type HandleCravingOutput = [Link]<typeof HandleCravingOutputSchema>;

export async function handleCraving(

input: HandleCravingInput
): Promise<HandleCravingOutput> {
return handleCravingFlow(input);
}

const prompt = [Link]({

name: 'handleCravingPrompt',
input: {schema: HandleCravingInputSchema},
output: {schema: HandleCravingOutputSchema},
prompt: `You are an empathetic and supportive AI assistant specializing in addiction and rehabilitatio

The user is trying to overcome their habit of {{habit}}.

They have provided the following information about their current state:
- Current Emotion: {{emotion}}
- Trigger: {{trigger}}
- Feels Hungry: {{#if isHungry}}Yes{{else}}No{{/if}}
- Feels Thirsty: {{#if isThirsty}}Yes{{else}}No{{/if}}

Based on this, provide a short, calming, and actionable response. Your response should:
1. Acknowledge their feeling without judgment (e.g., "It's completely understandable to feel {{emotion}
2. Suggest a simple, immediate action to distract them. Examples:
- If thirsty, suggest drinking a large glass of water.
- If hungry, suggest a healthy snack.
- Suggest a 5-minute breathing exercise: "Breathe in for 4 seconds, hold for 4, and exhale for 6."
- Suggest a short walk or changing their environment.
3. Gently challenge the idea that giving in will solve the problem. For example: "Think about this: wil
4. Keep the entire response concise, empathetic, and under 150 words.

Generate only the advice text.

`,
});

const handleCravingFlow = [Link](

{
name: 'handleCravingFlow',
inputSchema: HandleCravingInputSchema,
outputSchema: HandleCravingOutputSchema,
},
 async input => {
const {output} = await prompt(input);
return output!;
}
);
Explanation not written yet, but this file contributes to the app's functionality.
src/ai/flows/[Link]
'use server';

/**
* @fileOverview A flow that summarizes a user's vitals.
*
* - provideVitalsSummary - A function that handles the vitals summarization process.
* - ProvideVitalsSummaryInput - The input type for the provideVitalsSummary function.
* - ProvideVitalsSummaryOutput - The return type for the provideVitalsSummary function.
*/

import {ai} from '@/ai/genkit';

import {z} from 'genkit';

const ProvideVitalsSummaryInputSchema = [Link]({

userId: [Link]().describe('The ID of the user.'),
vitalsData: z
.string()
.describe('A JSON string containing the user vitals data {type, value, ts}.'),
bmi: [Link]().describe('The Body Mass Index of the user.'),
bmr: [Link]().describe('The Basal Metabolic Rate of the user.'),
});
export type ProvideVitalsSummaryInput = [Link]<
typeof ProvideVitalsSummaryInputSchema
>;

const ProvideVitalsSummaryOutputSchema = [Link]({

summary: z
.string()
.describe(
'A summary and analysis of the user vitals, along with personalized advice.'
),
});
export type ProvideVitalsSummaryOutput = [Link]<
typeof ProvideVitalsSummaryOutputSchema
>;

export async function provideVitalsSummary(

input: ProvideVitalsSummaryInput
): Promise<ProvideVitalsSummaryOutput> {
return provideVitalsSummaryFlow(input);
}

const prompt = [Link]({

name: 'provideVitalsSummaryPrompt',
input: {schema: ProvideVitalsSummaryInputSchema},
output: {schema: ProvideVitalsSummaryOutputSchema},
prompt: `You are SenAssist, a frank, friendly, and helpful AI health assistant. Your personality is ap

Here's the user's vitals data:

{{vitalsData}}

Here's the user's BMI (Body Mass Index):

{{bmi}}

Here's the user's BMR (Basal Metabolic Rate):

{{bmr}}

Based on this information, provide a concise summary of the user's current health status. Start by add

IMPORTANT: When you mention a specific vital sign name (e.g., Heart Rate, SpO2), a reading (e.g., 120/
`,
});

const provideVitalsSummaryFlow = [Link](

{
name: 'provideVitalsSummaryFlow',
inputSchema: ProvideVitalsSummaryInputSchema,
outputSchema: ProvideVitalsSummaryOutputSchema,
},
 async input => {
const {output} = await prompt(input);
return output!;
}
);
Explanation not written yet, but this file contributes to the app's functionality.
src/ai/flows/[Link]
'use server';
/**
* @fileOverview A flow to handle user feedback submissions.
*
* - submitFeedback - A function that processes user feedback.
* - SubmitFeedbackInput - The input type for the submitFeedback function.
* - SubmitFeedbackOutput - The return type for the submitFeedback function.
*/

import {ai} from '@/ai/genkit';

import {z} from 'genkit';

const SubmitFeedbackInputSchema = [Link]({

feedbackText: [Link]().describe('The user\'s feedback message.'),
userId: [Link]().optional().describe('The ID of the user submitting the feedback.'),
});
export type SubmitFeedbackInput = [Link]<typeof SubmitFeedbackInputSchema>;

const SubmitFeedbackOutputSchema = [Link]({

message: [Link]().describe('A confirmation message to be shown to the user.'),
});
export type SubmitFeedbackOutput = [Link]<typeof SubmitFeedbackOutputSchema>;

export async function submitFeedback(

input: SubmitFeedbackInput
): Promise<SubmitFeedbackOutput> {
return submitFeedbackFlow(input);
}

const prompt = [Link]({

name: 'submitFeedbackPrompt',
input: {schema: SubmitFeedbackInputSchema},
output: {schema: SubmitFeedbackOutputSchema},
prompt: `A user has submitted the following feedback.

User ID: {{userId}}

Feedback:
"{{feedbackText}}"

Acknowledge receipt of the feedback and generate a friendly confirmation message.

`,
});

const submitFeedbackFlow = [Link](

{
name: 'submitFeedbackFlow',
inputSchema: SubmitFeedbackInputSchema,
outputSchema: SubmitFeedbackOutputSchema,
},
async input => {
[Link](`Received feedback from user ${[Link] || 'anonymous'}: ${[Link]}`);

// In a real application, you would save this to a database.

// For this demo, we'll just send a confirmation.

// const {output} = await prompt(input);

// return output!;

// For now, return a static success message to avoid unnecessary LLM calls.
return {
message: "Thank you for your feedback! We've received your message and appreciate you helping us
}
}
);
Explanation not written yet, but this file contributes to the app's functionality.
src/app/[Link]
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
font-family: Arial, Helvetica, sans-serif;
}

@layer base {
:root {
--background: 220 20% 96%;
--foreground: 224 71.4% 4.1%;
--card: 220 20% 100%;
--card-foreground: 224 71.4% 4.1%;
--popover: 220 20% 100%;
--popover-foreground: 224 71.4% 4.1%;
--primary: 240 60% 50%;
--primary-foreground: 0 0% 100%;
--secondary: 220 40% 94%;
--secondary-foreground: 240 60% 30%;
--muted: 220 20% 92%;
--muted-foreground: 220 10% 40%;
--accent: 260 70% 60%;
--accent-foreground: 0 0% 100%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 220 20% 88%;
--input: 220 20% 91%;
--ring: 240 60% 50%;
--chart-1: 240 50% 55%;
--chart-2: 260 60% 65%;
--chart-3: 280, 70%, 70%;
--chart-4: 210 50% 55%;
--chart-5: 220 40% 60%;
--radius: 0.5rem;
--sidebar-background: 222 47% 11%;
--sidebar-foreground: 210 40% 98%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 60% 50%;
--sidebar-accent-foreground: 0 0% 100%;
--sidebar-border: 217 32% 17%;
--sidebar-ring: 240 50% 60%;
}
.dark {
--background: 222 47% 11%;
--foreground: 210 40% 98%;
--card: 222 47% 14%;
--card-foreground: 210 40% 98%;
--popover: 222 47% 11%;
--popover-foreground: 210 40% 98%;
--primary: 240 70% 70%;
--primary-foreground: 240 70% 10%;
--secondary: 220 20% 20%;
--secondary-foreground: 210 40% 98%;
--muted: 217 32% 17%;
--muted-foreground: 215 20% 65%;
--accent: 260 80% 75%;
--accent-foreground: 260 80% 10%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 217 32% 22%;
--input: 217 32% 17%;
--ring: 240 70% 80%;
--chart-1: 240 60% 60%;
--chart-2: 260 70% 70%;
--chart-3: 280, 80%, 75%;
--chart-4: 210 40% 35%;
--chart-5: 220 30% 30%;
 --sidebar-background: 222 47% 9%;
--sidebar-foreground: 210 40% 98%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 70% 70%;
--sidebar-accent-foreground: 240 70% 10%;
--sidebar-border: 222 47% 12%;
--sidebar-ring: 240 70% 80%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/[Link]
'use client';

import type { Metadata } from 'next';

import './[Link]';
import { Toaster } from '@/components/ui/toaster';
import { ThemeProvider } from '@/components/theme-provider';
import { Inter } from 'next/font/google';
import { cn } from '@/lib/utils';
import { AppProvider } from '@/context/app-context';

const inter = Inter({

subsets: ['latin'],
variable: '--font-inter',
})

// Since this is now a client component, metadata should be handled differently if needed,
// but for now we'll keep it simple. Exporting it from a client component has no effect.
// export const metadata: Metadata = {
// title: 'SentrixAI',
// description: 'AI-Powered Smart Health Assistant',
// };

export default function RootLayout({

children,
}: Readonly<{
children: [Link];
}>) {
return (
<html lang="en" suppressHydrationWarning>
<body className={cn("font-body antialiased", [Link])}>
<AppProvider>
<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
{children}
<Toaster />
</ThemeProvider>
</AppProvider>
</body>
</html>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/[Link]
import { redirect } from 'next/navigation';

export default function Home() {

redirect('/dashboard');
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/[Link]
'use client';

import { ReactNode } from 'react';

import { motion } from 'framer-motion';
import { DashboardLayout } from "@/components/dashboard-layout";
import { usePathname } from 'next/navigation';

/**
* The root layout for the authenticated part of the app.
* It handles the user's authentication state and provides the AppContext.
*/
export default function Layout({ children }: { children: ReactNode }) {
const pathname = usePathname();

// If we have a user, provide the app context and render the content.
return (
<DashboardLayout>
<[Link]
key={pathname}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3, ease: 'easeInOut' }}
>
{children}
</[Link]>
</DashboardLayout>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/analytics/[Link]
'use client';

import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from '@/components/ui/card';
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart';
import { useAppContext } from '@/context/app-context';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useState } from 'react';

export default function AnalyticsPage() {

const { vitals } = useAppContext();
const [timeframe, setTimeframe] = useState('7d');

const vitalsToShow = ['Heart Rate', 'SpO2', 'Temperature'];

const filteredVitals = [Link](v => [Link]([Link]));

return (
<div className="p-4 md:p-6 space-y-6">
<Card>
<CardHeader className="flex-row items-center justify-between">
<div>
<CardTitle>Health Analytics</CardTitle>
<CardDescription>
In-depth analysis of your vital signs over time.
</CardDescription>
</div>
<div className="w-[150px]">
<Select value={timeframe} onValueChange={setTimeframe}>
<SelectTrigger>
<SelectValue placeholder="Select timeframe" />
</SelectTrigger>
<SelectContent>
<SelectItem value="7d">Last 7 Days</SelectItem>
<SelectItem value="30d">Last 30 Days</SelectItem>
<SelectItem value="1y">Last Year</SelectItem>
</SelectContent>
</Select>
</div>
</CardHeader>
</Card>

<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">

{[Link](vital => {

const chartConfig = {
[[Link]]: {
label: [Link],
color: 'hsl(var(--chart-1))',
},
};

return (
<Card key={[Link]} className="transition-all duration-300 hover:shadow-lg hover:-transla
<CardHeader>
<CardTitle className='capitalize'>{[Link]}</CardTitle>
<CardDescription>
Trend for the last {timeframe === '7d' ? '7 days' : timeframe === '30d' ? '30 days' :
</CardDescription>
</CardHeader>
 <CardContent>
<div className="h-[250px] w-full">
<ChartContainer
config={chartConfig}
className="h-full w-full"
>
<AreaChart
accessibilityLayer
data={[Link]}
margin={{
left: -10,
right: 12,
top: 10,
bottom: 10,
}}
>
<defs>
<linearGradient id={`fill-${[Link](/\s+/g, '-')}`} x1="0" y1="0"
<stop
offset="5%"
stopColor="hsl(var(--primary))"
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor="hsl(var(--primary))"
stopOpacity={0.1}
/>
</linearGradient>
</defs>
<CartesianGrid vertical={false} />
<XAxis
dataKey="time"
tickLine={false}
axisLine={false}
tickMargin={8}
/>
<YAxis
domain={['dataMin - 5', 'dataMax + 5']}
tickLine={false}
axisLine={false}
tickMargin={8}
/>
<ChartTooltip
cursor={true}
content={
<ChartTooltipContent
labelKey="value"
nameKey="time"
indicator="line"
/>
}
/>
<Area
dataKey="value"
type="natural"
fill={`url(#fill-${[Link](/\s+/g, '-')})`}
stroke="hsl(var(--primary))"
stackId="a"
strokeWidth={2}
/>
</AreaChart>
</ChartContainer>
</div>
</CardContent>
</Card>
)
})}
</div>
<Card className="mt-6">
<CardHeader>
<CardTitle>More Analytics Coming Soon</CardTitle>
 <CardDescription>
We are working on adding more advanced analytics, including AI-powered trend analysis and he
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center justify-center h-48 border-2 border-dashed rounded-lg">
<p className="text-muted-foreground">Advanced comparisons will be here.</p>
</div>
</CardContent>
</Card>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/chat/[Link]
'use client';

import { useState, useEffect } from 'react';

import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Send, Loader2, Bot, Heart, BarChart, Lightbulb, Activity, Thermometer, Gauge } from "lucide-rea
import { provideVitalsSummary } from '@/ai/flows/provide-vitals-summary';
import { answerUserQuery } from '@/ai/flows/answer-user-query';
import { useAppContext } from '@/context/app-context';
import { format } from 'date-fns';

interface ChatMessage {
sender: 'user' | 'ai';
text: string;
timestamp: string;
}

export default function ChatPage() {

const { vitals } = useAppContext();
const [messages, setMessages] = useState<ChatMessage[]>([]);
const [input, setInput] = useState('');
const [isLoading, setIsLoading] = useState(true);
const [isResponding, setIsResponding] = useState(false);

const userContext = {
userId: 'user-123',
bmi: 22.5,
bmr: 1680,
vitalsData: [Link]([Link](v => ({type: [Link], value: [Link], ts: [Link]()}))),
};

const getVitalByName = (name: string) => [Link](v => [Link]() === [Link]())

const vitalDisplayData = [
{ name: 'Heart Rate', icon: Heart, vital: getVitalByName('heart rate') },
{ name: 'SpO2', icon: Gauge, vital: getVitalByName('spo2') },
{ name: 'Temp', icon: Thermometer, vital: getVitalByName('temperature') },
{ name: 'BP', icon: Activity, vital: getVitalByName('blood pressure') },
]

useEffect(() => {
const getInitialSummary = async () => {
try {
setMessages([{
sender: 'ai',
text: "Hello! I'm your AI health assistant. I can analyze your current vitals and provide pe
timestamp: format(new Date(), 'p')
}]);
} catch (error) {
[Link]("Failed to get initial summary:", error);
setMessages([{
sender: 'ai',
text: "Sorry, I'm having trouble getting your health summary. Please try again later.",
timestamp: format(new Date(), 'p')
}]);
} finally {
setIsLoading(false);
}
};
getInitialSummary();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

const handleSendMessage = async (e: [Link], messageText?: string) => {

[Link]();
const query = messageText || input;
if (![Link]() || isResponding) return;

const userMessage: ChatMessage = { sender: 'user', text: query, timestamp: format(new Date(), 'p') }
 setMessages(prev => [...prev, userMessage]);
setInput('');
setIsResponding(true);

try {
const response = await answerUserQuery({
...userContext,
userQuery: query,
});

const aiMessage: ChatMessage = { sender: 'ai', text: [Link], timestamp: format(new Date()
setMessages(prev => [...prev, aiMessage]);

} catch (error) {
[Link]("Failed to get AI response:", error);
const errorMessage: ChatMessage = { sender: 'ai', text: "Sorry, I'm having trouble connecting. Ple
setMessages(prev => [...prev, errorMessage]);
} finally {
setIsResponding(false);
}
};

const quickActions = [
{ text: "Analyze my current vitals", icon: BarChart },
{ text: "Health recommendations", icon: Lightbulb },
{ text: "Explain my metrics", icon: Heart },
]

const AiAvatar = () => (

<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-primary">
<Bot className="h-5 w-5" />
</div>
);

return (
<div className="h-[calc(100vh-4rem)] flex flex-col">
<div className='p-4 md:p-6 border-b'>
<div className="flex items-center gap-3 mb-4">
<Bot className="h-8 w-8 text-primary" />
<div>
<h1 className="text-xl font-bold">SenAssist</h1>
<p className="text-sm text-muted-foreground">AI Health Assistant</p>
</div>
</div>
<div>
<p className="text-sm font-medium mb-2 text-muted-foreground">Your Current Vitals</p>
<div className="flex items-center gap-4 text-sm">
{[Link](({name, icon: Icon, vital}) => (
vital ? (
<div key={name} className="flex items-center gap-2">
<Icon className="h-4 w-4 text-primary" />
<span>{name}: <b>{[Link]} {[Link]}</b></span>
</div>
) : null
))}
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto p-4 md:p-6">
<div className="space-y-6">
{[Link]((message, index) => (
<div key={index} className={`flex items-start gap-3 ${[Link] === 'user' ? 'justify
{[Link] === 'ai' && <AiAvatar />}
<div className={`flex-1 rounded-lg p-3 max-w-xl ${[Link] === 'ai' ? 'bg-muted' :
<p className="text-sm leading-relaxed" dangerouslySetInnerHTML={{ __html: [Link]
<p className={`text-xs mt-2 ${[Link] === 'ai' ? 'text-muted-foreground' : 'te
</div>
</div>
))}
{isResponding && (
<div className="flex items-start gap-3">
<AiAvatar />
 <div className="flex-1 rounded-lg bg-muted p-3">
<div className="flex items-center gap-2">
<Loader2 className="h-4 w-4 animate-spin" />
<p className="text-sm text-muted-foreground">Thinking...</p>
</div>
</div>
</div>
)}
</div>
</div>
<div className="p-4 md:p-6 border-t bg-background">
<div className='flex items-center gap-2 mb-3 overflow-x-auto pb-2'>
{[Link](({text, icon: Icon}) => (
<Button
key={text}
variant="outline"
size="sm"
className="shrink-0"
onClick={(e) => handleSendMessage(e, text)}
disabled={isResponding}
>
<Icon className="mr-2 h-4 w-4"/>
{text}
</Button>
))}
</div>
<form onSubmit={handleSendMessage} className="relative w-full">
<Input
placeholder="Ask me about your health, symptoms, or request advice..."
className="pr-12"
value={input}
onChange={(e) => setInput([Link])}
disabled={isLoading || isResponding}
/>
<Button size="icon" className="absolute top-1/2 right-1.5 -translate-y-1/2 h-7 w-7" type="su
<Send className="h-4 w-4" />
<span className="sr-only">Send</span>
</Button>
</form>
</div>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/connect/[Link]
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/c
import { Button } from "@/components/ui/button";
import { Progress } from "@/components/ui/progress";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Bluetooth, AlertTriangle } from "lucide-react";

export default function ConnectPage() {

return (
<div className="p-4 md:p-6 flex items-center justify-center">
<Card className="w-full max-w-2xl transition-all duration-300 hover:shadow-lg hover:-translate-y-1
<CardHeader>
<CardTitle>Connect to ESP32</CardTitle>
<CardDescription>
Pair with your SentrixAI device via Web Bluetooth to start streaming your health data in rea
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<Alert>
<AlertTriangle className="h-4 w-4" />
<AlertTitle>Browser Support</AlertTitle>
<AlertDescription>
Web Bluetooth is only supported on Chromium-based browsers (like Chrome, Edge, Opera) on
</AlertDescription>
</Alert>
<div className="p-6 border rounded-lg text-center space-y-4">
<p className="text-sm font-medium">Status: <span className="text-muted-foreground">Disconnec
<div className="flex items-center gap-4 justify-center">
<p className="text-sm text-muted-foreground">Scanning for devices...</p>
<Progress value={33} className="w-1/2" />
</div>
<Button>
<Bluetooth className="mr-2 h-4 w-4" />
Scan for ESP32
</Button>
</div>
<div>
<h3 className="text-lg font-semibold mb-2">Device Information</h3>
<div className="text-sm text-muted-foreground space-y-1">
<p>Device ID: <span className="font-mono text-foreground">esp32-01</span></p>
<p>Firmware Version: <span className="font-mono text-foreground">v1.2.0</span></p>
<p>Last Seen: <span className="font-mono text-foreground">2 minutes ago</span></p>
</div>
</div>
</CardContent>
<CardFooter>
<p className="text-xs text-muted-foreground">
Ensure your ESP32 device is powered on and within range.
</p>
</CardFooter>
</Card>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/dashboard/[Link]
'use client';

import { StatCard } from "@/components/stat-card"

import { RecentRecommendations } from "@/components/recent-recommendations"
import { SurroundingsCard } from "@/components/surroundings-card"
import { useAppContext } from "@/context/app-context"
import { Vital } from "@/lib/types";
import { EcgHeartCard } from "@/components/ecg-heart-card";
import { SleepTrackingCard } from "@/components/sleep-tracking-card";
import { StressCard } from "@/components/stress-card";
import { RehabLinkCard } from "@/components/rehab-link-card";

export default function DashboardPage() {

const { vitals, userProfile } = useAppContext();

const getVital = (name: string): Vital | undefined => [Link](v => [Link] === name);

const heartRate = getVital("Heart Rate");

const spo2 = getVital("SpO2");
const bloodPressure = getVital("Blood Pressure");
const temperature = getVital("Body Temperature");
const bloodSugar = getVital("Blood Sugar");
const calories = getVital("Calories");

return (
<div className="p-4 md:p-6 space-y-6">
<div>
<h1 className="text-2xl font-bold font-headline">Hey, {userProfile?.firstName}!</h1>
<p className="text-muted-foreground">
Overall Health Status: <span className="text-green-500 font-bold">Good</span>
</p>
</div>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
{heartRate && <StatCard vital={heartRate} />}
{spo2 && <StatCard vital={spo2} />}
{bloodSugar && <div className="lg:row-span-2"><StatCard vital={bloodSugar} /></div>}
{calories && <div className="lg:row-span-2"><StatCard vital={calories} /></div>}

{bloodPressure && <StatCard vital={bloodPressure} />}

{temperature && <StatCard vital={temperature} />}
</div>

<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">

<div className="lg:col-span-2">
<SleepTrackingCard />
</div>
<EcgHeartCard />
<StressCard />
</div>

<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">

<div className="lg:col-span-2">
<RehabLinkCard />
</div>
<SurroundingsCard />
<RecentRecommendations />
</div>
</div>
)
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/dashboard/[vital]/[Link]
'use client';

import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
} from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
import { useParams } from 'next/navigation';
import { useAppContext } from '@/context/app-context';
import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart';
import { Loading } from '@/components/loading';
import { ArrowLeft } from 'lucide-react';

export default function VitalDetailPage() {

const { vital: vitalSlug } = useParams<{ vital: string }>();
const { vitals } = useAppContext();

const vitalNameFromSlug = [Link](/-/g, ' ');

const vital = [Link](

v => [Link]() === [Link]()
);

if (!vital) {
return <Loading />;
}

const chartConfig = {
[[Link]]: {
label: [Link],
color: 'hsl(var(--chart-1))',
},
};

return (
<div className="p-4 md:p-6 space-y-4">
<Button variant="outline" asChild>
<Link href="/dashboard">
<ArrowLeft className="mr-2" /> Back to Dashboard
</Link>
</Button>

<Card>
<CardHeader>
<CardTitle className="capitalize text-3xl">{[Link]}</CardTitle>
<CardDescription>
Detailed historical data and analysis for {[Link]}.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="text-center bg-muted p-6 rounded-lg">
<p className="text-sm text-muted-foreground">Current Reading</p>
<p className="text-5xl font-bold text-primary">
{[Link]}
<span className="text-lg ml-2 text-muted-foreground">
{[Link]}
</span>
</p>
<p className="text-xs text-muted-foreground mt-1">{[Link]}</p>
</div>
 <div>
<h3 className="text-lg font-semibold mb-2">Historical Data</h3>
<div className="h-[400px] w-full">
<ChartContainer
config={chartConfig}
className="h-full w-full"
>
<AreaChart
accessibilityLayer
data={[Link]}
margin={{
left: 12,
right: 12,
top: 10,
bottom: 10,
}}
>
<defs>
<linearGradient id="fill-color" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor="var(--color-value)"
stopOpacity={0.8}
/>
<stop
offset="95%"
stopColor="var(--color-value)"
stopOpacity={0.1}
/>
</linearGradient>
</defs>
<CartesianGrid vertical={false} />
<XAxis
dataKey="time"
tickLine={false}
axisLine={false}
tickMargin={8}
/>
<YAxis
domain={['dataMin - 5', 'dataMax + 5']}
tickLine={false}
axisLine={false}
tickMargin={8}
/>
<ChartTooltip
cursor={true}
content={
<ChartTooltipContent
labelKey="value"
nameKey="time"
indicator="line"
/>
}
/>
<Area
dataKey="value"
type="natural"
fill="url(#fill-color)"
stroke="var(--color-value)"
stackId="a"
strokeWidth={2}
/>
</AreaChart>
</ChartContainer>
</div>
</div>
</CardContent>
</Card>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/emergency/[Link]
'use client';

import { useState } from "react";

import { APIProvider, Map } from "@[Link]/react-google-maps";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Search, MessageSquare, Loader2, Info } from "lucide-react";
import Link from "next/link";
import { useToast } from "@/hooks/use-toast";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

export default function EmergencyPage() {

const [searchQuery, setSearchQuery] = useState("");
const [isLoading, setIsLoading] = useState(false);
const { toast } = useToast();

const apiKey = [Link].NEXT_PUBLIC_GOOGLE_MAPS_API_KEY || "";

const handleSearch = (e: [Link]) => {

[Link]();
toast({
title: "Search Not Implemented",
description: "This is a demo. Search functionality requires a backend.",
})
}

if (!apiKey || apiKey === "YOUR_API_KEY_HERE") {

return (
<div className="p-4 md:p-6 flex items-center justify-center h-full">
<Card className="w-full max-w-lg">
<CardHeader>
<CardTitle>Google Maps Not Configured</CardTitle>
<CardDescription>The map feature is currently disabled.</CardDescription>
</CardHeader>
<CardContent>
<Alert>
<Info className="h-4 w-4" />
<AlertTitle>Action Required</AlertTitle>
<AlertDescription>
To enable the emergency map, please obtain a Google Maps API key from the Google
</AlertDescription>
</Alert>
</CardContent>
</Card>
</div>
)
}

return (
<APIProvider apiKey={apiKey}>
<div className="p-4 md:p-6 grid gap-6 grid-cols-1 lg:grid-cols-3 h-[calc(100vh-4rem)]">
<div className="lg:col-span-2 flex flex-col gap-6">
<Card>
<CardHeader>
<CardTitle>Emergency Assistance</CardTitle>
<CardDescription>
Find nearby medical facilities. For emergencies, call your local emergency numbe
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSearch} className="flex flex-col sm:flex-row gap-2">
<Input
placeholder="Enter your city, or a facility name..."
value={searchQuery}
onChange={(e) => setSearchQuery([Link])}
/>
<Button type="submit" disabled={isLoading}>
{isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin"/> : <Search classN
 Search
</Button>
</form>
</CardContent>
</Card>
<Card className="flex-1">
<CardContent className="p-0 h-full">
<Map
defaultCenter={{ lat: 28.6139, lng: 77.2090 }} // Default to New Delhi
defaultZoom={12}
mapId="emergency_map"
className="h-full w-full rounded-lg"
/>
</CardContent>
</Card>
</div>

<div className="lg:col-span-1">
<Card className="sticky top-20 transition-all duration-300 hover:shadow-lg hover:-translat
<CardHeader className="text-center">
<div className="mx-auto bg-primary/10 text-primary p-3 rounded-full w-fit">
<MessageSquare className="h-8 w-8" />
</div>
<CardTitle className="mt-4">Need Instant Help?</CardTitle>
<CardDescription>
If you're unsure about your symptoms or need quick advice, our AI assistant is h
</CardDescription>
</CardHeader>
<CardContent>
<Button size="lg" className="w-full" asChild>
<Link href="/chat">
Ask SenAssist
</Link>
</Button>
<p className="text-xs text-muted-foreground mt-4 text-center">
SenAssist can provide information but is not a substitute for professional med
</p>
</CardContent>
</Card>
</div>
</div>
</APIProvider>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/feedback/[Link]
'use client';

import { useState } from 'react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Textarea } from '@/components/ui/textarea';
import { useToast } from '@/hooks/use-toast';
import { Label } from '@/components/ui/label';
import { submitFeedback } from '@/ai/flows/submit-feedback';
import { useAppContext } from '@/context/app-context';
import { Loader2, Send } from 'lucide-react';

export default function FeedbackPage() {

const { toast } = useToast();
const { user } = useAppContext();
const [feedbackText, setFeedbackText] = useState('');
const [isLoading, setIsLoading] = useState(false);

const handleSubmit = async (e: [Link]) => {

[Link]();
if (![Link]()) {
toast({
variant: 'destructive',
title: 'Feedback cannot be empty',
description: 'Please write your feedback before submitting.',
});
return;
}

setIsLoading(true);
try {
const response = await submitFeedback({
feedbackText,
userId: user?.uid,
});

toast({
title: 'Feedback Submitted!',
description: [Link],
});

setFeedbackText('');
} catch (error) {
[Link]('Failed to submit feedback:', error);
toast({
variant: 'destructive',
title: 'Submission Failed',
description: 'There was a problem submitting your feedback. Please try again.',
});
} finally {
setIsLoading(false);
}
};

return (
<div className="p-4 md:p-6 flex justify-center">
<Card className="w-full max-w-2xl transition-all duration-300 hover:shadow-lg hover:-translate-y-1
<CardHeader>
<CardTitle>Submit Feedback</CardTitle>
<CardDescription>
We'd love to hear your thoughts! What's working well? What could be better?
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-6">
<div className="space-y-2">
<Label htmlFor="feedback-textarea">Your Feedback</Label>
<Textarea
id="feedback-textarea"
 placeholder="Please be as detailed as possible..."
value={feedbackText}
onChange={e => setFeedbackText([Link])}
rows={8}
required
disabled={isLoading}
/>
</div>
<Button type="submit" className="w-full" disabled={isLoading}>
{isLoading ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Send className="mr-2 h-4 w-4" />
)}
Submit Feedback
</Button>
</form>
</CardContent>
</Card>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/intake/[Link]
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { TargetTab } from "@/components/tools/target-tab";
import { CaloriesTab } from "@/components/tools/calories-tab";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";

export default function IntakePage() {

return (
<div className="p-4 md:p-6">
<Card>
<CardHeader>
<CardTitle>Health Tools</CardTitle>
<CardDescription>Manage your health goals and calculate food calories.</CardDescription>
</CardHeader>
<CardContent>
<Tabs defaultValue="target">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="target">Target</TabsTrigger>
<TabsTrigger value="calories">Calories</TabsTrigger>
</TabsList>
<TabsContent value="target">
<TargetTab />
</TabsContent>
<TabsContent value="calories">
<CaloriesTab />
</TabsContent>
</Tabs>
</CardContent>
</Card>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/log-vital/[Link]
'use client';

import { useState } from 'react';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useToast } from '@/hooks/use-toast';
import { useAppContext } from '@/context/app-context';
import type { VitalSign } from '@/lib/types';
import { ListPlus } from 'lucide-react';

export default function LogVitalPage() {

const { updateVitals, vitals } = useAppContext();
const { toast } = useToast();
const [vitalType, setVitalType] = useState<VitalSign | ''>('');
const [vitalValue, setVitalValue] = useState('');

const manualEntryVitals: VitalSign[] = [

'Blood Sugar',
'Blood Pressure',
'Temperature'
];

const selectedVital = [Link](v => [Link] === vitalType);

const handleSubmit = (e: [Link]) => {

[Link]();
if (!vitalType || !vitalValue) {
toast({
variant: 'destructive',
title: 'Missing Information',
description: 'Please select a vital sign and enter a value.',
});
return;
}

const valueNum = parseFloat(vitalValue);

if (isNaN(valueNum)) {
toast({
variant: 'destructive',
title: 'Invalid Value',
description: 'Please enter a valid number.',
});
return;
}

updateVitals(vitalType, valueNum);
toast({
title: 'Vital Logged!',
description: `${vitalType} reading of ${vitalValue} has been saved.`,
});

setVitalType('');
setVitalValue('');
};

return (
<div className="p-4 md:p-6 flex justify-center">
<Card className="w-full max-w-md transition-all duration-300 hover:shadow-lg hover:-translate-y-1"
<CardHeader>
<CardTitle>Log a New Vital Reading</CardTitle>
<CardDescription>
Manually enter a new measurement for one of your vital signs.
</CardDescription>
</CardHeader>
<CardContent>
 <form onSubmit={handleSubmit} className="space-y-6">
<div className="space-y-2">
<Label htmlFor="vital-type">Vital Sign</Label>
<Select onValueChange={(value: VitalSign) => setVitalType(value)} value={vitalType}>
<SelectTrigger id="vital-type">
<SelectValue placeholder="Select a vital to log..." />
</SelectTrigger>
<SelectContent>
{[Link](vitalName => (
<SelectItem key={vitalName} value={vitalName}>
{vitalName}
</SelectItem>
))}
</SelectContent>
</Select>
</div>

<div className="space-y-2">
<Label htmlFor="vital-value">
Reading {selectedVital ? `(${[Link]})` : ''}
</Label>
<Input
id="vital-value"
type="number"
step="any"
placeholder={selectedVital ? `e.g. ${[Link]}` : 'Enter value'}
value={vitalValue}
onChange={e => setVitalValue([Link])}
required
/>
</div>
<Button type="submit" className="w-full">
<ListPlus className="mr-2 h-4 w-4"/>
Log Reading
</Button>
</form>
</CardContent>
</Card>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/profile/[Link]
'use client';

import { useState, useEffect } from "react";

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { motion, AnimatePresence } from "framer-motion";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { CalendarIcon } from "lucide-react";
import { Calendar } from "@/components/ui/calendar";
import { format, differenceInYears } from "date-fns";
import { Checkbox } from "@/components/ui/checkbox";
import { useToast } from "@/hooks/use-toast";
import { useAppContext } from "@/context/app-context";
import type { UserProfile, Gender, ActivityLevel } from "@/lib/types";
import { Loading } from "@/components/loading";

const activityMultipliers: Record<ActivityLevel, number> = {

sedentary: 1.2,
light: 1.375,
moderate: 1.55,
active: 1.725,
'very-active': 1.9,
};

export default function ProfilePage() {

const { toast } = useToast();
const { userProfile, updateUserProfile } = useAppContext();

const [profile, setProfile] = useState<Partial<UserProfile> | null>(userProfile);

const [age, setAge] = useState<number | null>(null);

const [calculatedMetrics, setCalculatedMetrics] = useState({

bmi: 0,
bmr: 0,
});

// When context updates, update local state

useEffect(() => {
setProfile(userProfile)
}, [userProfile])

useEffect(() => {
if (!profile) return;

if ([Link]) {
setAge(differenceInYears(new Date(), [Link]));
} else {
setAge(null);
}

// A function to re-calculate whenever a dependency changes

const calculateMetrics = () => {
if (!profile) return;
const heightNum = [Link];
const weightNum = [Link];
const currentAge = [Link] ? differenceInYears(new Date(), [Link]) : null;

if (!heightNum || !weightNum || !currentAge || heightNum <= 0 || weightNum <= 0 || currentAge <= 0

setCalculatedMetrics({ bmi: 0, bmr: 0 });
return;
}

// Calculate BMI
const heightInMeters = heightNum / 100;
const bmi = weightNum / (heightInMeters * heightInMeters);
// Calculate BMR (Harris-Benedict equation)
 let bmr;
if ([Link] === 'male') {
bmr = 88.362 + (13.397 * weightNum) + (4.799 * heightNum) - (5.677 * currentAge);
} else if ([Link] === 'female') {
bmr = 447.593 + (9.247 * weightNum) + (3.098 * heightNum) - (4.330 * currentAge);
} else {
// Average for 'other'
const bmrMale = 88.362 + (13.397 * weightNum) + (4.799 * heightNum) - (5.677 * currentAge);
const bmrFemale = 447.593 + (9.247 * weightNum) + (3.098 * heightNum) - (4.330 * currentAge);
bmr = (bmrMale + bmrFemale) / 2;
}

const dailyCalories = bmr * activityMultipliers[[Link] as ActivityLevel];

setCalculatedMetrics({
bmi: parseFloat([Link](1)),
bmr: [Link](dailyCalories),
});
};

calculateMetrics();
}, [profile]);

const handleInputChange = (e: [Link]<HTMLInputElement>) => {

const { id, value } = [Link];
const isNumber = [Link] === 'number';
setProfile(prev => ({ ...prev, [id]: isNumber ? parseFloat(value) : value }));
};

const handleSelectChange = (id: keyof UserProfile, value: string) => {

setProfile(prev => ({ ...prev, [id]: value }));
};

const handleCheckedChange = (id: keyof UserProfile, checked: boolean) => {

setProfile(prev => ({ ...prev, [id]: checked }));
};

const handleDobChange = (date: Date | undefined) => {

setProfile(prev => ({ ...prev, dob: date }));
};

const handleSaveChanges = async () => {

if (!profile) return;
await updateUserProfile(profile);
toast({
title: "Profile Saved!",
description: "Your information has been updated successfully.",
});
};

if (!profile) {
return <Loading />
}

return (
<div className="p-4 md:p-6 grid gap-6 lg:grid-cols-3">
<Card className="lg:col-span-2 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<CardHeader>
<CardTitle>User Profile</CardTitle>
<CardDescription>
Update your personal information. This helps in calculating accurate BMI and BMR values.
</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label htmlFor="firstName">First Name</Label>
<Input id="firstName" placeholder="e.g., John" value={[Link] || ''} onChange={h
</div>
<div className="space-y-2">
 <Label htmlFor="lastName">Last Name</Label>
<Input id="lastName" placeholder="e.g., Doe" value={[Link] || ''} onChange={hand
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label>Date of Birth</Label>
<Popover>
<PopoverTrigger asChild>
<Button
variant={"outline"}
className={`w-full justify-start text-left font-normal ${![Link] && "text-mut
>
<CalendarIcon className="mr-2 h-4 w-4" />
{[Link] ? format([Link], "PPP") : <span>Pick a date</span>}
</Button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0">
<Calendar
mode="single"
selected={[Link]}
onSelect={handleDobChange}
initialFocus
captionLayout="dropdown-buttons"
fromYear={1920}
toYear={new Date().getFullYear()}
/>
</PopoverContent>
</Popover>
</div>
<div className="space-y-2">
<Label>Age</Label>
<div className="flex h-10 w-full items-center rounded-md border border-input bg-background
{age !== null ? `${age} years old` : 'N/A'}
</div>
</div>
</div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">

<div className="space-y-2">
<Label htmlFor="height">Height (cm)</Label>
<Input id="height" type="number" placeholder="e.g., 175" value={[Link] || ''} onCh
</div>
<div className="space-y-2">
<Label htmlFor="weight">Weight (kg)</Label>
<Input id="weight" type="number" placeholder="e.g., 70" value={[Link] || ''} onCha
</div>
<div className="space-y-2">
<Label htmlFor="gender">Gender</Label>
<Select value={[Link]} onValueChange={(value) => handleSelectChange('gender', valu
<SelectTrigger id="gender">
<SelectValue placeholder="Select gender" />
</SelectTrigger>
<SelectContent>
<SelectItem value="male">Male</SelectItem>
<SelectItem value="female">Female</SelectItem>
<SelectItem value="other">Other</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="space-y-2">
<Label htmlFor="activityLevel">Activity Level</Label>
<Select value={[Link]} onValueChange={(value) => handleSelectChange('activit
<SelectTrigger id="activityLevel">
<SelectValue placeholder="Select activity level" />
</SelectTrigger>
<SelectContent>
<SelectItem value="sedentary">Sedentary (little or no exercise)</SelectItem>
<SelectItem value="light">Lightly active (light exercise/sports 1-3 days/week)</SelectIt
<SelectItem value="moderate">Moderately active (moderate exercise/sports 3-5 days/week)<
<SelectItem value="active">Very active (hard exercise/sports 6-7 days a week)</SelectIte
 <SelectItem value="very-active">Extra active (very hard exercise/sports & physical job)<
</SelectContent>
</Select>
</div>

<div className="space-y-4">
<Label>Lifestyle</Label>
<div className="flex items-center space-x-2">
<Checkbox id="smokes" checked={[Link]} onCheckedChange={(checked) => handleChecked
<label htmlFor="smokes" className="text-sm font-medium leading-none peer-disabled:cursor-n
Do you smoke?
</label>
</div>
<div className="flex items-center space-x-2">
<Checkbox id="drinksAlcohol" checked={[Link]} onCheckedChange={(checked) =>
<label htmlFor="drinksAlcohol" className="text-sm font-medium leading-none peer-disabled:c
Do you drink alcohol?
</label>
</div>
</div>

<Button onClick={handleSaveChanges}>Save Changes</Button>

</CardContent>
</Card>
<div className="lg:col-span-1 space-y-6">
<Card className="transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<CardHeader>
<CardTitle>Calculated Metrics</CardTitle>
<CardDescription>Based on your profile information.</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="flex justify-between items-baseline">
<p className="text-muted-foreground">Body Mass Index (BMI)</p>
<AnimatePresence mode="wait">
<motion.p
key={`bmi-${[Link]}`}
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
transition={{ duration: 0.3 }}
className="text-2xl font-bold"
>
{[Link] > 0 ? [Link] : 'N/A'}
</motion.p>
</AnimatePresence>
</div>
<div className="flex justify-between items-baseline">
<p className="text-muted-foreground">Est. Daily Calories (BMR)</p>
<AnimatePresence mode="wait">
<motion.p
key={`bmr-${[Link]}`}
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
transition={{ duration: 0.3 }}
className="text-2xl font-bold"
>
{[Link] > 0 ? [Link]() : 'N/A'}{' '}
{[Link] > 0 && <span className="text-sm text-muted-foreground">kcal/d
</motion.p>
</AnimatePresence>
</div>
</CardContent>
</Card>
</div>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/rehab/[Link]
'use client';

import { useState } from 'react';

import {
AlertDialog,
AlertDialogAction,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose } fr
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Button } from '@/components/ui/button';
import { Plus } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import { HabitCard } from '@/components/habit-card';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Label } from '@/components/ui/label';
import { RehabStats } from '@/components/rehab-stats';
import { useAppContext } from '@/context/app-context';
import type { Habit } from '@/lib/types';

const allAvailableHabits = ["Quit Smoking", "Reduce Alcohol"];

export default function RehabPage() {

const [isWelcomeDialogOpen, setIsWelcomeDialogOpen] = useState(true);
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);

const { habits, addHabit } = useAppContext();

const [newHabitName, setNewHabitName] = useState('');
const { toast } = useToast();

const handleAddHabit = (e: [Link]) => {

[Link]();
if (![Link]()) {
toast({ title: "Please select a habit", variant: "destructive" });
return;
}

addHabit(newHabitName);
toast({ title: "New Habit Added!", description: `You've started tracking "${newHabitName}".`});
setNewHabitName('');
setIsAddDialogOpen(false);
}

const trackedHabitNames = [Link](h => [Link]);

const availableHabitsToAdd = [Link](h => );

return (
<>
<AlertDialog open={isWelcomeDialogOpen} onOpenChange={setIsWelcomeDialogOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>A Note on Your Journey</AlertDialogTitle>
<AlertDialogDescription>
This journey is yours and yours alone. True progress begins with honesty. Be true to yours
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogAction onClick={() => setIsWelcomeDialogOpen(false)}>I Am Ready</AlertDialogActi
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>

<div className="p-4 md:p-6 space-y-6">

 <Card>
<CardHeader>
<CardTitle>Habit Rehabilitation</CardTitle>
<CardDescription>Your path to overcoming bad habits and building a healthier life.</CardDesc
</CardHeader>
</Card>

<div className="grid gap-6 md:grid-cols-2">

{[Link](habit => (
<HabitCard key={[Link]} habit={habit} />
))}
</div>

{[Link] > 0 && <RehabStats habits={habits} />}

<Card>
<CardContent className="p-6 flex flex-col items-center text-center">
<p className="mb-4 text-muted-foreground">Start a new rehabilitation goal.</p>
<Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
<DialogTrigger asChild>
<Button>
<Plus className="mr-2 h-4 w-4" />
Add New Habit
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Add a New Habit to Track</DialogTitle>
</DialogHeader>
<form onSubmit={handleAddHabit}>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="habit-name">Habit Name</Label>
<Select value={newHabitName} onValueChange={setNewHabitName}>
<SelectTrigger id="habit-name">
<SelectValue placeholder="Select a habit to start tracking..
</SelectTrigger>
<SelectContent>
{[Link](habitName => (
<SelectItem key={habitName} value={habitName}>{habitName
))}
{[Link] === 0 && (
<div className="p-4 text-sm text-muted-foreground text-c
You are tracking all available habits.
</div>
)}
</SelectContent>
</Select>
</div>
</div>
<DialogFooter>
<DialogClose asChild>
<Button type="button" variant="secondary">Cancel</Button>
</DialogClose>
<Button type="submit" disabled={!newHabitName}>Add Habit</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
</CardContent>
</Card>
</div>
</>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/settings/[Link]
'use client';

import { useState } from 'react';

import { useTheme } from 'next-themes';
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/c
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { Separator } from "@/components/ui/separator";
import { useToast } from '@/hooks/use-toast';

export default function SettingsPage() {

const { theme, setTheme } = useTheme();
const { toast } = useToast();

// State for alert thresholds

const [thresholds, setThresholds] = useState({
hrMax: '100',
hrMin: '50',
spo2Min: '92',
tempMax: '37.8',
bpSysMax: '140',
bpDiaMax: '90',
ecgMax: '70',
eyeStrainMax: '65',
});

const handleThresholdChange = (e: [Link]<HTMLInputElement>) => {

const { id, value } = [Link];
setThresholds(prev => ({ ...prev, [id]: value }));
};

const handleSaveThresholds = () => {

toast({
title: 'Settings Saved',
description: 'Your alert thresholds have been updated.',
});
};

// State for device registry

const [devices, setDevices] = useState(['esp32-01']);
const [newDevice, setNewDevice] = useState('');

const handleAddDevice = () => {

if (newDevice && ) {
setDevices([...devices, newDevice]);
setNewDevice('');
toast({
title: 'Device Added',
description: `Device "${newDevice}" has been registered.`,
});
} else {
toast({
variant: 'destructive',
title: 'Invalid Device ID',
description: 'Device ID cannot be empty or a duplicate.',
});
}
};

const handleRemoveDevice = (deviceToRemove: string) => {

setDevices([Link](device => device !== deviceToRemove));
toast({
title: 'Device Removed',
description: `Device "${deviceToRemove}" has been removed.`,
});
};
return (
<div className="p-4 md:p-6 space-y-6">
<Card>
<CardHeader>
<CardTitle>Appearance</CardTitle>
<CardDescription>
Customize the look and feel of your dashboard.
</CardDescription>
</CardHeader>
<CardContent>
<div className="flex items-center justify-between">
<div>
<Label htmlFor="dark-mode">Dark Mode</Label>
<p className="text-sm text-muted-foreground">Enable to reduce eye strain in low light.</p>
</div>
<Switch
id="dark-mode"
checked={theme === 'dark'}
onCheckedChange={(checked) => setTheme(checked ? 'dark' : 'light')}
/>
</div>
</CardContent>
</Card>

<Card>
<CardHeader>
<CardTitle>Alert Thresholds</CardTitle>
<CardDescription>
Set the values at which you want to receive alerts for your vitals.
</CardDescription>
</CardHeader>
<CardContent className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="space-y-2">
<Label htmlFor="hrMax">Heart Rate Max (bpm)</Label>
<Input id="hrMax" type="number" value={[Link]} onChange={handleThresholdChange} />
</div>
<div className="space-y-2">
<Label htmlFor="hrMin">Heart Rate Min (bpm)</Label>
<Input id="hrMin" type="number" value={[Link]} onChange={handleThresholdChange} />
</div>
<div className="space-y-2">
<Label htmlFor="spo2Min">SpO2 Min (%)</Label>
<Input id="spo2Min" type="number" value={thresholds.spo2Min} onChange={handleThresholdChange
</div>
<div className="space-y-2">
<Label htmlFor="tempMax">Temperature Max (°C)</Label>
<Input id="tempMax" type="number" step="0.1" value={[Link]} onChange={handleThre
</div>
<div className="space-y-2">
<Label htmlFor="bpSysMax">BP Systolic Max (mmHg)</Label>
<Input id="bpSysMax" type="number" value={[Link]} onChange={handleThresholdChan
</div>
<div className="space-y-2">
<Label htmlFor="bpDiaMax">BP Diastolic Max (mmHg)</Label>
<Input id="bpDiaMax" type="number" value={[Link]} onChange={handleThresholdChan
</div>
<div className="space-y-2">
<Label htmlFor="ecgMax">ECG Stress Max (/100)</Label>
<Input id="ecgMax" type="number" value={[Link]} onChange={handleThresholdChange}
</div>
<div className="space-y-2">
<Label htmlFor="eyeStrainMax">Eye Strain Max (/100)</Label>
<Input id="eyeStrainMax" type="number" value={[Link]} onChange={handleThres
</div>
</CardContent>
<CardFooter>
<Button onClick={handleSaveThresholds}>Save Thresholds</Button>
</CardFooter>
</Card>

<Card>
<CardHeader>
<CardTitle>Device Registry</CardTitle>
 <CardDescription>
Manage your connected ESP32 devices.
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
{[Link]((device) => (
<div key={device} className="flex items-center justify-between p-3 bg-muted rounded-lg">
<p className="font-mono text-sm">{device}</p>
<Button variant="destructive" size="sm" onClick={() => handleRemoveDevice(device)}>R
</div>
))}
{[Link] === 0 && (
<p className="text-sm text-muted-foreground text-center py-4">No devices registered.</p>
)}
</div>
</CardContent>
<CardFooter className="border-t pt-6 mt-6">
<div className="flex items-center gap-4 w-full">
<Input
placeholder="Enter new device ID"
className="flex-1"
value={newDevice}
onChange={(e) => setNewDevice([Link])}
/>
<Button onClick={handleAddDevice}>Add Device</Button>
</div>
</CardFooter>
</Card>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/app/(dashboard)/tools/[Link]
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { TargetTab } from "@/components/tools/target-tab";
import { CaloriesTab } from "@/components/tools/calories-tab";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";

export default function ToolsPage() {

return (
<div className="p-4 md:p-6">
<Card>
<CardHeader>
<CardTitle>Health Tools</CardTitle>
<CardDescription>Manage your health goals and calculate food calories.</CardDescription>
</CardHeader>
<CardContent>
<Tabs defaultValue="calories">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="calories">Calories</TabsTrigger>
<TabsTrigger value="target">Target</TabsTrigger>
</TabsList>
<TabsContent value="calories">
<CaloriesTab />
</TabsContent>
<TabsContent value="target">
<TargetTab />
</TabsContent>
</Tabs>
</CardContent>
</Card>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
'use client';

import { useState } from 'react';

import { mockAppointments } from '@/lib/mock-data';
import { Button } from './ui/button';
import { Calendar, Clock, Plus } from 'lucide-react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose } fr
import { Input } from './ui/input';
import { Label } from './ui/label';
import { useToast } from '@/hooks/use-toast';
import { format } from 'date-fns';

export function AppointmentReminder() {

const [appointments, setAppointments] = useState(mockAppointments);
const [doctorName, setDoctorName] = useState('');
const [specialty, setSpecialty] = useState('');
const [dateTime, setDateTime] = useState('');
const [isDialogOpen, setIsDialogOpen] = useState(false);
const { toast } = useToast();

const handleAddAppointment = (e: [Link]) => {

[Link]();
if (!doctorName || !specialty || !dateTime) {
toast({ title: "Please fill all fields", variant: "destructive" });
return;
}
const newAppointment = {
id: `appt-${[Link]()}`,
doctorName: doctorName,
specialty: specialty,
time: format(new Date(dateTime), "PPpp") // e.g., "Sep 20, 2024, 2:00:00 PM"
};
setAppointments(prev => [...prev, newAppointment]);
toast({ title: "Appointment Added!", description: `Appointment with Dr. ${doctorName} has been sched
setDoctorName('');
setSpecialty('');
setDateTime('');
setIsDialogOpen(false);
}

return (
<div>
<div className="flex justify-between items-center mb-4">
<h4 className="font-semibold text-sm">Upcoming</h4>
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogTrigger asChild>
<Button variant="ghost" size="icon" className="h-7 w-7">
<Plus className="h-4 w-4" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Add New Appointment</DialogTitle>
</DialogHeader>
<form onSubmit={handleAddAppointment}>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="doctor-name">Doctor's Name</Label>
<Input id="doctor-name" value={doctorName} onChange={(e) => setDoctorNam
</div>
<div className="space-y-2">
<Label htmlFor="specialty">Specialty</Label>
<Input id="specialty" value={specialty} onChange={(e) => setSpecialty(e.
</div>
<div className="space-y-2">
<Label htmlFor="datetime">Date and Time</Label>
<Input id="datetime" type="datetime-local" value={dateTime} onChange={(e
</div>
</div>
 <DialogFooter>
<DialogClose asChild>
<Button type="button" variant="secondary">Cancel</Button>
</DialogClose>
<Button type="submit">Add Appointment</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
</div>
<div className="space-y-4">
{[Link] === 0 ? (
<div className="text-center text-sm text-muted-foreground py-4">
No upcoming appointments.
</div>
) : (
[Link]((appointment) => (
<div key={[Link]} className="flex items-center gap-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-second
<Calendar className="h-5 w-5 text-secondary-foreground" />
</div>
<div className="flex-1 text-sm">
<p className="font-medium">Dr. {[Link]}</p>
<p className="text-muted-foreground">{[Link]}</p>
<div className="flex items-center gap-2 text-xs text-muted-foreground mt-1">
<Clock className="h-3 w-3" />
<span>{[Link]}</span>
</div>
</div>
<Button variant="outline" size="sm">Details</Button>
</div>
))
)}
</div>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
import type { ReactNode } from "react"
import {
SidebarProvider,
Sidebar,
SidebarHeader,
SidebarContent,
SidebarFooter,
SidebarInset,
SidebarTrigger,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Logo } from "@/components/icons/logo"
import { SidebarNav } from "@/components/sidebar-nav"
import { Header } from "@/components/header"
import { cn } from "@/lib/utils"

interface DashboardLayoutProps {
children: ReactNode
}

export function DashboardLayout({ children }: DashboardLayoutProps) {

return (
<SidebarProvider>
<Sidebar
variant="sidebar"
collapsible="icon"
className="group"
>
<SidebarHeader>
<div className="flex h-14 items-center justify-start p-2 group-data-[state=collapsed]:px-2 gro
<Logo />
</div>
</SidebarHeader>
<SidebarContent>
<SidebarNav />
</SidebarContent>
<SidebarFooter>
<SidebarTrigger />
</SidebarFooter>
</Sidebar>
<SidebarInset>
<div className="flex h-screen flex-col">
<Header />
<main className={cn(
"flex-1 overflow-y-auto",
"bg-gradient-to-br from-background to-secondary/30 dark:from-background dark:to-secondary/50
)}>
{children}
</main>
</div>
</SidebarInset>
</SidebarProvider>
)
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/c
import { HeartPulse, AlertTriangle } from "lucide-react";
import { Badge } from "@/components/ui/badge";

export function EcgHeartCard() {

return (
<Card className="h-full transition-all duration-300 hover:shadow-lg hover:-translate-y-1 flex flex-c
<CardHeader>
<CardTitle className="flex items-center gap-2 font-headline">
<HeartPulse className="h-5 w-5 text-primary" />
<span>ECG Analysis</span>
</CardTitle>
<CardDescription>AI-powered analysis of your heart's activity.</CardDescription>
</CardHeader>
<CardContent className="flex-grow space-y-4">
<div>
<p className="text-xs text-muted-foreground mb-1">Heart Health Status</p>
<Badge variant="outline" className="text-green-500 border-green-500">Normal Sinus Rhythm</Ba
</div>
<div>
<p className="text-xs text-muted-foreground mb-1">AI Summary</p>
<p className="text-sm">Recent readings appear stable. No significant abnormalities like arrh
</div>
</CardContent>
<CardFooter className="mt-auto border-t pt-3 pb-3">
<div className="flex items-start gap-2 text-xs text-muted-foreground">
<AlertTriangle className="h-4 w-4 shrink-0 mt-0.5" />
<p>
This is not a medical diagnosis. Consult a doctor for professional advice.
</p>
</div>
</CardFooter>
</Card>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
import { Card, CardContent } from "@/components/ui/card";

export function FatigueCard() {

return (
<Card className="flex items-center justify-center h-full bg-muted/50 border-dashed">
<CardContent className="p-6">
<p className="text-sm text-muted-foreground">Fatigue</p>
</CardContent>
</Card>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
'use client';

import { useState } from 'react';

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from './ui/dialog
import { Label } from './ui/label';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
import { RadioGroup, RadioGroupItem } from './ui/radio-group';
import { handleCraving } from '@/ai/flows/handle-craving';
import { useToast } from '@/hooks/use-toast';
import { Loader2, Sparkles, BarChart as BarChartIcon } from 'lucide-react';
import { AlertDialog, AlertDialogAction, AlertDialogContent, AlertDialogDescription, AlertDialogFooter,
import { Bar, BarChart, CartesianGrid, XAxis, YAxis, ResponsiveContainer } from 'recharts';
import { ChartContainer, ChartTooltip, ChartTooltipContent } from './ui/chart';
import { mockCravingHistory } from '@/lib/mock-data';

interface Habit {
id: string;
name: string;
streak: number;
unit: string;
}

interface HabitCardProps {
habit: Habit;
}

const chartConfig = {
handled: {
label: "Handled",
color: "hsl(var(--chart-1))",
},
succumbed: {
label: "Succumbed",
color: "hsl(var(--destructive))",
},
};

const emotionOptions = ['anger', 'boredom', 'depression', 'excitement', 'fear/anxiety', 'irritation', 'r

const triggerOptions = ['after eating', 'alcohol', 'animals', 'fight', 'relation', 'health', 'hunger', '

export function HabitCard({ habit }: HabitCardProps) {

const [isCravingDialogOpen, setIsCravingDialogOpen] = useState(false);
const [isAlertOpen, setIsAlertOpen] = useState(false);
const [alertMessage, setAlertMessage] = useState('');
const [step, setStep] = useState(1);
const [isLoading, setIsLoading] = useState(false);
const [advice, setAdvice] = useState('');
const { toast } = useToast();

const [cravingData, setCravingData] = useState({

emotion: '',
trigger: '',
isHungry: '',
isThirsty: ''
});

const getHabitActions = () => {

if ([Link] === 'Quit Smoking') {
return {
succumb: 'I will smoke one',
resist: "I don't want it anymore",
}
}
if ([Link] === 'Reduce Alcohol') {
return {
succumb: 'I will have a drink',
 resist: "I don't need it",
}
}
return { // Default
succumb: 'I will give in',
resist: "I will stay strong"
}
}
const habitActions = getHabitActions();

const handleSelectChange = (field: keyof typeof cravingData, value: string) => {

setCravingData(prev => ({ ...prev, [field]: value }));
}

const resetForm = () => {

setStep(1);
setAdvice('');
setCravingData({ emotion: '', trigger: '', isHungry: '', isThirsty: '' });
setIsCravingDialogOpen(false);
}

const handleNextStep = () => setStep(prev => prev + 1);

const handleFinalStep = async () => {

setIsLoading(true);
try {
const response = await handleCraving({
...cravingData,
isHungry: [Link] === 'yes',
isThirsty: [Link] === 'yes',
habit: [Link],
});
setAdvice([Link]);
setStep(5); // Move to advice step
} catch (error) {
[Link]("Error handling craving:", error);
toast({ title: "Couldn't get advice", description: "There was an issue getting support. Plea
} finally {
setIsLoading(false);
}
}

const handleUserChoice = (choice: string) => {

setAlertMessage(`You chose: "${choice}". Keep pushing forward.`);
setStep(6); // Move to "Take Test" step
}

const handleTakeTest = () => {

toast({
title: "Test Initiated",
description: "Please use the connected ESP32 device to perform the test."
});
setIsAlertOpen(true); // This will now show the final confirmation
resetForm();
}

return (
<>
<Card className="transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<CardHeader>
<CardTitle>{[Link]}</CardTitle>
<CardDescription>Your craving patterns and history.</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="h-[200px] w-full">
<ChartContainer config={chartConfig} className="w-full h-full">
<ResponsiveContainer>
<BarChart data={mockCravingHistory} margin={{ top: 20, right: 10, left: -20, bot
<CartesianGrid vertical={false} />
<XAxis dataKey="date" tickLine={false} axisLine={false} tickMargin={8} fontSiz
 <YAxis />
<ChartTooltip
content={
<ChartTooltipContent
formatter={(value, name, props) => (
<div>
<p>Status: <span className="font-bold">{[Link]}</spa
<p>Trigger: <span className="font-bold capitalize">{[Link].
<p>Emotion: <span className="font-bold capitalize">{[Link].
</div>
)}
/>
}
/>
<Bar dataKey="count" stackId="a" fill="var(--color-handled)" radius={[4, 4, 0,
</BarChart>
</ResponsiveContainer>
</ChartContainer>
</div>
<Button className="w-full" onClick={() => setIsCravingDialogOpen(true)}>
<BarChartIcon className="mr-2 h-4 w-4" />
Handle Craving
</Button>
</div>
</CardContent>
</Card>

<Dialog open={isCravingDialogOpen} onOpenChange={(open) => !open && resetForm()}>

<DialogContent onInteractOutside={(e) => [Link]()}>
<DialogHeader>
<DialogTitle>Let's work through this craving</DialogTitle>
</DialogHeader>

{step === 1 && (

<div className="py-4 space-y-4">
<Label htmlFor="emotion">What emotion are you feeling?</Label>
<Select value={[Link]} onValueChange={(v) => handleSelectChange('emot
<SelectTrigger id="emotion"><SelectValue placeholder="Select an emotion..." />
<SelectContent>
{[Link](opt => <SelectItem key={opt} value={opt} className="ca
</SelectContent>
</Select>
<Button onClick={handleNextStep} disabled={![Link]} className="w-full
</div>
)}
{step === 2 && (
<div className="py-4 space-y-4">
<Label htmlFor="trigger">Who/what triggered your feeling?</Label>
<Select value={[Link]} onValueChange={(v) => handleSelectChange('trig
<SelectTrigger id="trigger"><SelectValue placeholder="Select a trigger..." /><
<SelectContent>
{[Link](opt => <SelectItem key={opt} value={opt} className="ca
</SelectContent>
</Select>
<Button onClick={handleNextStep} disabled={![Link]} className="w-full
</div>
)}
{step === 3 && (
<div className="py-4 space-y-4">
<Label>Do you feel hungry?</Label>
<RadioGroup value={[Link]} onValueChange={(v) => handleSelectChange(
<div className="flex items-center space-x-2">
<RadioGroupItem value="yes" id="hungry-yes" />
<Label htmlFor="hungry-yes">Yes</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="no" id="hungry-no" />
<Label htmlFor="hungry-no">No</Label>
</div>
</RadioGroup>
<Button onClick={handleNextStep} disabled={![Link]} className="w-ful
</div>
 )}
{step === 4 && (
<div className="py-4 space-y-4">
<Label>Do you feel thirsty?</Label>
<RadioGroup value={[Link]} onValueChange={(v) => handleSelectChang
<div className="flex items-center space-x-2">
<RadioGroupItem value="yes" id="thirsty-yes" />
<Label htmlFor="thirsty-yes">Yes</Label>
</div>
<div className="flex items-center space-x-2">
<RadioGroupItem value="no" id="thirsty-no" />
<Label htmlFor="thirsty-no">No</Label>
</div>
</RadioGroup>
<Button onClick={handleFinalStep} disabled={![Link] || isLoading} c
{isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Sparkles cla
Get Advice
</Button>
</div>
)}
{step === 5 && (
<div className="py-4 space-y-6">
<div className="p-4 bg-muted rounded-lg text-sm">
<p>{advice}</p>
</div>
<p className="text-sm font-medium text-center">What is your decision now?</p>
<div className="grid grid-cols-2 gap-2">
<Button variant="destructive" onClick={() => handleUserChoice([Link]
<Button variant="default" onClick={() => handleUserChoice([Link])
</div>
</div>
)}
{step === 6 && (
<div className="py-4 space-y-6 text-center">
<p className="text-sm">Thank you for logging your decision. If you wish, you can now
<Button onClick={handleTakeTest}>Take Test</Button>
</div>
)}
<DialogFooter>
<DialogClose asChild>
<Button type="button" variant="ghost" onClick={resetForm}>Cancel</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
<AlertDialog open={isAlertOpen} onOpenChange={setIsAlertOpen}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>Decision Logged</AlertDialogTitle>
<AlertDialogDescription>
{alertMessage}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogAction onClick={() => setIsAlertOpen(false)}>Continue</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
"use client"

import Link from "next/link"

import { usePathname, useRouter } from "next/navigation"
import {
Bell,
CircleUser,
LogOut,
Settings,
User,
Moon,
Sun,
AlertTriangle,
Target,
ShieldCheck,
Phone,
MessageSquare,
FileText,
Pill,
Calendar,
} from "lucide-react"
import { useTheme } from "next-themes"
import { Button } from "@/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useSidebar } from "@/components/ui/sidebar"
import { cn } from "@/lib/utils"
import { useToast } from "@/hooks/use-toast"
import { useAppContext } from "@/context/app-context"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs"
import { MedicationReminder } from "./medication-reminder"
import { AppointmentReminder } from "./appointment-reminder"

const pageTitles: { [key: string]: string } = {

"/dashboard": "Dashboard",
"/connect": "Connect Device",
"/tools": "Health Tools",
"/analytics": "Analytics",
"/chat": "SenAssist",
"/settings": "Settings",
"/emergency": "Emergency Assistance",
"/profile": "User Profile",
"/rehab": "Rehab",
"/feedback": "Feedback",
}

export function Header() {

const { toggleSidebar, openMobile } = useSidebar()
const pathname = usePathname()
const router = useRouter()
const { user, isAdmin } = useAppContext();
const title = pageTitles[pathname] || "SentrixAI"
const { setTheme, theme } = useTheme()
const { toast } = useToast()

return (
<header className="flex h-16 items-center gap-4 border-b bg-card/70 backdrop-blur-lg px-4 md:px-6 st
<Button
variant="ghost"
size="icon"
className="md:hidden"
onClick={toggleSidebar}
>
<div className="flex h-6 w-6 flex-col justify-around">
<span
className={`h-0.5 w-full transform bg-current transition-transform duration-300 ${
openMobile ? "translate-y-2 rotate-45" : ""
}`}
/>
<span
className={`h-0.5 w-full bg-current transition-opacity duration-300 ${
openMobile ? "opacity-0" : "opacity-100"
}`}
/>
<span
className={`h-0.5 w-full transform bg-current transition-transform duration-300 ${
openMobile ? "-translate-y-2 -rotate-45" : ""
}`}
/>
</div>
<span className="sr-only">Toggle sidebar</span>
</Button>

<h1 className="flex-1 text-lg font-semibold md:text-xl">{title}</h1>

<div className="flex items-center gap-2">

<Button
size="sm"
asChild
className={cn(
"bg-gradient-to-r from-red-500 to-orange-500 text-white",
"hover:from-red-600 hover:to-orange-600",
"shadow-lg shadow-red-500/50"
)}
>
<Link href="/emergency">
<AlertTriangle className="mr-2 h-4 w-4" />
Not Feeling Well?
</Link>
</Button>
<Button size="sm">
<FileText className="mr-2 h-4 w-4" />
Generate Health Report
</Button>
<Button
variant="ghost"
size="icon"
className="rounded-full"
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
>
<Sun className="h-5 w-5 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
<Moon className="absolute h-5 w-5 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-10
<span className="sr-only">Toggle theme</span>
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="rounded-full relative">
<Bell className="h-5 w-5" />
<span className="absolute -top-0.5 -right-0.5 flex h-2.5 w-2.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg
<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-primary"></spa
</span>
<span className="sr-only">Toggle notifications</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="w-[350px] p-4">
<Tabs defaultValue="medication">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="medication">
<Pill className="mr-2 h-4 w-4" />
Medication
</TabsTrigger>
<TabsTrigger value="appointments">
<Calendar className="mr-2 h-4 w-4" />
 Appointments
</TabsTrigger>
</TabsList>
<TabsContent value="medication" className="mt-4">
<MedicationReminder />
</TabsContent>
<TabsContent value="appointments" className="mt-4">
<AppointmentReminder />
</TabsContent>
</Tabs>
</DropdownMenuContent>
</DropdownMenu>

<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="secondary" size="icon" className="rounded-full">
<CircleUser className="h-5 w-5" />
<span className="sr-only">Toggle user menu</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>
<div className="flex flex-col space-y-1">
<p className="text-sm font-medium leading-none">{user?.displayName || user?.email}</p>
<p className="text-xs leading-none text-muted-foreground">
{user?.email || user?.phoneNumber}
</p>
</div>
</DropdownMenuLabel>
{isAdmin && (
<>
<DropdownMenuSeparator />
<div className="px-2 py-1.5 text-xs font-semibold text-primary flex items-center gap-2
<ShieldCheck className="h-4 w-4" /> Admin Privileges
</div>
</>
)}
<DropdownMenuSeparator />
<DropdownMenuItem asChild>
<Link href="/profile">
<User className="mr-2 h-4 w-4" />
<span>Profile</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/tools">
<Target className="mr-2 h-4 w-4" />
<span>Tools</span>
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/settings">
<Settings className="mr-2 h-4 w-4" />
<span>Settings</span>
</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</header>
)
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
import { Loader2 } from "lucide-react";

export function Loading() {

return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-s
<Loader2 className="h-12 w-12 animate-spin text-primary" />
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
'use client';

import { useState } from 'react';

import { mockMedications } from '@/lib/mock-data';
import { Button } from './ui/button';
import { Pill, Plus, Clock } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, DialogFooter, DialogClose } fr
import { Input } from './ui/input';
import { Label } from './ui/label';

export function MedicationReminder() {

const { toast } = useToast();
const [medications, setMedications] = useState(mockMedications);
const [medName, setMedName] = useState('');
const [dosage, setDosage] = useState('');
const [time, setTime] = useState('');
const [isDialogOpen, setIsDialogOpen] = useState(false);

const handleAction = (medName: string, action: 'Taken' | 'Snoozed') => {

toast({
title: `Medication ${action}`,
description: `${medName} has been marked as ${[Link]()}.`,
});
};

const handleAddMedication = (e: [Link]) => {

[Link]();
if (!medName || !dosage || !time) {
toast({ title: "Please fill all fields", variant: "destructive" });
return;
}
const newMed = {
id: `med-${[Link]()}`,
name: medName,
dosage: `${dosage}, at ${time}`
};
setMedications(prev => [...prev, newMed]);
toast({ title: "Medication Added!", description: `${medName} has been added to your reminders.`});
setMedName('');
setDosage('');
setTime('');
setIsDialogOpen(false);
}

return (
<div>
<div className="flex justify-between items-center mb-4">
<h4 className="font-semibold text-sm">Reminders</h4>
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
<DialogTrigger asChild>
<Button variant="ghost" size="icon" className="h-7 w-7">
<Plus className="h-4 w-4" />
</Button>
</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Add New Medication</DialogTitle>
</DialogHeader>
<form onSubmit={handleAddMedication}>
<div className="space-y-4 py-4">
<div className="space-y-2">
<Label htmlFor="med-name">Medication Name</Label>
<Input id="med-name" value={medName} onChange={(e) => setMedName([Link]
</div>
<div className="space-y-2">
<Label htmlFor="dosage">Dosage</Label>
<Input id="dosage" value={dosage} onChange={(e) => setDosage([Link]
 </div>
<div className="space-y-2">
<Label htmlFor="time">Time</Label>
<Input id="time" type="time" value={time} onChange={(e) => setTime([Link]
</div>
</div>
<DialogFooter>
<DialogClose asChild>
<Button type="button" variant="secondary">Cancel</Button>
</DialogClose>
<Button type="submit">Add Reminder</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
</div>
<div className="space-y-4">
{[Link] === 0 ? (
<div className="text-center text-sm text-muted-foreground py-4">
No medication reminders for now.
</div>
) : [Link]((med) => (
<div key={[Link]} className="flex items-center gap-4">
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10
<Pill className="h-5 w-5 text-primary" />
</div>
<div className="flex-1 text-sm">
<p className="font-medium">{[Link]}</p>
<p className="text-muted-foreground">{[Link]}</p>
</div>
<div className="flex gap-2">
<Button size="sm" onClick={() => handleAction([Link], 'Taken')}>Take</Button>
<Button size="sm" variant="outline" onClick={() => handleAction([Link], 'Snoozed')}>Sn
</div>
</div>
))}
</div>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
'use client';

import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { generateHealthRecommendations } from "@/ai/flows/generate-health-recommendations"
import { FileText, Lightbulb, HeartHandshake, MessageSquare, Loader2 } from "lucide-react"
import Link from "next/link"
import { cn } from "@/lib/utils"
import { useAppContext } from "@/context/app-context";
import { useEffect, useState } from "react";
import type { Recommendation } from "@/lib/types";

const iconMap = {
diet: Lightbulb,
medicine: FileText,
lifestyle: HeartHandshake,
}

export function RecentRecommendations() {

const { vitals, userProfile } = useAppContext();
const [recommendations, setRecommendations] = useState<Recommendation[]>([]);
const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
const fetchRecommendations = async () => {
if (!userProfile) return;

setIsLoading(true);
try {
const vitalReadings = [Link](v => ({
type: [Link],
value: [Link],
unit: [Link],
}));

const response = await generateHealthRecommendations({

userId: 'user-123',
readings: vitalReadings,
bmi: 22.5, // These should come from calculated profile data
bmr: 1680,
});

if ([Link]) {
setRecommendations([Link]((item, index) => ({
id: `rec-${index}`,
...item
})));
}

} catch (error) {
[Link]("Failed to generate recommendations:", error);
setRecommendations([]); // Set empty on error
} finally {
setIsLoading(false);
}
};

fetchRecommendations();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [vitals, userProfile]);

return (
<Card className={cn(
 "h-full transition-all duration-300 hover:shadow-lg hover:-translate-y-1 flex flex-col",
"bg-gradient-to-br from-primary via-primary to-accent text-primary-foreground"
)}>
<CardHeader>
<CardTitle className="font-headline">Recent Recommendations</CardTitle>
<CardDescription className="text-primary-foreground/80">AI-powered advice based on your vitals.<
</CardHeader>
<CardContent className="flex-1 flex flex-col justify-between">
{isLoading ? (
<div className="flex-1 flex items-center justify-center">
<div className="text-center">
<Loader2 className="h-8 w-8 animate-spin mx-auto mb-2" />
<p className="text-sm">Analyzing your data...</p>
</div>
</div>
) : [Link] > 0 ? (
<div className="space-y-4">
{[Link]((rec) => {
const Icon = iconMap[[Link]]
return (
<div key={[Link]} className="flex items-start gap-4">
<div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-for
<Icon className="h-4 w-4 text-primary-foreground" />
</div>
<div className="flex-1">
<p className="text-sm font-medium leading-none">
{[Link]}
</p>
<p className="text-sm text-primary-foreground/70">{[Link]}</p>
</div>
</div>
)
})}
</div>
) : (
<div className="flex-1 flex items-center justify-center">
<p className="text-sm text-center">No specific recommendations at the moment. Keep up t
</div>
)}
<Button className="mt-6 w-full" variant="secondary" asChild>
<Link href="/chat">
<MessageSquare className="mr-2 h-4 w-4" />
Ask SenAssist
</Link>
</Button>
</CardContent>
</Card>
)
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

import { Button } from "@/components/ui/button";
import { HeartHandshake, ArrowRight, ShieldCheck, ShieldAlert, Cigarette, GlassWater } from "lucide-reac
import Link from "next/link";
import { Progress } from "./ui/progress";
import { useAppContext } from "@/context/app-context";
import type { Habit } from "@/lib/types";

const habitIcons: { [key: string]: [Link] } = {

"Quit Smoking": Cigarette,
"Reduce Alcohol": GlassWater,
};

const allStats = [
{ name: 'Quit Smoking', willpower: 75, relapse: 10 },
{ name: 'Reduce Alcohol', willpower: 82, relapse: 5 },
]

export function RehabLinkCard() {

const { habits } = useAppContext();

const trackedHabitNames = [Link](h => [Link]);

const statsToDisplay = [Link](stat => [Link]([Link]));

return (
<Card className="h-full transition-all duration-300 hover:shadow-lg hover:-translate-y-1 flex flex-c
<CardHeader>
<CardTitle className="flex items-center gap-2 font-headline">
<HeartHandshake className="h-5 w-5 text-primary" />
<span>Rehab Dashboard</span>
</CardTitle>
<CardDescription>Your at-a-glance progress.</CardDescription>
</CardHeader>
<CardContent className="flex-grow flex flex-col justify-between">
<div className="space-y-4">
{[Link] > 0 ? [Link](stat => {
const Icon = habitIcons[[Link]] || HeartHandshake;
return (
<div key={[Link]}>
<h4 className="text-sm font-medium flex items-center gap-2 mb-2">
<Icon className="h-4 w-4" />
{[Link]}
</h4>
<div className="space-y-2">
<div className="flex items-center gap-2 text-xs">
<ShieldCheck className="h-4 w-4 text-green-500" />
<p className="text-muted-foreground w-16">Willpower</p>
<Progress value={[Link]} className="flex-1" />
<p className="font-bold w-10 text-right">{[Link]}%</p>
</div>
<div className="flex items-center gap-2 text-xs">
<ShieldAlert className="h-4 w-4 text-red-500" />
<p className="text-muted-foreground w-16">Relapse</p>
<Progress value={[Link]} className="flex-1" />
<p className="font-bold w-10 text-right">{[Link]}%</p>
</div>
</div>
</div>
)
}) : (
<div className="text-center text-sm text-muted-foreground py-6">
No rehab goals started. Visit the rehab page to begin.
</div>
)}
</div>
<Button asChild className="mt-6 w-full">
 <Link href="/rehab">
View Full Journey <ArrowRight className="ml-2 h-4 w-4" />
</Link>
</Button>
</CardContent>
</Card>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
'use client';

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

import { Progress } from "@/components/ui/progress";
import type { Habit } from "@/lib/types";
import { ShieldCheck, ShieldAlert } from "lucide-react";

interface RehabStatsProps {
habits: Habit[];
}

export function RehabStats({ habits }: RehabStatsProps) {

const allStats = [
{ name: 'Quit Smoking', willpower: 75, relapse: 10 },
{ name: 'Reduce Alcohol', willpower: 82, relapse: 5 },
]

const trackedHabitNames = [Link](h => [Link]);

const statsToDisplay = [Link](stat => [Link]([Link]));

return (
<Card>
<CardHeader>
<CardTitle>Progress Overview</CardTitle>
<CardDescription>Your willpower and relapse statistics.</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
{[Link](stat => (
<div key={[Link]}>
<h3 className="text-sm font-medium mb-2">{[Link]}</h3>
<div className="space-y-4">
<div className="flex items-center gap-2">
<ShieldCheck className="h-5 w-5 text-green-500" />
<p className="text-sm text-muted-foreground w-20">Willpower</p>
<Progress value={[Link]} className="flex-1" />
<p className="text-sm font-bold w-12 text-right">{[Link]}%</p>
</div>
<div className="flex items-center gap-2">
<ShieldAlert className="h-5 w-5 text-red-500" />
<p className="text-sm text-muted-foreground w-20">Relapse Rate</p>
<Progress value={[Link]} className="flex-1" />
<p className="text-sm font-bold w-12 text-right">{[Link]}%</p>
</div>
</div>
</div>
))}
</CardContent>
</Card>
)
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
'use client';

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/c

import { BarChart, Bar, XAxis, YAxis, CartesianGrid } from 'recharts';
import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart';
import { mockSleepData } from "@/lib/mock-data";
import { BedDouble, MessageCircle } from "lucide-react";

const chartConfig = {
hours: {
label: 'Sleep (hours)',
color: 'hsl(var(--chart-1))',
},
};

export function SleepTrackingCard() {

const lastNightSleep = mockSleepData[[Link] - 1];

const getSleepRemark = (hours: number) => {

if (hours >= 8) {
return "Excellent sleep duration! You're well-rested.";
}
if (hours >= 7) {
return "That's a healthy amount of sleep. Keep it up!";
}
if (hours >= 6) {
return "A bit short on sleep. Try to get a little more rest.";
}
return "Consider prioritizing sleep to improve your well-being.";
}

return (
<Card className="h-full transition-all duration-300 hover:shadow-lg hover:-translate-y-1 flex flex-c
<CardHeader>
<CardTitle className="flex items-center gap-2 font-headline">
<BedDouble className="h-5 w-5 text-primary" />
Sleep Tracking
</CardTitle>
<CardDescription>Last night you slept for {[Link]} hours.</CardDescription>
</CardHeader>
<CardContent className="flex-1">
<div className="h-[200px] w-full">
<ChartContainer config={chartConfig} className="h-full w-full">
<BarChart accessibilityLayer data={mockSleepData} margin={{ top: 20, right: 10, left: -2
<CartesianGrid vertical={false} />
<XAxis
dataKey="day"
tickLine={false}
axisLine={false}
tickMargin={8}
fontSize={12}
/>
<YAxis
tickLine={false}
axisLine={false}
tickMargin={8}
fontSize={12}
unit="h"
/>
<ChartTooltip
cursor={true}
content={
<ChartTooltipContent
indicator="dot"
/>
}
/>
<Bar
dataKey="hours"
 fill="var(--color-hours)"
radius={[4, 4, 0, 0]}
/>
</BarChart>
</ChartContainer>
</div>
</CardContent>
<CardFooter className="mt-auto border-t pt-3 pb-3">
<div className="flex items-start gap-2 text-xs text-muted-foreground">
<MessageCircle className="h-4 w-4 shrink-0 mt-0.5" />
<p>
{getSleepRemark([Link])}
</p>
</div>
</CardFooter>
</Card>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
"use client"

import Link from "next/link"

import { usePathname } from "next/navigation"
import {
SidebarMenu,
SidebarMenuItem,
SidebarMenuButton,
} from "@/components/ui/sidebar"
import {
LayoutDashboard,
Bluetooth,
BarChart3,
MessageSquare,
Settings,
ClipboardList,
AlertTriangle,
ShoppingCart,
ExternalLink,
LifeBuoy,
User,
Target,
FilePen,
ListPlus,
HeartHandshake,
} from "lucide-react"
import { cn } from "@/lib/utils"
import { useAppContext } from "@/context/app-context"

const allNavItems = [
{ href: "/dashboard", icon: LayoutDashboard, label: "Dashboard" },
{ href: "/emergency", icon: AlertTriangle, label: "Emergency", className: "text-red-500 hover:bg-red-5
{ href: "/chat", icon: MessageSquare, label: "SenAssist" },
{ href: "/tools", icon: Target, label: "Tools" },
{ href: "/analytics", icon: BarChart3, label: "Analytics" },
{ href: "/rehab", icon: HeartHandshake, label: "Rehab" },
{ href: "[Link] icon: ShoppingCart, label: "Pharmacy", external: true },
{ href: "/connect", icon: Bluetooth, label: "Connect" },
{ href: "/profile", icon: User, label: "Profile" },
{ href: "/feedback", icon: FilePen, label: "Feedback" },
{ href: "/settings", icon: Settings, label: "Settings" },
]

export function SidebarNav() {

const pathname = usePathname()

const navItems = allNavItems;

return (
<SidebarMenu>
{[Link]((item) => {
const isExternal = [Link] || [Link]('[Link]
const linkProps = isExternal ? { target: "_blank", rel: "noopener noreferrer" } : {};
const isEmergencyActive = [Link]([Link]) && [Link] === '/emergency';

return (
<SidebarMenuItem key={[Link]}>
<SidebarMenuButton
asChild
isActive={!isExternal && [Link]([Link])}
tooltip={[Link]}
className={cn(
[Link],
isEmergencyActive && 'bg-red-500/10 text-red-500'
)}
>
<Link href={[Link]} {...linkProps}>
<[Link] />
 <span>{[Link]}</span>
{isExternal && ![Link]('[Link] && <ExternalLink className="absolute rig
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
)
})}
</SidebarMenu>
)
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
'use client';

import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from '@/components/ui/card';
import {
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from '@/components/ui/chart';
import { Area, AreaChart } from 'recharts';
import type { Vital } from '@/lib/types';
import { cn } from '@/lib/utils';
import {
HeartPulse,
Gauge,
Thermometer,
Activity,
Flame,
BrainCircuit,
Eye,
Scale,
Droplet,
ListPlus,
} from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import Link from 'next/link';
import { Button } from './ui/button';
import { Input } from './ui/input';
import { useState } from 'react';
import { useToast } from '@/hooks/use-toast';
import { useAppContext } from '@/context/app-context';

const iconMap: { [key: string]: LucideIcon } = {

HeartPulse,
Gauge,
Thermometer,
Activity,
Flame,
BrainCircuit,
Eye,
Scale,
Droplet,
};

interface StatCardProps {
vital: Vital;
}

export function StatCard({ vital }: StatCardProps) {

const { toast } = useToast();
const { updateVitals, calorieTarget } = useAppContext();
const [reading, setReading] = useState('');

const chartConfig = {
value: {
label: [Link],
color: 'hsl(var(--chart-1))',
},
};

const Icon = iconMap[[Link]];

const vitalSlug = [Link]().replace(/\s+/g, '-');
const handleLogVital = (e: [Link]) => {
 [Link]();
[Link]();

if (!reading) {
toast({ title: "Please enter a reading.", variant: 'destructive' });
return;
}
const valueNum = parseFloat(reading);
if (isNaN(valueNum) || valueNum <=0) {
toast({
variant: 'destructive',
title: 'Invalid Value',
description: 'Please enter a valid positive number.',
});
return;
}

updateVitals([Link], valueNum);
toast({
title: `${[Link]} Logged!`,
description: `Your reading of ${reading} has been saved.`
});
setReading('');
}

const remainingCalories = calorieTarget - (parseInt([Link]) || 0);

return (
<Card className={cn("transition-all duration-300 hover:shadow-lg hover:-translate-y-1 flex flex-col
<Link href={`/dashboard/${vitalSlug}`} className='flex-grow flex flex-col'>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="font-headline">{[Link]}</CardTitle>
{Icon && <Icon className="h-4 w-4 text-muted-foreground" />}
</CardHeader>
<CardContent className="pb-0">
<div className="text-2xl font-bold">
{[Link]}
<span className="text-xs text-muted-foreground ml-1">
{[Link]}
</span>
</div>
<p
className={cn(
'text-xs text-muted-foreground',
[Link] === 'up' && 'text-green-600',
[Link] === 'down' && 'text-red-600'
)}
>
{[Link]}
</p>
</CardContent>
<CardFooter className="pb-2 flex-grow">
<div className="h-20 w-full">
<ChartContainer config={chartConfig} className="h-full w-full">
<AreaChart
accessibilityLayer
data={[Link]}
margin={{
left: 0,
right: 0,
top: 5,
bottom: 0,
}}
>
<defs>
<linearGradient id="fill-color" x1="0" y1="0" x2="0" y2="1">
<stop
offset="5%"
stopColor="var(--color-value)"
stopOpacity={0.8}
/>
<stop
 offset="95%"
stopColor="var(--color-value)"
stopOpacity={0.1}
/>
</linearGradient>
</defs>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel hideIndicator />}
/>
<Area
dataKey="value"
type="natural"
fill="url(#fill-color)"
stroke="var(--color-value)"
stackId="a"
/>
</AreaChart>
</ChartContainer>
</div>
</CardFooter>
</Link>
{[Link] === 'Blood Sugar' && (
<CardFooter className='flex-col items-start gap-2 border-t pt-4 mt-auto'>
<p className='text-xs font-medium text-muted-foreground'>Log New Reading</p>
<form onSubmit={handleLogVital} className='w-full flex gap-2'>
<Input
type="number"
placeholder={`e.g. 90 ${[Link]}`}
className='h-9'
value={reading}
onChange={(e) => setReading([Link])}
onClick={(e) => [Link]()}
/>
<Button size="sm" onClick={(e) => [Link]()}>Log</Button>
</form>
</CardFooter>
)}
{[Link] === 'Calories' && (
<CardFooter className='flex-col items-start gap-3 border-t pt-4 mt-auto'>
<div className='w-full text-center'>
<p className="text-sm font-medium">{[Link]()} kcal</p>
<p className="text-xs text-muted-foreground">Remaining</p>
</div>
<Button className='w-full' asChild>
<Link href="/tools">
<ListPlus className="mr-2 h-4 w-4" />
Add a Meal
</Link>
</Button>
</CardFooter>
)}
</Card>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
import { Card, CardHeader, CardTitle, CardContent, CardFooter, CardDescription } from "@/components/ui/c
import { BrainCircuit, AlertTriangle } from "lucide-react";
import { Badge } from "./ui/badge";

export function StressCard() {

return (
<Card className="h-full transition-all duration-300 hover:shadow-lg hover:-translate-y-1 flex flex-c
<CardHeader>
<CardTitle className="flex items-center gap-2 font-headline">
<BrainCircuit className="h-5 w-5 text-primary" />
<span>Stress</span>
</CardTitle>
<CardDescription>AI-powered stress level analysis.</CardDescription>
</CardHeader>
<CardContent className="flex-grow space-y-4">
<div>
<p className="text-xs text-muted-foreground mb-1">Current Status</p>
<Badge variant="outline" className="text-yellow-500 border-yellow-500">Mildly Stressed</Badg
</div>
<div>
<p className="text-xs text-muted-foreground mb-1">AI Analysis</p>
<p className="text-sm">Your recent readings suggest a mild level of stress. Consider taking
</div>
</CardContent>
<CardFooter className="mt-auto border-t pt-3 pb-3">
<div className="flex items-start gap-2 text-xs text-muted-foreground">
<AlertTriangle className="h-4 w-4 shrink-0 mt-0.5" />
<p>
This is a prediction and is not 100% accurate. Consult a doctor for a professional diagn
</p>
</div>
</CardFooter>
</Card>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
'use client';

import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";

import { Thermometer, Gauge, MapPin, AlertTriangle } from "lucide-react";
import { Wind, Cloudy } from "@/components/icons/logo-icon";

// Mock data for surroundings

const surroundingsData = {
temperature: { value: '24', unit: '°C' },
humidity: { value: '65', unit: '%' },
pressure: { value: '1012', unit: 'hPa' },
airQuality: { value: '42', unit: 'AQI' },
}

export function SurroundingsCard() {

const { temperature, humidity, pressure, airQuality } = surroundingsData;

const getAqiColor = (aqi: number) => {

if (aqi <= 50) return 'text-green-500';
if (aqi <= 100) return 'text-yellow-500';
if (aqi <= 150) return 'text-orange-500';
return 'text-red-500';
}

return (
<Card className="h-full transition-all duration-300 hover:shadow-lg hover:-translate-y-1 flex flex-c
<CardHeader>
<CardTitle className="flex items-center gap-2 font-headline">
<MapPin className="h-5 w-5 text-primary" />
<span>Surroundings</span>
</CardTitle>
</CardHeader>
<CardContent className="flex-grow">
<div className="grid grid-cols-1 gap-y-4">
<div className="flex items-center gap-3">
<Thermometer className="h-6 w-6 text-red-500" />
<div>
<p className="text-sm text-muted-foreground">Temperature</p>
<p className="font-bold">{[Link]}<span className="text-xs text-muted-fore
</div>
</div>
<div className="flex items-center gap-3">
<Cloudy className="h-6 w-6 text-blue-500" />
<div>
<p className="text-sm text-muted-foreground">Humidity</p>
<p className="font-bold">{[Link]}<span className="text-xs text-muted-foregro
</div>
</div>
<div className="flex items-center gap-3">
<Gauge className="h-6 w-6 text-gray-500" />
<div>
<p className="text-sm text-muted-foreground">Pressure</p>
<p className="font-bold">{[Link]}<span className="text-xs text-muted-foregro
</div>
</div>
<div className="flex items-center gap-3">
<Wind className="h-6 w-6 text-green-500" />
<div>
<p className="text-sm text-muted-foreground">Air Quality</p>
<p className={`font-bold ${getAqiColor(parseInt([Link], 10))}`}>{airQualit
</div>
</div>
</div>
</CardContent>
<CardFooter className="mt-auto border-t pt-3 pb-3">
<div className="flex items-start gap-2 text-xs text-muted-foreground">
<AlertTriangle className="h-4 w-4 shrink-0 mt-0.5" />
<p>
 Readings are from BME280 & ENS160 sensors and reflect your immediate environment. If you
</p>
</div>
</CardFooter>
</Card>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/[Link]
"use client"

import * as React from "react"

import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes/dist/types"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {

return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/icons/[Link]
import { cn } from "@/lib/utils";

export function LogoIcon({ className, ...props }: [Link]<SVGSVGElement>) {

return (
<svg
xmlns="[Link]
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-8 w-8", className)}
{...props}
>
<path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-
<path d="M12 9v6" />
<path d="M9 12h6" />
</svg>
);
}

export function Wind({ className, ...props }: [Link]<SVGSVGElement>) {

return (
<svg
xmlns="[Link]
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-6 w-6", className)}
{...props}
>
<path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2" />
<path d="M9.6 4.6A2 2 0 1 1 11 8H2" />
<path d="M12.6 19.4A2 2 0 1 0 14 16H2" />
</svg>
);
}

export function Cloudy({ className, ...props }: [Link]<SVGSVGElement>) {

return (
<svg
xmlns="[Link]
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
className={cn("h-6 w-6", className)}
{...props}
>
<path d="M17.5 21H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
<path d="M22 10a3 3 0 0 0-3-3h-2.207a5.502 5.502 0 0 0-10.702.5" />
</svg>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/icons/[Link]
import { LogoIcon } from "./logo-icon";

export function Logo() {

return (
<div className="flex items-center gap-2">
<LogoIcon />
<span className="text-xl font-bold text-sidebar-foreground group-data-[state=collapsed]:hidden">
SentrixAI
</span>
</div>
)
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/tools/[Link]
'use client';

import { useState, useRef, useEffect } from 'react';

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/c
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";
import { Loader2, Camera, Upload, Sparkles, Plus, X, ListPlus } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { calculateCalories, CalculateCaloriesOutput } from '@/ai/flows/calculate-calories';
import { AnimatePresence, motion } from 'framer-motion';
import { useAppContext } from '@/context/app-context';
import { Label } from '../ui/label';

export function CaloriesTab() {

const { updateVitals } = useAppContext();
const [imageSrc, setImageSrc] = useState<string | null>(null);
const [hasCameraPermission, setHasCameraPermission] = useState<boolean | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [result, setResult] = useState<CalculateCaloriesOutput | null>(null);
const videoRef = useRef<HTMLVideoElement>(null);
const canvasRef = useRef<HTMLCanvasElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const { toast } = useToast();

const [manualDescription, setManualDescription] = useState("");

const [manualCalories, setManualCalories] = useState("");

useEffect(() => {
const getCameraPermission = async () => {
if (![Link] || ![Link]) {
setHasCameraPermission(false);
return;
}
try {
const stream = await [Link]({ video: true });
setHasCameraPermission(true);
if ([Link]) {
[Link] = stream;
}
} catch (error) {
[Link]('Error accessing camera:', error);
setHasCameraPermission(false);
}
};
getCameraPermission();

return () => {
// Stop camera stream when component unmounts
if ([Link] && [Link]) {
const stream = [Link] as MediaStream;
[Link]().forEach(track => [Link]());
}
}
}, []);

const handleCapture = () => {

if ([Link] && [Link]) {
const video = [Link];
const canvas = [Link];
[Link] = [Link];
[Link] = [Link];
const context = [Link]('2d');
if (context) {
[Link](video, 0, 0, [Link], [Link]);
const dataUri = [Link]('image/jpeg');
setImageSrc(dataUri);
setResult(null);
}
 }
};

const handleFileUpload = (event: [Link]<HTMLInputElement>) => {

const file = [Link]?.[0];
if (file) {
const reader = new FileReader();
[Link] = (e) => {
const dataUri = [Link]?.result as string;
setImageSrc(dataUri);
setResult(null);
};
[Link](file);
}
};

const handleAnalyze = async () => {

if (!imageSrc) {
toast({
variant: 'destructive',
title: 'No Image',
description: 'Please capture or upload an image first.',
});
return;
}

setIsLoading(true);
setResult(null);

try {
const response = await calculateCalories({ photoDataUri: imageSrc });
setResult(response);
} catch (error) {
[Link]('Error calculating calories:', error);
toast({
variant: 'destructive',
title: 'Analysis Failed',
description: 'Could not analyze the image. Please try again.',
});
} finally {
setIsLoading(false);
}
};

const resetState = () => {

setImageSrc(null);
setResult(null);
if ([Link]) {
[Link] = "";
}
}

const handleAddToIntake = () => {

if(result) {
updateVitals('Calories', [Link]);
toast({
title: 'Calories Added!',
description: `${result?.calories} kcal for ${result?.foodName} has been added to your daily
});
}
resetState();
}

const handleManualAdd = (e: [Link]) => {

[Link]();
const caloriesNum = parseInt(manualCalories, 10);
if (!caloriesNum || isNaN(caloriesNum) || caloriesNum <= 0) {
toast({
variant: 'destructive',
title: 'Invalid Calories',
description: 'Please enter a valid number of calories.',
});
 return;
}
updateVitals('Calories', caloriesNum);
toast({
title: 'Calories Added!',
description: `${caloriesNum} kcal for ${manualDescription || 'manual entry'} has been added.`,
});
setManualDescription("");
setManualCalories("");
}

return (
<div className="pt-6 grid lg:grid-cols-2 gap-6">
<Card className="transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<CardHeader>
<CardTitle>AI Calorie Calculator</CardTitle>
<CardDescription>
Use your camera or upload an image to get an AI-powered calorie estimate.
</CardDescription>
</CardHeader>
<CardContent>
<div className="space-y-4">
<div className="relative aspect-video bg-muted rounded-lg overflow-hidden flex items-center
{imageSrc ? (
<img src={imageSrc} alt="Food" className="object-contain h-full w-full" />
) : hasCameraPermission ? (
<video ref={videoRef} autoPlay muted playsInline className="h-full w-full object-cover">
) : (
<div className="text-center text-muted-foreground p-4">
<Camera className="mx-auto h-8 w-8 mb-2" />
<p>Camera not available or permission denied.</p>
<p className="text-xs">Please use the upload option instead.</p>
</div>
)}
{imageSrc && (
<Button variant="destructive" size="icon" className="absolute top-2 right-2 h-7 w-7" on
<X className="h-4 w-4" />
</Button>
)}
</div>
<canvas ref={canvasRef} className="hidden"></canvas>
{hasCameraPermission === false && (
<Alert variant="destructive">
<AlertTitle>Camera Access Denied</AlertTitle>
<AlertDescription>Please enable camera permissions in your browser settings to use t
</Alert>
)}
<div className="grid grid-cols-2 gap-2">
<Button onClick={handleCapture} disabled={!hasCameraPermission || !!imageSrc}>
<Camera className="mr-2 h-4 w-4" /> Capture
</Button>
<Button variant="outline" onClick={() => [Link]?.click()} disabled={!!imageS
<Upload className="mr-2 h-4 w-4" /> Upload
</Button>
<input
type="file"
ref={fileInputRef}
accept="image/*"
className="hidden"
onChange={handleFileUpload}
/>
</div>
<Button className="w-full" onClick={handleAnalyze} disabled={!imageSrc || isLoading}>
{isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Sparkles className="mr-
Analyze Image
</Button>
</div>
</CardContent>
<AnimatePresence>
{result && (
<CardFooter as={[Link]} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} e
 <h3 className="font-semibold">Analysis Result</h3>
<div className="w-full space-y-2 text-sm">
<div className="flex justify-between">
<p className="text-muted-foreground">Food:</p>
<p className="font-medium">{[Link]}</p>
</div>
<div className="flex justify-between">
<p className="text-muted-foreground">Serving Size:</p>
<p className="font-medium">{[Link]}</p>
</div>
<div className="flex justify-between">
<p className="text-muted-foreground">Est. Calories:</p>
<p className="font-medium">{[Link]} kcal</p>
</div>
</div>
<Button className="w-full" onClick={handleAddToIntake}>
<Plus className="mr-2 h-4 w-4" /> Add to Daily Intake
</Button>
</CardFooter>
)}
</AnimatePresence>
</Card>

<Card className="transition-all duration-300 hover:shadow-lg hover:-translate-y-1">

<CardHeader>
<CardTitle>Manual Entry</CardTitle>
<CardDescription>
Add calories directly if you already know the amount.
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleManualAdd} className="space-y-4">
<div className="space-y-2">
<Label htmlFor="manual-description">Food / Meal Description (Optional)</Label>
<Input id="manual-description" placeholder="e.g., Apple, Protein Shake" value={manua
</div>
<div className="space-y-2">
<Label htmlFor="manual-calories">Calories (kcal)</Label>
<Input id="manual-calories" type="number" placeholder="e.g., 95" required value={man
</div>
<Button type="submit" className="w-full">
<ListPlus className="mr-2 h-4 w-4" /> Add Manually
</Button>
</form>
</CardContent>
</Card>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/tools/[Link]
'use client';

import { useState, useEffect } from "react";

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";
import { motion, AnimatePresence } from "framer-motion";
import { TrendingUp, TrendingDown, Weight, Flame, Activity } from "lucide-react";
import { useAppContext } from "@/context/app-context";

export function TargetTab() {

const { setCalorieTarget } = useAppContext();
const [currentWeight, setCurrentWeight] = useState('70');
const [targetWeight, setTargetWeight] = useState('70');

const [targetMetrics, setTargetMetrics] = useState({

calories: 2000,
activity: "3-5 sessions/week",
goal: 'maintain'
});

const calculateTarget = () => {

const currentWeightNum = parseFloat(currentWeight);
const targetWeightNum = parseFloat(targetWeight);

if (isNaN(currentWeightNum) || isNaN(targetWeightNum) || currentWeightNum <= 0 || targetWeightNum <=

setTargetMetrics({ calories: 0, activity: 'N/A', goal: 'maintain' });
return;
}

let goal: 'lose' | 'gain' | 'maintain';

if (targetWeightNum < currentWeightNum) {
goal = 'lose';
} else if (targetWeightNum > currentWeightNum) {
goal = 'gain';
} else {
goal = 'maintain';
}

// This is a very simplified calculation.

// A real app would use the BMR from the user's profile.
const baseCalories = currentWeightNum * 2.20462 * 15; // A rough estimate
let targetCalories = baseCalories;
let activitySuggestion = "3-5 moderate sessions/week";

if (goal === 'lose') {

targetCalories -= 500;
activitySuggestion = "4-6 sessions/week, mix of cardio and strength";
} else if (goal === 'gain') {
targetCalories += 500;
activitySuggestion = "4-5 strength training sessions/week";
}

const finalCalories = [Link](targetCalories);

setTargetMetrics({
calories: finalCalories,
activity: activitySuggestion,
goal: goal,
});
setCalorieTarget(finalCalories);
};

// Calculate on initial mount

useEffect(() => {
calculateTarget();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const handleSubmit = (e: [Link]) => {
 [Link]();
calculateTarget();
}

const GoalIcon = () => {

switch ([Link]) {
case 'lose':
return <TrendingDown className="h-6 w-6 text-red-500" />;
case 'gain':
return <TrendingUp className="h-6 w-6 text-green-500" />;
default:
return <Weight className="h-6 w-6 text-blue-500" />;
}
}

return (
<div className="pt-6 grid gap-6 lg:grid-cols-3">
<Card className="lg:col-span-2 transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<CardHeader>
<CardTitle>Set Your Target</CardTitle>
<CardDescription>
Define your weight goals to get personalized calorie and activity recommendations.
</CardDescription>
</CardHeader>
<CardContent>
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-2">
<Label htmlFor="current-weight">Current Weight (kg)</Label>
<Input id="current-weight" type="number" placeholder="e.g., 70" value={currentWeight} on
</div>
<div className="space-y-2">
<Label htmlFor="target-weight">Target Weight (kg)</Label>
<Input id="target-weight" type="number" placeholder="e.g., 65" value={targetWeight} onCh
</div>
</div>
<Button type="submit">Calculate Target</Button>
</form>
</CardContent>
</Card>
<div className="lg:col-span-1 space-y-6">
<Card className="transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
<CardHeader>
<CardTitle className="flex items-center gap-2">
<GoalIcon />
Your Daily Target
</CardTitle>
<CardDescription>Based on your goal.</CardDescription>
</CardHeader>
<CardContent className="space-y-6">
<div className="flex justify-between items-center">
<div className="flex items-center gap-3">
<Flame className="h-6 w-6 text-primary" />
<p className="text-muted-foreground">Target Calories</p>
</div>
<AnimatePresence mode="wait">
<motion.p
key={`calories-${[Link]}`}
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
transition={{ duration: 0.3 }}
className="text-2xl font-bold"
>
{[Link] > 0 ? [Link]() : 'N/A'}{' '}
{[Link] > 0 && <span className="text-sm text-muted-foreground">kcal<
</motion.p>
</AnimatePresence>
</div>
<div className="flex flex-col gap-2">
<div className="flex items-center gap-3">
 <Activity className="h-6 w-6 text-primary" />
<p className="text-muted-foreground">Recommended Activity</p>
</div>
<AnimatePresence mode="wait">
<motion.p
key={`activity-${[Link]}`}
initial={{ opacity: 0, y: -10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 10 }}
transition={{ duration: 0.3 }}
className="text-sm font-medium text-right"
>
{[Link]}
</motion.p>
</AnimatePresence>
</div>
</CardContent>
</Card>
</div>
</div>
);
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"

import { cn } from "@/lib/utils"

const Accordion = [Link]

const AccordionItem = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("border-b", className)}
{...props}
/>
))
[Link] = "AccordionItem"

const AccordionTrigger = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, ...props }, ref) => (
<[Link] className="flex">
<[Link]
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[dat
className
)}
{...props}
>
{children}
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
</[Link]>
</[Link]>
))
[Link] = [Link]

const AccordionContent = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, ...props }, ref) => (
<[Link]
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[sta
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</[Link]>
))

[Link] = [Link]

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"

import { cn } from "@/lib/utils"

import { buttonVariants } from "@/components/ui/button"

const AlertDialog = [Link]

const AlertDialogTrigger = [Link]

const AlertDialogPortal = [Link]

const AlertDialogOverlay = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data
className
)}
{...props}
ref={ref}
/>
))
[Link] = [Link]

const AlertDialogContent = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<AlertDialogPortal>
<AlertDialogOverlay />
<[Link]
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-
className
)}
{...props}
/>
</AlertDialogPortal>
))
[Link] = [Link]

const AlertDialogHeader = ({
className,
...props
}: [Link]<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
)}
{...props}
/>
)
[Link] = "AlertDialogHeader"

const AlertDialogFooter = ({
className,
...props
}: [Link]<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
 )}
{...props}
/>
)
[Link] = "AlertDialogFooter"

const AlertDialogTitle = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("text-lg font-semibold", className)}
{...props}
/>
))
[Link] = [Link]

const AlertDialogDescription = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
[Link] =
[Link]

const AlertDialogAction = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(buttonVariants(), className)}
{...props}
/>
))
[Link] = [Link]

const AlertDialogCancel = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
buttonVariants({ variant: "outline" }),
"mt-2 sm:mt-0",
className
)}
{...props}
/>
))
[Link] = [Link]

export {
AlertDialog,
AlertDialogPortal,
AlertDialogOverlay,
AlertDialogTrigger,
AlertDialogContent,
AlertDialogHeader,
AlertDialogFooter,
AlertDialogTitle,
AlertDialogDescription,
AlertDialogAction,
AlertDialogCancel,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const alertVariants = cva(

"relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute
{
variants: {
variant: {
default: "bg-background text-foreground",
destructive:
"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
},
},
defaultVariants: {
variant: "default",
},
}
)

const Alert = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement> & VariantProps<typeof alertVariants>
>(({ className, variant, ...props }, ref) => (
<div
ref={ref}
role="alert"
className={cn(alertVariants({ variant }), className)}
{...props}
/>
))
[Link] = "Alert"

const AlertTitle = [Link]<

HTMLParagraphElement,
[Link]<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
<h5
ref={ref}
className={cn("mb-1 font-medium leading-none tracking-tight", className)}
{...props}
/>
))
[Link] = "AlertTitle"

const AlertDescription = [Link]<

HTMLParagraphElement,
[Link]<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm [&_p]:leading-relaxed", className)}
{...props}
/>
))
[Link] = "AlertDescription"

export { Alert, AlertTitle, AlertDescription }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"

const AspectRatio = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link] ref={ref} className="relative w-full" {...props} />
))
[Link] = [Link]

export { AspectRatio }
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as AvatarPrimitive from "@radix-ui/react-avatar"

import { cn } from "@/lib/utils"

const Avatar = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
className
)}
{...props}
/>
))
[Link] = [Link]

const AvatarImage = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("aspect-square h-full w-full", className)}
{...props}
/>
))
[Link] = [Link]

const AvatarFallback = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
className
)}
{...props}
/>
))
[Link] = [Link]

export { Avatar, AvatarImage, AvatarFallback }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
import * 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 fo
{
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 [Link]<HTMLDivElement>,
VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {

return (
<div className={cn(badgeVariants({ variant }), className)} {...props} />
)
}

export { Badge, badgeVariants }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
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 gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-o
{
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 [Link]<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean
}

const Button = [Link]<HTMLButtonElement, ButtonProps>(

({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
)
}
)
[Link] = "Button"

export { Button, buttonVariants }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import { ChevronLeft, ChevronRight } from "lucide-react"
import { DayPicker, DropdownProps } from "react-day-picker"

import { cn } from "@/lib/utils"

import { buttonVariants } from "@/components/ui/button"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
import { ScrollArea } from "./scroll-area"

export type CalendarProps = [Link]<typeof DayPicker>

function Calendar({
className,
classNames,
showOutsideDays = true,
...props
}: CalendarProps) {
return (
<DayPicker
showOutsideDays={showOutsideDays}
className={cn("p-3", className)}
classNames={{
months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
month: "space-y-4",
caption: "flex justify-between pt-1 relative items-center",
caption_label: "hidden", // hidden
caption_dropdowns: "flex gap-2", // added
nav: "space-x-1 flex items-center",
nav_button: cn(
buttonVariants({ variant: "outline" }),
"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
),
nav_button_previous: "",
nav_button_next: "",
table: "w-full border-collapse space-y-1",
head_row: "flex",
head_cell:
"text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
row: "flex w-full mt-2",
cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r
day: cn(
buttonVariants({ variant: "ghost" }),
"h-9 w-9 p-0 font-normal aria-selected:opacity-100"
),
day_range_end: "day-range-end",
day_selected:
"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-pr
day_today: "bg-accent text-accent-foreground",
day_outside:
"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foregro
day_disabled: "text-muted-foreground opacity-50",
day_range_middle:
"aria-selected:bg-accent aria-selected:text-accent-foreground",
day_hidden: "invisible",
...classNames,
}}
components={{
IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
Dropdown: ({ value, onChange, children, ...props }: DropdownProps) => {
const options = [Link](children) as [Link]<[Link]<HTMLO
const selected = [Link]((child) => [Link] === value);
const handleChange = (value: string) => {
const changeEvent = {
target: { value },
} as [Link]<HTMLSelectElement>;
onChange?.(changeEvent);
 };
return (
<Select
value={value?.toString()}
onValueChange={(value) => {
handleChange(value);
}}
>
<SelectTrigger className="w-[120px]">
<SelectValue>{selected?.props?.children}</SelectValue>
</SelectTrigger>
<SelectContent>
<ScrollArea className="h-72">
{[Link]((option, id: number) => (
<SelectItem key={`${[Link]}-${id}`} value={[Link]?.toStrin
{[Link]}
</SelectItem>
))}
</ScrollArea>
</SelectContent>
</Select>
);
},
}}
{...props}
/>
)
}
[Link] = "Calendar"

export { Calendar }
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm",
className
)}
{...props}
/>
))
[Link] = "Card"

const CardHeader = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col space-y-1.5 p-6", className)}
{...props}
/>
))
[Link] = "CardHeader"

const CardTitle = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn(
"text-xl font-bold leading-none tracking-tight",
className
)}
{...props}
/>
))
[Link] = "CardTitle"

const CardDescription = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
[Link] = "CardDescription"

const CardContent = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
[Link] = "CardContent"

const CardFooter = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement>
 >(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex items-center p-6 pt-0", className)}
{...props}
/>
))
[Link] = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import useEmblaCarousel, {
type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"

import { Button } from "@/components/ui/button"

type CarouselApi = UseEmblaCarouselType[1]

type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
opts?: CarouselOptions
plugins?: CarouselPlugin
orientation?: "horizontal" | "vertical"
setApi?: (api: CarouselApi) => void
}

type CarouselContextProps = {
carouselRef: ReturnType<typeof useEmblaCarousel>[0]
api: ReturnType<typeof useEmblaCarousel>[1]
scrollPrev: () => void
scrollNext: () => void
canScrollPrev: boolean
canScrollNext: boolean
} & CarouselProps

const CarouselContext = [Link]<CarouselContextProps | null>(null)

function useCarousel() {
const context = [Link](CarouselContext)

if (!context) {
throw new Error("useCarousel must be used within a <Carousel />")
}

return context
}

const Carousel = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement> & CarouselProps
>(
(
{
orientation = "horizontal",
opts,
setApi,
plugins,
className,
children,
...props
},
ref
) => {
const [carouselRef, api] = useEmblaCarousel(
{
...opts,
axis: orientation === "horizontal" ? "x" : "y",
},
plugins
)
const [canScrollPrev, setCanScrollPrev] = [Link](false)
const [canScrollNext, setCanScrollNext] = [Link](false)
const onSelect = [Link]((api: CarouselApi) => {
if (!api) {
return
}

setCanScrollPrev([Link]())
setCanScrollNext([Link]())
}, [])

const scrollPrev = [Link](() => {

api?.scrollPrev()
}, [api])

const scrollNext = [Link](() => {

api?.scrollNext()
}, [api])

const handleKeyDown = [Link](

(event: [Link]<HTMLDivElement>) => {
if ([Link] === "ArrowLeft") {
[Link]()
scrollPrev()
} else if ([Link] === "ArrowRight") {
[Link]()
scrollNext()
}
},
[scrollPrev, scrollNext]
)

[Link](() => {
if (!api || !setApi) {
return
}

setApi(api)
}, [api, setApi])

[Link](() => {
if (!api) {
return
}

onSelect(api)
[Link]("reInit", onSelect)
[Link]("select", onSelect)

return () => {
api?.off("select", onSelect)
}
}, [api, onSelect])

return (
<[Link]
value={{
carouselRef,
api: api,
opts,
orientation:
orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
scrollPrev,
scrollNext,
canScrollPrev,
canScrollNext,
}}
>
<div
ref={ref}
onKeyDownCapture={handleKeyDown}
className={cn("relative", className)}
role="region"
aria-roledescription="carousel"
 {...props}
>
{children}
</div>
</[Link]>
)
}
)
[Link] = "Carousel"

const CarouselContent = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement>
>(({ className, ...props }, ref) => {
const { carouselRef, orientation } = useCarousel()

return (
<div ref={carouselRef} className="overflow-hidden">
<div
ref={ref}
className={cn(
"flex",
orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
className
)}
{...props}
/>
</div>
)
})
[Link] = "CarouselContent"

const CarouselItem = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement>
>(({ className, ...props }, ref) => {
const { orientation } = useCarousel()

return (
<div
ref={ref}
role="group"
aria-roledescription="slide"
className={cn(
"min-w-0 shrink-0 grow-0 basis-full",
orientation === "horizontal" ? "pl-4" : "pt-4",
className
)}
{...props}
/>
)
})
[Link] = "CarouselItem"

const CarouselPrevious = [Link]<

HTMLButtonElement,
[Link]<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { orientation, scrollPrev, canScrollPrev } = useCarousel()

return (
<Button
ref={ref}
variant={variant}
size={size}
className={cn(
"absolute h-8 w-8 rounded-full",
orientation === "horizontal"
? "-left-12 top-1/2 -translate-y-1/2"
: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
className
)}
 disabled={!canScrollPrev}
onClick={scrollPrev}
{...props}
>
<ArrowLeft className="h-4 w-4" />
<span className="sr-only">Previous slide</span>
</Button>
)
})
[Link] = "CarouselPrevious"

const CarouselNext = [Link]<

HTMLButtonElement,
[Link]<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
const { orientation, scrollNext, canScrollNext } = useCarousel()

return (
<Button
ref={ref}
variant={variant}
size={size}
className={cn(
"absolute h-8 w-8 rounded-full",
orientation === "horizontal"
? "-right-12 top-1/2 -translate-y-1/2"
: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
className
)}
disabled={!canScrollNext}
onClick={scrollNext}
{...props}
>
<ArrowRight className="h-4 w-4" />
<span className="sr-only">Next slide</span>
</Button>
)
})
[Link] = "CarouselNext"

export {
type CarouselApi,
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as RechartsPrimitive from "recharts"

import { cn } from "@/lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }

const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {

[k in string]: {
label?: [Link]
icon?: [Link]
} & (
| { color?: string; theme?: never }
| { color?: never; theme: Record<keyof typeof THEMES, string> }
)
}

type ChartContextProps = {
config: ChartConfig
}

const ChartContext = [Link]<ChartContextProps | null>(null)

function useChart() {
const context = [Link](ChartContext)

if (!context) {
throw new Error("useChart must be used within a <ChartContainer />")
}

return context
}

const ChartContainer = [Link]<

HTMLDivElement,
[Link]<"div"> & {
config: ChartConfig
children: [Link]<
typeof [Link]
>["children"]
}
>(({ id, className, children, config, ...props }, ref) => {
const uniqueId = [Link]()
const chartId = `chart-${id || [Link](/:/g, "")}`

return (
<[Link] value={{ config }}>
<div
data-chart={chartId}
ref={ref}
className={cn(
"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-fo
className
)}
{...props}
>
<ChartStyle id={chartId} config={config} />
<[Link]>
{children}
</[Link]>
</div>
</[Link]>
)
})
[Link] = "Chart"
const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 const colorConfig = [Link](config).filter(
([, config]) => [Link] || [Link]
)

if (![Link]) {
return null
}

return (
<style
dangerouslySetInnerHTML={{
__html: [Link](THEMES)
.map(
([theme, prefix]) => `
${prefix} [data-chart=${id}] {
${colorConfig
.map(([key, itemConfig]) => {
const color =
[Link]?.[theme as keyof typeof [Link]] ||
[Link]
return color ? ` --color-${key}: ${color};` : null
})
.join("\n")}
}
`
)
.join("\n"),
}}
/>
)
}

const ChartTooltip = [Link]

const ChartTooltipContent = [Link]<

HTMLDivElement,
[Link]<typeof [Link]> &
[Link]<"div"> & {
hideLabel?: boolean
hideIndicator?: boolean
indicator?: "line" | "dot" | "dashed"
nameKey?: string
labelKey?: string
}
>(
(
{
active,
payload,
className,
indicator = "dot",
hideLabel = false,
hideIndicator = false,
label,
labelFormatter,
labelClassName,
formatter,
color,
nameKey,
labelKey,
},
ref
) => {
const { config } = useChart()

const tooltipLabel = [Link](() => {

if (hideLabel || !payload?.length) {
return null
}

const [item] = payload

const key = `${labelKey || [Link] || [Link] || "value"}`
 const itemConfig = getPayloadConfigFromPayload(config, item, key)
const value =
!labelKey && typeof label === "string"
? config[label as keyof typeof config]?.label || label
: itemConfig?.label

if (labelFormatter) {
return (
<div className={cn("font-medium", labelClassName)}>
{labelFormatter(value, payload)}
</div>
)
}

if (!value) {
return null
}

return <div className={cn("font-medium", labelClassName)}>{value}</div>

}, [
label,
labelFormatter,
payload,
hideLabel,
labelClassName,
config,
labelKey,
])

if (!active || !payload?.length) {
return null
}

const nestLabel = [Link] === 1 && indicator !== "dot"

return (
<div
ref={ref}
className={cn(
"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5
className
)}
>
{!nestLabel ? tooltipLabel : null}
<div className="grid gap-1.5">
{[Link]((item, index) => {
const key = `${nameKey || [Link] || [Link] || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const indicatorColor = color || [Link] || [Link]

return (
<div
key={[Link]}
className={cn(
"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-mu
indicator === "dot" && "items-center"
)}
>
{formatter && item?.value !== undefined && [Link] ? (
formatter([Link], [Link], item, index, [Link])
) : (
<>
{itemConfig?.icon ? (
<[Link] />
) : (
!hideIndicator && (
<div
className={cn(
"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
{
"h-2.5 w-2.5": indicator === "dot",
"w-1": indicator === "line",
 "w-0 border-[1.5px] border-dashed bg-transparent":
indicator === "dashed",
"my-0.5": nestLabel && indicator === "dashed",
}
)}
style={
{
"--color-bg": indicatorColor,
"--color-border": indicatorColor,
} as [Link]
}
/>
)
)}
<div
className={cn(
"flex flex-1 justify-between leading-none",
nestLabel ? "items-end" : "items-center"
)}
>
<div className="grid gap-1.5">
{nestLabel ? tooltipLabel : null}
<span className="text-muted-foreground">
{itemConfig?.label || [Link]}
</span>
</div>
{[Link] && (
<span className="font-mono font-medium tabular-nums text-foreground">
{[Link]()}
</span>
)}
</div>
</>
)}
</div>
)
})}
</div>
</div>
)
}
)
[Link] = "ChartTooltip"

const ChartLegend = [Link]

const ChartLegendContent = [Link]<

HTMLDivElement,
[Link]<"div"> &
Pick<[Link], "payload" | "verticalAlign"> & {
hideIcon?: boolean
nameKey?: string
}
>(
(
{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
ref
) => {
const { config } = useChart()

if (!payload?.length) {
return null
}

return (
<div
ref={ref}
className={cn(
"flex items-center justify-center gap-4",
verticalAlign === "top" ? "pb-3" : "pt-3",
className
)}
 >
{[Link]((item) => {
const key = `${nameKey || [Link] || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)

return (
<div
key={[Link]}
className={cn(
"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
)}
>
{itemConfig?.icon && !hideIcon ? (
<[Link] />
) : (
<div
className="h-2 w-2 shrink-0 rounded-[2px]"
style={{
backgroundColor: [Link],
}}
/>
)}
{itemConfig?.label}
</div>
)
})}
</div>
)
}
)
[Link] = "ChartLegend"

// Helper to extract item config from a payload.

function getPayloadConfigFromPayload(
config: ChartConfig,
payload: unknown,
key: string
) {
if (typeof payload !== "object" || payload === null) {
return undefined
}

const payloadPayload =
"payload" in payload &&
typeof [Link] === "object" &&
[Link] !== null
? [Link]
: undefined

let configLabelKey: string = key

if (
key in payload &&
typeof payload[key as keyof typeof payload] === "string"
) {
configLabelKey = payload[key as keyof typeof payload] as string
} else if (
payloadPayload &&
key in payloadPayload &&
typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
) {
configLabelKey = payloadPayload[
key as keyof typeof payloadPayload
] as string
}

return configLabelKey in config

? config[configLabelKey]
: config[key as keyof typeof config]
}

export {
 ChartContainer,
ChartTooltip,
ChartTooltipContent,
ChartLegend,
ChartLegendContent,
ChartStyle,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"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 = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outli
className
)}
{...props}
>
<[Link]
className={cn("flex items-center justify-center text-current")}
>
<Check className="h-4 w-4" />
</[Link]>
</[Link]>
))
[Link] = [Link]

export { Checkbox }
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"

const Collapsible = [Link]

const CollapsibleTrigger = [Link]

const CollapsibleContent = [Link]

export { Collapsible, CollapsibleTrigger, CollapsibleContent }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Dialog = [Link]

const DialogTrigger = [Link]

const DialogPortal = [Link]

const DialogClose = [Link]

const DialogOverlay = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-
className
)}
{...props}
/>
))
[Link] = [Link]

const DialogContent = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<[Link]
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-
className
)}
{...props}
>
{children}
<[Link] className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-backgro
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</[Link]>
</[Link]>
</DialogPortal>
))
[Link] = [Link]

const DialogHeader = ({
className,
...props
}: [Link]<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
className
)}
{...props}
/>
)
[Link] = "DialogHeader"
const DialogFooter = ({
 className,
...props
}: [Link]<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
[Link] = "DialogFooter"

const DialogTitle = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"text-lg font-semibold leading-none tracking-tight",
className
)}
{...props}
/>
))
[Link] = [Link]

const DialogDescription = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
[Link] = [Link]

export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogFooter,
DialogTitle,
DialogDescription,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
import { Check, ChevronRight, Circle, User } from "lucide-react"

import { cn } from "@/lib/utils"

const DropdownMenu = [Link]

const DropdownMenuTrigger = [Link]

const DropdownMenuGroup = [Link]

const DropdownMenuPortal = [Link]

const DropdownMenuSub = [Link]

const DropdownMenuRadioGroup = [Link]

const DropdownMenuSubTrigger = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]> & {
inset?: boolean
}
>(({ className, inset, children, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none fo
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto" />
</[Link]>
))
[Link] =
[Link]

const DropdownMenuSubContent = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow
className
)}
{...props}
/>
))
[Link] =
[Link]

const DropdownMenuContent = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, sideOffset = 4, ...props }, ref) => (
<[Link]>
<[Link]
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shad
className
 )}
{...props}
/>
</[Link]>
))
[Link] = [Link]

const DropdownMenuItem = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outlin
inset && "pl-8",
className
)}
{...props}
/>
))
[Link] = [Link]

const DropdownMenuCheckboxItem = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, checked, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline
className
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<[Link]>
<Check className="h-4 w-4" />
</[Link]>
</span>
{children}
</[Link]>
))
[Link] =
[Link]

const DropdownMenuRadioItem = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<[Link]>
<Circle className="h-2 w-2 fill-current" />
</[Link]>
</span>
{children}
</[Link]>
))
[Link] = [Link]

const DropdownMenuLabel = [Link]<

 [Link]<typeof [Link]>,
[Link]<typeof [Link]> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
)}
{...props}
/>
))
[Link] = [Link]

const DropdownMenuSeparator = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
[Link] = [Link]

const DropdownMenuShortcut = ({
className,
...props
}: [Link]<HTMLSpanElement>) => {
return (
<span
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
{...props}
/>
)
}
[Link] = "DropdownMenuShortcut"

export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuRadioItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuGroup,
DropdownMenuPortal,
DropdownMenuSub,
DropdownMenuSubContent,
DropdownMenuSubTrigger,
DropdownMenuRadioGroup,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as LabelPrimitive from "@radix-ui/react-label"
import { Slot } from "@radix-ui/react-slot"
import {
Controller,
FormProvider,
useFormContext,
type ControllerProps,
type FieldPath,
type FieldValues,
} from "react-hook-form"

import { cn } from "@/lib/utils"

import { Label } from "@/components/ui/label"

const Form = FormProvider

type FormFieldContextValue<
TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> = {
name: TName
}

const FormFieldContext = [Link]<FormFieldContextValue>(

{} as FormFieldContextValue
)

const FormField = <

TFieldValues extends FieldValues = FieldValues,
TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
...props
}: ControllerProps<TFieldValues, TName>) => {
return (
<[Link] value={{ name: [Link] }}>
<Controller {...props} />
</[Link]>
)
}

const useFormField = () => {

const fieldContext = [Link](FormFieldContext)
const itemContext = [Link](FormItemContext)
const { getFieldState, formState } = useFormContext()

const fieldState = getFieldState([Link], formState)

if (!fieldContext) {
throw new Error("useFormField should be used within <FormField>")
}

const { id } = itemContext

return {
id,
name: [Link],
formItemId: `${id}-form-item`,
formDescriptionId: `${id}-form-item-description`,
formMessageId: `${id}-form-item-message`,
...fieldState,
}
}

type FormItemContextValue = {
id: string
}
const FormItemContext = [Link]<FormItemContextValue>(
{} as FormItemContextValue
)

const FormItem = [Link]<

HTMLDivElement,
[Link]<HTMLDivElement>
>(({ className, ...props }, ref) => {
const id = [Link]()

return (
<[Link] value={{ id }}>
<div ref={ref} className={cn("space-y-2", className)} {...props} />
</[Link]>
)
})
[Link] = "FormItem"

const FormLabel = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => {
const { error, formItemId } = useFormField()

return (
<Label
ref={ref}
className={cn(error && "text-destructive", className)}
htmlFor={formItemId}
{...props}
/>
)
})
[Link] = "FormLabel"

const FormControl = [Link]<

[Link]<typeof Slot>,
[Link]<typeof Slot>
>(({ ...props }, ref) => {
const { error, formItemId, formDescriptionId, formMessageId } = useFormField()

return (
<Slot
ref={ref}
id={formItemId}
aria-describedby={
!error
? `${formDescriptionId}`
: `${formDescriptionId} ${formMessageId}`
}
aria-invalid={!!error}
{...props}
/>
)
})
[Link] = "FormControl"

const FormDescription = [Link]<

HTMLParagraphElement,
[Link]<HTMLParagraphElement>
>(({ className, ...props }, ref) => {
const { formDescriptionId } = useFormField()

return (
<p
ref={ref}
id={formDescriptionId}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
)
})
 [Link] = "FormDescription"

const FormMessage = [Link]<

HTMLParagraphElement,
[Link]<HTMLParagraphElement>
>(({ className, children, ...props }, ref) => {
const { error, formMessageId } = useFormField()
const body = error ? String(error?.message ?? "") : children

if (!body) {
return null
}

return (
<p
ref={ref}
id={formMessageId}
className={cn("text-sm font-medium text-destructive", className)}
{...props}
>
{body}
</p>
)
})
[Link] = "FormMessage"

export {
useFormField,
Form,
FormItem,
FormLabel,
FormControl,
FormDescription,
FormMessage,
FormField,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
import * as React from "react"

import { cn } from "@/lib/utils"

const Input = [Link]<HTMLInputElement, [Link]<"input">>(

({ 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-base ring-offset
className
)}
ref={ref}
{...props}
/>
)
}
)
[Link] = "Input"

export { Input }
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as LabelPrimitive from "@radix-ui/react-label"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const labelVariants = cva(

"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
)

const Label = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]> &
VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(labelVariants(), className)}
{...props}
/>
))
[Link] = [Link]

export { Label }
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as MenubarPrimitive from "@radix-ui/react-menubar"
import { Check, ChevronRight, Circle } from "lucide-react"

import { cn } from "@/lib/utils"

function MenubarMenu({
...props
}: [Link]<typeof [Link]>) {
return <[Link] {...props} />
}

function MenubarGroup({
...props
}: [Link]<typeof [Link]>) {
return <[Link] {...props} />
}

function MenubarPortal({
...props
}: [Link]<typeof [Link]>) {
return <[Link] {...props} />
}

function MenubarRadioGroup({
...props
}: [Link]<typeof [Link]>) {
return <[Link] {...props} />
}

function MenubarSub({
...props
}: [Link]<typeof [Link]>) {
return <[Link] data-slot="menubar-sub" {...props} />
}

const Menubar = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"flex h-10 items-center space-x-1 rounded-md border bg-background p-1",
className
)}
{...props}
/>
))
[Link] = [Link]

const MenubarTrigger = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-3 py-1.5 text-sm font-medium outline-n
className
)}
{...props}
/>
))
[Link] = [Link]

const MenubarSubTrigger = [Link]<

 [Link]<typeof [Link]>,
[Link]<typeof [Link]> & {
inset?: boolean
}
>(({ className, inset, children, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg
inset && "pl-8",
className
)}
{...props}
>
{children}
<ChevronRight className="ml-auto h-4 w-4" />
</[Link]>
))
[Link] = [Link]

const MenubarSubContent = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground data-[
className
)}
{...props}
/>
))
[Link] = [Link]

const MenubarContent = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(
(
{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
ref
) => (
<[Link]>
<[Link]
ref={ref}
align={align}
alignOffset={alignOffset}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground s
className
)}
{...props}
/>
</[Link]>
)
)
[Link] = [Link]

const MenubarItem = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none
inset && "pl-8",
className
 )}
{...props}
/>
))
[Link] = [Link]

const MenubarCheckboxItem = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, checked, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline
className
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<[Link]>
<Check className="h-4 w-4" />
</[Link]>
</span>
{children}
</[Link]>
))
[Link] = [Link]

const MenubarRadioItem = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<[Link]>
<Circle className="h-2 w-2 fill-current" />
</[Link]>
</span>
{children}
</[Link]>
))
[Link] = [Link]

const MenubarLabel = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]> & {
inset?: boolean
}
>(({ className, inset, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"px-2 py-1.5 text-sm font-semibold",
inset && "pl-8",
className
)}
{...props}
/>
))
[Link] = [Link]

const MenubarSeparator = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
 >(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
[Link] = [Link]

const MenubarShortcut = ({
className,
...props
}: [Link]<HTMLSpanElement>) => {
return (
<span
className={cn(
"ml-auto text-xs tracking-widest text-muted-foreground",
className
)}
{...props}
/>
)
}
[Link] = "MenubarShortcut"

export {
Menubar,
MenubarMenu,
MenubarTrigger,
MenubarContent,
MenubarItem,
MenubarSeparator,
MenubarLabel,
MenubarCheckboxItem,
MenubarRadioGroup,
MenubarRadioItem,
MenubarPortal,
MenubarSubContent,
MenubarSubTrigger,
MenubarGroup,
MenubarSub,
MenubarShortcut,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as PopoverPrimitive from "@radix-ui/react-popover"

import { cn } from "@/lib/utils"

const Popover = [Link]

const PopoverTrigger = [Link]

const PopoverContent = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
<[Link]>
<[Link]
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-
className
)}
{...props}
/>
</[Link]>
))
[Link] = [Link]

export { Popover, PopoverTrigger, PopoverContent }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as ProgressPrimitive from "@radix-ui/react-progress"

import { cn } from "@/lib/utils"

const Progress = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, value, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"relative h-4 w-full overflow-hidden rounded-full bg-secondary",
className
)}
{...props}
>
<[Link]
className="h-full w-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
/>
</[Link]>
))
[Link] = [Link]

export { Progress }
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
import { Circle } from "lucide-react"

import { cn } from "@/lib/utils"

const RadioGroup = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => {
return (
<[Link]
className={cn("grid gap-2", className)}
{...props}
ref={ref}
/>
)
})
[Link] = [Link]

const RadioGroupItem = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => {
return (
<[Link]
ref={ref}
className={cn(
"aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background fo
className
)}
{...props}
>
<[Link] className="flex items-center justify-center">
<Circle className="h-2.5 w-2.5 fill-current text-current" />
</[Link]>
</[Link]>
)
})
[Link] = [Link]

export { RadioGroup, RadioGroupItem }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"

import { cn } from "@/lib/utils"

const ScrollArea = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("relative overflow-hidden", className)}
{...props}
>
<[Link] className="h-full w-full rounded-[inherit]">
{children}
</[Link]>
<ScrollBar />
<[Link] />
</[Link]>
))
[Link] = [Link]

const ScrollBar = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, orientation = "vertical", ...props }, ref) => (
<[Link]
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" &&
"h-full w-2.5 border-l border-l-transparent p-[1px]",
orientation === "horizontal" &&
"h-2.5 flex-col border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<[Link] className="relative flex-1 rounded-full bg-border" />
</[Link]>
))
[Link] = [Link]

export { ScrollArea, ScrollBar }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

const Select = [Link]

const SelectGroup = [Link]

const SelectValue = [Link]

const SelectTrigger = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 p
className
)}
{...props}
>
{children}
<[Link] asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</[Link]>
</[Link]>
))
[Link] = [Link]

const SelectScrollUpButton = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronUp className="h-4 w-4" />
</[Link]>
))
[Link] = [Link]

const SelectScrollDownButton = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"flex cursor-default items-center justify-center py-1",
className
)}
{...props}
>
<ChevronDown className="h-4 w-4" />
</[Link]>
))
[Link] =
[Link]
const SelectContent = [Link]<
 [Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, position = "popper", ...props }, ref) => (
<[Link]>
<[Link]
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-f
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-
className
)}
position={position}
{...props}
>
<SelectScrollUpButton />
<[Link]
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
)}
>
{children}
</[Link]>
<SelectScrollDownButton />
</[Link]>
</[Link]>
))
[Link] = [Link]

const SelectLabel = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
{...props}
/>
))
[Link] = [Link]

const SelectItem = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, children, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm
className
)}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<[Link]>
<Check className="h-4 w-4" />
</[Link]>
</span>

<[Link]>{children}</[Link]>
</[Link]>
))
[Link] = [Link]

const SelectSeparator = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
 className={cn("-mx-1 my-1 h-px bg-muted", className)}
{...props}
/>
))
[Link] = [Link]

export {
Select,
SelectGroup,
SelectValue,
SelectTrigger,
SelectContent,
SelectLabel,
SelectItem,
SelectSeparator,
SelectScrollUpButton,
SelectScrollDownButton,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as SeparatorPrimitive from "@radix-ui/react-separator"

import { cn } from "@/lib/utils"

const Separator = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(
(
{ className, orientation = "horizontal", decorative = true, ...props },
ref
) => (
<[Link]
ref={ref}
decorative={decorative}
orientation={orientation}
className={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{...props}
/>
)
)
[Link] = [Link]

export { Separator }
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as SheetPrimitive from "@radix-ui/react-dialog"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const Sheet = [Link]

const SheetTrigger = [Link]

const SheetClose = [Link]

const SheetPortal = [Link]

const SheetOverlay = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data
className
)}
{...props}
ref={ref}
/>
))
[Link] = [Link]

const sheetVariants = cva(

"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data
{
variants: {
side: {
top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-f
bottom:
"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-i
left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=
right:
"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=o
},
},
defaultVariants: {
side: "right",
},
}
)

interface SheetContentProps
extends [Link]<typeof [Link]>,
VariantProps<typeof sheetVariants> {}

const SheetContent = [Link]<

[Link]<typeof [Link]>,
SheetContentProps
>(({ side = "right", className, children, ...props }, ref) => (
<SheetPortal>
<SheetOverlay />
<[Link]
ref={ref}
className={cn(sheetVariants({ side }), className)}
{...props}
>
{children}
<[Link] className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-backgrou
<X className="h-4 w-4" />
 <span className="sr-only">Close</span>
</[Link]>
</[Link]>
</SheetPortal>
))
[Link] = [Link]

const SheetHeader = ({
className,
...props
}: [Link]<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-2 text-center sm:text-left",
className
)}
{...props}
/>
)
[Link] = "SheetHeader"

const SheetFooter = ({
className,
...props
}: [Link]<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
className
)}
{...props}
/>
)
[Link] = "SheetFooter"

const SheetTitle = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("text-lg font-semibold text-foreground", className)}
{...props}
/>
))
[Link] = [Link]

const SheetDescription = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("text-sm text-muted-foreground", className)}
{...props}
/>
))
[Link] = [Link]

export {
Sheet,
SheetPortal,
SheetOverlay,
SheetTrigger,
SheetClose,
SheetContent,
SheetHeader,
SheetFooter,
SheetTitle,
SheetDescription,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import { Slot } from "@radix-ui/react-slot"
import { VariantProps, cva } from "class-variance-authority"
import { PanelLeft } from "lucide-react"

import { useIsMobile } from "@/hooks/use-mobile"

import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"
import { Sheet, SheetContent } from "@/components/ui/sheet"
import { Skeleton } from "@/components/ui/skeleton"
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip"

const SIDEBAR_COOKIE_NAME = "sidebar_state"

const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
const SIDEBAR_WIDTH = "16rem"
const SIDEBAR_WIDTH_MOBILE = "18rem"
const SIDEBAR_WIDTH_ICON = "3.5rem"
const SIDEBAR_KEYBOARD_SHORTCUT = "b"

type SidebarContext = {
state: "expanded" | "collapsed"
open: boolean
setOpen: (open: boolean) => void
openMobile: boolean
setOpenMobile: (open: boolean) => void
isMobile: boolean
toggleSidebar: () => void
}

const SidebarContext = [Link]<SidebarContext | null>(null)

function useSidebar() {
const context = [Link](SidebarContext)
if (!context) {
throw new Error("useSidebar must be used within a SidebarProvider.")
}

return context
}

const getSidebarStateFromCookie = () => {

if (typeof document === 'undefined') return true;
const cookie = [Link]
.split('; ')
.find((row) => [Link](`${SIDEBAR_COOKIE_NAME}=`));
return cookie ? [Link]('=')[1] === 'true' : true;
};

const SidebarProvider = [Link]<

HTMLDivElement,
[Link]<"div"> & {
defaultOpen?: boolean
open?: boolean
onOpenChange?: (open: boolean) => void
}
>(
(
{
defaultOpen,
 open: openProp,
onOpenChange: setOpenProp,
className,
style,
children,
...props
},
ref
) => {
const isMobile = useIsMobile()
const [openMobile, setOpenMobile] = [Link](false)

// This is the internal state of the sidebar.

// We use openProp and setOpenProp for control from outside the component.
const [_open, _setOpen] = [Link](defaultOpen ?? getSidebarStateFromCookie())
const open = openProp ?? _open
const setOpen = [Link](
(value: boolean | ((value: boolean) => boolean)) => {
const openState = typeof value === "function" ? value(open) : value
if (setOpenProp) {
setOpenProp(openState)
} else {
_setOpen(openState)
}

// This sets the cookie to keep the sidebar state.

[Link] = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE
},
[setOpenProp, open]
)

// Helper to toggle the sidebar.

const toggleSidebar = [Link](() => {
return isMobile
? setOpenMobile((open) => !open)
: setOpen((open) => !open)
}, [isMobile, setOpen, setOpenMobile])

// Adds a keyboard shortcut to toggle the sidebar.

[Link](() => {
const handleKeyDown = (event: KeyboardEvent) => {
if (
[Link] === SIDEBAR_KEYBOARD_SHORTCUT &&
([Link] || [Link])
) {
[Link]()
toggleSidebar()
}
}

[Link]("keydown", handleKeyDown)
return () => [Link]("keydown", handleKeyDown)
}, [toggleSidebar])

// We add a state so that we can do data-state="expanded" or "collapsed".

// This makes it easier to style the sidebar with Tailwind classes.
const state = open ? "expanded" : "collapsed"

const contextValue = [Link]<SidebarContext>(

() => ({
state,
open,
setOpen,
isMobile,
openMobile,
setOpenMobile,
toggleSidebar,
}),
[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
)

return (
 <[Link] value={contextValue}>
<TooltipProvider delayDuration={0}>
<div
style={
{
"--sidebar-width": SIDEBAR_WIDTH,
"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
...style,
} as [Link]
}
className={cn(
"group/sidebar-wrapper flex w-full",
className
)}
ref={ref}
{...props}
>
{children}
</div>
</TooltipProvider>
</[Link]>
)
}
)
[Link] = "SidebarProvider"

const Sidebar = [Link]<

HTMLDivElement,
[Link]<"div"> & {
side?: "left" | "right"
variant?: "sidebar" | "floating" | "inset"
collapsible?: "offcanvas" | "icon" | "none"
}
>(
(
{
side = "left",
variant = "sidebar",
collapsible = "offcanvas",
className,
children,
...props
},
ref
) => {
const { isMobile, state, openMobile, setOpenMobile } = useSidebar()

if (collapsible === "none") {

return (
<div
className={cn(
"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
className
)}
ref={ref}
{...props}
>
{children}
</div>
)
}

if (isMobile) {
return (
<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
<SheetContent
data-sidebar="sidebar"
data-mobile="true"
className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
style={
{
"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
 } as [Link]
}
side={side}
>
<div className="flex h-full w-full flex-col">{children}</div>
</SheetContent>
</Sheet>
)
}

return (
<div
ref={ref}
className={cn(
"group peer text-sidebar-foreground transition-all duration-300",
"fixed inset-y-0 z-40 hidden h-screen md:flex",
side === "left" ? "left-0" : "right-0",
state === "expanded" ? "w-[var(--sidebar-width)]" : "w-[var(--sidebar-width-icon)]",
variant === "sidebar" && (side === 'left' ? 'border-r' : 'border-l'),
className
)}
data-state={state}
data-collapsible={collapsible}
data-variant={variant}
data-side={side}
{...props}
>
<div
data-sidebar="sidebar"
className={cn("flex h-full w-full flex-col bg-sidebar",
variant === 'floating' && 'm-2 rounded-lg border shadow-sm'
)}
>
{children}
</div>
</div>
)
}
)
[Link] = "Sidebar"

const SidebarTrigger = [Link]<

[Link]<typeof Button>,
[Link]<typeof Button>
>(({ className, onClick, ...props }, ref) => {
const { toggleSidebar } = useSidebar()

return (
<Button
ref={ref}
data-sidebar="trigger"
variant="ghost"
size="icon"
className={cn("h-7 w-7", className)}
onClick={(event) => {
onClick?.(event)
toggleSidebar()
}}
{...props}
>
<PanelLeft />
<span className="sr-only">Toggle Sidebar</span>
</Button>
)
})
[Link] = "SidebarTrigger"

const SidebarRail = [Link]<

HTMLButtonElement,
[Link]<"button">
>(({ className, ...props }, ref) => {
const { toggleSidebar } = useSidebar()
 return (
<button
ref={ref}
data-sidebar="rail"
aria-label="Toggle Sidebar"
tabIndex={-1}
onClick={toggleSidebar}
title="Toggle Sidebar"
className={cn(
"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute a
"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collap
"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-
"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
className
)}
{...props}
/>
)
})
[Link] = "SidebarRail"

const SidebarInset = [Link]<

HTMLDivElement,
[Link]<"main">
>(({ className, ...props }, ref) => {
const { state } = useSidebar();
return (
<main
ref={ref}
className={cn(
"flex-1 transition-all duration-300",
"md:peer-data-[state=expanded]:ml-[var(--sidebar-width)]",
"md:peer-data-[state=collapsed]:ml-[var(--sidebar-width-icon)]",
className
)}
{...props}
/>
)
})
[Link] = "SidebarInset"

const SidebarInput = [Link]<

[Link]<typeof Input>,
[Link]<typeof Input>
>(({ className, ...props }, ref) => {
return (
<Input
ref={ref}
data-sidebar="input"
className={cn(
"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
className
)}
{...props}
/>
)
})
[Link] = "SidebarInput"

const SidebarHeader = [Link]<

HTMLDivElement,
[Link]<"div">
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="header"
className={cn("flex flex-col gap-2 p-2", className)}
{...props}
/>
 )
})
[Link] = "SidebarHeader"

const SidebarFooter = [Link]<

HTMLDivElement,
[Link]<"div">
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="footer"
className={cn("flex flex-col gap-2 p-2", className)}
{...props}
/>
)
})
[Link] = "SidebarFooter"

const SidebarSeparator = [Link]<

[Link]<typeof Separator>,
[Link]<typeof Separator>
>(({ className, ...props }, ref) => {
return (
<Separator
ref={ref}
data-sidebar="separator"
className={cn("mx-2 w-auto bg-sidebar-border", className)}
{...props}
/>
)
})
[Link] = "SidebarSeparator"

const SidebarContent = [Link]<

HTMLDivElement,
[Link]<"div">
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="content"
className={cn(
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[state=collapsed]:overflow-hidden",
className
)}
{...props}
/>
)
})
[Link] = "SidebarContent"

const SidebarGroup = [Link]<

HTMLDivElement,
[Link]<"div">
>(({ className, ...props }, ref) => {
return (
<div
ref={ref}
data-sidebar="group"
className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
{...props}
/>
)
})
[Link] = "SidebarGroup"

const SidebarGroupLabel = [Link]<

HTMLDivElement,
[Link]<"div"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "div"
 return (
<Comp
ref={ref}
data-sidebar="group-label"
className={cn(
"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-fo
"group-data-[state=collapsed]:-mt-8 group-data-[state=collapsed]:opacity-0",
className
)}
{...props}
/>
)
})
[Link] = "SidebarGroupLabel"

const SidebarGroupAction = [Link]<

HTMLButtonElement,
[Link]<"button"> & { asChild?: boolean }
>(({ className, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"

return (
<Comp
ref={ref}
data-sidebar="group-action"
className={cn(
"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 after:md:hidden",
"group-data-[state=collapsed]:hidden",
className
)}
{...props}
/>
)
})
[Link] = "SidebarGroupAction"

const SidebarGroupContent = [Link]<

HTMLDivElement,
[Link]<"div">
>(({ className, ...props }, ref) => (
<div
ref={ref}
data-sidebar="group-content"
className={cn("w-full text-sm", className)}
{...props}
/>
))
[Link] = "SidebarGroupContent"

const SidebarMenu = [Link]<

HTMLUListElement,
[Link]<"ul">
>(({ className, ...props }, ref) => (
<ul
ref={ref}
data-sidebar="menu"
className={cn("flex w-full min-w-0 flex-col gap-1", className)}
{...props}
/>
))
[Link] = "SidebarMenu"

const SidebarMenuItem = [Link]<

HTMLLIElement,
[Link]<"li">
>(({ className, ...props }, ref) => (
<li
ref={ref}
data-sidebar="menu-item"
className={cn("group/menu-item relative", className)}
 {...props}
/>
))
[Link] = "SidebarMenuItem"

const sidebarMenuButtonVariants = cva(

"peer/menu-button flex w-full items-center justify-start gap-2 overflow-hidden rounded-md p-2 text-lef
{
variants: {
variant: {
default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
outline:
"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:tex
},
size: {
default: "h-8 text-sm",
sm: "h-7 text-xs",
lg: "h-12 text-sm group-data-[state=collapsed]:!p-0",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
}
)

const SidebarMenuButton = [Link]<

HTMLButtonElement,
[Link]<"button"> & {
asChild?: boolean
isActive?: boolean
tooltip?: string | [Link]<typeof TooltipContent>
} & VariantProps<typeof sidebarMenuButtonVariants>
>(
(
{
asChild = false,
isActive = false,
variant = "default",
size = "default",
tooltip,
className,
...props
},
ref
) => {
const Comp = asChild ? Slot : "button"
const { isMobile, state } = useSidebar()

const button = (
<Comp
ref={ref}
data-sidebar="menu-button"
data-size={size}
data-active={isActive}
className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
{...props}
/>
)

if (!tooltip) {
return button
}

if (typeof tooltip === "string") {

tooltip = {
children: tooltip,
}
}

return (
 <Tooltip>
<TooltipTrigger asChild>{button}</TooltipTrigger>
<TooltipContent
side="right"
align="center"
hidden={state !== "collapsed" || isMobile}
{...tooltip}
/>
</Tooltip>
)
}
)
[Link] = "SidebarMenuButton"

const SidebarMenuAction = [Link]<

HTMLButtonElement,
[Link]<"button"> & {
asChild?: boolean
showOnHover?: boolean
}
>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button"

return (
<Comp
ref={ref}
data-sidebar="menu-action"
className={cn(
"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text
// Increases the hit area of the button on mobile.
"after:absolute after:-inset-2 after:md:hidden",
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[state=collapsed]:hidden",
showOnHover &&
"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:
className
)}
{...props}
/>
)
})
[Link] = "SidebarMenuAction"

const SidebarMenuBadge = [Link]<

HTMLDivElement,
[Link]<"div">
>(({ className, ...props }, ref) => (
<div
ref={ref}
data-sidebar="menu-badge"
className={cn(
"absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium
"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-si
"peer-data-[size=sm]/menu-button:top-1",
"peer-data-[size=default]/menu-button:top-1.5",
"peer-data-[size=lg]/menu-button:top-2.5",
"group-data-[state=collapsed]:hidden",
className
)}
{...props}
/>
))
[Link] = "SidebarMenuBadge"

const SidebarMenuSkeleton = [Link]<

HTMLDivElement,
[Link]<"div"> & {
showIcon?: boolean
}
>(({ className, showIcon = false, ...props }, ref) => {
 // Random width between 50 to 90%.
const width = [Link](() => {
return `${[Link]([Link]() * 40) + 50}%`
}, [])

return (
<div
ref={ref}
data-sidebar="menu-skeleton"
className={cn("rounded-md h-8 flex gap-2 px-2 items-center", className)}
{...props}
>
{showIcon && (
<Skeleton
className="size-4 rounded-md"
data-sidebar="menu-skeleton-icon"
/>
)}
<Skeleton
className="h-4 flex-1 max-w-[--skeleton-width]"
data-sidebar="menu-skeleton-text"
style={
{
"--skeleton-width": width,
} as [Link]
}
/>
</div>
)
})
[Link] = "SidebarMenuSkeleton"

const SidebarMenuSub = [Link]<

HTMLUListElement,
[Link]<"ul">
>(({ className, ...props }, ref) => (
<ul
ref={ref}
data-sidebar="menu-sub"
className={cn(
"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
"group-data-[state=collapsed]:hidden",
className
)}
{...props}
/>
))
[Link] = "SidebarMenuSub"

const SidebarMenuSubItem = [Link]<

HTMLLIElement,
[Link]<"li">
>(({ ...props }, ref) => <li ref={ref} {...props} />)
[Link] = "SidebarMenuSubItem"

const SidebarMenuSubButton = [Link]<

HTMLAnchorElement,
[Link]<"a"> & {
asChild?: boolean
size?: "sm" | "md"
isActive?: boolean
}
>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
const Comp = asChild ? Slot : "a"

return (
<Comp
ref={ref}
data-sidebar="menu-sub-button"
data-size={size}
data-active={isActive}
className={cn(
 "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sideba
"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
size === "sm" && "text-xs",
size === "md" && "text-sm",
"group-data-[state=collapsed]:hidden",
className
)}
{...props}
/>
)
})
[Link] = "SidebarMenuSubButton"

export {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupAction,
SidebarGroupContent,
SidebarGroupLabel,
SidebarHeader,
SidebarInput,
SidebarInset,
SidebarMenu,
SidebarMenuAction,
SidebarMenuBadge,
SidebarMenuButton,
SidebarMenuItem,
SidebarMenuSkeleton,
SidebarMenuSub,
SidebarMenuSubButton,
SidebarMenuSubItem,
SidebarProvider,
SidebarRail,
SidebarSeparator,
SidebarTrigger,
useSidebar,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
import { cn } from "@/lib/utils"

function Skeleton({
className,
...props
}: [Link]<HTMLDivElement>) {
return (
<div
className={cn("animate-pulse rounded-md bg-muted", className)}
{...props}
/>
)
}

export { Skeleton }
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as SliderPrimitive from "@radix-ui/react-slider"

import { cn } from "@/lib/utils"

const Slider = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"relative flex w-full touch-none select-none items-center",
className
)}
{...props}
>
<[Link] className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary
<[Link] className="absolute h-full bg-primary" />
</[Link]>
<[Link] className="block h-5 w-5 rounded-full border-2 border-primary bg-background r
</[Link]>
))
[Link] = [Link]

export { Slider }
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as SwitchPrimitives from "@radix-ui/react-switch"

import { cn } from "@/lib/utils"

const Switch = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
className={cn(
"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-trans
className
)}
{...props}
ref={ref}
>
<[Link]
className={cn(
"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transf
)}
/>
</[Link]>
))
[Link] = [Link]

export { Switch }
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
import * as React from "react"

import { cn } from "@/lib/utils"

const Table = [Link]<

HTMLTableElement,
[Link]<HTMLTableElement>
>(({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
<table
ref={ref}
className={cn("w-full caption-bottom text-sm", className)}
{...props}
/>
</div>
))
[Link] = "Table"

const TableHeader = [Link]<

HTMLTableSectionElement,
[Link]<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
))
[Link] = "TableHeader"

const TableBody = [Link]<

HTMLTableSectionElement,
[Link]<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tbody
ref={ref}
className={cn("[&_tr:last-child]:border-0", className)}
{...props}
/>
))
[Link] = "TableBody"

const TableFooter = [Link]<

HTMLTableSectionElement,
[Link]<HTMLTableSectionElement>
>(({ className, ...props }, ref) => (
<tfoot
ref={ref}
className={cn(
"border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
className
)}
{...props}
/>
))
[Link] = "TableFooter"

const TableRow = [Link]<

HTMLTableRowElement,
[Link]<HTMLTableRowElement>
>(({ className, ...props }, ref) => (
<tr
ref={ref}
className={cn(
"border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
className
)}
{...props}
/>
))
[Link] = "TableRow"

const TableHead = [Link]<

 HTMLTableCellElement,
[Link]<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}
/>
))
[Link] = "TableHead"

const TableCell = [Link]<

HTMLTableCellElement,
[Link]<HTMLTableCellElement>
>(({ className, ...props }, ref) => (
<td
ref={ref}
className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
{...props}
/>
))
[Link] = "TableCell"

const TableCaption = [Link]<

HTMLTableCaptionElement,
[Link]<HTMLTableCaptionElement>
>(({ className, ...props }, ref) => (
<caption
ref={ref}
className={cn("mt-4 text-sm text-muted-foreground", className)}
{...props}
/>
))
[Link] = "TableCaption"

export {
Table,
TableHeader,
TableBody,
TableFooter,
TableHead,
TableRow,
TableCell,
TableCaption,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = [Link]

const TabsList = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
className
)}
{...props}
/>
))
[Link] = [Link]

const TabsTrigger = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-med
className
)}
{...props}
/>
))
[Link] = [Link]

const TabsContent = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ri
className
)}
{...props}
/>
))
[Link] = [Link]

export { Tabs, TabsList, TabsTrigger, TabsContent }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
import * as React from 'react';

import {cn} from '@/lib/utils';

const Textarea = [Link]<HTMLTextAreaElement, [Link]<'textarea'>>(

({className, ...props}, ref) => {
return (
<textarea
className={cn(
'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base rin
className
)}
ref={ref}
{...props}
/>
);
}
);
[Link] = 'Textarea';

export {Textarea};
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import { useToast } from "@/hooks/use-toast"

import {
Toast,
ToastClose,
ToastDescription,
ToastProvider,
ToastTitle,
ToastViewport,
} from "@/components/ui/toast"

export function Toaster() {

const { toasts } = useToast()

return (
<ToastProvider>
{[Link](function ({ id, title, description, action, ...props }) {
return (
<Toast key={id} {...props}>
<div className="grid gap-1">
{title && <ToastTitle>{title}</ToastTitle>}
{description && (
<ToastDescription>{description}</ToastDescription>
)}
</div>
{action}
<ToastClose />
</Toast>
)
})}
<ToastViewport />
</ToastProvider>
)
}
Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as TooltipPrimitive from "@radix-ui/react-tooltip"

import { cn } from "@/lib/utils"

const TooltipProvider = [Link]

const Tooltip = [Link]

const TooltipTrigger = [Link]

const TooltipContent = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, sideOffset = 4, ...props }, ref) => (
<[Link]
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 sha
className
)}
{...props}
/>
))
[Link] = [Link]

export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

Explanation not written yet, but this file contributes to the app's functionality.
src/components/ui/[Link]
"use client"

import * as React from "react"

import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from "lucide-react"

import { cn } from "@/lib/utils"

const ToastProvider = [Link]

const ToastViewport = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-a
className
)}
{...props}
/>
))
[Link] = [Link]

const toastVariants = cva(

"group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden
{
variants: {
variant: {
default: "border bg-background text-foreground",
destructive:
"destructive group border-destructive bg-destructive text-destructive-foreground",
},
},
defaultVariants: {
variant: "default",
},
}
)

const Toast = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]> &
VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
return (
<[Link]
ref={ref}
className={cn(toastVariants({ variant }), className)}
{...props}
/>
)
})
[Link] = [Link]

const ToastAction = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-s
className
)}
{...props}
/>
 ))
[Link] = [Link]

const ToastClose = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn(
"absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-
className
)}
toast-close=""
{...props}
>
<X className="h-4 w-4" />
</[Link]>
))
[Link] = [Link]

const ToastTitle = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("text-sm font-semibold", className)}
{...props}
/>
))
[Link] = [Link]

const ToastDescription = [Link]<

[Link]<typeof [Link]>,
[Link]<typeof [Link]>
>(({ className, ...props }, ref) => (
<[Link]
ref={ref}
className={cn("text-sm opacity-90", className)}
{...props}
/>
))
[Link] = [Link]

type ToastProps = [Link]<typeof Toast>

type ToastActionElement = [Link]<typeof ToastAction>

export {
type ToastProps,
type ToastActionElement,
ToastProvider,
ToastViewport,
Toast,
ToastTitle,
ToastDescription,
ToastClose,
ToastAction,
}
Explanation not written yet, but this file contributes to the app's functionality.
src/context/[Link]
'use client';

import React, { createContext, useContext, useState, ReactNode, useEffect } from 'react';

import { mockVitals } from '@/lib/mock-data';
import type { Vital, VitalSign, UserProfile, Habit } from '@/lib/types';
import { User } from 'firebase/auth';

interface AppContextType {
vitals: Vital[];
updateVitals: (name: VitalSign, value: number) => void;
user: Partial<User> | null;
isAdmin: boolean;
userProfile: UserProfile | null;
updateUserProfile: (profile: Partial<UserProfile>) => Promise<void>;
calorieTarget: number;
setCalorieTarget: (target: number) => void;
habits: Habit[];
addHabit: (habitName: string) => void;
}

const AppContext = createContext<AppContextType | undefined>(undefined);

const ADMIN_EMAILS = ['mysterygill77@[Link]', 'gunveer678@[Link]', 'osamss911@[Link]'];

// A map to store profiles in memory for the session

const sessionProfiles = new Map<string, UserProfile>();
const sessionHabits = new Map<string, Habit[]>();

const mockUser = {
uid: 'mock-user-123',
email: '[Link]@[Link]',
displayName: 'Dev User',
};

const defaultProfile: UserProfile = {

firstName: 'Dev',
lastName: 'User',
dob: new Date('1990-01-01'),
height: 175,
weight: 70,
gender: 'male',
activityLevel: 'moderate',
smokes: false,
drinksAlcohol: true,
};

export const AppProvider = ({ children }: { children: ReactNode }) => {

const [vitals, setVitals] = useState<Vital[]>(mockVitals);
const [isAdmin, setIsAdmin] = useState(true); // Default to admin for dev
const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
const [calorieTarget, setCalorieTarget] = useState(2000);
const [habits, setHabits] = useState<Habit[]>([]);

useEffect(() => {
// Check session memory for profile and habits
const profileFromSession = [Link]([Link]);
const habitsFromSession = [Link]([Link]);

if (profileFromSession) {
setUserProfile(profileFromSession);
} else {
[Link]([Link], defaultProfile);
setUserProfile(defaultProfile);
}

if (habitsFromSession) {
setHabits(habitsFromSession);
} else {
[Link]([Link], []);
 setHabits([]);
}

}, []);

const updateVitals = (name: VitalSign, value: number) => {

setVitals(prevVitals => {
const newVitals = [...prevVitals];
const vitalIndex = [Link](v => [Link] === name);

if (vitalIndex !== -1) {

const updatedVital = { ...newVitals[vitalIndex] };

if (name === 'Calories') {

const currentValue = parseInt([Link], 10) || 0;
[Link] = (currentValue + value).toString();

[Link] = [
...[Link],
{ time: 'now', value: currentValue + value }
].slice(-12);

} else {
[Link] = [Link]();
[Link] = [
...[Link],
{ time: 'now', value }
].slice(-12);
}

newVitals[vitalIndex] = updatedVital;
}

return newVitals;
});
};

const updateUserProfile = async (profile: Partial<UserProfile>) => {

if (!mockUser) return;

const updatedProfile = { ...(userProfile || {}), ...profile, uid: [Link] } as UserProfile;

[Link]([Link], updatedProfile);

setUserProfile(updatedProfile);
};

const addHabit = (habitName: string) => {

const newHabit: Habit = {
id: `habit-${[Link]()}`,
name: habitName,
streak: 0,
unit: 'days',
};
setHabits(prev => {
const newHabits = [...prev, newHabit];
[Link]([Link], newHabits);
return newHabits;
});
}

const value = {
vitals,
updateVitals,
user: mockUser,
isAdmin,
userProfile,
updateUserProfile,
calorieTarget,
setCalorieTarget,
habits,
addHabit,
 };

return (
<[Link] value={value}>
{children}
</[Link]>
);
};

export const useAppContext = () => {

const context = useContext(AppContext);
if (context === undefined) {
throw new Error('useAppContext must be used within an AppProvider');
}
return context;
};
Explanation not written yet, but this file contributes to the app's functionality.
src/hooks/[Link]
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {

const [isMobile, setIsMobile] = [Link]<boolean | undefined>(undefined)

[Link](() => {
const mql = [Link](`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
const onChange = () => {
setIsMobile([Link] < MOBILE_BREAKPOINT)
}
[Link]("change", onChange)
setIsMobile([Link] < MOBILE_BREAKPOINT)
return () => [Link]("change", onChange)
}, [])

return !!isMobile
}
Explanation not written yet, but this file contributes to the app's functionality.
src/hooks/[Link]
"use client"

// Inspired by react-hot-toast library

import * as React from "react"

import type {
ToastActionElement,
ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {

id: string
title?: [Link]
description?: [Link]
action?: ToastActionElement
}

const actionTypes = {
ADD_TOAST: "ADD_TOAST",
UPDATE_TOAST: "UPDATE_TOAST",
DISMISS_TOAST: "DISMISS_TOAST",
REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
count = (count + 1) % Number.MAX_SAFE_INTEGER
return [Link]()
}

type ActionType = typeof actionTypes

type Action =
| {
type: ActionType["ADD_TOAST"]
toast: ToasterToast
}
| {
type: ActionType["UPDATE_TOAST"]
toast: Partial<ToasterToast>
}
| {
type: ActionType["DISMISS_TOAST"]
toastId?: ToasterToast["id"]
}
| {
type: ActionType["REMOVE_TOAST"]
toastId?: ToasterToast["id"]
}

interface State {
toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {

if ([Link](toastId)) {
return
}

const timeout = setTimeout(() => {

[Link](toastId)
dispatch({
type: "REMOVE_TOAST",
 toastId: toastId,
})
}, TOAST_REMOVE_DELAY)

[Link](toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {

switch ([Link]) {
case "ADD_TOAST":
return {
...state,
toasts: [[Link], ...[Link]].slice(0, TOAST_LIMIT),
}

case "UPDATE_TOAST":
return {
...state,
toasts: [Link]((t) =>
[Link] === [Link] ? { ...t, ...[Link] } : t
),
}

case "DISMISS_TOAST": {
const { toastId } = action

// ! Side effects ! - This could be extracted into a dismissToast() action,

// but I'll keep it here for simplicity
if (toastId) {
addToRemoveQueue(toastId)
} else {
[Link]((toast) => {
addToRemoveQueue([Link])
})
}

return {
...state,
toasts: [Link]((t) =>
[Link] === toastId || toastId === undefined
? {
...t,
open: false,
}
: t
),
}
}
case "REMOVE_TOAST":
if ([Link] === undefined) {
return {
...state,
toasts: [],
}
}
return {
...state,
toasts: [Link]((t) => [Link] !== [Link]),
}
}
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {

memoryState = reducer(memoryState, action)
[Link]((listener) => {
listener(memoryState)
})
}
 type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {

const id = genId()

const update = (props: ToasterToast) =>

dispatch({
type: "UPDATE_TOAST",
toast: { ...props, id },
})
const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
type: "ADD_TOAST",
toast: {
...props,
id,
open: true,
onOpenChange: (open) => {
if (!open) dismiss()
},
},
})

return {
id: id,
dismiss,
update,
}
}

function useToast() {
const [state, setState] = [Link]<State>(memoryState)

[Link](() => {
[Link](setState)
return () => {
const index = [Link](setState)
if (index > -1) {
[Link](index, 1)
}
}
}, [state])

return {
...state,
toast,
dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
}
}

export { useToast, toast }

Explanation not written yet, but this file contributes to the app's functionality.
src/lib/[Link]
import admin from 'firebase-admin';

if (![Link]) {
[Link]({
credential: [Link](),
});
}

const firestore = [Link]();

export { admin, firestore };

Explanation not written yet, but this file contributes to the app's functionality.
src/lib/[Link]
import {initializeApp, getApp, getApps} from 'firebase/app';
import {getAuth} from 'firebase/auth';
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
projectId: 'vitalsai-q93v6',
appId: '1:43781547281:web:de2908fdcadcdaadef18b0',
storageBucket: '[Link]',
apiKey: 'AIzaSyD_JeJ39cbzXkjCSyy2tyJoavBWQzhkFCY',
authDomain: '[Link]',
measurementId: '',
messagingSenderId: '43781547281',
};

// Initialize Firebase
const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();

const auth = getAuth(app);

const db = getFirestore(app);

export {app, auth, db};

Explanation not written yet, but this file contributes to the app's functionality.
src/lib/[Link]
import type { Vital, Recommendation } from '@/lib/types';
import {
HeartPulse,
Gauge,
Thermometer,
Activity,
Flame,
BrainCircuit,
Eye,
Scale,
Droplet,
} from 'lucide-react';

const generateData = (numPoints: number, min: number, max: number) => {

return [Link]({ length: numPoints }, (_, i) => ({
time: `-${numPoints - i}h`,
value: [Link]([Link]() * (max - min + 1)) + min,
}));
};

export const mockVitals: Vital[] = [

{
name: 'Heart Rate',
value: '72',
unit: 'bpm',
trend: '+1.2%',
trendDirection: 'up',
icon: 'HeartPulse',
data: generateData(12, 65, 80),
},
{
name: 'SpO2',
value: '98',
unit: '%',
trend: '-0.5%',
trendDirection: 'down',
icon: 'Gauge',
data: generateData(12, 97, 99),
},
{
name: 'Blood Sugar',
value: '95',
unit: 'mg/dL',
trend: 'Stable',
trendDirection: 'neutral',
icon: 'Droplet',
data: generateData(12, 85, 110),
},
{
name: 'Calories',
value: '1850',
unit: 'kcal',
trend: '+5%',
trendDirection: 'up',
icon: 'Flame',
data: generateData(12, 1800, 2200),
},
{
name: 'Blood Pressure',
value: '120/80',
unit: 'mmHg',
trend: 'Stable',
trendDirection: 'neutral',
icon: 'Activity',
data: generateData(12, 115, 125),
},
{
name: 'Body Temperature',
value: '36.8',
 unit: '°C',
trend: '+0.1%',
trendDirection: 'up',
icon: 'Thermometer',
data: generateData(12, 36.5, 37.2),
},
];

export const mockChartData = {

'24h': [Link]({ length: 24 }, (_, i) => ({
name: `${i}:00`,
'Heart Rate': [Link]([Link]() * (85 - 60 + 1)) + 60,
'Stress Level': [Link]([Link]() * (60 - 20 + 1)) + 20,
})),
'7d': [Link]({ length: 7 }, (_, i) => ({
name: `Day ${i + 1}`,
'Heart Rate': [Link]([Link]() * (90 - 65 + 1)) + 65,
'Stress Level': [Link]([Link]() * (70 - 30 + 1)) + 30,
})),
};

export const mockRecommendations: Recommendation[] = [

{
id: '1',
type: 'lifestyle',
text: 'Take a 10 min break from screen, practice breathing exercises.',
createdAt: '2 hours ago',
},
{
id: '2',
type: 'diet',
text: 'Increase intake of iron-rich foods like spinach and lentils.',
createdAt: '1 day ago',
},
{
id: '3',
type: 'medicine',
text: 'Consult your doctor; OTC rehydration salts may help with recovery.',
createdAt: '3 days ago',
},
];

export const mockSleepData = [

{ day: 'Mon', hours: 7.5 },
{ day: 'Tue', hours: 8 },
{ day: 'Wed', hours: 6.5 },
{ day: 'Thu', hours: 7 },
{ day: 'Fri', hours: 8.2 },
{ day: 'Sat', hours: 9 },
{ day: 'Sun', hours: 7.8 },
];

export const mockMedications = [

{ id: 'med1', name: 'Metformin', dosage: '500mg, after breakfast' },
{ id: 'med2', name: 'Lisinopril', dosage: '10mg, after dinner' },
{ id: 'med3', name: 'Atorvastatin', dosage: '20mg, at bedtime' },
];

export const mockAppointments = [

{ id: 'appt1', doctorName: 'Ahuja', specialty: 'Cardiologist', time: 'Tomorrow at 10:00 AM' },
{ id: 'appt2', doctorName: 'Gupta', specialty: 'Dermatologist', time: 'In 3 days at 2:30 PM' },
]

export const mockCravingHistory = [

{ date: '6/15', status: 'Handled', trigger: 'stress', emotion: 'anxiety', count: 1, fill: 'hsl(var(--c
{ date: '6/16', status: 'Succumbed', trigger: 'people who smoke', emotion: 'boredom', count: 1, fill:
{ date: '6/17', status: 'Handled', trigger: 'after eating', emotion: 'restlessness', count: 1, fill: '
{ date: '6/18', status: 'Handled', trigger: 'stress', emotion: 'irritation', count: 1, fill: 'hsl(var(
{ date: '6/19', status: 'Succumbed', trigger: 'fight', emotion: 'anger', count: 1, fill: 'hsl(var(--de
{ date: '6/20', status: 'Handled', trigger: 'job related', emotion: 'stress', count: 1, fill: 'hsl(var
{ date: '6/21', status: 'Handled', trigger: 'after eating', emotion: 'boredom', count: 1, fill: 'hsl(v
 ];
Explanation not written yet, but this file contributes to the app's functionality.
src/lib/[Link]
import type { LucideIcon } from 'lucide-react';
import { Timestamp } from 'firebase/firestore';

export type VitalSign =

| 'Heart Rate'
| 'SpO2'
| 'Body Temperature'
| 'Blood Pressure'
| 'Calories'
| 'ECG Stress'
| 'Eye Strain'
| 'BMI'
| 'Blood Sugar';

export interface Vital {

name: VitalSign;
value: string;
unit: string;
trend: string;
trendDirection: 'up' | 'down' | 'neutral';
icon: string;
data: { time: string; value: number }[];
calorieTarget?: number;
}

export type Gender = 'male' | 'female' | 'other';

export type ActivityLevel = 'sedentary' | 'light' | 'moderate' | 'active' | 'very-active';

export interface UserProfile {

firstName: string;
lastName: string;
dob: Date | Timestamp;
height: number;
weight: number;
gender: Gender;
activityLevel: ActivityLevel;
smokes: boolean;
drinksAlcohol: boolean;
}

export interface Recommendation {

id: string;
type: 'diet' | 'medicine' | 'lifestyle';
text: string;
createdAt: string;
}

export interface Habit {

id: string;
name: string;
streak: number;
unit: string;
}
Explanation not written yet, but this file contributes to the app's functionality.
src/lib/[Link]
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {

return twMerge(clsx(inputs))
}
Explanation not written yet, but this file contributes to the app's functionality.