Project Code Backup

# Settings to manage and configure a Firebase App Hosting backend.
# https://firebase.google.com/docs/app-hosting/configure

runConfig:
  # Increase this value if you'd like to automatically spin up
  # more instances in response to increased traffic.
  maxInstances: 1
        

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
}
        

import type {NextConfig} from 'next';

const nextConfig: NextConfig = {
  /* config options here */
  typescript: {
    ignoreBuildErrors: true,
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'placehold.co',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 'picsum.photos',
        port: '',
        pathname: '/**',
      }
    ],
  },
  
  allowedDevOrigins: ["*.cloudworkstations.dev"],
};

export default nextConfig;
        

{
  "name": "nextn",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "genkit:dev": "genkit start -- tsx src/ai/dev.ts",
    "genkit:watch": "genkit start -- tsx --watch src/ai/dev.ts",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "typecheck": "tsc --noEmit"
  },
  "dependencies": {
    "@genkit-ai/googleai": "^1.16.0",
    "@genkit-ai/next": "1.16.0",
    "@hookform/resolvers": "^4.1.3",
    "@radix-ui/react-accordion": "^1.2.3",
    "@radix-ui/react-alert-dialog": "^1.1.6",
    "@radix-ui/react-aspect-ratio": "^1.1.0",
    "@radix-ui/react-avatar": "^1.1.3",
    "@radix-ui/react-checkbox": "^1.1.4",
    "@radix-ui/react-collapsible": "^1.1.11",
    "@radix-ui/react-dialog": "^1.1.6",
    "@radix-ui/react-dropdown-menu": "^2.1.6",
    "@radix-ui/react-label": "^2.1.2",
    "@radix-ui/react-menubar": "^1.1.6",
    "@radix-ui/react-popover": "^1.1.6",
    "@radix-ui/react-progress": "^1.1.2",
    "@radix-ui/react-radio-group": "^1.2.3",
    "@radix-ui/react-scroll-area": "^1.2.3",
    "@radix-ui/react-select": "^2.1.6",
    "@radix-ui/react-separator": "^1.1.2",
    "@radix-ui/react-slider": "^1.2.3",
    "@radix-ui/react-slot": "^1.2.3",
    "@radix-ui/react-switch": "^1.1.3",
    "@radix-ui/react-tabs": "^1.1.3",
    "@radix-ui/react-toast": "^1.2.6",
    "@radix-ui/react-tooltip": "^1.1.8",
    "@stripe/react-stripe-js": "^2.7.3",
    "@stripe/stripe-js": "^4.1.0",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "date-fns": "^3.6.0",
    "dotenv": "^16.4.5",
    "embla-carousel-react": "^8.1.7",
    "firebase": "^10.12.3",
    "firebase-admin": "^12.2.0",
    "framer-motion": "^11.3.8",
    "genkit": "^1.16.0",
    "lodash": "^4.17.21",
    "lucide-react": "^0.475.0",
    "next": "15.3.3",
    "papaparse": "^5.4.1",
    "patch-package": "^8.0.0",
    "react": "^18.3.1",
    "react-bootstrap-icons": "^1.11.4",
    "react-day-picker": "^8.10.1",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.54.2",
    "recharts": "^2.15.1",
    "stripe": "^16.2.0",
    "tailwind-merge": "^3.0.1",
    "tailwindcss-animate": "^1.0.7",
    "zod": "^3.24.2"
  },
  "devDependencies": {
    "@types/lodash": "^4.17.7",
    "@types/node": "^20",
    "@types/papaparse": "^5.3.14",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "genkit-cli": "^1.16.0",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}
        

'use server';
/**
 * @fileOverview An AI flow to generate a list of potential project scopes
 * and questions based on a selected room or area in a house.
 */

import {ai} from '@/ai/genkit';
import {
  projectScopeInputSchema,
  projectScopeOutputSchema,
  type ProjectScopeInput,
  type ProjectScopeOutput,
} from './schemas';

const projectScopePrompt = ai.definePrompt({
  name: 'projectScopePrompt',
  input: {schema: projectScopeInputSchema},
  output: {schema: projectScopeOutputSchema},
  prompt: `You are an expert home renovation project manager. A user has selected a room in their house they want to work on.

Your task is to generate a list of 5-7 common project areas or scopes of work for the specified room: {{{room}}}.

For each scope, provide:
1.  A unique, simple, kebab-case ID (e.g., "flooring-installation").
2.  A clear title for the work (e.g., "Flooring Installation").
3.  A specific question to ask the user to get more details about that item.

Return the list in the 'scopes' array.`,
});

const generateProjectScopeFlow = ai.defineFlow(
  {
    name: 'generateProjectScopeFlow',
    inputSchema: projectScopeInputSchema,
    outputSchema: projectScopeOutputSchema,
  },
  async (input) => {
    const {output} = await projectScopePrompt(input);
    return output!;
  }
);

export async function generateProjectScope(
  input: ProjectScopeInput
): Promise {
  return await generateProjectScopeFlow(input);
}
        

/**
 * @fileOverview Zod schemas and TypeScript types for AI flows.
 */
import {z} from 'zod';

// Schemas for project-scope-flow.ts
export const projectScopeInputSchema = z.object({
  room: z
    .string()
    .describe(
      'The room or area selected by the user (e.g., "Kitchen", "Bathroom").'
    ),
});
export type ProjectScopeInput = z.infer;

const ScopeItemSchema = z.object({
  id: z
    .string()
    .describe(
      'A unique slug-like ID for the scope item (e.g., "cabinet-replacement").'
    ),
  title: z
    .string()
    .describe('The title of the project area (e.g., "Cabinet Replacement").'),
  question: z
    .string()
    .describe(
      'A question to ask the user to gather more details (e.g., "What kind of new cabinets are you interested in?").'
    ),
});

export const projectScopeOutputSchema = z.object({
  scopes: z
    .array(ScopeItemSchema)
    .describe(
      'An array of potential project scopes relevant to the selected room.'
    ),
});
export type ProjectScopeOutput = z.infer;
        

'use server';
/**
 * @fileOverview A Genkit flow to send verification codes for sign-up and password reset.
 * This is a mock implementation and does not actually send emails.
 */

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

// In-memory store for codes (for demonstration purposes only)
// In a real application, use a secure, persistent store like Firestore with TTL.
const codeStore: Record = {};

const sendCodeInputSchema = z.object({
  email: z.string().email().describe('The email address to send the code to.'),
  type: z.enum(['signup', 'reset']).describe('The purpose of the verification code.'),
});

const sendCodeOutputSchema = z.object({
  success: z.boolean(),
  message: z.string(),
});

const verifyCodeInputSchema = z.object({
  email: z.string().email(),
  code: z.string().length(6),
  type: z.enum(['signup', 'reset']),
});

const verifyCodeOutputSchema = z.boolean();

/**
 * MOCK: Generates a 6-digit code, stores it, and simulates sending an email.
 */
const sendVerificationCodeFlow = ai.defineFlow(
  {
    name: 'sendVerificationCodeFlow',
    inputSchema: sendCodeInputSchema,
    outputSchema: sendCodeOutputSchema,
  },
  async ({ email, type }) => {
    const code = Math.floor(100000 + Math.random() * 900000).toString();
    const expires = Date.now() + 10 * 60 * 1000; // 10 minutes

    // Store the code
    codeStore[email] = { code, expires, type };

    console.log(`
      ================================================
      MOCK EMAIL SENDER
      ================================================
      To: ${email}
      Subject: Your Verification Code
      Body: Your verification code is: ${code}
      Purpose: ${type}
      ================================================
    `);

    return {
      success: true,
      message: 'Verification code sent successfully.',
    };
  }
);

/**
 * MOCK: Verifies a code against the in-memory store.
 */
const verifyCodeFlow = ai.defineFlow(
  {
    name: 'verifyCodeFlow',
    inputSchema: verifyCodeInputSchema,
    outputSchema: verifyCodeOutputSchema,
  },
  async ({ email, code, type }) => {
    const stored = codeStore[email];

    if (!stored) {
      console.error(`Verification failed for ${email}: No code found.`);
      return false;
    }

    if (stored.expires < Date.now()) {
      console.error(`Verification failed for ${email}: Code expired.`);
      delete codeStore[email];
      return false;
    }

    if (stored.code === code && stored.type === type) {
      console.log(`Verification successful for ${email}.`);
      delete codeStore[email]; // One-time use
      return true;
    }

    console.error(`Verification failed for ${email}: Code mismatch.`);
    return false;
  }
);

// Exported wrapper functions for client-side use
export async function sendVerificationCode(input: z.infer) {
    return await sendVerificationCodeFlow(input);
}

export async function verifyCode(input: z.infer): Promise {
    return await verifyCodeFlow(input);
}
        

'use server';
/**
 * @fileOverview A simple story generation AI flow.
 */

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

export const storyInputSchema = z.object({
  prompt: z.string().describe('The user prompt for the story'),
});
export type StoryInput = z.infer;

export const storyOutputSchema = z.object({
  story: z.string().describe('The generated story'),
});
export type StoryOutput = z.infer;

const storyPrompt = ai.definePrompt({
  name: 'storyPrompt',
  input: { schema: storyInputSchema },
  output: { schema: storyOutputSchema },
  prompt: `Write a short story based on the following prompt: {{{prompt}}}`,
});

const storyFlow = ai.defineFlow(
  {
    name: 'storyFlow',
    inputSchema: storyInputSchema,
    outputSchema: storyOutputSchema,
  },
  async (input) => {
    const { output } = await storyPrompt(input);
    return output!;
  }
);

export async function generateStory(input: StoryInput): Promise {
  return await storyFlow(input);
}
        

/**
 * @fileoverview This file initializes the Genkit AI provider.
 */
import {genkit} from 'genkit';
import {googleAI} from '@genkit-ai/googleai';

export const ai = genkit({
  plugins: [
    googleAI(),
  ],
  enableTracingAndMetrics: true,
});
        

import React from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import Image from 'next/image';

export default function AboutPage() {
  return (
    

      
        
          

            
            

              About EHG Renovations
            
          
        
        
          

            
              Your vision, our expertise. Building trust one project at a time.
            
          
          

            

              Founded on the principles of quality craftsmanship, integrity, and unparalleled customer service, EHG Renovations has grown to be a trusted name in the home improvement industry. We believe that every project is an opportunity to create something beautiful and lasting.
            
            

              Our team of skilled professionals, from designers to builders, is dedicated to bringing your vision to life. We handle every aspect of your project with meticulous attention to detail, ensuring a seamless process from the initial consultation to the final walkthrough.
            
             

              Whether it's a minor repair or a major renovation, we are committed to delivering results that not only meet but exceed your expectations. Thank you for considering EHG Renovations for your next project. We look forward to building with you.
            
          
        
      
    
  );
}
        

'use client';

import { useForm, type SubmitHandler } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useEstimate } from '@/app/layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';

const clientInfoSchema = z.object({
  name: z.string().min(2, 'Name is required'),
  email: z.string().email('Invalid email address'),
  phone: z.string().min(10, 'A valid phone number is required'),
});

type ClientInfoForm = z.infer;

export default function ClientInfoStep() {
  const { setStep, setFormData, formData } = useEstimate();
  const form = useForm({
    resolver: zodResolver(clientInfoSchema),
    defaultValues: formData.clientInfo || {
      name: '',
      email: '',
      phone: '',
    },
  });

  const onSubmit: SubmitHandler = (data) => {
    setFormData({ ...formData, clientInfo: data });
    setStep('project-selection');
  };

  return (
    
      

        
          
            Step 1: Client Information
            Let's start with your contact details.
          
          
             (
                
                  Full Name
                  
                    
                  
                  
                
              )}
            />
             (
                
                  Email Address
                  
                    
                  
                  
                
              )}
            />
             (
                
                  Phone Number
                  
                    
                  
                  
                
              )}
            />
          
          
            Next: Project Selection
          
        
      
    
  );
}
        

'use client';

import { useEstimate } from '@/app/layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { CheckCircle2 } from 'lucide-react';
import Link from 'next/link';

export default function ConfirmationStep() {
  const { formData } = useEstimate();

  return (
    
      
        

          
        
        Thank You, {formData.clientInfo?.name}!
        
          Your estimate request has been successfully submitted. We will review the details and get back to you within 24-48 hours.
        
      
      
        

          A confirmation has been sent to {formData.clientInfo?.email}.
        
        
          Back to Homepage
        
      
    
  );
}
        

'use client';

import { useEstimate, type EstimateStep } from '@/app/layout';

const estimateSteps: { step: EstimateStep; label: string }[] = [
  { step: 'client-info', label: 'Client Info' },
  { step: 'project-selection', label: 'Project Selection' },
  { step: 'project-scope', label: 'Project Scope' },
  { step: 'review', label: 'Review & Finalize' },
];

interface EstimateTOCProps {
  onNavigate: (step: EstimateStep) => void;
}

export function EstimateTOC({ onNavigate }: EstimateTOCProps) {
  const { step: currentStep } = useEstimate();

  return (
    <>
      {estimateSteps.map(({ step, label }) => (
         onNavigate(step)}
          className={`fab-menu-option ${currentStep === step ? 'font-bold' : ''}`}
        >
          {label}
        
      ))}
    
  );
}
        

'use client';

import { useEffect } from 'react';
import { useEstimate } from '@/app/layout';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';

export default function FinalizingStep() {
  const { setStep } = useEstimate();

  useEffect(() => {
    const timer = setTimeout(() => {
      setStep('confirmation');
    }, 3000); // Simulate a 3-second processing time

    return () => clearTimeout(timer);
  }, [setStep]);

  return (
    
      
        Finalizing Your Request
        We're compiling your details and submitting them to our team.
      
      
        

          
Please wait a moment...
          
        
      
    
  );
}
        

'use client';

import { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import { useEstimate } from '@/app/layout';
import { generateProjectScope, type ProjectScopeOutput } from '@/ai/flows/project-scope-flow';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { Form, FormControl, FormField, FormItem, FormLabel } from '@/components/ui/form';
import { Skeleton } from '@/components/ui/skeleton';
import { Textarea } from '@/components/ui/textarea';
import { useToast } from '@/hooks/use-toast';

type Scope = ProjectScopeOutput['scopes'][0];

export default function ProjectScopeStep() {
  const { setStep, setFormData, formData } = useEstimate();
  const [scopes, setScopes] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  const { toast } = useToast();
  const form = useForm<{ scopes: string[]; details: Record }>({
    defaultValues: {
      scopes: formData.projectScope?.scopes || [],
      details: formData.projectScope?.details || {},
    },
  });
  const selectedScopes = form.watch('scopes');

  useEffect(() => {
    const fetchScope = async () => {
      if (!formData.projectSelection?.room) {
        toast({
          variant: 'destructive',
          title: 'Error',
          description: 'Project area not selected. Please go back.',
        });
        setStep('project-selection');
        return;
      }

      setIsLoading(true);
      try {
        const result = await generateProjectScope({ room: formData.projectSelection.room });
        setScopes(result.scopes);
      } catch (error) {
        console.error(error);
        toast({
          variant: 'destructive',
          title: 'AI Error',
          description: 'Could not generate project scopes. Please try again.',
        });
      } finally {
        setIsLoading(false);
      }
    };

    fetchScope();
  }, [formData.projectSelection, setStep, toast]);

  const onSubmit = (data: { scopes: string[]; details: Record }) => {
    setFormData({ ...formData, projectScope: data });
    setStep('review');
  };

  if (isLoading) {
    return (
      
        
          
          
        
        
          {[...Array(5)].map((_, i) => (
            

              
              
            
          ))}
        
      
    );
  }

  return (
    
      

        
          
            Step 3: Project Scope
            
              Select the items that apply to your {formData.projectSelection?.room.toLowerCase()} project.
            
          
          
             (
                
                  {scopes.map((item) => (
                     {
                        const isSelected = field.value?.includes(item.id);
                        return (
                          
                            

                              
                                 {
                                    return checked
                                      ? field.onChange([...field.value, item.id])
                                      : field.onChange(field.value?.filter((value) => value !== item.id));
                                  }}
                                />
                              
                              {item.title}
                            
                            {isSelected && (
                               (
                                  
                                    {item.question}
                                    
                                                                          </FormControl>
                                  </FormItem>
                                )}
                              />
                            )}
                          </FormItem>
                        );
                      }}
                    />
                  ))}
                </FormItem>
              )}
            />
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline" onClick={() => setStep('project-selection')}>
              Back
            </Button>
            <Button type="submit" disabled={selectedScopes.length === 0}>
              Next: Review
            </Button>
          </CardFooter>
        </form>
      </Form>
    </Card>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/(main)/estimate/_components/ProjectSelectionStep.tsx</summary>
        <pre><code>
'use client';

import { useForm, type SubmitHandler } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useEstimate } from '@/app/layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Home, Bath, ChefHat, BedDouble, DraftingCompass } from 'lucide-react';
import { cn } from '@/lib/utils';

const projectSelectionSchema = z.object({
  room: z.string({
    required_error: 'You need to select a project area.',
  }),
});

type ProjectSelectionForm = z.infer<typeof projectSelectionSchema>;

const roomOptions = [
  { value: 'Kitchen', label: 'Kitchen', icon: ChefHat },
  { value: 'Bathroom', label: 'Bathroom', icon: Bath },
  { value: 'Bedroom', label: 'Bedroom', icon: BedDouble },
  { value: 'General Living Area', label: 'General Living Area', icon: Home },
  { value: 'Other', label: 'Other', icon: DraftingCompass },
];

export default function ProjectSelectionStep() {
  const { setStep, setFormData, formData } = useEstimate();
  const form = useForm<ProjectSelectionForm>({
    resolver: zodResolver(projectSelectionSchema),
    defaultValues: formData.projectSelection || {},
  });

  const onSubmit: SubmitHandler<ProjectSelectionForm> = (data) => {
    setFormData({ ...formData, projectSelection: data });
    setStep('project-scope');
  };

  return (
    <Card>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          <CardHeader>
            <CardTitle>Step 2: Project Selection</CardTitle>
            <CardDescription>What area of your home are we working on?</CardDescription>
          </CardHeader>
          <CardContent>
            <FormField
              control={form.control}
              name="room"
              render={({ field }) => (
                <FormItem>
                  <FormControl>
                    <RadioGroup
                      onValueChange={field.onChange}
                      defaultValue={field.value}
                      className="grid grid-cols-2 lg:grid-cols-3 gap-4"
                    >
                      {roomOptions.map((option) => (
                        <FormItem key={option.value}>
                          <FormControl>
                            <RadioGroupItem value={option.value} className="sr-only" id={option.value} />
                          </FormControl>
                          <FormLabel
                            htmlFor={option.value}
                            className={cn(
                              'flex flex-col items-center justify-center rounded-md border-2 border-muted bg-popover p-4 hover:bg-accent hover:text-accent-foreground cursor-pointer',
                              field.value === option.value && 'border-primary'
                            )}
                          >
                            <option.icon className="h-8 w-8 mb-2" />
                            {option.label}
                          </FormLabel>
                        </FormItem>
                      ))}
                    </RadioGroup>
                  </FormControl>
                  <FormMessage className="pt-2" />
                </FormItem>
              )}
            />
          </CardContent>
          <CardFooter className="flex justify-between">
            <Button variant="outline" onClick={() => setStep('client-info')}>
              Back
            </Button>
            <Button type="submit">Next: Project Scope</Button>
          </CardFooter>
        </form>
      </Form>
    </Card>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/(main)/estimate/_components/ReviewStep.tsx</summary>
        <pre><code>
'use client';

import { useEstimate } from '@/app/layout';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';

export default function ReviewStep() {
  const { setStep, formData } = useEstimate();

  const { clientInfo, projectSelection, projectScope } = formData;

  const getScopeTitle = (scopeId: string) => {
    // This is a mock function. In a real app, you'd have the scope details available.
    // For now, we'll format the ID.
    return scopeId.replace(/-/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Step 4: Review & Finalize</CardTitle>
        <CardDescription>Please review the details below before submitting your estimate request.</CardDescription>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="space-y-2">
          <h3 className="font-semibold">Client Information</h3>
          <div className="text-sm text-muted-foreground">
            <p>Name: {clientInfo?.name}</p>
            <p>Email: {clientInfo?.email}</p>
            <p>Phone: {clientInfo?.phone}</p>
          </div>
        </div>
        <Separator />
        <div className="space-y-2">
          <h3 className="font-semibold">Project Details</h3>
          <p className="text-sm text-muted-foreground">
            Project Area: <span className="font-medium text-foreground">{projectSelection?.room}</span>
          </p>
        </div>
        <Separator />
        <div className="space-y-4">
          <h3 className="font-semibold">Scope of Work</h3>
          {projectScope?.scopes.length > 0 ? (
            <ul className="space-y-4">
              {projectScope.scopes.map((scopeId: string) => (
                <li key={scopeId} className="text-sm">
                  <p className="font-medium text-foreground">{getScopeTitle(scopeId)}</p>
                  {projectScope.details?.[scopeId] && (
                    <p className="pl-4 text-muted-foreground border-l-2 ml-2 mt-1 pt-1 pb-1">
                      {projectScope.details[scopeId]}
                    </p>
                  )}
                </li>
              ))}
            </ul>
          ) : (
            <p className="text-sm text-muted-foreground">No specific work items were selected.</p>
          )}
        </div>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={() => setStep('project-scope')}>
          Back
        </Button>
        <Button onClick={() => setStep('finalizing')}>Submit for Estimate</Button>
      </CardFooter>
    </Card>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/(main)/estimate/page.tsx</summary>
        <pre><code>
'use client';
import { EstimateProvider, useEstimate } from '@/app/layout';
import ClientInfoStep from './_components/ClientInfoStep';
import ProjectSelectionStep from './_components/ProjectSelectionStep';
import ProjectScopeStep from './_components/ProjectScopeStep';
import ReviewStep from './_components/ReviewStep';
import FinalizingStep from './_components/FinalizingStep';
import ConfirmationStep from './_components/ConfirmationStep';

const EstimateFlow = () => {
  const { step } = useEstimate();

  const renderStep = () => {
    switch (step) {
      case 'client-info':
        return <ClientInfoStep />;
      case 'project-selection':
        return <ProjectSelectionStep />;
      case 'project-scope':
        return <ProjectScopeStep />;
      case 'review':
        return <ReviewStep />;
      case 'finalizing':
        return <FinalizingStep />;
      case 'confirmation':
        return <ConfirmationStep />;
      default:
        return <ClientInfoStep />;
    }
  };

  return <div className="container mx-auto max-w-3xl py-12">{renderStep()}</div>;
};

export default function EstimatePage() {
    return <EstimateFlow />;
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/(main)/gallery/page.tsx</summary>
        <pre><code>
'use client';

import React from 'react';
import { Card, CardContent } from '@/components/ui/card';
import {
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselNext,
  CarouselPrevious,
} from '@/components/ui/carousel';
import Image from 'next/image';
import { AspectRatio } from '@/components/ui/aspect-ratio';

const galleryImages = [
  { src: 'https://picsum.photos/seed/gallery1/800/600', alt: 'Modern kitchen renovation', hint: 'modern kitchen' },
  { src: 'https://picsum.photos/seed/gallery2/800/600', alt: 'Luxurious bathroom remodel', hint: 'luxury bathroom' },
  { src: 'https://picsum.photos/seed/gallery3/800/600', alt: 'Spacious living room addition', hint: 'living room' },
  { src: 'https://picsum.photos/seed/gallery4/800/600', alt: 'Custom deck and patio', hint: 'deck patio' },
  { src: 'https://picsum.photos/seed/gallery5/800/600', alt: 'Finished basement entertainment area', hint: 'finished basement' },
  { src: 'https://picsum.photos/seed/gallery6/800/600', alt: 'Exterior siding and window replacement', hint: 'house exterior' },
];

export default function GalleryPage() {
  return (
    <div className="container mx-auto max-w-6xl py-12 px-4">
      <div className="text-center mb-12">
        <h1 className="text-4xl font-bold tracking-tight">Our Work</h1>
        <p className="mt-4 text-lg text-muted-foreground">
          A collection of our finest projects, showcasing our commitment to quality and craftsmanship.
        </p>
      </div>
      <Carousel
        opts={{
          align: 'start',
          loop: true,
        }}
        className="w-full"
      >
        <CarouselContent>
          {galleryImages.map((image, index) => (
            <CarouselItem key={index} className="md:basis-1/2 lg:basis-1/3">
              <div className="p-1">
                <Card>
                  <CardContent className="p-0 overflow-hidden">
                    <AspectRatio ratio={4 / 3}>
                      <Image
                        src={image.src}
                        alt={image.alt}
                        layout="fill"
                        objectFit="cover"
                        className="rounded-lg transition-transform duration-300 hover:scale-105"
                        data-ai-hint={image.hint}
                      />
                    </AspectRatio>
                  </CardContent>
                </Card>
              </div>
            </CarouselItem>
          ))}
        </CarouselContent>
        <CarouselPrevious />
        <CarouselNext />
      </Carousel>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/(pos)/unlock/page.tsx</summary>
        <pre><code>
// This file is intentionally left blank to resolve a routing conflict.
export default function ConflictingUnlockPage() {
  return null;
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/actions.ts</summary>
        <pre><code>
'use server';

// NOTE: Stripe is not fully configured. This is a placeholder.
// The secret key should be in a .env.local file.
const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY || 'sk_test_...'; // Replace with a default test key if needed

let stripe: any;
try {
  // Dynamically import Stripe to handle cases where it might not be installed.
  const Stripe = require('stripe');
  stripe = new Stripe(STRIPE_SECRET_KEY, {
    apiVersion: '2024-06-20',
  });
} catch (e) {
  console.error("Stripe SDK not found. All payment actions will fail.");
  stripe = null;
}


// Creates a Payment Intent to authorize a charge, but does not capture it yet.
export async function createPaymentIntent(amount: number) {
  if (!stripe) {
    const errorMsg = 'Stripe SDK is not initialized.';
    console.error(errorMsg);
    return { error: errorMsg };
  }
  if (!process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY) {
     const errorMsg = 'Stripe publishable key is not set in environment variables.';
     console.error(errorMsg);
     return { error: errorMsg };
  }

  try {
    const paymentIntent = await stripe.paymentIntents.create({
      amount: amount,
      currency: 'usd',
      automatic_payment_methods: {
        enabled: true,
      },
      capture_method: 'manual', // Authorize only
    });

    return { 
      clientSecret: paymentIntent.client_secret,
      paymentIntentId: paymentIntent.id,
      publishableKey: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY 
    };
  } catch (error) {
    console.error('Error creating PaymentIntent:', error);
    // @ts-ignore
    return { error: error.message || 'Failed to create PaymentIntent.' };
  }
}

// Captures the authorized amount on a Payment Intent.
export async function capturePaymentIntent(paymentIntentId: string, amountToCapture: number) {
   if (!stripe) {
    const errorMsg = 'Stripe SDK is not initialized.';
    console.error(errorMsg);
    return { error: errorMsg };
  }

  try {
    const capturedIntent = await stripe.paymentIntents.capture(paymentIntentId, {
      amount_to_capture: amountToCapture,
    });
    return { success: true, intent: capturedIntent };
  } catch (error) {
    console.error('Error capturing PaymentIntent:', error);
    // @ts-ignore
    return { error: error.message || 'Failed to capture PaymentIntent.' };
  }
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/ai-story/page.tsx</summary>
        <pre><code>
'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
import { Textarea } from '@/components/ui/textarea';
import { generateStory } from '@/ai/flows/story-flow';

export default function AiStoryPage() {
  const [prompt, setPrompt] = useState('');
  const [story, setStory] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleGenerate = async () => {
    if (!prompt) return;
    setIsLoading(true);
    setStory('');
    try {
      const result = await generateStory({ prompt });
      setStory(result.story);
    } catch (error) {
      console.error('Error generating story:', error);
      setStory('Sorry, something went wrong. Please try again.');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="flex justify-center items-center h-full p-4">
      <Card className="w-full max-w-2xl">
        <CardHeader>
          <CardTitle>AI Story Generator</CardTitle>
          <CardDescription>Enter a prompt and let the AI write a short story for you.</CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <Textarea
            placeholder="e.g., A robot who dreams of being a chef..."
            value={prompt}
            onChange={(e) => setPrompt(e.target.value)}
            rows={4}
          />
          {story && (
            <div className="p-4 border rounded-md bg-muted">
              <p className="whitespace-pre-wrap">{story}</p>
            </div>
          )}
        </CardContent>
        <CardFooter>
          <Button onClick={handleGenerate} disabled={isLoading || !prompt}>
            {isLoading ? 'Generating...' : 'Generate Story'}
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/crm/admin/time-clock/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState, useMemo } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { usePos } from '@/contexts/PosContext';
import { format, parseISO } from 'date-fns';
import { PlusCircle, PencilFill, TrashFill, Info, CheckCircleFill } from 'react-bootstrap-icons';
import { TimeClockDialog } from '@/components/time-clock/TimeClockDialog';
import type { TimeClockEntry, TimeEditRequest } from '@/lib/types';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { DenialReasonDialog } from '@/components/time-clock/DenialReasonDialog';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"

export default function AdminTimeClockPage() {
  const { 
    timeClockEntries, 
    deleteTimeClockEntry, 
    timeEditRequests, 
    approveTimeEdit, 
    denyTimeEdit 
  } = usePos();
  const [editingEntry, setEditingEntry] = useState<TimeClockEntry | null>(null);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [activeRequest, setActiveRequest] = useState<TimeEditRequest | null>(null);
  const [isNoteDialogOpen, setIsNoteDialogOpen] = useState(false);
  const [noteDialogMode, setNoteDialogMode] = useState<'approve' | 'deny'>('deny');

  const handleAddNew = () => {
    setEditingEntry(null);
    setIsDialogOpen(true);
  };

  const handleEdit = (entry: TimeClockEntry) => {
    setEditingEntry(entry);
    setIsDialogOpen(true);
  };
  
  const handleDelete = (entryId: string) => {
    deleteTimeClockEntry(entryId);
  }

  const handleOpenNoteDialog = (request: TimeEditRequest, mode: 'approve' | 'deny') => {
    setActiveRequest(request);
    setNoteDialogMode(mode);
    setIsNoteDialogOpen(true);
  };

  const handleConfirmNote = (requestId: string, reason: string) => {
    if (noteDialogMode === 'approve') {
        approveTimeEdit(requestId, reason);
    } else {
        denyTimeEdit(requestId, reason);
    }
  }


  const sortedEntries = [...timeClockEntries].sort((a, b) => new Date(b.clockInTime).getTime() - new Date(a.clockInTime).getTime());

  const pendingRequests = useMemo(() => {
    return timeEditRequests.filter(req => req.status === 'pending');
  }, [timeEditRequests]);
  
  const getStatusIcon = (status?: 'pending' | 'approved' | 'denied') => {
    switch(status) {
      case 'pending': return <CheckCircleFill className="h-5 w-5 text-yellow-500" />;
      case 'approved': return <CheckCircleFill className="h-5 w-5 text-green-500" />;
      case 'denied': return <CheckCircleFill className="h-5 w-5 text-red-500" />;
      default: return <CheckCircleFill className="h-5 w-5 text-green-500" />;
    }
  }
  
  const formatDuration = (startTime: string, endTime: string | null): string => {
    if (!endTime) return '-';
    
    const start = parseISO(startTime);
    const end = parseISO(endTime);
    const diff = end.getTime() - start.getTime();

    if (diff < 0) return '00:00:00';

    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  };


  return (
    <TooltipProvider>
      <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
        {pendingRequests.length > 0 && (
          <Card>
            <CardHeader>
              <CardTitle>Pending Time Edit Requests</CardTitle>
              <CardDescription>Review and approve or deny employee time edit requests.</CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Employee</TableHead>
                    <TableHead>Original Times</TableHead>
                    <TableHead>Requested Times</TableHead>
                    <TableHead>Reason</TableHead>
                    <TableHead>Initials</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {pendingRequests.map(request => (
                    <TableRow key={request.id}>
                      <TableCell>{request.employeeName}</TableCell>
                      <TableCell>
                        {request.entries.map(e => (
                            <div key={e.id} className="text-xs">
                                <p>IN: {format(parseISO(e.originalClockIn), 'MM/dd hh:mm a')}</p>
                                <p>OUT: {e.originalClockOut ? format(parseISO(e.originalClockOut), 'MM/dd hh:mm a') : 'N/A'}</p>
                            </div>
                        ))}
                      </TableCell>
                      <TableCell>
                        {request.entries.map(e => (
                            <div key={e.id} className="text-xs font-medium text-primary">
                                <p>IN: {format(parseISO(e.requestedClockIn), 'MM/dd hh:mm a')}</p>
                                <p>OUT: {e.requestedClockOut ? format(parseISO(e.requestedClockOut), 'MM/dd hh:mm a') : 'N/A'}</p>
                            </div>
                        ))}
                      </TableCell>
                      <TableCell>{request.reason}</TableCell>
                      <TableCell>{request.initials}</TableCell>
                      <TableCell className="text-right">
                        <div className="flex items-center justify-end gap-2">
                          <Button variant="outline" size="sm" onClick={() => approveTimeEdit(request.id)}>
                              Approve
                          </Button>
                           <Button variant="outline" size="sm" onClick={() => handleOpenNoteDialog(request, 'approve')}>
                              Approve with Note
                          </Button>
                          <Button variant="destructive" size="sm" onClick={() => handleOpenNoteDialog(request, 'deny')}>
                              Deny
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
          </Card>
        )}

        <Card>
          <CardHeader className="flex flex-row items-center justify-between">
            <CardTitle>All Time Clock Entries</CardTitle>
            <Button onClick={handleAddNew}>
              <PlusCircle className="mr-2 h-4 w-4" />
              Add New Entry
            </Button>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Employee</TableHead>
                  <TableHead>Clock In</TableHead>
                  <TableHead>Clock Out</TableHead>
                  <TableHead>Duration</TableHead>
                  <TableHead>
                    <div className="flex items-center gap-1">
                      Status
                      <Tooltip>
                        <TooltipTrigger asChild>
                          <Info className="h-3 w-3 cursor-pointer text-muted-foreground" />
                        </TooltipTrigger>
                        <TooltipContent>
                          <p className="flex items-center gap-2"><CheckCircleFill className="h-4 w-4 text-green-500" /> Approved</p>
                          <p className="flex items-center gap-2"><CheckCircleFill className="h-4 w-4 text-yellow-500" /> Pending</p>
                          <p className="flex items-center gap-2"><CheckCircleFill className="h-4 w-4 text-red-500" /> Denied</p>
                        </TooltipContent>
                      </Tooltip>
                    </div>
                  </TableHead>
                  <TableHead className="text-right">Actions</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {sortedEntries.map(entry => (
                  <TableRow key={entry.id}>
                    <TableCell>{entry.employeeName}</TableCell>
                    <TableCell>{format(parseISO(entry.clockInTime), 'MM/dd/yyyy hh:mm a')}</TableCell>
                    <TableCell>
                      {entry.clockOutTime ? format(parseISO(entry.clockOutTime), 'MM/dd/yyyy hh:mm a') : 'Still Clocked In'}
                    </TableCell>
                    <TableCell className="font-mono">
                      {formatDuration(entry.clockInTime, entry.clockOutTime)}
                    </TableCell>
                    <TableCell>
                      {getStatusIcon(entry.editRequest?.status)}
                    </TableCell>
                    <TableCell className="text-right">
                      <div className="flex justify-end gap-2">
                          <Button variant="ghost" size="icon" onClick={() => handleEdit(entry)}>
                              <PencilFill className="h-4 w-4" />
                          </Button>
                          <AlertDialog>
                            <AlertDialogTrigger asChild>
                              <Button variant="ghost" size="icon">
                                <TrashFill className="h-4 w-4" />
                              </Button>
                            </AlertDialogTrigger>
                            <AlertDialogContent>
                              <AlertDialogHeader>
                                <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                                <AlertDialogDescription>
                                  This action cannot be undone. This will permanently delete the time clock entry.
                                </AlertDialogDescription>
                              </AlertDialogHeader>
                              <AlertDialogFooter>
                                <AlertDialogCancel>Cancel</AlertDialogCancel>
                                <AlertDialogAction onClick={() => handleDelete(entry.id)}>
                                  Delete
                                </AlertDialogAction>
                              </AlertDialogFooter>
                            </AlertDialogContent>
                          </AlertDialog>
                      </div>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
            {sortedEntries.length === 0 && (
              <div className="flex h-24 items-center justify-center text-muted-foreground">
                No time clock entries found.
              </div>
            )}
          </CardContent>
        </Card>

        <TimeClockDialog
          isOpen={isDialogOpen}
          onOpenChange={setIsDialogOpen}
          entry={editingEntry}
        />
        
        {activeRequest && (
          <DenialReasonDialog 
            isOpen={isNoteDialogOpen}
            onOpenChange={setIsNoteDialogOpen}
            request={activeRequest}
            onConfirm={handleConfirmNote}
            mode={noteDialogMode}
          />
        )}
      </div>
    </TooltipProvider>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/crm/admin/users/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState, useMemo } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { usePos } from '@/contexts/PosContext';
import type { User } from '@/lib/types';
import { PlusCircle, Pencil, Trash2 } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { UserDialog } from '@/components/users/UserDialog';
import { Badge } from '@/components/ui/badge';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { MoreHorizontal } from "lucide-react"

export default function AdminUsersPage() {
  const { posUsers, deletePosUser } = usePos();
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<User | null>(null);

  const handleAddNew = () => {
    setEditingUser(null);
    setIsDialogOpen(true);
  };

  const handleEdit = (user: User) => {
    setEditingUser(user);
    setIsDialogOpen(true);
  };

  const handleDelete = (userId: string) => {
    deletePosUser(userId);
  };
  
  const getStatusVariant = (status: User['activityStatus']) => {
    if (status === 'active') return 'default';
    if (status === 'inactive') return 'secondary';
    return 'outline';
  };

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
            <div>
                <CardTitle>User Management</CardTitle>
                <CardDescription>Add, edit, and manage system users and their roles.</CardDescription>
            </div>
            <Button onClick={handleAddNew}>
                <PlusCircle className="mr-2 h-4 w-4" /> Add New User
            </Button>
        </CardHeader>
        <CardContent>
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Name</TableHead>
                        <TableHead>Primary Role</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead>Email</TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {posUsers.map(user => (
                        <TableRow key={user.id}>
                            <TableCell className="font-medium">{user.name}</TableCell>
                            <TableCell>{user.role}</TableCell>
                            <TableCell>
                                <Badge variant={getStatusVariant(user.activityStatus)} className="capitalize">
                                    {user.activityStatus}
                                </Badge>
                            </TableCell>
                            <TableCell className="text-muted-foreground">{user.email}</TableCell>
                            <TableCell className="text-right">
                                <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                        <Button variant="ghost" className="h-8 w-8 p-0">
                                            <span className="sr-only">Open menu</span>
                                            <MoreHorizontal className="h-4 w-4" />
                                        </Button>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent align="end">
                                        <DropdownMenuLabel>Actions</DropdownMenuLabel>
                                        <DropdownMenuItem onClick={() => handleEdit(user)}>
                                            <Pencil className="mr-2 h-4 w-4" /> Edit
                                        </DropdownMenuItem>
                                        <DropdownMenuSeparator />
                                        <AlertDialog>
                                            <AlertDialogTrigger asChild>
                                                <DropdownMenuItem onSelect={(e) => e.preventDefault()} className="text-destructive">
                                                     <Trash2 className="mr-2 h-4 w-4" /> Delete
                                                </DropdownMenuItem>
                                            </AlertDialogTrigger>
                                            <AlertDialogContent>
                                                <AlertDialogHeader>
                                                    <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                                                    <AlertDialogDescription>This will permanently delete the user.</AlertDialogDescription>
                                                </AlertDialogHeader>
                                                <AlertDialogFooter>
                                                    <AlertDialogCancel>Cancel</AlertDialogCancel>
                                                    <AlertDialogAction onClick={() => handleDelete(user.id)}>Delete</AlertDialogAction>
                                                </AlertDialogFooter>
                                            </AlertDialogContent>
                                        </AlertDialog>
                                    </DropdownMenuContent>
                                </DropdownMenu>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
             {posUsers.length === 0 && (
                <div className="flex h-24 items-center justify-center text-muted-foreground">
                    No users found.
                </div>
            )}
        </CardContent>
      </Card>
      <UserDialog 
        isOpen={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        user={editingUser}
      />
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/crm/customers/accounts/page.tsx</summary>
        <pre><code>
// This file is intentionally left blank to resolve a routing conflict.
export default function ConflictingCrmCustomerAccountsPage() {
  return null;
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/crm/customers/estimates/page.tsx</summary>
        <pre><code>
// This file is intentionally left blank to resolve a routing conflict.
export default function ConflictingCrmCustomerEstimatesPage() {
  return null;
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/crm/customers/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState, useMemo } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { usePos } from '@/contexts/PosContext';
import type { Customer } from '@/lib/types';
import { Search, PlusCircle, Pencil, Trash2 } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { CustomerDialog } from '@/components/customers/CustomerDialog';

export default function CrmCustomerPage() {
  const { customers, deleteCustomer } = usePos();
  const [searchQuery, setSearchQuery] = useState('');
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingCustomer, setEditingCustomer] = useState<Customer | null>(null);

  const filteredCustomers = useMemo(() => {
    return customers.filter(c => 
      c.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      c.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
      c.phone.includes(searchQuery)
    );
  }, [customers, searchQuery]);

  const handleAddNew = () => {
    setEditingCustomer(null);
    setIsDialogOpen(true);
  };

  const handleEdit = (customer: Customer) => {
    setEditingCustomer(customer);
    setIsDialogOpen(true);
  };

  const handleDelete = (customerId: string) => {
    deleteCustomer(customerId);
  };

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
            <div className="flex items-center justify-between">
                <div>
                    <CardTitle>Customer Management</CardTitle>
                    <CardDescription>View, add, edit, and manage all customers and clients.</CardDescription>
                </div>
                <Button onClick={handleAddNew}>
                    <PlusCircle className="mr-2 h-4 w-4" /> Add New
                </Button>
            </div>
        </CardHeader>
        <CardContent>
            <div className="mb-4">
                <div className="relative">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input
                        placeholder="Search by name, email, or phone..."
                        value={searchQuery}
                        onChange={(e) => setSearchQuery(e.target.value)}
                        className="pl-8"
                    />
                </div>
            </div>
             <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Customer ID</TableHead>
                        <TableHead>Name</TableHead>
                        <TableHead>Type</TableHead>
                        <TableHead>Email</TableHead>
                        <TableHead>Phone</TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {filteredCustomers.map(customer => (
                        <TableRow key={customer.id}>
                            <TableCell className="font-mono text-xs">{customer.customerId}</TableCell>
                            <TableCell className="font-medium">{customer.name}</TableCell>
                            <TableCell>{customer.type}</TableCell>
                            <TableCell>{customer.email}</TableCell>
                            <TableCell>{customer.phone}</TableCell>
                            <TableCell className="text-right">
                                <Button variant="ghost" size="icon" onClick={() => handleEdit(customer)}><Pencil className="h-4 w-4" /></Button>
                                <AlertDialog>
                                    <AlertDialogTrigger asChild>
                                        <Button variant="ghost" size="icon"><Trash2 className="h-4 w-4" /></Button>
                                    </AlertDialogTrigger>
                                    <AlertDialogContent>
                                        <AlertDialogHeader>
                                            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                                            <AlertDialogDescription>This action cannot be undone. This will permanently delete the customer record.</AlertDialogDescription>
                                        </AlertDialogHeader>
                                        <AlertDialogFooter>
                                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                                            <AlertDialogAction onClick={() => handleDelete(customer.id)}>Delete</AlertDialogAction>
                                        </AlertDialogFooter>
                                    </AlertDialogContent>
                                </AlertDialog>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
             </Table>
              {filteredCustomers.length === 0 && (
                <div className="text-center p-8 text-muted-foreground">
                    No customers found.
                </div>
              )}
        </CardContent>
      </Card>
      <CustomerDialog 
        isOpen={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        customer={editingCustomer}
      />
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/dashboard/page.tsx</summary>
        <pre><code>
'use client';
import {
  Activity,
  CreditCard,
  DollarSign,
  Users,
} from 'lucide-react';

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table';
import { CalendarWidget } from '@/components/dashboard/CalendarWidget';
import { WelcomeDialog } from '@/components/dashboard/WelcomeDialog';

export default function DashboardPage() {
  return (
    <>
      <WelcomeDialog />
      <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Total Revenue
              </CardTitle>
              <DollarSign className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">$45,231.89</div>
              <p className="text-xs text-muted-foreground">
                +20.1% from last month
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">
                Subscriptions
              </CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">+2350</div>
              <p className="text-xs text-muted-foreground">
                +180.1% from last month
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Sales</CardTitle>
              <CreditCard className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">+12,234</div>
              <p className="text-xs text-muted-foreground">
                +19% from last month
              </p>
            </CardContent>
          </Card>
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Active Now</CardTitle>
              <Activity className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">+573</div>
              <p className="text-xs text-muted-foreground">
                +201 since last hour
              </p>
            </CardContent>
          </Card>
        </div>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-7">
          <Card className="col-span-1 lg:col-span-4">
            <CardHeader>
              <CardTitle>Recent Sales</CardTitle>
              <CardDescription>
                You made 265 sales this month.
              </CardDescription>
            </CardHeader>
            <CardContent>
              <Table>
                  <TableHeader>
                      <TableRow>
                      <TableHead>Customer</TableHead>
                      <TableHead>Type</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Date</TableHead>
                      <TableHead className="text-right">Amount</TableHead>
                      </TableRow>
                  </TableHeader>
                  <TableBody>
                      <TableRow>
                          <TableCell>
                              <div className="font-medium">Liam Johnson</div>
                              <div className="text-sm text-muted-foreground">liam@example.com</div>
                          </TableCell>
                          <TableCell>Sale</TableCell>
                          <TableCell>Successful</TableCell>
                          <TableCell>2023-06-23</TableCell>
                          <TableCell className="text-right">$250.00</TableCell>
                      </TableRow>
                  </TableBody>
              </Table>
            </CardContent>
          </Card>
          <CalendarWidget />
        </div>
      </div>
    </>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/documents/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { File, Upload } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import OasisBackground from '@/components/documents/OasisBackground';
import ManageTab from '@/components/documents/ManageTab';
import UploadTab from '@/components/documents/UploadTab';
import { Button } from '@/components/ui/button';

const TABS = [
  { id: 'manage', label: 'Manage Files', icon: File },
  { id: 'upload', label: 'Upload Files', icon: Upload }
];

// Mock file handler hook
const useFileHandler = () => {
    const [uploadingFiles, setUploadingFiles] = useState([]);
    const [completedFiles, setCompletedFiles] = useState([
        { id: '1', name: 'Johnson Kitchen Remodel Plan.pdf', size: 2300000, type: 'application/pdf', category: 'Jobs' },
        { id: '2', name: 'Living Room Inspiration.jpg', size: 1200000, type: 'image/jpeg', category: 'Jobs' },
        { id: '3', name: 'Vendor Contract - Plumbing.docx', size: 45000, type: 'application/msword', category: 'Vendors' },
    ]);
    
    const handleFileSelect = (selectedFiles: File[]) => {
        // Mock upload process
    };
    
    const removeFile = (fileId: string) => {
        setCompletedFiles(prev => prev.filter(f => f.id !== fileId));
    };

    return { getUploadingFiles: () => uploadingFiles, getCompletedFiles: () => completedFiles, handleFileSelect, removeFile };
};

export default function DocumentOasisPage() {
  const [activeTab, setActiveTab] = useState('manage');
  const [activeView, setActiveView] = useState({ parent: 'File Management', child: 'All Files' });
  const { getUploadingFiles, getCompletedFiles, handleFileSelect, removeFile } = useFileHandler();

  const handleCategorySelect = ({ parent, child }: { parent: string, child: string }) => {
    setActiveView({ parent, child });
  };
  
  const getFilesForView = () => {
    const allFiles = getCompletedFiles();
    if (activeView.child === 'All Files' || !activeView.child) return allFiles;
    // This logic would need to be expanded for sub-items
    return allFiles.filter(file => file.category === activeView.child);
  };


  return (
    <div className="flex-1 p-4 md:p-8">
        <div className="relative bg-background/80 backdrop-blur-sm border border-border rounded-2xl shadow-2xl w-full max-w-7xl mx-auto my-8 overflow-hidden">
            <OasisBackground isVisible={true} />
            <div className="relative z-10 p-4 md:p-6 text-white">
                <motion.div layout className="flex flex-col sm:flex-row items-center justify-between gap-4 mb-6">
                    <div className="flex items-center space-x-3 min-w-0">
                        <h1 className="text-2xl font-semibold text-white">{activeTab === 'upload' ? 'Upload Center' : activeView.child}</h1>
                    </div>
                    <div className="flex items-center space-x-2 md:space-x-4">
                        {TABS.map(tab => (
                            <Button
                                key={tab.id}
                                onClick={() => setActiveTab(tab.id)}
                                variant={activeTab === tab.id ? 'default' : 'secondary'}
                                size="sm"
                            >
                                <tab.icon className="mr-2 h-4 w-4" />
                                <span>{tab.label}</span>
                            </Button>
                        ))}
                    </div>
                </motion.div>
                <div className="min-h-[500px]">
                    <AnimatePresence mode="wait">
                        {activeTab === 'upload' && (
                            <motion.div key="upload" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
                                <UploadTab 
                                    handleFileSelect={handleFileSelect} 
                                    uploadingFiles={getUploadingFiles()} 
                                />
                            </motion.div>
                        )}
                        {activeTab === 'manage' && (
                            <motion.div key="manage" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
                                <ManageTab
                                    activeView={activeView}
                                    onCategorySelect={handleCategorySelect}
                                    completedFiles={getFilesForView()}
                                    removeFile={removeFile}
                                    setActiveTab={setActiveTab}
                                />
                            </motion.div>
                        )}
                    </AnimatePresence>
                </div>
            </div>
        </div>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/globals.css</summary>
        <pre><code>
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 5% 10%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 120 100% 50%;
    --primary-foreground: 120 100% 5%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 120 100% 50% / 0.5;
    --input: 240 3.7% 15.9%;
    --ring: 120 100% 50%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 10% 3.9%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 120 100% 50%;
    --sidebar-primary-foreground: 120 100% 5%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 120 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  html {
    /* This creates a buffer at the bottom of the scroll area for FABs */
    scroll-padding-bottom: 80px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* Custom print styles for receipt */
@media print {
  body {
    background-color: white !important;
  }
  .no-print {
    display: none !important;
  }
  .print-only {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/icon.tsx</summary>
        <pre><code>
import { ImageResponse } from 'next/og'

// Route segment config
export const runtime = 'edge'

// Image metadata
export const size = {
  width: 32,
  height: 32,
}
export const contentType = 'image/png'

// Image generation
export default function Icon() {
  return new ImageResponse(
    (
      // ImageResponse JSX element
      <div
        style={{
          fontSize: 24,
          background: '#06fa2e',
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'black',
          borderRadius: '6px',
          fontWeight: 'bold',
        }}
      >
        E
      </div>
    ),
    // ImageResponse options
    {
      // For convenience, we can re-use the exported icons size metadata
      // config to also set the ImageResponse's width and height.
      ...size,
    }
  )
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/inventory/equipment/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState, useMemo, useRef, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { usePos } from '@/contexts/PosContext';
import type { Tool } from '@/lib/types';
import { Search, Filter, Upload, Download, PlusCircle, Pencil, Trash2 } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuCheckboxItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion';
import { groupBy } from 'lodash';
import Papa from 'papaparse';
import { AssetDialog, AssetType, Asset } from '@/components/inventory/AssetDialog';
import { Skeleton } from '@/components/ui/skeleton';

export default function InventoryEquipmentPage() {
  const { 
    tools,
    deleteAsset,
    isLoading,
    loadInitialData,
  } = usePos();
  const { toast } = useToast();
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    loadInitialData();
  }, [loadInitialData]);

  // Dialog State
  const [isAssetDialogOpen, setIsAssetDialogOpen] = useState(false);
  const [editingAsset, setEditingAsset] = useState<Asset | null>(null);
  const [assetTypeForDialog, setAssetTypeForDialog] = useState<AssetType>('equipment');

  // State for Equipment Tab
  const [toolSearchQuery, setToolSearchQuery] = useState('');
  const [toolSelectedStatuses, setToolSelectedStatuses] = useState<string[]>([]);

  const handleAddNew = (type: AssetType) => {
    setEditingAsset(null);
    setAssetTypeForDialog(type);
    setIsAssetDialogOpen(true);
  };
  
  const handleEdit = (asset: Asset, type: AssetType) => {
    setEditingAsset(asset);
    setAssetTypeForDialog(type);
    setIsAssetDialogOpen(true);
  };

  const handleDelete = (assetId: string, type: AssetType) => {
    deleteAsset(assetId, type);
  };
  
  const handleExport = () => {
    const csv = Papa.unparse(tools);
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'equipment.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    toast({ title: 'Export Successful', description: `Data has been downloaded as equipment.csv.` });
  };

  const handleImportClick = () => {
    fileInputRef.current?.click();
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // This functionality will be moved to PosContext in a future step for bulk additions
    toast({ title: "Coming Soon", description: "Bulk import functionality will be enabled shortly."});
  };

  // Memoized categories and statuses for filters
  const toolStatuses = useMemo(() => Array.from(new Set(tools.map(t => t.status))), [tools]);

  // Memoized filtering logic for Equipment
  const filteredTools = useMemo(() => {
    return tools.filter(tool => {
        const matchesStatus = toolSelectedStatuses.length === 0 || toolSelectedStatuses.includes(tool.status);
        const matchesSearch = tool.name.toLowerCase().includes(toolSearchQuery.toLowerCase()) || 
                              tool.serialNumber.toLowerCase().includes(toolSearchQuery.toLowerCase());
        return matchesStatus && matchesSearch;
    });
  }, [tools, toolSearchQuery, toolSelectedStatuses]);
  
  const groupedAndFilteredTools = useMemo(() => {
    const byType = groupBy(filteredTools, 'type');
    return Object.keys(byType).sort().map(type => ({
      type,
      categories: groupBy(byType[type], 'category'),
    }));
  }, [filteredTools]);
  
  const getToolStatusVariant = (status: Tool['status']): 'default' | 'destructive' | 'secondary' => {
    if (status === 'Under Maintenance') return 'destructive';
    if (status === 'In Use') return 'secondary';
    return 'default';
  };

  const renderSkeletons = () => (
    Array.from({ length: 3 }).map((_, i) => (
      <AccordionItem key={i} value={`skeleton-${i}`}>
        <AccordionTrigger><Skeleton className="h-6 w-48" /></AccordionTrigger>
        <AccordionContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Name</TableHead>
                <TableHead>Serial Number</TableHead>
                <TableHead>Status</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {Array.from({ length: 2 }).map((_, j) => (
                <TableRow key={j}>
                  <TableCell><Skeleton className="h-5 w-32" /></TableCell>
                  <TableCell><Skeleton className="h-5 w-24" /></TableCell>
                  <TableCell><Skeleton className="h-6 w-24 rounded-full" /></TableCell>
                  <TableCell className="text-right"><Skeleton className="h-10 w-20" /></TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </AccordionContent>
      </AccordionItem>
    ))
  );

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
            <div className="flex items-center justify-between">
                <div>
                    <CardTitle>Equipment Management</CardTitle>
                    <CardDescription>View and manage your company's tools and equipment.</CardDescription>
                </div>
                <div className="flex items-center gap-2">
                    <input
                        type="file"
                        ref={fileInputRef}
                        className="hidden"
                        accept=".csv"
                        onChange={handleFileChange}
                    />
                    <Button variant="outline" size="sm" onClick={handleImportClick}>
                        <Upload className="mr-2 h-4 w-4" />
                        Import
                    </Button>
                    <Button variant="outline" size="sm" onClick={handleExport}>
                        <Download className="mr-2 h-4 w-4" />
                        Export
                    </Button>
                     <Button size="sm" onClick={() => handleAddNew('equipment')}>
                        <PlusCircle className="mr-2 h-4 w-4" />
                        Add New Equipment
                    </Button>
                </div>
            </div>
        </CardHeader>
        <CardContent>
            <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-2">
                    <div className="relative">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input
                            placeholder="Search by name or serial..."
                            value={toolSearchQuery}
                            onChange={(e) => setToolSearchQuery(e.target.value)}
                            className="pl-8"
                        />
                    </div>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="outline">
                                <Filter className="mr-2 h-4 w-4" />
                                Status ({toolSelectedStatuses.length > 0 ? toolSelectedStatuses.length : 'All'})
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent>
                            <DropdownMenuLabel>Filter by Status</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem onSelect={() => setToolSelectedStatuses([])}>All Statuses</DropdownMenuItem>
                            {toolStatuses.map(status => (
                                 <DropdownMenuCheckboxItem
                                    key={status}
                                    checked={toolSelectedStatuses.includes(status)}
                                    onCheckedChange={(checked) => {
                                        setToolSelectedStatuses(prev => 
                                            checked ? [...prev, status] : prev.filter(s => s !== status)
                                        )
                                    }}
                                >
                                    {status}
                                </DropdownMenuCheckboxItem>
                            ))}
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
            </div>
            <Accordion type="multiple" className="w-full" defaultValue={isLoading ? [] : groupedAndFilteredTools.map(g => g.type)}>
              {isLoading ? renderSkeletons() : groupedAndFilteredTools.map(group => (
                <AccordionItem key={group.type} value={group.type}>
                  <AccordionTrigger className="text-lg font-semibold">{group.type}</AccordionTrigger>
                  <AccordionContent>
                    <Accordion type="multiple" className="w-full" defaultValue={Object.keys(group.categories)}>
                       {Object.keys(group.categories).sort().map(category => (
                         <AccordionItem key={category} value={category}>
                           <AccordionTrigger className="pl-4">{category}</AccordionTrigger>
                           <AccordionContent className="pl-8">
                             <Table>
                                <TableHeader>
                                    <TableRow>
                                        <TableHead>Name</TableHead>
                                        <TableHead>Serial Number</TableHead>
                                        <TableHead>Status</TableHead>
                                        <TableHead className="text-right">Actions</TableHead>
                                    </TableRow>
                                </TableHeader>
                                <TableBody>
                                    {group.categories[category].map(tool => (
                                        <TableRow key={tool.id}>
                                            <TableCell className="font-medium">{tool.name}</TableCell>
                                            <TableCell className="font-mono text-xs">{tool.serialNumber}</TableCell>
                                            <TableCell>
                                                <Badge variant={getToolStatusVariant(tool.status)}>
                                                    {tool.status}
                                                </Badge>
                                            </TableCell>
                                            <TableCell className="text-right">
                                                <div className="flex justify-end gap-2">
                                                    <Button variant="ghost" size="icon" onClick={() => handleEdit(tool, 'equipment')}><Pencil className="h-4 w-4" /></Button>
                                                    <AlertDialog>
                                                        <AlertDialogTrigger asChild><Button variant="ghost" size="icon"><Trash2 className="h-4 w-4" /></Button></AlertDialogTrigger>
                                                        <AlertDialogContent>
                                                        <AlertDialogHeader><AlertDialogTitle>Are you sure?</AlertDialogTitle><AlertDialogDescription>This will permanently delete the equipment item.</AlertDialogDescription></AlertDialogHeader>
                                                        <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => handleDelete(tool.id, 'equipment')}>Delete</AlertDialogAction></AlertDialogFooter>
                                                        </AlertDialogContent>
                                                    </AlertDialog>
                                                </div>
                                            </TableCell>
                                        </TableRow>
                                    ))}
                                </TableBody>
                             </Table>
                           </AccordionContent>
                         </AccordionItem>
                       ))}
                    </Accordion>
                  </AccordionContent>
                </AccordionItem>
              ))}
            </Accordion>
             {!isLoading && filteredTools.length === 0 && (
                <div className="text-center text-muted-foreground p-8">
                    No equipment found.
                </div>
             )}
        </CardContent>
      </Card>
      <AssetDialog 
        isOpen={isAssetDialogOpen}
        onOpenChange={setIsAssetDialogOpen}
        asset={editingAsset}
        assetType={assetTypeForDialog}
      />
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/inventory/page.tsx</summary>
        <pre><code>
'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

// This page now acts as a redirect to the default inventory view (products).
export default function InventoryRedirectPage() {
  const router = useRouter();

  useEffect(() => {
    router.replace('/inventory/products');
  }, [router]);

  return (
     <div className="flex-1 flex items-center justify-center p-4">
        <p>Redirecting to inventory...</p>
     </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/inventory/products/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { usePos } from '@/contexts/PosContext';
import type { Product } from '@/lib/types';
import { Plus, Minus, Search, Filter, Upload, Download, PlusCircle, Pencil, Trash2 } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuCheckboxItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { groupBy } from 'lodash';
import Papa from 'papaparse';
import { AssetDialog, AssetType, Asset } from '@/components/inventory/AssetDialog';
import { Skeleton } from '@/components/ui/skeleton';


export default function InventoryProductsPage() {
  const { 
    products: contextProducts, 
    updateProductStock,
    deleteAsset,
    isLoading,
    loadInitialData,
  } = usePos();
  const [products, setProducts] = useState<Product[]>(contextProducts || []);
  const { toast } = useToast();
  const fileInputRef = useRef<HTMLInputElement>(null);

  // Dialog State
  const [isAssetDialogOpen, setIsAssetDialogOpen] = useState(false);
  const [editingAsset, setEditingAsset] = useState<Asset | null>(null);
  const [assetTypeForDialog, setAssetTypeForDialog] = useState<AssetType>('products');
  
  // State for Products Tab
  const [productSearchQuery, setProductSearchQuery] = useState('');
  const [productSelectedCategories, setProductSelectedCategories] = useState<string[]>([]);


  useEffect(() => {
    loadInitialData();
  }, [loadInitialData]);

  useEffect(() => {
    if (contextProducts) {
      setProducts(contextProducts);
    }
  }, [contextProducts]);

  const handleAddNew = (type: AssetType) => {
    setEditingAsset(null);
    setAssetTypeForDialog(type);
    setIsAssetDialogOpen(true);
  };
  
  const handleEdit = (asset: Asset, type: AssetType) => {
    setEditingAsset(asset);
    setAssetTypeForDialog(type);
    setIsAssetDialogOpen(true);
  };

  const handleDelete = (assetId: string, type: AssetType) => {
    deleteAsset(assetId, type);
  };

  const handleStockChange = (productId: string, newStock: number) => {
    if (newStock < 0) return;
    setProducts(prev =>
      prev.map(p => (p.id === productId ? { ...p, stock: newStock } : p))
    );
  };
  
  const handleSaveChanges = async () => {
    try {
      await updateProductStock(products);
      toast({
          title: "Inventory Saved",
          description: "Your stock levels have been successfully updated.",
      });
    } catch (error) {
       toast({
          variant: "destructive",
          title: "Save Failed",
          description: "Could not update stock levels. Please try again.",
      });
    }
  }
  
  const handleExport = () => {
    const csv = Papa.unparse(products);
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'products.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    toast({ title: 'Export Successful', description: `Data has been downloaded as products.csv.` });
  };

  const handleImportClick = () => {
    fileInputRef.current?.click();
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // This functionality will be moved to PosContext in a future step for bulk additions
    toast({ title: "Coming Soon", description: "Bulk import functionality will be enabled shortly."});
  };

  // Memoized categories for filters
  const productCategories = useMemo(() => Array.from(new Set((products || []).map(p => p.category))), [products]);

  // Memoized filtering logic for Products
  const filteredProducts = useMemo(() => {
    if (!products) return [];
    return products.filter(product => {
        const matchesCategory = productSelectedCategories.length === 0 || productSelectedCategories.includes(product.category);
        const matchesSearch = product.name.toLowerCase().includes(productSearchQuery.toLowerCase());
        return matchesCategory && matchesSearch;
    });
  }, [products, productSearchQuery, productSelectedCategories]);

  const groupedProducts = useMemo(() => {
    if (!filteredProducts) return null;
    if (productSelectedCategories.length > 0) return null;
    return groupBy(filteredProducts, 'category');
  }, [filteredProducts, productSelectedCategories]);
  
  // Badge variants
  const getStockBadgeVariant = (stock: number): 'default' | 'destructive' | 'secondary' => {
    if (stock === 0) return 'destructive';
    if (stock < 10) return 'secondary';
    return 'default';
  };
  
  const renderProductSkeletons = () => (
    <TableBody>
      {Array.from({ length: 5 }).map((_, i) => (
        <TableRow key={i}>
          <TableCell><Skeleton className="h-5 w-32" /></TableCell>
          <TableCell><Skeleton className="h-5 w-24" /></TableCell>
          <TableCell className="text-right"><Skeleton className="h-5 w-16" /></TableCell>
          <TableCell className="text-center"><Skeleton className="h-6 w-24 rounded-full" /></TableCell>
          <TableCell><Skeleton className="h-10 w-48" /></TableCell>
          <TableCell className="text-right"><Skeleton className="h-10 w-20" /></TableCell>
        </TableRow>
      ))}
    </TableBody>
  );

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
            <div className="flex items-center justify-between">
                <div>
                    <CardTitle>Product Inventory</CardTitle>
                    <CardDescription>View and manage stock levels for your products.</CardDescription>
                </div>
                <div className="flex items-center gap-2">
                    <input
                        type="file"
                        ref={fileInputRef}
                        className="hidden"
                        accept=".csv"
                        onChange={handleFileChange}
                    />
                    <Button variant="outline" size="sm" onClick={handleImportClick}>
                        <Upload className="mr-2 h-4 w-4" />
                        Import
                    </Button>
                    <Button variant="outline" size="sm" onClick={handleExport}>
                        <Download className="mr-2 h-4 w-4" />
                        Export
                    </Button>
                     <Button size="sm" onClick={() => handleAddNew('products')}>
                        <PlusCircle className="mr-2 h-4 w-4" />
                        Add New Product
                    </Button>
                </div>
            </div>
        </CardHeader>
        <CardContent>
            <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-2">
                    <div className="relative">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input
                            placeholder="Search products..."
                            value={productSearchQuery}
                            onChange={(e) => setProductSearchQuery(e.target.value)}
                            className="pl-8"
                        />
                    </div>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="outline">
                                <Filter className="mr-2 h-4 w-4" />
                                Category 
                                {productSelectedCategories.length > 0 && ` (${productSelectedCategories.length})`}
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent>
                            <DropdownMenuLabel>Filter by Category</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem onSelect={() => setProductSelectedCategories([])}>
                                All Categories
                            </DropdownMenuItem>
                            {productCategories.map(category => (
                                 <DropdownMenuCheckboxItem
                                    key={category}
                                    checked={productSelectedCategories.includes(category)}
                                    onCheckedChange={(checked) => {
                                        setProductSelectedCategories(prev => 
                                            checked ? [...prev, category] : prev.filter(c => c !== category)
                                        )
                                    }}
                                >
                                    {category}
                                </DropdownMenuCheckboxItem>
                            ))}
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
                <Button onClick={handleSaveChanges}>Save Changes</Button>
            </div>
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Product</TableHead>
                        <TableHead>Category</TableHead>
                        <TableHead className="text-right">Price</TableHead>
                        <TableHead className="text-center">Current Stock</TableHead>
                        <TableHead className="text-center">Manage Stock</TableHead>
                         <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                </TableHeader>
                {isLoading ? renderProductSkeletons() : (
                  <TableBody>
                      {groupedProducts ? (
                          Object.entries(groupedProducts).map(([category, products]) => (
                              <React.Fragment key={category}>
                                  <TableRow className="bg-muted/50 hover:bg-muted/50">
                                      <TableCell colSpan={6} className="py-2 font-semibold text-foreground">
                                          {category}
                                      </TableCell>
                                  </TableRow>
                                  {products.map(product => (
                                      <TableRow key={product.id}>
                                          <TableCell className="font-medium">{product.name}</TableCell>
                                          <TableCell>{product.category}</TableCell>
                                          <TableCell className="text-right font-mono">${product.price.toFixed(2)}</TableCell>
                                          <TableCell className="text-center">
                                              <Badge variant={getStockBadgeVariant(product.stock)}>
                                                  {product.stock} in stock
                                              </Badge>
                                          </TableCell>
                                          <TableCell>
                                              <div className="flex items-center justify-center gap-2">
                                                  <Button size="icon" variant="outline" onClick={() => handleStockChange(product.id, product.stock - 1)}>
                                                      <Minus className="h-4 w-4" />
                                                  </Button>
                                                  <Input type="number" value={product.stock} onChange={(e) => handleStockChange(product.id, parseInt(e.target.value, 10) || 0)} className="w-20 text-center" />
                                                  <Button size="icon" variant="outline" onClick={() => handleStockChange(product.id, product.stock + 1)}>
                                                      <Plus className="h-4 w-4" />
                                                  </Button>
                                              </div>
                                          </TableCell>
                                          <TableCell className="text-right">
                                              <div className="flex justify-end gap-2">
                                                  <Button variant="ghost" size="icon" onClick={() => handleEdit(product, 'products')}><Pencil className="h-4 w-4" /></Button>
                                                  <AlertDialog>
                                                      <AlertDialogTrigger asChild><Button variant="ghost" size="icon"><Trash2 className="h-4 w-4" /></Button></AlertDialogTrigger>
                                                      <AlertDialogContent>
                                                      <AlertDialogHeader><AlertDialogTitle>Are you sure?</AlertDialogTitle><AlertDialogDescription>This will permanently delete the product.</AlertDialogDescription></AlertDialogHeader>
                                                      <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => handleDelete(product.id, 'products')}>Delete</AlertDialogAction></AlertDialogFooter>
                                                      </AlertDialogContent>
                                                  </AlertDialog>
                                              </div>
                                          </TableCell>
                                      </TableRow>
                                  ))}
                              </React.Fragment>
                          ))
                      ) : (
                          filteredProducts.map(product => (
                              <TableRow key={product.id}>
                                  <TableCell className="font-medium">{product.name}</TableCell>
                                  <TableCell>{product.category}</TableCell>
                                  <TableCell className="text-right font-mono">${product.price.toFixed(2)}</TableCell>
                                  <TableCell className="text-center">
                                      <Badge variant={getStockBadgeVariant(product.stock)}>
                                          {product.stock} in stock
                                      </Badge>
                                  </TableCell>
                                  <TableCell>
                                      <div className="flex items-center justify-center gap-2">
                                          <Button size="icon" variant="outline" onClick={() => handleStockChange(product.id, product.stock - 1)}>
                                              <Minus className="h-4 w-4" />
                                          </Button>
                                          <Input type="number" value={product.stock} onChange={(e) => handleStockChange(product.id, parseInt(e.target.value, 10) || 0)} className="w-20 text-center" />
                                          <Button size="icon" variant="outline" onClick={() => handleStockChange(product.id, product.stock + 1)}>
                                              <Plus className="h-4 w-4" />
                                          </Button>
                                      </div>
                                  </TableCell>
                                  <TableCell className="text-right">
                                      <div className="flex justify-end gap-2">
                                          <Button variant="ghost" size="icon" onClick={() => handleEdit(product, 'products')}><Pencil className="h-4 w-4" /></Button>
                                          <AlertDialog>
                                              <AlertDialogTrigger asChild><Button variant="ghost" size="icon"><Trash2 className="h-4 w-4" /></Button></AlertDialogTrigger>
                                              <AlertDialogContent>
                                              <AlertDialogHeader><AlertDialogTitle>Are you sure?</AlertDialogTitle><AlertDialogDescription>This will permanently delete the product.</AlertDialogDescription></AlertDialogHeader>
                                              <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => handleDelete(product.id, 'products')}>Delete</AlertDialogAction></AlertDialogFooter>
                                              </AlertDialogContent>
                                          </AlertDialog>
                                      </div>
                                  </TableCell>
                              </TableRow>
                          ))
                      )}
                      {filteredProducts.length === 0 && !isLoading && (
                          <TableRow>
                              <TableCell colSpan={6} className="h-24 text-center text-muted-foreground">
                                  No products found.
                              </TableCell>
                          </TableRow>
                      )}
                  </TableBody>
                )}
            </Table>
        </CardContent>
      </Card>

      <AssetDialog 
        isOpen={isAssetDialogOpen}
        onOpenChange={setIsAssetDialogOpen}
        asset={editingAsset}
        assetType={assetTypeForDialog}
      />
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/inventory/services/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState, useEffect, useMemo, useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { usePos } from '@/contexts/PosContext';
import type { Service } from '@/lib/types';
import { Search, Filter, Upload, Download, PlusCircle, Pencil, Trash2 } from 'lucide-react';
import { useToast } from '@/hooks/use-toast';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuCheckboxItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuItem,
} from "@/components/ui/dropdown-menu"
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { groupBy } from 'lodash';
import Papa from 'papaparse';
import { AssetDialog, AssetType, Asset } from '@/components/inventory/AssetDialog';
import { Skeleton } from '@/components/ui/skeleton';

export default function InventoryServicesPage() {
  const { 
    services, 
    deleteAsset,
    isLoading,
    loadInitialData,
  } = usePos();
  const { toast } = useToast();
  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    loadInitialData();
  }, [loadInitialData]);


  // Dialog State
  const [isAssetDialogOpen, setIsAssetDialogOpen] = useState(false);
  const [editingAsset, setEditingAsset] = useState<Asset | null>(null);
  const [assetTypeForDialog, setAssetTypeForDialog] = useState<AssetType>('services');

  // State for Services Tab
  const [serviceSearchQuery, setServiceSearchQuery] = useState('');
  const [serviceSelectedCategories, setServiceSelectedCategories] = useState<string[]>([]);

  const handleAddNew = (type: AssetType) => {
    setEditingAsset(null);
    setAssetTypeForDialog(type);
    setIsAssetDialogOpen(true);
  };
  
  const handleEdit = (asset: Asset, type: AssetType) => {
    setEditingAsset(asset);
    setAssetTypeForDialog(type);
    setIsAssetDialogOpen(true);
  };

  const handleDelete = (assetId: string, type: AssetType) => {
    deleteAsset(assetId, type);
  };
  
  const handleExport = () => {
    const csv = Papa.unparse(services);
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'services.csv';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    toast({ title: 'Export Successful', description: `Data has been downloaded as services.csv.` });
  };

  const handleImportClick = () => {
    fileInputRef.current?.click();
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // This functionality will be moved to PosContext in a future step for bulk additions
    toast({ title: "Coming Soon", description: "Bulk import functionality will be enabled shortly."});
  };

  // Memoized categories and statuses for filters
  const serviceCategories = useMemo(() => Array.from(new Set(services.map(s => s.category))), [services]);

  // Memoized filtering logic for Services
  const filteredServices = useMemo(() => {
    return services.filter(service => {
        const matchesCategory = serviceSelectedCategories.length === 0 || serviceSelectedCategories.includes(service.category);
        const matchesSearch = service.name.toLowerCase().includes(serviceSearchQuery.toLowerCase());
        return matchesCategory && matchesSearch;
    });
  }, [services, serviceSearchQuery, serviceSelectedCategories]);
  
  const groupedServices = useMemo(() => {
    if (serviceSelectedCategories.length > 0) return null;
    return groupBy(filteredServices, 'category');
  }, [filteredServices, serviceSelectedCategories]);
  
  const getServiceStatusVariant = (status: Service['status']): 'default' | 'destructive' | 'secondary' => {
    if (status === 'inactive') return 'destructive';
    if (status === 'pending' || status === 'needs updated') return 'secondary';
    return 'default';
  };

  const renderSkeletons = () => (
    <TableBody>
      {Array.from({ length: 5 }).map((_, i) => (
        <TableRow key={i}>
          <TableCell><Skeleton className="h-5 w-32" /></TableCell>
          <TableCell><Skeleton className="h-5 w-24" /></TableCell>
          <TableCell><Skeleton className="h-5 w-48" /></TableCell>
          <TableCell><Skeleton className="h-6 w-20 rounded-full" /></TableCell>
          <TableCell className="text-right"><Skeleton className="h-5 w-16" /></TableCell>
          <TableCell className="text-right"><Skeleton className="h-10 w-20" /></TableCell>
        </TableRow>
      ))}
    </TableBody>
  );
  
  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
            <div className="flex items-center justify-between">
                <div>
                    <CardTitle>Service Management</CardTitle>
                    <CardDescription>View and manage your company's services.</CardDescription>
                </div>
                <div className="flex items-center gap-2">
                    <input
                        type="file"
                        ref={fileInputRef}
                        className="hidden"
                        accept=".csv"
                        onChange={handleFileChange}
                    />
                    <Button variant="outline" size="sm" onClick={handleImportClick}>
                        <Upload className="mr-2 h-4 w-4" />
                        Import
                    </Button>
                    <Button variant="outline" size="sm" onClick={handleExport}>
                        <Download className="mr-2 h-4 w-4" />
                        Export
                    </Button>
                     <Button size="sm" onClick={() => handleAddNew('services')}>
                        <PlusCircle className="mr-2 h-4 w-4" />
                        Add New Service
                    </Button>
                </div>
            </div>
        </CardHeader>
        <CardContent>
            <div className="flex items-center justify-between mb-4">
                <div className="flex items-center gap-2">
                    <div className="relative">
                        <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                        <Input
                            placeholder="Search services..."
                            value={serviceSearchQuery}
                            onChange={(e) => setServiceSearchQuery(e.target.value)}
                            className="pl-8"
                        />
                    </div>
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="outline">
                                <Filter className="mr-2 h-4 w-4" />
                                Category
                                {serviceSelectedCategories.length > 0 && ` (${serviceSelectedCategories.length})`}
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent>
                            <DropdownMenuLabel>Filter by Category</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            <DropdownMenuItem onSelect={() => setServiceSelectedCategories([])}>
                                All Categories
                            </DropdownMenuItem>
                            {serviceCategories.map(category => (
                                 <DropdownMenuCheckboxItem
                                    key={category}
                                    checked={serviceSelectedCategories.includes(category)}
                                    onCheckedChange={(checked) => {
                                        setServiceSelectedCategories(prev => 
                                            checked ? [...prev, category] : prev.filter(c => c !== category)
                                        )
                                    }}
                                >
                                    {category}
                                </DropdownMenuCheckboxItem>
                            ))}
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
            </div>
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead>Service Name</TableHead>
                        <TableHead>Category</TableHead>
                        <TableHead>Description</TableHead>
                        <TableHead>Status</TableHead>
                        <TableHead className="text-right">Price</TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                    </TableRow>
                </TableHeader>
                {isLoading ? renderSkeletons() : (
                <TableBody>
                    {groupedServices ? (
                         Object.entries(groupedServices).map(([category, services]) => (
                            <React.Fragment key={category}>
                                <TableRow className="bg-muted/50 hover:bg-muted/50">
                                    <TableCell colSpan={6} className="py-2 font-semibold text-foreground">
                                        {category}
                                    </TableCell>
                                </TableRow>
                                {services.map(service => (
                                    <TableRow key={service.id}>
                                        <TableCell className="font-medium">{service.name}</TableCell>
                                        <TableCell>{service.category}</TableCell>
                                        <TableCell className="text-muted-foreground">{service.description}</TableCell>
                                        <TableCell>
                                            <Badge variant={getServiceStatusVariant(service.status)} className="capitalize">
                                                {service.status.replace('needs updated', 'Needs Update')}
                                            </Badge>
                                        </TableCell>
                                        <TableCell className="text-right font-mono">${service.price.toFixed(2)}</TableCell>
                                        <TableCell className="text-right">
                                            <div className="flex justify-end gap-2">
                                                <Button variant="ghost" size="icon" onClick={() => handleEdit(service, 'services')}><Pencil className="h-4 w-4" /></Button>
                                                <AlertDialog>
                                                    <AlertDialogTrigger asChild><Button variant="ghost" size="icon"><Trash2 className="h-4 w-4" /></Button></AlertDialogTrigger>
                                                    <AlertDialogContent>
                                                    <AlertDialogHeader><AlertDialogTitle>Are you sure?</AlertDialogTitle><AlertDialogDescription>This will permanently delete the service.</AlertDialogDescription></AlertDialogHeader>
                                                    <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => handleDelete(service.id, 'services')}>Delete</AlertDialogAction></AlertDialogFooter>
                                                    </AlertDialogContent>
                                                </AlertDialog>
                                            </div>
                                        </TableCell>
                                    </TableRow>
                                ))}
                            </React.Fragment>
                        ))
                    ) : (
                        filteredServices.map(service => (
                            <TableRow key={service.id}>
                                <TableCell className="font-medium">{service.name}</TableCell>
                                <TableCell>{service.category}</TableCell>
                                <TableCell className="text-muted-foreground">{service.description}</TableCell>
                                <TableCell>
                                    <Badge variant={getServiceStatusVariant(service.status)} className="capitalize">
                                        {service.status.replace('needs updated', 'Needs Update')}
                                    </Badge>
                                </TableCell>
                                <TableCell className="text-right font-mono">${service.price.toFixed(2)}</TableCell>
                                 <TableCell className="text-right">
                                    <div className="flex justify-end gap-2">
                                        <Button variant="ghost" size="icon" onClick={() => handleEdit(service, 'services')}><Pencil className="h-4 w-4" /></Button>
                                        <AlertDialog>
                                            <AlertDialogTrigger asChild><Button variant="ghost" size="icon"><Trash2 className="h-4 w-4" /></Button></AlertDialogTrigger>
                                            <AlertDialogContent>
                                            <AlertDialogHeader><AlertDialogTitle>Are you sure?</AlertDialogTitle><AlertDialogDescription>This will permanently delete the service.</AlertDialogDescription></AlertDialogHeader>
                                            <AlertDialogFooter><AlertDialogCancel>Cancel</AlertDialogCancel><AlertDialogAction onClick={() => handleDelete(service.id, 'services')}>Delete</AlertDialogAction></AlertDialogFooter>
                                            </AlertDialogContent>
                                        </AlertDialog>
                                    </div>
                                </TableCell>
                            </TableRow>
                        ))
                    )}
                    {filteredServices.length === 0 && !isLoading && (
                        <TableRow>
                            <TableCell colSpan={6} className="h-24 text-center text-muted-foreground">
                                No services found.
                            </TableCell>
                        </TableRow>
                    )}
                </TableBody>
                )}
            </Table>
        </CardContent>
      </Card>
       <AssetDialog 
        isOpen={isAssetDialogOpen}
        onOpenChange={setIsAssetDialogOpen}
        asset={editingAsset}
        assetType={assetTypeForDialog}
      />
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/layout.tsx</summary>
        <pre><code>
'use client';

import { Poppins } from "next/font/google";
import "./globals.css";
import { Toaster } from "@/components/ui/toaster";
import { PosContextProvider } from "@/contexts/PosContext";
import { ReactNode, useState, createContext, useContext } from 'react';
import "@/components/layout/fab.css";
import { AuthProvider } from "@/contexts/AuthContext";
import { CrmHeader } from '@/components/layout/CrmHeader';
import { CrmMenubar } from '@/components/layout/CrmMenubar';
import { CrmSidebar } from '@/components/layout/CrmSidebar';
import { ScrollArea } from '@/components/ui/scroll-area';
import { PublicHeader } from '@/components/layout/PublicHeader';
import { PublicFooter } from '@/components/layout/PublicFooter';
import { FabContainer } from '@/components/layout/FabContainer';
import { usePathname } from "next/navigation";


// CONTEXT DEFINITION FOR ESTIMATE/FABs
export type EstimateStep = 'client-info' | 'project-selection' | 'project-scope' | 'review' | 'finalizing' | 'confirmation';
export type ActiveMenu = 'help' | 'menu' | null;

interface EstimateContextType {
  step: EstimateStep;
  setStep: (step: EstimateStep) => void;
  formData: any;
  setFormData: (data: any) => void;
  activeMenu: ActiveMenu;
  setActiveMenu: (menu: ActiveMenu) => void;
}

const EstimateContext = createContext<EstimateContextType | null>(null);

export const useEstimate = () => {
  const context = useContext(EstimateContext);
  if (!context) {
    throw new Error('useEstimate must be used within an EstimateProvider');
  }
  return context;
};

export function EstimateProvider({ children }: { children: ReactNode }) {
  const [step, setStep] = useState<EstimateStep>('client-info');
  const [formData, setFormData] = useState({});
  const [activeMenu, setActiveMenu] = useState<ActiveMenu>(null);

  return (
    <EstimateContext.Provider value={{ step, setStep, formData, setFormData, activeMenu, setActiveMenu }}>
      {children}
    </EstimateContext.Provider>
  );
}


const poppins = Poppins({
  subsets: ["latin"],
  weight: ["400", "600", "700", "900"],
});


const AppLayout = ({ children }: { children: ReactNode }) => {
  const pathname = usePathname();
  const isCrmRoute = pathname.startsWith('/crm');
  const isPosRoute = pathname.startsWith('/pos');

  if (isCrmRoute) {
    return (
      <div className="flex min-h-screen w-full flex-col bg-muted/40">
        <CrmHeader />
        <div className="flex flex-1 overflow-hidden">
          <div className="border-r bg-card hidden md:block">
            <CrmSidebar />
          </div>
          <main className="flex flex-1 flex-col overflow-hidden">
            <CrmMenubar />
            <ScrollArea className="flex-1">{children}</ScrollArea>
          </main>
        </div>
      </div>
    );
  }

  if (isPosRoute) {
    return (
       <div className="flex min-h-screen w-full flex-col bg-muted/40">
        <CrmHeader />
        <main className="flex-1">
            {children}
        </main>
    </div>
    )
  }

  // Fallback to public layout
  return (
    <>
      <PublicHeader />
      <main className="flex-1">{children}</main>
      <FabContainer />
      <PublicFooter />
    </>
  );
};


export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body className={poppins.className}>
        <AuthProvider>
          <PosContextProvider>
            <EstimateProvider>
                <AppLayout>{children}</AppLayout>
            </EstimateProvider>
            <Toaster />
          </PosContextProvider>
        </AuthProvider>
      </body>
    </html>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/marketing/page.tsx</summary>
        <pre><code>
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';

export default function MarketingPage() {
  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
          <CardTitle>Marketing</CardTitle>
          <CardDescription>
            Manage your marketing campaigns and outreach.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex h-48 items-center justify-center rounded-md border-2 border-dashed">
            <p className="text-muted-foreground">Marketing - Coming Soon!</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/page.tsx</summary>
        <pre><code>
'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';

// This page now acts as a redirect to the main homepage within the correct layout.
export default function RootPage() {
  const router = useRouter();

  useEffect(() => {
    router.replace('/home');
  }, [router]);

  return (
     <div className="flex-1 flex items-center justify-center p-4">
        <p>Redirecting to homepage...</p>
     </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/profile/page.tsx</summary>
        <pre><code>
'use client';

import React from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { useLocalStorage } from '@/hooks/use-local-storage';
import { Button } from '@/components/ui/button';
import { useToast } from '@/hooks/use-toast';
import Image from 'next/image';

export default function ProfilePage() {
  const [widgetStyles, setWidgetStyles] = useLocalStorage<{[key: string]: { bgColor: string } }>('dashboard-widget-styles', {});
  const { toast } = useToast();

  const handleClearPreferences = () => {
    setWidgetStyles({});
    toast({
      title: 'Preferences Cleared',
      description: 'Your dashboard widget styles have been reset to default.',
    });
  };

  const handleConnection = (provider: 'google' | 'microsoft') => {
    toast({
      title: 'Coming Soon!',
      description: `Connecting with ${provider} will be enabled in a future update.`,
    });
  };

  const savedPreferences = Object.entries(widgetStyles).filter(([, style]) => style.bgColor);

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
          <CardTitle>My Profile</CardTitle>
          <CardDescription>
            Manage your personal settings and preferences.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-6">
            <Card>
                <CardHeader>
                    <CardTitle>My Connections</CardTitle>
                    <CardDescription>Manage your connected accounts for signing in.</CardDescription>
                </CardHeader>
                <CardContent className="space-y-4">
                   <div className="flex items-center justify-between p-4 border rounded-lg">
                      <div className="flex items-center gap-4">
                        <Image src="https://www.vectorlogo.zone/logos/google/google-icon.svg" alt="Google" width={24} height={24} />
                        <div>
                            <p className="font-medium">Google</p>
                            <p className="text-xs text-muted-foreground">Not connected (Authentication disabled)</p>
                        </div>
                      </div>
                      <Button variant="secondary" size="sm" onClick={() => handleConnection('google')} disabled>Connect</Button>
                   </div>
                     <div className="flex items-center justify-between p-4 border rounded-lg">
                        <div className="flex items-center gap-4">
                          <Image src="https://www.vectorlogo.zone/logos/microsoft/microsoft-icon.svg" alt="Microsoft" width={24} height={24} />
                           <div>
                              <p className="font-medium">Microsoft</p>
                              <p className="text-xs text-muted-foreground">Not connected</p>
                          </div>
                        </div>
                        <Button variant="secondary" size="sm" onClick={() => handleConnection('microsoft')}>Connect</Button>
                     </div>
                </CardContent>
            </Card>

            <Card>
                <CardHeader>
                    <CardTitle>Styles & Themes</CardTitle>
                    <CardDescription>Manage your personalized appearance settings for the CRM.</CardDescription>
                </CardHeader>
                <CardContent>
                    <h4 className="font-semibold mb-2">Saved Widget Preferences</h4>
                    {savedPreferences.length > 0 ? (
                         <div className="space-y-2">
                            <ul className="list-disc list-inside text-sm text-muted-foreground">
                                {savedPreferences.map(([widgetId]) => (
                                    <li key={widgetId}>
                                        Custom background for: <span className="font-medium capitalize text-foreground">{widgetId.replace(/_/g, ' ')}</span>
                                    </li>
                                ))}
                            </ul>
                            <Button variant="destructive" size="sm" onClick={handleClearPreferences} className="mt-4">
                                Clear All Saved Styles
                            </Button>
                         </div>
                    ) : (
                        <p className="text-sm text-muted-foreground">You have no saved widget preferences.</p>
                    )}
                </CardContent>
            </Card>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/projects/page.tsx</summary>
        <pre><code>
import { FileExplorer } from '@/components/projects/FileExplorer';

export default function ProjectsPage() {
  return (
    <div className="flex-1 p-4 pt-6 md:p-8">
      <FileExplorer />
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/reporting/page.tsx</summary>
        <pre><code>
'use client';

import React, { useMemo } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { usePos } from '@/contexts/PosContext';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, PieChart, Pie, Cell, Legend } from 'recharts';
import { format, subDays, startOfDay, endOfDay, isWithinInterval, parseISO } from 'date-fns';
import { PiggyBankFill, CreditCardFill, PersonPlusFill, CashStack } from 'react-bootstrap-icons';

const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042', '#AF19FF'];

export default function ReportingPage() {
  const { transactions, customers } = usePos();

  const analyticsData = useMemo(() => {
    const totalRevenue = transactions.reduce((acc, t) => acc + t.total, 0);
    const totalSales = transactions.length;
    const averageSale = totalSales > 0 ? totalRevenue / totalSales : 0;
    
    // Sales over the last 7 days
    const last7Days = Array.from({ length: 7 }, (_, i) => subDays(new Date(), i)).reverse();
    const salesByDay = last7Days.map(day => {
      const dayStart = startOfDay(day);
      const dayEnd = endOfDay(day);
      const dayTransactions = transactions.filter(t => isWithinInterval(parseISO(t.timestamp), { start: dayStart, end: dayEnd }));
      const dailyRevenue = dayTransactions.reduce((acc, t) => acc + t.total, 0);
      return {
        date: format(day, 'MMM d'),
        revenue: dailyRevenue,
      };
    });

    // Top selling products
    const productSales = transactions
      .flatMap(t => t.tab.cartItems)
      .reduce((acc, item) => {
        acc[item.name] = (acc[item.name] || 0) + item.quantity;
        return acc;
      }, {} as { [key: string]: number });

    const topProducts = Object.entries(productSales)
      .sort((a, b) => b[1] - a[1])
      .slice(0, 5)
      .map(([name, quantity]) => ({ name, quantity }));

    const recentTransactions = [...transactions].sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()).slice(0, 10);

    return {
      totalRevenue,
      totalSales,
      averageSale,
      totalCustomers: customers.length,
      salesByDay,
      topProducts,
      recentTransactions,
    };
  }, [transactions, customers]);

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Revenue</CardTitle>
            <PiggyBankFill className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-primary">${analyticsData.totalRevenue.toFixed(2)}</div>
            <p className="text-xs text-muted-foreground">Lifetime revenue</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Sales</CardTitle>
            <CreditCardFill className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-primary">+{analyticsData.totalSales}</div>
            <p className="text-xs text-muted-foreground">Lifetime transactions</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Average Sale Value</CardTitle>
            <CashStack className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-primary">${analyticsData.averageSale.toFixed(2)}</div>
            <p className="text-xs text-muted-foreground">Average per transaction</p>
          </CardContent>
        </Card>
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Total Customers</CardTitle>
            <PersonPlusFill className="h-4 w-4 text-primary" />
          </CardHeader>
          <CardContent>
            <div className="text-2xl font-bold text-primary">{analyticsData.totalCustomers}</div>
            <p className="text-xs text-muted-foreground">Total customers in system</p>
          </CardContent>
        </Card>
      </div>
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
        <Card className="lg:col-span-4">
            <CardHeader>
                <CardTitle>Sales Overview</CardTitle>
                <CardDescription>Revenue from the last 7 days.</CardDescription>
            </CardHeader>
            <CardContent className="pl-2">
                <ResponsiveContainer width="100%" height={350}>
                    <BarChart data={analyticsData.salesByDay}>
                        <CartesianGrid strokeDasharray="3 3" />
                        <XAxis dataKey="date" />
                        <YAxis tickFormatter={(value) => `$${value}`} />
                        <Tooltip formatter={(value: number) => `$${value.toFixed(2)}`} />
                        <Bar dataKey="revenue" fill="hsl(var(--primary))" />
                    </BarChart>
                </ResponsiveContainer>
            </CardContent>
        </Card>
         <Card className="lg:col-span-3">
            <CardHeader>
                <CardTitle>Top Selling Products</CardTitle>
                <CardDescription>Top 5 products by quantity sold.</CardDescription>
            </CardHeader>
            <CardContent>
                 <ResponsiveContainer width="100%" height={350}>
                    <PieChart>
                        <Pie
                            data={analyticsData.topProducts}
                            cx="50%"
                            cy="50%"
                            labelLine={false}
                            outerRadius={120}
                            fill="#8884d8"
                            dataKey="quantity"
                            nameKey="name"
                            label={({ name, percent }) => `${name} ${(percent * 100).toFixed(0)}%`}
                        >
                            {analyticsData.topProducts.map((entry, index) => (
                                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
                            ))}
                        </Pie>
                        <Tooltip formatter={(value, name) => [`${value} units`, name]}/>
                        <Legend />
                    </PieChart>
                </ResponsiveContainer>
            </CardContent>
        </Card>
      </div>
      <Card>
        <CardHeader>
          <CardTitle>Recent Transactions</CardTitle>
          <CardDescription>The 10 most recent transactions.</CardDescription>
        </CardHeader>
        <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Customer</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead className="text-right">Amount</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {analyticsData.recentTransactions.map(transaction => (
                  <TableRow key={transaction.id}>
                    <TableCell>
                      <div className="font-medium">{transaction.tab.customer?.name || 'No Customer'}</div>
                    </TableCell>
                    <TableCell>{format(parseISO(transaction.timestamp), 'MM/dd/yyyy hh:mm a')}</TableCell>
                    <TableCell className="text-right">${transaction.total.toFixed(2)}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
             {analyticsData.recentTransactions.length === 0 && (
              <div className="flex h-24 items-center justify-center text-muted-foreground">
                No transactions yet.
              </div>
            )}
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/settings/devices/page.tsx</summary>
        <pre><code>
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';

export default function DevicesPage() {
  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
          <CardTitle>Device Management</CardTitle>
          <CardDescription>
            Manage connected hardware like printers, scanners, and card readers.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex h-48 items-center justify-center rounded-md border-2 border-dashed">
            <p className="text-muted-foreground">Device Management - Coming Soon!</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/settings/integrations/[slug]/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useToast } from '@/hooks/use-toast';
import { kebabCase, startCase } from 'lodash';
import Link from 'next/link';
import { ArrowLeft } from 'lucide-react';
import { useParams } from 'next/navigation';
import { useLocalStorage } from '@/hooks/use-local-storage';
import { IntegrationIcon } from '../page';


export default function IntegrationDetailPage() {
  const params = useParams();
  const slug = Array.isArray(params.slug) ? params.slug[0] : params.slug;
  const [apiKey, setApiKey] = useState('');
  const [secretKey, setSecretKey] = useState('');
  const [connectedIntegrations, setConnectedIntegrations] = useLocalStorage<string[]>('connected-integrations', []);
  const { toast } = useToast();

  const isConnected = connectedIntegrations.includes(slug as string);
  const integrationName = startCase(slug);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!apiKey || !secretKey) {
      toast({
        variant: 'destructive',
        title: 'Missing Information',
        description: 'Please provide both an API Key and a Secret Key.',
      });
      return;
    }
    // Simulate API call to verify and save credentials
    console.log(`Connecting ${integrationName} with API Key: ${apiKey} and Secret Key: ${secretKey}`);
    if (!connectedIntegrations.includes(slug as string)) {
        setConnectedIntegrations([...connectedIntegrations, slug as string]);
    }
    toast({
      title: 'Connection Successful',
      description: `Successfully connected to ${integrationName}.`,
    });
  };

  const handleDisconnect = () => {
    setApiKey('');
    setSecretKey('');
    setConnectedIntegrations(connectedIntegrations.filter(s => s !== slug));
    toast({
      title: 'Disconnected',
      description: `You have disconnected from ${integrationName}.`,
    });
  }

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
       <div className="mb-4">
        <Link href="/settings/integrations" passHref>
          <Button variant="outline" size="sm">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Integrations
          </Button>
        </Link>
      </div>
      <Card className="max-w-2xl mx-auto">
        <CardHeader>
          <div className="flex items-center gap-4">
            <IntegrationIcon name={integrationName} />
            <div>
                <CardTitle>Configure {integrationName}</CardTitle>
                <CardDescription>
                {isConnected ? `You are currently connected to ${integrationName}.` : `Enter your credentials to connect to ${integrationName}.`}
                </CardDescription>
            </div>
          </div>
        </CardHeader>
        <CardContent>
          {isConnected ? (
             <div className="space-y-4 text-center">
                <p className="text-lg font-medium text-primary">Successfully Connected</p>
                <p className="text-muted-foreground">Your {integrationName} account is now integrated.</p>
                <Button variant="destructive" onClick={handleDisconnect}>
                    Disconnect
                </Button>
            </div>
          ) : (
            <form onSubmit={handleSubmit} className="space-y-4">
                <div className="space-y-2">
                <Label htmlFor="api-key">API Key</Label>
                <Input
                    id="api-key"
                    type="password"
                    value={apiKey}
                    onChange={(e) => setApiKey(e.target.value)}
                    placeholder="Enter your API Key"
                />
                </div>
                <div className="space-y-2">
                <Label htmlFor="secret-key">Secret Key</Label>
                <Input
                    id="secret-key"
                    type="password"
                    value={secretKey}
                    onChange={(e) => setSecretKey(e.target.value)}
                    placeholder="Enter your Secret Key"
                />
                </div>
                <Button type="submit" className="w-full">
                Submit and Connect
                </Button>
            </form>
          )}
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/settings/integrations/page.tsx</summary>
        <pre><code>
'use client';

import React from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { ArrowRight } from 'lucide-react';
import Link from 'next/link';
import { kebabCase, startCase } from 'lodash';
import { useLocalStorage } from '@/hooks/use-local-storage';
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';

const allIntegrationsList = {
  payments: [
    { name: 'Stripe', description: 'Accept credit card payments.' },
    { name: 'Square', description: 'POS and payment processing solution.' },
    { name: 'PayPal', description: 'Offer PayPal as a checkout option.' },
    { name: 'Venmo', description: 'Accept payments via Venmo.' },
  ],
  accounting: [
    { name: 'QuickBooks', description: 'Automatically sync sales and taxes.' },
    { name: 'Xero', description: 'Connect your sales data to Xero.' },
    { name: 'Wave', description: 'A popular free accounting alternative.' },
    { name: 'FreshBooks', description: 'Ideal for invoicing and service businesses.' },
  ],
  businessManagement: [
    { name: 'Contractor Plus', description: 'Sync jobs and estimates.' },
    { name: 'M&M POS', description: 'Sync product inventory.' },
    { name: 'Odoo', description: 'Integrate with an all-in-one business suite.' },
    { name: 'Sales Rabbit', description: 'Field sales and lead management tool.' },
    { name: 'HubSpot', description: 'Manage customer relationships with a leading CRM.' },
  ],
  ecommerce: [
      { name: 'Shopify', description: 'Sync inventory with your online store.' },
      { name: 'WooCommerce', description: 'Connect your WordPress e-commerce site.' },
      { name: 'Wix', description: 'Sync with your Wix-based online store.' },
  ],
  shipping: [
    { name: 'UPS', description: 'Create shipping labels and track packages.' },
    { name: 'USPS', description: 'Integrate with United States Postal Service.' },
    { name: 'FedEx', description: 'Manage shipments and get tracking info.' },
    { name: 'Uline', description: 'Order shipping supplies and materials.' },
  ],
  vendors: [
    { name: "Lowe's", description: "Purchase materials and supplies." },
    { name: "The Home Depot", description: "Shop for tools, construction products, and services." },
    { name: "Menards", description: "Home improvement stores located in the Midwestern US." },
    { name: "Harbor Freight", description: "Discount tool and equipment retailer." },
    { name: "Grainger", description: "Industrial supply company for MRO items." },
    { name: "Ferguson", description: "Distributor of plumbing supplies and HVAC products." },
  ],
  communications: [
    { name: 'Ooma Office', description: 'Connect your business phone system.' },
  ],
  marketing: [
      { name: 'Mailchimp', description: 'Add customers to your mailing lists.' },
      { name: 'LoyaltyLion', description: 'Create customer loyalty programs.' },
  ],
  teamManagement: [
      { name: 'Trello', description: 'Create job cards from POS transactions.' },
      { name: 'Slack', description: 'Send sales notifications to your team.' },
  ],
  automation: [
    { name: 'Zapier', description: 'Automate workflows between apps.' },
    { name: 'IFTTT', description: 'Create simple app connections.' },
  ],
  productivity: [
    { name: 'Microsoft', description: 'Integrate with Outlook and Office 365.' },
    { name: 'Google', description: 'Connect with Google Calendar and Drive.' },
  ],
};

export const StripeIcon = () => (
  <svg role="img" viewBox="0 0 48 48" className="h-12 w-12 flex-shrink-0">
    <g>
      <path
        d="M40.811,16.842c0.316-0.316,0.316-0.829,0-1.145l-4.223-4.223c-0.316-0.316-0.829-0.316-1.145,0
        s-0.316,0.829,0,1.145l2.427,2.427H9.274c-0.453,0-0.819,0.366-0.819,0.819s0.366,0.819,0.819,0.819h28.597l-2.427,2.427
        c-0.316,0.316-0.316,0.829,0,1.145c0.316,0.316,0.829,0.316,1.145,0L40.811,16.842z"
        fill="#6772e5"
      ></path>
      <path
        d="M38.384,24.053c-0.316-0.316-0.829-0.316-1.145,0l-2.427,2.427H7.215c-0.453,0-0.819,0.366-0.819,0.819
        c0,0.453,0.366,0.819,0.819,0.819h27.597l-2.427,2.427c-0.316,0.316-0.316,0.829,0,1.145c0.316,0.316,0.829,0.316,1.145,0
        l4.223-4.223C38.7,24.881,38.7,24.369,38.384,24.053z"
        fill="#6772e5"
      ></path>
    </g>
  </svg>
);


export const IntegrationIcon = ({ name }: { name: string }) => {
    switch (kebabCase(name)) {
        case 'stripe':
            return <StripeIcon />;
        default:
            return <div className="h-12 w-12 rounded-full bg-muted flex-shrink-0"></div>;
    }
};

const IntegrationItem = ({ name, description, isConnected }: { name: string; description: string, isConnected: boolean }) => {
  const slug = kebabCase(name);
  return (
    <div className="flex items-center justify-between p-4 border-b last:border-b-0">
      <div className="flex items-center gap-4">
        <IntegrationIcon name={name} />
        <div>
          <p className="font-medium">{name}</p>
          <p className="text-sm text-muted-foreground">{description}</p>
        </div>
      </div>
      <Link href={`/settings/integrations/${slug}`} passHref>
        <Button variant="outline" size="sm">
          {isConnected ? 'Manage' : 'Connect'} <ArrowRight className="ml-2 h-4 w-4" />
        </Button>
      </Link>
    </div>
  );
};

const IntegrationCategory = ({ title, description, items, connectedSlugs }: { title: string, description: string, items: {name: string, description: string}[], connectedSlugs: string[] }) => {
  if (items.length === 0) return null;
  return (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="p-0">
        {items.map(item => <IntegrationItem key={item.name} {...item} isConnected={connectedSlugs.includes(kebabCase(item.name))} />)}
      </CardContent>
    </Card>
  );
};


export default function IntegrationsPage() {
  const [connectedIntegrations] = useLocalStorage<string[]>('connected-integrations', []);

  const filterIntegrations = (connected: boolean) => {
    const result: typeof allIntegrationsList = {} as any;
    for (const category in allIntegrationsList) {
      const key = category as keyof typeof allIntegrationsList;
      const filtered = allIntegrationsList[key].filter(item => {
        const slug = kebabCase(item.name);
        return connected ? connectedIntegrations.includes(slug) : !connectedIntegrations.includes(slug);
      });
      if (filtered.length > 0) {
        result[key] = filtered;
      }
    }
    return result;
  };

  const available = filterIntegrations(false);
  const connected = filterIntegrations(true);

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <div className="space-y-1.5 mb-6">
        <h1 className="text-2xl font-bold tracking-tight">Integrations Hub</h1>
        <p className="text-muted-foreground">
          Connect your POS to other services to streamline your workflow.
        </p>
      </div>
      <Tabs defaultValue="available">
        <TabsList className="mb-4">
            <TabsTrigger value="available">Available Integrations</TabsTrigger>
            <TabsTrigger value="connected">Connected Integrations ({connectedIntegrations.length})</TabsTrigger>
        </TabsList>
        <TabsContent value="available">
            <div className="space-y-8">
                {Object.entries(available).map(([category, items]) => (
                    <IntegrationCategory
                        key={category}
                        title={startCase(category)}
                        description={`Connect your POS to ${startCase(category)} services.`}
                        items={items}
                        connectedSlugs={connectedIntegrations}
                    />
                ))}
            </div>
        </TabsContent>
         <TabsContent value="connected">
            <div className="space-y-8">
                {Object.keys(connected).length > 0 ? Object.entries(connected).map(([category, items]) => (
                    <IntegrationCategory
                        key={category}
                        title={startCase(category)}
                        description={`Manage your connected ${startCase(category)} services.`}
                        items={items}
                        connectedSlugs={connectedIntegrations}
                    />
                )) : (
                    <Card>
                        <CardContent className="p-6 text-center text-muted-foreground">
                            You have no connected integrations yet.
                        </CardContent>
                    </Card>
                )}
            </div>
        </TabsContent>
      </Tabs>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/settings/my-hr/page.tsx</summary>
        <pre><code>
'use client';

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

export default function MyHrPage() {

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
          <CardTitle>My Records</CardTitle>
          <CardDescription>
            Manage your personal employment details and documents.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex h-48 items-center justify-center rounded-md border-2 border-dashed">
            <p className="text-muted-foreground">My HR Records - Coming Soon!</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/settings/payments/processors/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { PlusCircle, PencilFill, TrashFill, CheckCircleFill, XCircleFill } from 'react-bootstrap-icons';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"
import { ProcessorDialog } from '@/components/settings/ProcessorDialog';
import type { PaymentProcessor } from '@/lib/types';
import { useLocalStorage } from '@/hooks/use-local-storage';

const initialProcessors: PaymentProcessor[] = [
  { id: 'proc_1', name: 'Square', status: 'active', type: 'Card Present', posEnabled: true },
  { id: 'proc_2', name: 'Stripe', status: 'inactive', type: 'Card Not Present', posEnabled: false },
  { id: 'proc_3', name: 'PayPal', status: 'active', type: 'Online', posEnabled: true },
];

export default function ManageProcessorsPage() {
  const [processors, setProcessors] = useLocalStorage<PaymentProcessor[]>('pos-payment-processors', initialProcessors);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [editingProcessor, setEditingProcessor] = useState<PaymentProcessor | null>(null);

  const handleAddNew = () => {
    setEditingProcessor(null);
    setIsDialogOpen(true);
  };

  const handleEdit = (processor: PaymentProcessor) => {
    setEditingProcessor(processor);
    setIsDialogOpen(true);
  };

  const handleDelete = (processorId: string) => {
    setProcessors(prev => prev.filter(p => p.id !== processorId));
  };

  const handleSave = (processorData: Omit<PaymentProcessor, 'id'>) => {
    if (editingProcessor) {
      // Update existing processor
      setProcessors(prev => prev.map(p => p.id === editingProcessor.id ? { id: p.id, ...processorData } : p));
    } else {
      // Add new processor
      const newProcessor: PaymentProcessor = {
        id: `proc_${Date.now()}`,
        ...processorData,
      };
      setProcessors(prev => [...prev, newProcessor]);
    }
  };


  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <div>
            <CardTitle>Manage Payment Processors</CardTitle>
            <CardDescription>Add, edit, and manage your payment processor integrations.</CardDescription>
          </div>
          <Button onClick={handleAddNew}>
            <PlusCircle className="mr-2 h-4 w-4" />
            Add New Processor
          </Button>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Processor Name</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Type</TableHead>
                <TableHead>POS Enabled</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {processors.map(processor => (
                <TableRow key={processor.id}>
                  <TableCell className="font-medium">{processor.name}</TableCell>
                  <TableCell>
                    <Badge variant={processor.status === 'active' ? 'default' : 'secondary'} className={processor.status === 'active' ? 'bg-green-500' : ''}>
                      {processor.status}
                    </Badge>
                  </TableCell>
                  <TableCell>{processor.type}</TableCell>
                   <TableCell>
                    {processor.posEnabled ? (
                      <CheckCircleFill className="h-5 w-5 text-green-500" />
                    ) : (
                      <XCircleFill className="h-5 w-5 text-muted-foreground" />
                    )}
                  </TableCell>
                  <TableCell className="text-right">
                    <div className="flex justify-end gap-2">
                      <Button variant="ghost" size="icon" onClick={() => handleEdit(processor)}>
                        <PencilFill className="h-4 w-4" />
                      </Button>
                       <AlertDialog>
                        <AlertDialogTrigger asChild>
                           <Button variant="ghost" size="icon">
                            <TrashFill className="h-4 w-4" />
                          </Button>
                        </AlertDialogTrigger>
                        <AlertDialogContent>
                          <AlertDialogHeader>
                            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
                            <AlertDialogDescription>
                              This action cannot be undone. This will permanently delete the processor configuration.
                            </AlertDialogDescription>
                          </AlertDialogHeader>
                          <AlertDialogFooter>
                            <AlertDialogCancel>Cancel</AlertDialogCancel>
                            <AlertDialogAction onClick={() => handleDelete(processor.id)}>
                              Delete
                            </AlertDialogAction>
                          </AlertDialogFooter>
                        </AlertDialogContent>
                      </AlertDialog>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          {processors.length === 0 && (
            <div className="flex h-24 items-center justify-center text-muted-foreground">
              No payment processors configured.
            </div>
          )}
        </CardContent>
      </Card>

      <ProcessorDialog
        isOpen={isDialogOpen}
        onOpenChange={setIsDialogOpen}
        processor={editingProcessor}
        onSave={handleSave}
      />
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/settings/payments/terminals/page.tsx</summary>
        <pre><code>
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';

export default function TerminalDevicesPage() {
  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
          <CardTitle>Terminal Devices</CardTitle>
          <CardDescription>
            Manage and configure your connected payment terminal devices.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex h-48 items-center justify-center rounded-md border-2 border-dashed">
            <p className="text-muted-foreground">Terminal Devices - Coming Soon!</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/settings/payments/types/page.tsx</summary>
        <pre><code>
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';

export default function PaymentTypesPage() {
  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
          <CardTitle>Payment Types</CardTitle>
          <CardDescription>
            Configure accepted payment methods like cash, card, check, and gift cards.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex h-48 items-center justify-center rounded-md border-2 border-dashed">
            <p className="text-muted-foreground">Payment Types - Coming Soon!</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/settings/printing/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { useLocalStorage } from '@/hooks/use-local-storage';
import { Receipt } from '@/components/pos/Receipt';
import type { Transaction } from '@/lib/types';
import { useToast } from '@/hooks/use-toast';

type PrintBehavior = 'preview' | 'immediate';

interface PrintSettings {
  behavior: PrintBehavior;
  defaultPrinter: string;
  autoPrintCompanyCopy: boolean;
}

interface ReceiptSettings {
  showLogo: boolean;
  showCustomerPhone: boolean;
  showFooterMessage: boolean;
}

const mockPrinters = [
  { id: 'none', name: 'None (Use System Default)' },
  { id: 'terminal-1', name: 'Integrated Terminal Printer (TM-T88VI)' },
  { id: 'kitchen', name: 'Kitchen Network Printer (Epson U220B)' },
  { id: 'office', name: 'Office Laserjet (HP M404n)' },
];

const mockTransaction: Transaction = {
  id: 'preview-trans-123',
  tab: {
    id: 'preview-tab-123',
    name: 'Preview Order',
    customer: { id: 'cust-001', name: 'John Doe', phone: '555-123-4567', email: 'john@email.com' },
    jobNumber: 'JOB-PREV',
    cartItems: [
      { id: 'item-1', name: 'Hourly Labor', price: 85.00, quantity: 2, category: 'Services', stock: Infinity, imageUrl: '' },
      { id: 'item-2', name: '1/2" Copper Pipe, 10ft', price: 24.50, quantity: 1, category: 'Plumbing', stock: 1, imageUrl: '' },
    ],
    discount: { type: 'fixed', value: 0 },
  },
  subtotal: 194.50,
  tax: 15.56,
  discount: 0,
  total: 210.06,
  paymentMethod: 'Card',
  tendered: 210.06,
  change: 0,
  timestamp: new Date().toISOString(),
  status: 'completed',
};

export default function PrintingSettingsPage() {
  const [savedPrintSettings, setSavedPrintSettings] = useLocalStorage<PrintSettings>('pos-print-settings', {
    behavior: 'preview',
    defaultPrinter: 'none',
    autoPrintCompanyCopy: true,
  });

  const [savedReceiptSettings, setSavedReceiptSettings] = useLocalStorage<ReceiptSettings>('pos-receipt-settings', {
    showLogo: true,
    showCustomerPhone: true,
    showFooterMessage: true,
  });
  
  const [localPrintSettings, setLocalPrintSettings] = useState<PrintSettings>(savedPrintSettings);
  const [localReceiptSettings, setLocalReceiptSettings] = useState<ReceiptSettings>(savedReceiptSettings);
  const { toast } = useToast();

  useEffect(() => {
    setLocalPrintSettings(savedPrintSettings);
    setLocalReceiptSettings(savedReceiptSettings);
  }, [savedPrintSettings, savedReceiptSettings]);
  
  const handleSave = () => {
    setSavedPrintSettings(localPrintSettings);
    setSavedReceiptSettings(localReceiptSettings);
    toast({
        title: "Settings Saved",
        description: "Your printing and receipt preferences have been updated."
    });
  }

  const handleCancel = () => {
    setLocalPrintSettings(savedPrintSettings);
    setLocalReceiptSettings(savedReceiptSettings);
  }

  const handlePrintSettingChange = (key: keyof PrintSettings, value: any) => {
    setLocalPrintSettings(prev => ({ ...prev, [key]: value }));
  };
  
  const handleReceiptSettingChange = (key: keyof ReceiptSettings, value: any) => {
    setLocalReceiptSettings(prev => ({ ...prev, [key]: value }));
  }
  
  const hasChanges = JSON.stringify(localPrintSettings) !== JSON.stringify(savedPrintSettings) || 
                     JSON.stringify(localReceiptSettings) !== JSON.stringify(savedReceiptSettings);

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div className="lg:col-span-2 space-y-4">
          <Card>
            <CardHeader>
              <CardTitle>Printing Settings</CardTitle>
              <CardDescription>Configure default printing behavior for receipts and invoices.</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center justify-between rounded-lg border p-4">
                <div>
                  <Label htmlFor="behavior" className="font-semibold">Default Print Behavior</Label>
                  <p className="text-xs text-muted-foreground">
                    Choose whether to show a preview or print immediately.
                  </p>
                </div>
                <Select
                  value={localPrintSettings.behavior}
                  onValueChange={(value: PrintBehavior) => handlePrintSettingChange('behavior', value)}
                >
                  <SelectTrigger className="w-[220px]">
                    <SelectValue placeholder="Select behavior" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="preview">Always Show Print Preview</SelectItem>
                    <SelectItem value="immediate">Print Immediately to Default</SelectItem>
                  </SelectContent>
                </Select>
              </div>

               <div className="flex items-center justify-between rounded-lg border p-4">
                <div>
                  <Label htmlFor="defaultPrinter" className="font-semibold">Default Printer/Terminal</Label>
                   <p className="text-xs text-muted-foreground">
                    Select the default printer for immediate printing.
                  </p>
                </div>
                <Select
                  value={localPrintSettings.defaultPrinter}
                  onValueChange={(value: string) => handlePrintSettingChange('defaultPrinter', value)}
                >
                  <SelectTrigger className="w-[220px]">
                    <SelectValue placeholder="Select a printer" />
                  </SelectTrigger>
                  <SelectContent>
                    {mockPrinters.map(printer => (
                       <SelectItem key={printer.id} value={printer.id}>{printer.name}</SelectItem>
                    ))}
                  </SelectContent>
                </Select>
              </div>

              <div className="flex items-center justify-between rounded-lg border p-4">
                <div>
                  <Label htmlFor="auto-print-copy" className="font-semibold">Auto-Print Company Copy</Label>
                   <p className="text-xs text-muted-foreground">
                    Automatically print a second copy of every receipt for your records.
                  </p>
                </div>
                <Switch
                  id="auto-print-copy"
                  checked={localPrintSettings.autoPrintCompanyCopy}
                  onCheckedChange={(checked) => handlePrintSettingChange('autoPrintCompanyCopy', checked)}
                />
              </div>

            </CardContent>
          </Card>
           <Card>
                <CardHeader>
                    <CardTitle>Receipt Customization</CardTitle>
                    <CardDescription>Configure the information that appears on your receipts.</CardDescription>
                </CardHeader>
                <CardContent>
                    <div className="space-y-4">
                        <div className="flex items-center justify-between rounded-lg border p-4">
                             <div>
                                <Label>Show Company Logo</Label>
                                <p className="text-xs text-muted-foreground">Display your logo at the top of the receipt.</p>
                             </div>
                            <Switch 
                                checked={localReceiptSettings.showLogo}
                                onCheckedChange={(checked) => handleReceiptSettingChange('showLogo', checked)}
                            />
                        </div>
                        <div className="flex items-center justify-between rounded-lg border p-4">
                             <div>
                                <Label>Show Customer Phone Number</Label>
                                <p className="text-xs text-muted-foreground">Include the customer's phone number.</p>
                             </div>
                            <Switch 
                                checked={localReceiptSettings.showCustomerPhone}
                                onCheckedChange={(checked) => handleReceiptSettingChange('showCustomerPhone', checked)}
                            />
                        </div>
                        <div className="flex items-center justify-between rounded-lg border p-4">
                             <div>
                                <Label>Include Footer Message</Label>
                                <p className="text-xs text-muted-foreground">Add a thank you message or return policy.</p>
                            </div>
                            <Switch 
                                checked={localReceiptSettings.showFooterMessage}
                                onCheckedChange={(checked) => handleReceiptSettingChange('showFooterMessage', checked)}
                            />
                        </div>
                    </div>
                </CardContent>
            </Card>
             {hasChanges && (
                <div className="flex justify-end gap-2">
                    <Button variant="outline" onClick={handleCancel}>Cancel</Button>
                    <Button onClick={handleSave}>Save Changes</Button>
                </div>
             )}
        </div>

        <div>
          <Card>
            <CardHeader>
              <CardTitle>Receipt Preview</CardTitle>
              <CardDescription>This is how your receipt will look with the current settings.</CardDescription>
            </CardHeader>
            <CardContent>
                <div className="p-2 border rounded-md bg-white">
                    <Receipt transaction={mockTransaction} settings={localReceiptSettings} />
                </div>
                <Button className="w-full mt-4" onClick={() => window.print()}>Test Print</Button>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/settings/profile/page.tsx</summary>
        <pre><code>
'use client';

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


export default function UserProfilePage() {

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
          <CardTitle>User Profile</CardTitle>
          <CardDescription>
            Manage your personal information and account security.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex h-48 items-center justify-center rounded-md border-2 border-dashed">
            <p className="text-muted-foreground">User Profile Management - Coming Soon!</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/settings/store/page.tsx</summary>
        <pre><code>
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';

export default function StoreInfoPage() {
  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
          <CardTitle>Store Information</CardTitle>
          <CardDescription>
            Manage your store's name, address, contact information, and hours.
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex h-48 items-center justify-center rounded-md border-2 border-dashed">
            <p className="text-muted-foreground">Store Information - Coming Soon!</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/tasks/page.tsx</summary>
        <pre><code>
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Plus } from 'lucide-react';

export default function TasksPage() {
  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
            <div>
                <CardTitle>Tasks</CardTitle>
                <CardDescription>
                    Manage your tasks and to-do items.
                </CardDescription>
            </div>
            <div>
                <Button className="mr-2">
                    <Plus className="mr-2 h-4 w-4" /> New Item
                </Button>
                <Button variant="outline">
                    Print
                </Button>
            </div>
        </CardHeader>
        <CardContent>
          <div className="flex h-96 items-center justify-center rounded-md border-2 border-dashed">
            <p className="text-muted-foreground">Tasks - Coming Soon!</p>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/time-clock/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState, useMemo } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
import { usePos } from '@/contexts/PosContext';
import { format, formatDistanceStrict, parseISO, startOfWeek, endOfWeek, startOfMonth, endOfMonth, isWithinInterval, subDays } from 'date-fns';
import { ClockFill, CupHotFill, BoxArrowRight, Search, SendFill, FunnelFill, Info, CheckCircleFill, ArrowReturnRight, CalendarFill } from 'react-bootstrap-icons';
import { TimeEditRequestDialog } from '@/components/time-clock/TimeEditRequestDialog';
import type { TimeClockEntry } from '@/lib/types';
import { Checkbox } from '@/components/ui/checkbox';
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuCheckboxItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
} from "@/components/ui/dropdown-menu"
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from "@/components/ui/tooltip"
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { Calendar } from '@/components/ui/calendar';
import type { DateRange } from 'react-day-picker';


type FilterType = 'week' | 'month' | 'custom';

export default function TimeClockPage() {
  const { 
    timeClockEntries, 
    isClockedIn, 
    isOnBreak, 
    shiftDuration, 
    toggleClock,
    startBreak,
    endBreak,
  } = usePos();
  const [searchQuery, setSearchQuery] = useState('');
  const [selectedEntries, setSelectedEntries] = useState<TimeClockEntry[]>([]);
  const [isRequestDialogOpen, setIsRequestDialogOpen] = useState(false);
  const [visibleColumns, setVisibleColumns] = useState({
    status: true,
    adminNotes: true,
  });
  const [filterType, setFilterType] = useState<FilterType>('week');
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: startOfWeek(new Date()),
    to: endOfWeek(new Date()),
  });
  const [currentPage, setCurrentPage] = useState(1);
  const ITEMS_PER_PAGE = 7; // Number of days to show per page

  const handleRequestEdit = () => {
    if (selectedEntries.length > 0) {
      setIsRequestDialogOpen(true);
    }
  };

  const userEntries = useMemo(() => {
    // In a real app with auth, you would filter by user ID.
    // For now, we show all entries.
    return timeClockEntries
      .sort((a, b) => new Date(b.clockInTime).getTime() - new Date(a.clockInTime).getTime());
  }, [timeClockEntries]);

  const filteredEntries = useMemo(() => {
    let entries = userEntries;
    if (searchQuery) {
        entries = entries.filter(entry => 
            format(parseISO(entry.clockInTime), 'MM/dd/yyyy hh:mm a').includes(searchQuery)
        );
    } else if (dateRange?.from) {
        entries = entries.filter(entry => 
            isWithinInterval(parseISO(entry.clockInTime), {
                start: dateRange.from!,
                end: dateRange.to || dateRange.from!,
            })
        );
    }
    return entries;
  }, [userEntries, searchQuery, dateRange]);
  
  const groupedEntries = useMemo(() => {
    return filteredEntries.reduce((acc, entry) => {
        const dateKey = format(parseISO(entry.clockInTime), 'yyyy-MM-dd');
        if (!acc[dateKey]) {
            acc[dateKey] = [];
        }
        acc[dateKey].push(entry);
        return acc;
    }, {} as Record<string, TimeClockEntry[]>);
  }, [filteredEntries]);

  const sortedGroupKeys = Object.keys(groupedEntries).sort((a, b) => b.localeCompare(a));
  
  const paginatedGroupKeys = useMemo(() => {
    const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
    const endIndex = startIndex + ITEMS_PER_PAGE;
    return sortedGroupKeys.slice(startIndex, endIndex);
  }, [sortedGroupKeys, currentPage]);
  
  const totalPages = Math.ceil(sortedGroupKeys.length / ITEMS_PER_PAGE);


  const handleFilterChange = (type: FilterType) => {
    setFilterType(type);
    setCurrentPage(1);
    setSearchQuery('');
    if (type === 'week') {
        setDateRange({ from: startOfWeek(new Date()), to: endOfWeek(new Date()) });
    } else if (type === 'month') {
        setDateRange({ from: startOfMonth(new Date()), to: endOfMonth(new Date()) });
    } else {
        setDateRange({ from: subDays(new Date(), 7), to: new Date() });
    }
  };


  const currentEntry = userEntries.find(e => !e.clockOutTime);

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedEntries(filteredEntries.filter(e => !e.editRequest || e.editRequest.status !== 'pending'));
    } else {
      setSelectedEntries([]);
    }
  };

  const handleSelectEntry = (entry: TimeClockEntry, checked: boolean) => {
    if (checked) {
      setSelectedEntries(prev => [...prev, entry]);
    } else {
      setSelectedEntries(prev => prev.filter(e => e.id !== entry.id));
    }
  };

  const getStatusIcon = (status?: 'pending' | 'approved' | 'denied') => {
    switch(status) {
      case 'pending': return <CheckCircleFill className="h-5 w-5 text-yellow-500" />;
      case 'approved': return <CheckCircleFill className="h-5 w-5 text-green-500" />;
      case 'denied': return <CheckCircleFill className="h-5 w-5 text-red-500" />;
      default: return <CheckCircleFill className="h-5 w-5 text-green-500" />;
    }
  }

  const formatDuration = (startTime: string, endTime: string | null): string => {
    if (!endTime) return '00:00:00';
    
    const start = parseISO(startTime);
    const end = parseISO(endTime);
    const diff = end.getTime() - start.getTime();

    if (diff < 0) return '00:00:00';

    const hours = Math.floor(diff / (1000 * 60 * 60));
    const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
    const seconds = Math.floor((diff % (1000 * 60)) / 1000);

    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  };

  const isAllSelected = selectedEntries.length > 0 && selectedEntries.length === filteredEntries.filter(e => !e.editRequest || e.editRequest.status !== 'pending').length;

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <div className="grid gap-4 md:grid-cols-3">
        <Card>
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Your Status</CardTitle>
            <ClockFill className={`h-4 w-4 ${isClockedIn ? 'text-primary' : 'text-muted-foreground'}`} />
          </CardHeader>
          <CardContent>
            {isClockedIn ? (
              <>
                <div className="text-2xl font-bold text-primary">Clocked In</div>
                <p className="text-xs text-muted-foreground">
                  {currentEntry?.clockInTime ? `Shift started ${formatDistanceStrict(new Date(), parseISO(currentEntry.clockInTime))} ago` : ''}
                </p>
              </>
            ) : (
              <>
                <div className="text-2xl font-bold">Clocked Out</div>
                <p className="text-xs text-muted-foreground">You are not currently on the clock.</p>
              </>
            )}
          </CardContent>
        </Card>
        <Card className="md:col-span-2">
          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
            <CardTitle className="text-sm font-medium">Shift Duration</CardTitle>
            <span className="text-sm font-bold">{shiftDuration}</span>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col gap-4 sm:flex-row">
              {isClockedIn ? (
                 <Button onClick={toggleClock} variant="destructive" className="flex-1">
                  <BoxArrowRight className="mr-2 h-4 w-4" /> Clock Out
                </Button>
              ) : (
                <Button onClick={toggleClock} className="flex-1">
                  <ClockFill className="mr-2 h-4 w-4" /> Clock In
                </Button>
              )}

              {isOnBreak ? (
                <Button onClick={endBreak} disabled={!isClockedIn} variant="outline" className="flex-1">
                  <CupHotFill className="mr-2 h-4 w-4" /> End Break
                </Button>
              ) : (
                 <Button onClick={startBreak} disabled={!isClockedIn} variant="secondary" className="flex-1">
                  <CupHotFill className="mr-2 h-4 w-4" /> Take a Break
                </Button>
              )}
            </div>
          </CardContent>
        </Card>
      </div>

      <Card>
        <CardHeader className="flex flex-col gap-4">
            <div className="space-y-1.5 mb-4">
                <CardTitle>Time History</CardTitle>
                <CardDescription>Review recent time entries, select entries to request changes, and view all time entries.</CardDescription>
            </div>
             <div className="flex flex-col gap-4">
                <div className="flex items-center gap-2">
                    <Button variant={filterType === 'week' ? 'default' : 'outline'} size="sm" onClick={() => handleFilterChange('week')}>This Week</Button>
                    <Button variant={filterType === 'month' ? 'default' : 'outline'} size="sm" onClick={() => handleFilterChange('month')}>This Month</Button>
                    <Popover>
                        <PopoverTrigger asChild>
                            <Button variant={filterType === 'custom' ? 'default' : 'outline'} size="sm" onClick={() => setFilterType('custom')}>
                                <CalendarFill className="mr-2 h-4 w-4" />
                                {dateRange?.from ? (
                                    dateRange.to ? (
                                        `${format(dateRange.from, "LLL dd")} - ${format(dateRange.to, "LLL dd, y")}`
                                    ) : (
                                        format(dateRange.from, "LLL dd, y")
                                    )
                                ) : (
                                    <span>Pick a date</span>
                                )}
                            </Button>
                        </PopoverTrigger>
                        <PopoverContent className="w-auto p-0" align="start">
                            <Calendar
                            initialFocus
                            mode="range"
                            defaultMonth={dateRange?.from}
                            selected={dateRange}
                            onSelect={setDateRange}
                            numberOfMonths={2}
                            />
                        </PopoverContent>
                    </Popover>
                    <div className="flex-1" />
                    <DropdownMenu>
                        <DropdownMenuTrigger asChild>
                            <Button variant="outline">
                            <FunnelFill className="mr-2 h-4 w-4" /> View
                            </Button>
                        </DropdownMenuTrigger>
                        <DropdownMenuContent align="end">
                            <DropdownMenuLabel>Toggle Columns</DropdownMenuLabel>
                            <DropdownMenuSeparator />
                            {Object.keys(visibleColumns).map((key) => (
                            <DropdownMenuCheckboxItem
                                key={key}
                                checked={visibleColumns[key as keyof typeof visibleColumns]}
                                onCheckedChange={(checked) =>
                                    setVisibleColumns(prev => ({ ...prev, [key]: checked }))
                                }
                            >
                                {key.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
                            </DropdownMenuCheckboxItem>
                            ))}
                        </DropdownMenuContent>
                    </DropdownMenu>
                </div>
                <div className="relative">
                    <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
                    <Input
                    placeholder="Search by date..."
                    value={searchQuery}
                    onChange={(e) => { setSearchQuery(e.target.value); setCurrentPage(1); }}
                    className="pl-10 max-w-sm"
                    />
                </div>
            </div>
        </CardHeader>
        <CardContent>
          <div className="overflow-x-auto">
            <TooltipProvider>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead className="w-[40px]">
                      <Checkbox
                        checked={isAllSelected}
                        onCheckedChange={(checked) => handleSelectAll(Boolean(checked))}
                        aria-label="Select all"
                      />
                    </TableHead>
                    <TableHead className="whitespace-nowrap">Clock In</TableHead>
                    <TableHead className="whitespace-nowrap">Clock Out</TableHead>
                    <TableHead className="whitespace-nowrap">Total Duration</TableHead>
                    {visibleColumns.status && (
                       <TableHead>
                         <div className="flex items-center gap-1">
                           Status
                           <Tooltip>
                              <TooltipTrigger asChild>
                                <Info className="h-3 w-3 cursor-pointer text-muted-foreground" />
                              </TooltipTrigger>
                              <TooltipContent>
                                <p className="flex items-center gap-2"><CheckCircleFill className="h-4 w-4 text-green-500" /> Approved</p>
                                <p className="flex items-center gap-2"><CheckCircleFill className="h-4 w-4 text-yellow-500" /> Pending</p>
                                <p className="flex items-center gap-2"><CheckCircleFill className="h-4 w-4 text-red-500" /> Denied</p>
                              </TooltipContent>
                            </Tooltip>
                         </div>
                       </TableHead>
                    )}
                    {visibleColumns.adminNotes && <TableHead>Admin Notes</TableHead>}
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {paginatedGroupKeys.length > 0 ? paginatedGroupKeys.map(dateKey => (
                      <React.Fragment key={dateKey}>
                        <TableRow className="bg-muted/50 hover:bg-muted/50">
                            <TableCell colSpan={6} className="py-2">
                                <p className="font-semibold">{format(parseISO(dateKey), 'EEEE, MMMM dd, yyyy')}</p>
                            </TableCell>
                        </TableRow>
                        {groupedEntries[dateKey].map(entry => {
                            const duration = formatDuration(entry.clockInTime, entry.clockOutTime);
                            const isPending = entry.editRequest?.status === 'pending';
                            const isChecked = selectedEntries.some(e => e.id === entry.id);
                            return (
                                <React.Fragment key={entry.id}>
                                <TableRow data-state={isChecked ? "selected" : ""}>
                                    <TableCell>
                                    <Checkbox
                                        checked={isChecked}
                                        onCheckedChange={(checked) => handleSelectEntry(entry, Boolean(checked))}
                                        aria-label={`Select entry ${entry.id}`}
                                        disabled={isPending}
                                    />
                                    </TableCell>
                                    <TableCell className="whitespace-nowrap">
                                    <div>{format(parseISO(entry.clockInTime), 'MM/dd/yy')}</div>
                                    <div className="text-xs text-muted-foreground">{format(parseISO(entry.clockInTime), 'hh:mm a')}</div>
                                    </TableCell>
                                    <TableCell className="whitespace-nowrap">
                                    {entry.clockOutTime ? (
                                        <div>
                                        <div>{format(parseISO(entry.clockOutTime), 'MM/dd/yy')}</div>
                                        <div className="text-xs text-muted-foreground">{format(parseISO(entry.clockOutTime), 'hh:mm a')}</div>
                                        </div>
                                    ) : <Badge variant="secondary">Active</Badge>}
                                    </TableCell>
                                    <TableCell className="whitespace-nowrap font-mono">{duration}</TableCell>
                                    {visibleColumns.status && (
                                    <TableCell>
                                        {getStatusIcon(entry.editRequest?.status)}
                                    </TableCell>
                                    )}
                                    {visibleColumns.adminNotes && <TableCell>
                                    {entry.editRequest?.admin_notes ? (
                                        <Tooltip>
                                            <TooltipTrigger asChild>
                                            <span className="text-sm text-muted-foreground underline cursor-pointer">View</span>
                                            </TooltipTrigger>
                                            <TooltipContent>
                                            <p>{entry.editRequest.admin_notes}</p>
                                            </TooltipContent>
                                        </Tooltip>
                                    ) : '-'}
                                    </TableCell>}
                                </TableRow>
                                {entry.breaks?.map((br, index) => (
                                    <TableRow key={`${entry.id}-break-${index}`} className="bg-background hover:bg-muted/20">
                                        <TableCell></TableCell>
                                        <TableCell colSpan={2} className="py-1">
                                            <div className="flex items-center text-xs text-muted-foreground">
                                                <ArrowReturnRight className="h-3 w-3 mr-2"/>
                                                Break: {format(parseISO(br.startTime), 'h:mm a')} - {br.endTime ? format(parseISO(br.endTime), 'h:mm a') : 'Ongoing'}
                                            </div>
                                        </TableCell>
                                        <TableCell className="font-mono text-xs text-muted-foreground py-1">{formatDuration(br.startTime, br.endTime)}</TableCell>
                                        <TableCell colSpan={2}></TableCell>
                                    </TableRow>
                                ))}
                                </React.Fragment>
                            );
                        })}
                      </React.Fragment>
                  )) : (
                    <TableRow>
                        <TableCell colSpan={6} className="h-24 text-center text-muted-foreground">
                             No time clock entries found for the selected period.
                        </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </TooltipProvider>
          </div>
           <div className="mt-4 flex items-center justify-between">
            <div className="text-sm text-muted-foreground">
                {selectedEntries.length} of {filteredEntries.length} row(s) selected.
            </div>
             <div className="flex items-center gap-2">
                <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.max(1, p-1))} disabled={currentPage === 1}>Previous</Button>
                <span className="text-sm">Page {currentPage} of {totalPages}</span>
                <Button variant="outline" size="sm" onClick={() => setCurrentPage(p => Math.min(totalPages, p+1))} disabled={currentPage === totalPages}>Next</Button>
             </div>
            <Button onClick={handleRequestEdit} disabled={selectedEntries.length === 0}>
                <SendFill className="mr-2 h-4 w-4" /> Request Time Edit ({selectedEntries.length})
            </Button>
          </div>
        </CardContent>
      </Card>
      
      {selectedEntries.length > 0 && (
        <TimeEditRequestDialog 
          isOpen={isRequestDialogOpen}
          onOpenChange={setIsRequestDialogOpen}
          entries={selectedEntries}
          onSuccess={() => setSelectedEntries([])}
        />
      )}
    </div>
  );
}
        </code></pre>
    </details>

    <details>
        <summary>src/app/transactions/page.tsx</summary>
        <pre><code>
'use client';

import React, { useState, useMemo } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
import { Button } from '@/components/ui/button';
import { usePos } from '@/contexts/PosContext';
import { format, parseISO } from 'date-fns';
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from '@/components/ui/dialog';
import { Receipt } from '@/components/pos/Receipt';
import type { Transaction } from '@/lib/types';

export default function TransactionsPage() {
  const { transactions } = usePos();
  const [selectedTransaction, setSelectedTransaction] = useState<Transaction | null>(null);

  const handleViewReceipt = (transaction: Transaction) => {
    setSelectedTransaction(transaction);
  };

  const handleCloseDialog = () => {
    setSelectedTransaction(null);
  };

  const sortedTransactions = useMemo(() => {
    return [...transactions].sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime());
  }, [transactions]);

  return (
    <div className="flex-1 space-y-4 p-4 pt-6 md:p-8">
      <Card>
        <CardHeader>
          <CardTitle>Transaction History</CardTitle>
        </CardHeader>
        <CardContent>
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Customer</TableHead>
                <TableHead>Date</TableHead>
                <TableHead>Payment Method</TableHead>
                <TableHead className="text-right">Total</TableHead>
                <TableHead className="text-right">Actions</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {sortedTransactions.map(transaction => (
                <TableRow key={transaction.id}>
                  <TableCell>{transaction.tab.customer?.name || 'No Customer'}</TableCell>
                  <TableCell>{format(parseISO(transaction.timestamp), 'MM/dd/yyyy hh:mm a')}</TableCell>
                  <TableCell className="capitalize">{transaction.paymentMethod}</TableCell>
                  <TableCell className="text-right">${transaction.total.toFixed(2)}</TableCell>
                  <TableCell className="text-right">
                    <Button variant="outline" size="sm" onClick={() => handleViewReceipt(transaction)}>
                      View Receipt
                    </Button>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
          {sortedTransactions.length === 0 && (
            <div className="flex h-24 items-center justify-center text-muted-foreground">
              No transactions found.
            </div>
          )}
        </CardContent>
      </Card>

      {selectedTransaction && (
        <Dialog open={!!selectedTransaction} onOpenChange={handleCloseDialog}>
          <DialogContent className="sm:max-w-md">
            <DialogHeader>
              <DialogTitle>Receipt</DialogTitle>
            </DialogHeader>
            <Receipt transaction={selectedTransaction} />
            <DialogFooter>
              <Button variant="outline" onClick={handleCloseDialog}>Close</Button>
              <Button onClick={() => window.print()}>Print Receipt</Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      )}
    </div>
  );
}
        </code></pre>
    </details>

    <!-- ... Other components are omitted for brevity but would follow the same pattern ... -->

    <details>
        <summary>tailwind.config.ts</summary>
        <pre><code>
import type {Config} from 'tailwindcss';

export default {
  darkMode: ['class'],
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        body: ['"Poppins"', 'sans-serif'],
        headline: ['"Poppins"', 'sans-serif'],
        cursive: ['"Caveat"', 'cursive'],
      },
      colors: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        card: {
          DEFAULT: 'hsl(var(--card))',
          foreground: 'hsl(var(--card-foreground))',
        },
        popover: {
          DEFAULT: 'hsl(var(--popover))',
          foreground: 'hsl(var(--popover-foreground))',
        },
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
        secondary: {
          DEFAULT: 'hsl(var(--secondary))',
          foreground: 'hsl(var(--secondary-foreground))',
        },
        muted: {
          DEFAULT: 'hsl(var(--muted))',
          foreground: 'hsl(var(--muted-foreground))',
        },
        accent: {
          DEFAULT: 'hsl(var(--accent))',
          foreground: 'hsl(var(--accent-foreground))',
        },
        destructive: {
          DEFAULT: 'hsl(var(--destructive))',
          foreground: 'hsl(var(--destructive-foreground))',
        },
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
        chart: {
          '1': 'hsl(var(--chart-1))',
          '2': 'hsl(var(--chart-2))',
          '3': 'hsl(var(--chart-3))',
          '4': 'hsl(var(--chart-4))',
          '5': 'hsl(var(--chart-5))',
        },
        sidebar: {
          DEFAULT: 'hsl(var(--sidebar-background))',
          foreground: 'hsl(var(--sidebar-foreground))',
          primary: 'hsl(var(--sidebar-primary))',
          'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
          accent: 'hsl(var(--sidebar-accent))',
          'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
          border: 'hsl(var(--sidebar-border))',
          ring: 'hsl(var(--sidebar-ring))',
        },
         'ehg-green': '#06fa2e',
        'ehg-black': '#000000',
        'ehg-main-bg': '#1c1c1c',
        'ehg-charcoal': '#222222',
        'ehg-dark-grey': '#7d7d7d',
        'ehg-white': '#ffffff',
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      keyframes: {
        'accordion-down': {
          from: {
            height: '0',
          },
          to: {
            height: 'var(--radix-accordion-content-height)',
          },
        },
        'accordion-up': {
          from: {
            height: 'var(--radix-accordion-content-height)',
          },
          to: {
            height: '0',
          },
        },
        'shake': {
          '10%, 90%': { transform: 'translate3d(-1px, 0, 0)' },
          '20%, 80%': { transform: 'translate3d(2px, 0, 0)' },
          '30%, 50%, 70%': { transform: 'translate3d(-4px, 0, 0)' },
          '40%, 60%': { transform: 'translate3d(4px, 0, 0)' },
        }
      },
      animation: {
        'accordion-down': 'accordion-down 0.2s ease-out',
        'accordion-up': 'accordion-up 0.2s ease-out',
        'shake': 'shake 0.82s cubic-bezier(.36,.07,.19,.97) both',
      },
    },
  },
  plugins: [require('tailwindcss-animate')],
} satisfies Config;
        </code></pre>
    </details>

    <details>
        <summary>tsconfig.json</summary>
        <pre><code>
{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
        </code></pre>
    </details>

    <details>
        <summary>workspace/.env</summary>
        <pre><code>
</code></pre>
    </details>

</body>
</html>