[UI] Share Dashboard modal with two-step confirmation

[Venkat-Kolasani]

What

A modal triggered by a "Share Dashboard" button on the tracker page.

Flow

1. User clicks "Share Dashboard"
2. Modal opens — user configures options (see below)
3. User clicks "Generate Link" (second explicit action)
4. Link is displayed with a copy button — not stored in URL bar

Options in Modal

• Company selection: All or specific (checkbox list)
• Field toggles: Status, Round rejected at, Date applied (Notes always hidden)
• Expiry: 24 hours / 7 days / Permanent
• Optional passcode: 4-digit toggle

Acceptance Criteria

• Modal does not generate anything on open — only on explicit confirm
• Generated link shown once in modal with copy button
• Link not visible in browser address bar
• Matches existing Tailwind design system

[DraXx-Van]

Hi @Venkat-Kolasani! I'm a GSSoC 2026 contributor and would love to work on this issue. Could you please assign it to me? 🙏

---

My Approach

🏗️ Component: ShareDashboardModal.jsx

A two-step modal using the existing Modal.jsx wrapper and Tailwind design system.

Step 1 — Configuration screen (shown on modal open, nothing generated yet ✅):

• Company selection: "All" default or checkbox list of specific companies from existing opportunities
• Field toggles: Status, Round rejected at, Date applied (Notes always hidden)
• Expiry radio: 24 hours / 7 days / Permanent
• Optional 4-digit passcode toggle
• "Generate Link" button — the only trigger for generation

Step 2 — Link display screen (after clicking Generate Link):

• Generated link shown in a readonly <input> — not in the browser address bar ✅
• Copy button using navigator.clipboard.writeText()
• Toast notification on copy success
• "Done" button to close

⚙️ State Flow

const [step, setStep] = useState(1) // 1 = config, 2 = link shown
const [generatedLink, setGeneratedLink] = useState('')

const handleGenerate = () => {
  const token = crypto.randomUUID()
  setGeneratedLink(`${window.location.origin}/share/${token}`)
  setStep(2)
}

📎 Integration

• Add a "Share Dashboard" button to the tracker/dashboard page
• Button click sets isShareModalOpen = true

✅ Acceptance Criteria Coverage

• Modal does not generate anything on open — only on explicit confirm ✅
• Generated link shown once with copy button ✅
• Link not visible in browser address bar ✅
• Matches existing Tailwind dark theme design system ✅

---

Tech involved: React, Tailwind CSS (pure frontend, no DB changes needed)
Estimated time: 2 days

Happy to start immediately once assigned! 🚀

[KanchanWaldia]

Hi @Venkat-Kolasani , I am a GSSoC 2026 contributor and would like to work on issue #19. I'll build the Share Dashboard modal as a React component with two steps — step 1 for configuring share options (company selection, field toggles, expiry, passcode) and step 2 for displaying the generated link with a copy button. I'll use Tailwind CSS to match the existing design system and ensure the link is never stored in the URL bar. Please assign this to me

[manishbirthal09]

I am a GSSoC '26 Contributor and I would like to work on this issue..Please assign this issue to me.

[Venkat-Kolasani]

Thanks everyone for your interest in the sharing feature under GSSoC 2026!

This work depends on #18 (share_links table + RLS). I will not be able to assign #19 / #20 / #21 until that’s merged.

If you want to work on sharing: comment on #18 with your SQL/RLS approach, or wait here and I’ll assign this issue once #18 is done.

See CONTRIBUTING.md.

[Venkat-Kolasani]

@DraXx-Van Thanks for the detailed UI breakdown — the two-step modal flow looks right.

One blocker before assignment: the link/token must be created and stored via #18 (share_links in Supabase), not only crypto.randomUUID() in the browser. Otherwise /share/:token won’t work.

Please either:

• Pick up [DB] Create share_links table with RLS policies #18 first, or
• Update your plan to include persisting the share row (and which API/route you’ll call).