Okay, building upon the previous task where you added the placeholder 'Edit' and 'Delete' buttons to each habit card in `DailyHabitView.tsx`, we now need to implement the UI for the editing functionality. This task involves creating the **edit form** itself and presenting it within a modal structure using a ShadCN component like `Dialog` or `Sheet`. We'll choose `Dialog` for a focused, centered modal experience. Crucially, this form needs to be **pre-filled with the existing data** of the habit the user wants to edit. We'll break this down into two components for better separation of concerns: 1. `EditHabitForm.tsx`: A Client Component containing the actual form fields and logic for managing form state. 2. `EditHabitDialog.tsx`: A Client Component that sets up the ShadCN `Dialog` and renders the `EditHabitForm` within its content area. It will also handle triggering the dialog. ### 1. Install Necessary ShadCN Components Ensure you have the required ShadCN UI components. If you haven't already, install `Dialog`, `Input`, `Label`, `Select`, and potentially `Textarea`: ```bash npx shadcn-ui@latest add dialog input label select textarea # or yarn/pnpm equivalent ``` ### 2. Create the `EditHabitForm` Component This component renders the form inputs and manages their state. It receives the habit data as a prop to pre-fill the fields. ```typescript // src/components/EditHabitForm.tsx "use client"; import React, { useState, useEffect } from 'react'; import { z } from "zod"; // For potential future validation schema use // Import ShadCN components import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Button } from "@/components/ui/button"; import { Textarea } from "@/components/ui/textarea"; // Use Textarea for description import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select"; // Import Prisma types for the habit prop (ensure path is correct) // You might need to generate types or use a simpler object if Prisma types are complex import type { Habit } from '@prisma/client'; // Adjust if your type name/location differs // Define props for the form interface EditHabitFormProps { habit: Habit; // The habit object to pre-fill the form // We'll add an 'onSubmit' prop later to connect to the Server Action // We might also need a prop to close the dialog on successful submit onFormSubmit?: () => Promise; // Example for later onCancel?: () => void; // Optional: To close dialog from within form } // Define a basic schema for form values (can be expanded later) const formSchema = z.object({ name: z.string().min(1, "Habit name cannot be empty."), description: z.string().optional(), frequency: z.enum(["daily", "weekly"]), // Match your Prisma enum/type }); type FormData = z.infer; /** * EditHabitForm Client Component * * Renders the form fields for editing a habit, pre-filled with existing data. * Manages the form's input state. */ export default function EditHabitForm({ habit, onCancel }: EditHabitFormProps) { // --- State Management --- // Initialize form state with the habit data passed via props const [formData, setFormData] = useState({ name: habit.name, description: habit.description ?? '', // Handle null description frequency: habit.frequency as 'daily' | 'weekly', // Ensure type matches }); const [errors, setErrors] = useState>({}); const [isSubmitting, setIsSubmitting] = useState(false); // For loading state later // --- Input Change Handler --- const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); // Clear errors for the field being edited if (errors[name]) { setErrors(prev => ({ ...prev, [name]: undefined })); } }; // --- Select Change Handler --- const handleFrequencyChange = (value: 'daily' | 'weekly') => { setFormData(prev => ({ ...prev, frequency: value })); if (errors.frequency) { setErrors(prev => ({ ...prev, frequency: undefined })); } }; // --- Form Submission Handler (Placeholder for now) --- const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsSubmitting(true); setErrors({}); // Clear previous errors console.log("Form submitted with data:", formData); console.log("Original Habit ID:", habit.id); // !!! IMPORTANT !!! // In Task 8.3 & 8.4, this function will: // 1. Validate formData using Zod. // 2. Call the `editHabit` Server Action, passing `habit.id` and `formData`. // 3. Handle the response (success/error) from the Server Action. // 4. Show feedback (e.g., toasts). // 5. Potentially call a prop function to close the dialog on success. // Placeholder delay to simulate action await new Promise(resolve => setTimeout(resolve, 1000)); setIsSubmitting(false); // Example: If successful, close the dialog (implementation depends on parent) // if (onFormSubmit) await onFormSubmit(); }; return ( // Connect the form's onSubmit to the handler

{/* Name Field */}

Name {errors.name &&

{errors.name}

}

{/* Description Field */}

{/* items-start for textarea */} {/* Align label better */} Description

{errors.description && <p id="description-error" className="col-span-4 text-sm text-destructive text-right">{errors.description}</p>}
            </div>

{/* Frequency Field */}
            <div className="grid grid-cols-4 items-center gap-4">
                <Label htmlFor="frequency" className="text-right">
                    Frequency
                </Label>
                <Select
                    name="frequency"
                    value={formData.frequency}
                    onValueChange={handleFrequencyChange} // Use specific handler
                    required
                >
                    <SelectTrigger id="frequency" className="col-span-3" aria-invalid={!!errors.frequency}>
                        <SelectValue placeholder="Select frequency" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectItem value="daily">Daily</SelectItem>
                        <SelectItem value="weekly">Weekly</SelectItem>
                        {/* Add other frequencies if your schema supports them */}
                    </SelectContent>
                </Select>
                 {errors.frequency && <p id="frequency-error" className="col-span-4 text-sm text-destructive text-right">{errors.frequency}</p>}
            </div>

{/* Action Buttons within the form (or DialogFooter) */}
            {/* It's often better to place these in DialogFooter for consistency */}
             <div className="flex justify-end gap-2 pt-4">
                 {/* Optional Cancel Button inside form */}
                 {onCancel && (
                     <Button type="button" variant="ghost" onClick={onCancel}>Cancel</Button>
                 )}
                 <Button type="submit" disabled={isSubmitting}>
                     {isSubmitting ? "Saving..." : "Save Changes"}
                 </Button>
             </div>
        </form>
    );
}
```

### 3. Create the `EditHabitDialog` Component

This component sets up the `Dialog` and renders the `EditHabitForm`. It accepts the habit data and the trigger button (`children`) as props.

```typescript
// src/components/EditHabitDialog.tsx

"use client";

import React, { useState } from 'react';

// Import ShadCN Dialog components
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
    DialogFooter, // Import if using footer for buttons
    DialogClose,   // Import for a close button/trigger
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button"; // For footer buttons

// Import the form component
import EditHabitForm from './EditHabitForm';

// Import Prisma type for habit prop
import type { Habit } from '@prisma/client'; // Adjust path if needed

// Define props
interface EditHabitDialogProps {
    habit: Habit;
    children: React.ReactNode; // To wrap the trigger button
}

/**
 * EditHabitDialog Client Component
 *
 * Manages the ShadCN Dialog visibility and renders the EditHabitForm
 * for a specific habit.
 */
export default function EditHabitDialog({ habit, children }: EditHabitDialogProps) {
    // State to control dialog visibility
    const [isOpen, setIsOpen] = useState(false);

// Function to close the dialog (can be passed to EditHabitForm if needed)
    const handleCloseDialog = () => {
        setIsOpen(false);
    };

// Function to handle successful form submission (closes dialog)
    const handleSuccessfulSubmit = async () => {
        // This logic will run *after* the Server Action in EditHabitForm succeeds
        console.log("Edit successful, closing dialog.");
        handleCloseDialog();
    };

return (
        <Dialog open={isOpen} onOpenChange={setIsOpen}>
            {/* The trigger element (e.g., the Edit button) is passed as children */}
            <DialogTrigger asChild>
                {children}
            </DialogTrigger>

{/* The Dialog Content */}
            <DialogContent className="sm:max-w-[480px]"> {/* Adjust width */}
                <DialogHeader>
                    <DialogTitle>Edit Habit</DialogTitle>
                    <DialogDescription>
                        Make changes to your habit '{habit.name}'. Click save when you're done.
                    </DialogDescription>
                </DialogHeader>

{/* Render the form inside the content area */}
                {/* Pass habit data and the close function */}
                <EditHabitForm
                    habit={habit}
                    onCancel={handleCloseDialog} // Pass function to allow form's cancel button to work
                    // onFormSubmit={handleSuccessfulSubmit} // Pass function to close after successful save (will be called by EditHabitForm)
                />

{/* Optional: DialogFooter for buttons (alternative to placing in form) */}
                {/* <DialogFooter>
                     <DialogClose asChild>
                        <Button type="button" variant="secondary">
                            Cancel
                        </Button>
                     </DialogClose>
                    {/* Submit button could potentially trigger form submission from here,
                       but keeping it within the <form> tag is generally better. */}
                {/* </DialogFooter> */}
            </DialogContent>
        </Dialog>
    );
}
```

### 4. Modify `DailyHabitView.tsx` to Use `EditHabitDialog`

Finally, update the main view component to wrap the 'Edit' button with the new `EditHabitDialog`.

```typescript {8,72,74-79}
// src/components/DailyHabitView.tsx

import React from 'react';
import { prisma } from '@/lib/prisma';
import { auth } from '@clerk/nextjs/server';

// Import UI Components
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import HabitCheckbox from './HabitCheckbox';
import HabitHeatmap from './HabitHeatmap';
import { Button } from '@/components/ui/button';
import { Pencil, Trash2 } from 'lucide-react';
// 1. Import the new EditHabitDialog
import EditHabitDialog from './EditHabitDialog'; // Adjust path if necessary

// ... (other imports, helpers, props interface) ...
interface DailyHabitViewProps { selectedDate: Date; }
function getStartOfDayUTC(date: Date): Date { /* ... */ }
function getEndOfDayUTC(date: Date): Date { /* ... */ }

export default async function DailyHabitView({ selectedDate }: DailyHabitViewProps) {
    // ... (Authentication & Data Fetching logic) ...
    let userId: string | null = null; /* ... */
    let habitsWithTodayRecord = []; /* ... */
    try {
        habitsWithTodayRecord = await prisma.habit.findMany({ /* ... query ... */ });
    } catch (error) { /* ... */ }
    if (habitsWithTodayRecord.length === 0) { /* ... */ }

// --- Render Habit List ---
    return (
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mt-4">
            {habitsWithTodayRecord.map((habit) => {
                // Pass the full `habit` object from prisma fetch
                const fullHabit = habit; // Alias for clarity if needed
                const todayRecord = habit.habitRecords?.[0];
                const isCompletedToday = todayRecord?.completed ?? false;

return (
                    <Card key={fullHabit.id} className="flex flex-col">
                        {/* ... CardHeader ... */}
                        <CardContent className="flex-grow flex flex-col justify-between">
                            {/* ... Description ... */}
                            {/* ... Daily Tracking Checkbox ... */}
                            {/* ... Progress Visualization ... */}
                        </CardContent>
                        <CardFooter className="flex justify-end gap-2 pt-4 border-t">
                            {/* 2. Wrap the Edit Button with EditHabitDialog */}
                             <EditHabitDialog habit={fullHabit}>
                                {/* The Button becomes the DialogTrigger via 'asChild' */}
                                <Button
                                    variant="outline"
                                    size="icon"
                                    aria-label={`Edit habit: ${fullHabit.name}`}
                                >
                                    <Pencil className="h-4 w-4" />
                                </Button>
                            </EditHabitDialog>

{/* Delete Button - Placeholder */}
                            <Button
                                variant="destructive"
                                size="icon"
                                aria-label={`Delete habit: ${fullHabit.name}`}
                            >
                                <Trash2 className="h-4 w-4" />
                            </Button>
                        </CardFooter>
                    </Card>
                );
            })}
        </div>
    );
}
```

### Explanation

1.  **`EditHabitForm.tsx`:**
    *   Marked `"use client";`.
    *   Takes the full `habit` object as a prop.
    *   Uses `useState` to hold the current values of the form fields, initialized from `habit.name`, `habit.description`, and `habit.frequency`.
    *   Includes `Input` for name, `Textarea` for description, and `Select` for frequency.
    *   The `handleSubmit` function currently just logs the data; it will be updated later to call the Server Action.
    *   Handles basic input changes (`handleChange`, `handleFrequencyChange`).
2.  **`EditHabitDialog.tsx`:**
    *   Marked `"use client";`.
    *   Takes `habit` and `children` (the trigger button) as props.
    *   Manages the `Dialog`'s open/closed state using `useState`.
    *   Uses `<DialogTrigger asChild>` to make the passed `children` (our Edit button) activate the dialog without needing an extra button element.
    *   Renders `<EditHabitForm habit={habit} ... />` inside the `<DialogContent>`.
    *   Provides functions (`handleCloseDialog`, `handleSuccessfulSubmit`) to manage the dialog state, which can be passed down to the form.
3.  **`DailyHabitView.tsx` Integration:**
    *   Imports `EditHabitDialog`.
    *   In the map loop, it wraps the existing Edit `<Button>` with `<EditHabitDialog habit={fullHabit}>...</EditHabitDialog>`. The `fullHabit` object (containing all fields needed for pre-filling) is passed as the `habit` prop.

Now, when you click the 'Edit' (pencil) button on a habit card, the `EditHabitDialog` should open, displaying the `EditHabitForm` pre-filled with that specific habit's name, description, and frequency. The form is ready to be connected to the update logic.

### Next Steps

With the edit form UI created, presented in a dialog, and correctly pre-filled with existing data, the next step is to create the backend logic to handle the actual update:

3.  **Create a Server Action `editHabit(habitId, formData)` to update habit details using Prisma.**

You will define this new Server Action in `app/actions/habits.ts`, which will take the habit's ID and the updated form data, validate it, and use Prisma to update the corresponding record in the database.

### Further Reading

*   **ShadCN UI `Dialog`:** [https://ui.shadcn.com/docs/components/dialog](https://ui.shadcn.com/docs/components/dialog)
*   **ShadCN UI `Input`:** [https://ui.shadcn.com/docs/components/input](https://ui.shadcn.com/docs/components/input)
*   **ShadCN UI `Textarea`:** [https://ui.shadcn.com/docs/components/textarea](https://ui.shadcn.com/docs/components/textarea)
*   **ShadCN UI `Select`:** [https://ui.shadcn.com/docs/components/select](https://ui.shadcn.com/docs/components/select)
*   **React Forms:** [https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components) (Controlled Components pattern used here)
*   **React `useState` Hook:** [https://react.dev/reference/react/useState](https://react.dev/reference/react/useState)
*   **Prisma Client Types:** [https://www.prisma.io/docs/orm/prisma-client/queries/crud#select-specific-fields](https://www.prisma.io/docs/orm/prisma-client/queries/crud#select-specific-fields) (Getting types like `Habit`)</article></body></html>