hope-events/frontend/src/content/help/dashboard-user.tsx

import React from "react";
import { Calendar, Ticket, CreditCard, HandHeart, Printer, CheckCircle2, ClipboardList, Clock, SquarePen, History, CheckSquare, Receipt, FileText, Users, ArrowRightLeft } from "lucide-react";
import { GuideItem } from "@/components/shared/GuideItem";
import type { HelpContent } from "./types";

/** Help content for the "My Events" dashboard (/dashboard/user), reachable by every role. */
export const dashboardUserHelpContent: HelpContent = {
  title: "My Events help",
  subtitle: "Manage your registrations, tickets, and payments from here.",
  quickLinks: [
    { label: "Browse events", href: "/events", icon: Calendar },
    { label: "Payment history", href: "/dashboard/user/payments", icon: CreditCard },
    { label: "Make a donation", href: "/dashboard/user/donate", icon: HandHeart },
  ],
  tabs: [
    {
      key: "registrations",
      label: "Registrations",
      icon: Calendar,
      content: (
        <div className="space-y-4">
          <p>My Registrations lists every event you&apos;ve signed up for. Tap one to open its details, where you can edit your items, pay an outstanding balance, or cancel.</p>
          <div className="space-y-4">
            <GuideItem icon={CheckCircle2} title="Status badges" tone="brand">
              Pending (just registered), Confirmed, Partially Paid, Paid, or Cancelled — the badge next to each registration shows exactly where it stands.
            </GuideItem>
            <GuideItem icon={ClipboardList} title="Forms" tone="amber">
              Some events need extra details from you (like dietary needs or emergency contacts) before the event. If you see a &quot;forms&quot; badge, tap the registration and fill them in — you can save and come back.
            </GuideItem>
            <GuideItem icon={Clock} title="Early-bird pricing" tone="green">
              A notice appears if an event option is still within its early-bird discount window, so you know when the price is about to go up.
            </GuideItem>
            <GuideItem icon={SquarePen} title="Editing or cancelling" tone="violet">
              Tap a registration to change quantities or options, pay what&apos;s outstanding, or cancel it entirely.
            </GuideItem>
            <GuideItem icon={FileText} title="Invoice" tone="rose">
              The Invoice button sends a PDF breakdown of the registration — itemized cost, any early-bird or discount-code saving, and what&apos;s still owing (or &quot;Paid in full&quot;) — to your email or WhatsApp, whichever you pick. If you have a discount code and haven&apos;t paid in full yet, enter it in the registration popup.
            </GuideItem>
            <GuideItem icon={History} title="Show past events" tone="gray">
              Registrations page defaults to upcoming events only — tick &quot;Show past events&quot; at the top to bring back ones that have already happened.
            </GuideItem>
            <GuideItem icon={Users} title="People on a group booking" tone="brand">
              On events that take names, the registration popup has a People section: add or change each person&apos;s name and contact details, choose whether tickets come to you or go to each person, and send someone the link to fill in their own attendee form. Tickets someone else booked for you show here too, marked &quot;Booked by&quot;.
            </GuideItem>
          </div>
        </div>
      ),
    },
    {
      key: "tickets",
      label: "Tickets",
      icon: Ticket,
      content: (
        <div className="space-y-4">
          <p>My Tickets shows a QR code for each ticket you hold — this is what gets scanned at the door.</p>
          <div className="space-y-4">
            <GuideItem icon={CheckSquare} title="Select multiple" tone="brand">
              Tick more than one ticket (or use &quot;Select all&quot;) to send or print them together in one go, instead of one at a time.
            </GuideItem>
            <GuideItem icon={Printer} title="Print, email, or WhatsApp" tone="green">
              Get your selected tickets onto your phone or paper before the event — as a printed page, an email, or a WhatsApp message.
            </GuideItem>
            <GuideItem icon={ArrowRightLeft} title="Transfer a ticket" tone="violet">
              Can&apos;t make it? Tap &quot;Transfer&quot; to offer your ticket to someone else before the event. Type their name and email and/or phone number — there&apos;s no searching for people — and we send them a link to accept it. Until they accept, the ticket is still yours (you&apos;ll see &quot;Waiting for … to accept&quot;, and can cancel). Once they accept, they get their own ticket with a new QR code, and the old code (and any screenshots of it) stops working. For a ticket covering several people, one place moves to them. You stay responsible for the booking and payment. A ticket can&apos;t be transferred once it has been scanned.
            </GuideItem>
          </div>
        </div>
      ),
    },
    {
      key: "payments",
      label: "Payments & donations",
      icon: CreditCard,
      content: (
        <div className="space-y-4">
          <p>There are three related but separate things here — worth knowing the difference:</p>
          <div className="space-y-4">
            <GuideItem icon={CreditCard} title="Paying an outstanding balance" tone="brand">
              Open a registration with an amount still owing and use Pay Now — this pays online for that specific registration only.
            </GuideItem>
            <GuideItem icon={Receipt} title="Payment history" tone="green">
              The Payment history page lists every payment you&apos;ve made across all your registrations, past and present.
            </GuideItem>
            <GuideItem icon={Receipt} title="Receipts" tone="amber">
              Every payment — in a registration&apos;s Payments list, or on the Payment history page — has its own Receipt button. Pick email or WhatsApp to get a PDF receipt for that specific payment.
            </GuideItem>
            <GuideItem icon={HandHeart} title="Donations" tone="rose">
              A donation isn&apos;t tied to any one registration — make one any time to support an event or the ministry directly. It can later be used to help cover an outstanding balance.
            </GuideItem>
          </div>
        </div>
      ),
    },
  ],
};