# Dashboard Contact Form Implementation Plan

> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.

**Goal:** Add a ClickUp contact form to the dealer dashboard so dealers can submit questions and requests.

**Architecture:** New section below the existing dashboard card, using the same visual styling (dark card with dashed inner border). Third-party iframe embed with dynamic height script.

**Tech Stack:** Next.js App Router, React, CSS Modules, Next.js Script component

---

## Task 1: Add Contact Card CSS Styles

**Files:**

- Modify: `app/dashboard/dashboard.module.css` (append to end)

**Step 1: Add the contact card styles**

Open `app/dashboard/dashboard.module.css` and append these styles at the end of the file:

```css
/* Contact Form Section */
.contactCard {
  background: #182033;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: 20px;
  padding: var(--spacing-xl);
  width: 100%;
  max-width: 1200px;
  margin-top: var(--spacing-xl);
}

.contactInnerCard {
  border: 1px dashed rgba(148, 163, 184, 0.4);
  border-radius: 12px;
  padding: 20px;
}

.contactDescription {
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-lg) 0;
  font-size: 1rem;
  line-height: 1.6;
}

.contactForm iframe {
  width: 100%;
  min-height: 500px;
  border: none;
  background: transparent;
}
```

**Step 2: Verify CSS syntax**

Run: `npx prettier --check app/dashboard/dashboard.module.css`
Expected: File passes formatting check (or auto-fix with `--write`)

**Step 3: Commit**

```bash
git add app/dashboard/dashboard.module.css
git commit -m "Add CSS styles for dashboard contact form section"
```

---

## Task 2: Add Contact Form Section to Dashboard

**Files:**

- Modify: `app/dashboard/page.tsx`

**Step 1: Add Script import**

At the top of `app/dashboard/page.tsx`, add the Script import to the existing imports:

```tsx
import Script from 'next/script';
```

Add after the existing imports (around line 10):

```tsx
import Script from 'next/script';
```

**Step 2: Add contact form section to JSX**

In the `DashboardContent` component, find the closing `</>` of the return statement (around line 189). Add this section just before it, after the `leadPages` section:

```tsx
      {/* Contact Form Section */}
      <section className={styles.section}>
        <div className={styles.contactCard}>
          <div className={styles.contactInnerCard}>
            <h2 className={styles.sectionTitle}>Contact Us</h2>
            <p className={styles.contactDescription}>
              Have a question or need help? Send us a message and we&apos;ll get back to you.
            </p>
            <div className={styles.contactForm}>
              <iframe
                className="clickup-embed clickup-dynamic-height"
                src="https://forms.clickup.com/18006137/f/h5g3t-33933/YX9MJRKKCCJ778CL6K"
                width="100%"
                height="100%"
                style={{ background: 'transparent' }}
                title="Contact Form"
              />
            </div>
          </div>
        </div>
      </section>
      <Script
        src="https://app-cdn.clickup.com/assets/js/forms-embed/v1.js"
        strategy="lazyOnload"
      />
```

**Important notes:**

- Use `&apos;` for apostrophe in JSX (ESLint requirement)
- Add `title` attribute to iframe for accessibility
- Script goes after the section, before the closing fragment

**Step 3: Verify TypeScript compiles**

Run: `npx tsc --noEmit`
Expected: No type errors

**Step 4: Verify ESLint passes**

Run: `npx eslint app/dashboard/page.tsx`
Expected: No errors (warnings OK)

**Step 5: Commit**

```bash
git add app/dashboard/page.tsx
git commit -m "Add contact form section to dashboard (#118)"
```

---

## Task 3: Visual Verification

**Files:** None (testing only)

**Step 1: Start dev server**

Run: `npm run dev`
Expected: Server starts on localhost:3000

**Step 2: Manual verification checklist**

1. Navigate to http://localhost:3000/dashboard (log in if needed)
2. Scroll down below the main dashboard card
3. Verify:
   - [ ] "Contact Us" card appears with same styling as dashboard card
   - [ ] Dashed inner border is visible
   - [ ] Description text appears: "Have a question or need help?..."
   - [ ] ClickUp form iframe loads and is interactive
   - [ ] Form height adjusts dynamically (if form has expandable sections)

**Step 3: Mobile responsiveness check**

1. Open browser DevTools
2. Toggle device toolbar (mobile view)
3. Verify form card stacks properly and remains usable

---

## Task 4: Build Verification

**Files:** None (testing only)

**Step 1: Run production build**

Run: `npm run build`
Expected: Build completes without errors

**Step 2: Final commit (if any fixes needed)**

If build revealed issues, fix and commit:

```bash
git add -A
git commit -m "Fix build issues for contact form"
```

---

## Summary

| Task | Description         | Estimated |
| ---- | ------------------- | --------- |
| 1    | Add CSS styles      | 2 min     |
| 2    | Add JSX section     | 3 min     |
| 3    | Visual verification | 3 min     |
| 4    | Build verification  | 2 min     |

**Total:** ~10 minutes

**After completion:** Create PR to merge `feature/dashboard-contact-form` into `dev`