From 49fe682a15f19ad767d7b8b55f69afe36c537bc8 Mon Sep 17 00:00:00 2001
From: Stian <stianmichael@gmail.com>
Date: Tue, 12 May 2026 17:05:33 +0200
Subject: [PATCH] Placeholders test

---
 src/app/helper/reports/page.tsx        |  73 +++++++++++++++-
 src/app/helper/support/page.tsx        | 115 ++++++++++++++++++++++++-
 src/app/helpers/page.tsx               |  87 ++++++++++++++++---
 src/lib/helper-area-preview-copy.ts    | 110 +++++++++++++++++++++++
 src/lib/helper-preview-placeholders.ts |  58 +++++++++++++
 5 files changed, 428 insertions(+), 15 deletions(-)
 create mode 100644 src/lib/helper-area-preview-copy.ts
 create mode 100644 src/lib/helper-preview-placeholders.ts

diff --git a/src/app/helper/reports/page.tsx b/src/app/helper/reports/page.tsx
index dd00929..d399901 100644
--- a/src/app/helper/reports/page.tsx
+++ b/src/app/helper/reports/page.tsx
@@ -11,6 +11,12 @@ import { useCurrentHelper } from "@/hooks/useCurrentHelper"
 import { useProjectSelection } from "@/contexts/project-context"
 import { Sidebar } from "@/components/layout/sidebar"
 import { Header } from "@/components/layout/header"
+import {
+    MONTHLY_PREVIEW_STATS,
+    PAYOUT_PREVIEW_ROWS,
+    REPORTS_MONTHLY_PREVIEW_DISCLAIMER,
+    REPORTS_PAYOUTS_PREVIEW_DISCLAIMER,
+} from "@/lib/helper-area-preview-copy"
 
 interface PayoutData {
   id: string
@@ -89,6 +95,12 @@ export default function HelperReportsPage() {
     setSelectedRows(selectedRows.length === payouts.length ? [] : payouts.map((payout) => payout.id))
   }
 
+  const showPayoutPreview =
+    !!projectId &&
+    !!helperId &&
+    !isLoading &&
+    payouts.length === 0
+
   return (
     <div className="h-screen flex overflow-hidden">
       <Sidebar />
@@ -217,6 +229,54 @@ export default function HelperReportsPage() {
                       Loading payouts...
                     </td>
                   </tr>
+                ) : showPayoutPreview ? (
+                  <>
+                    <tr>
+                      <td colSpan={7} className="px-6 py-3 text-sm text-gray-600 border-b border-dashed border-gray-300 bg-muted/40">
+                        {REPORTS_PAYOUTS_PREVIEW_DISCLAIMER}
+                      </td>
+                    </tr>
+                    {PAYOUT_PREVIEW_ROWS.map((payout) => (
+                      <tr key={payout.id} role="presentation" className="bg-gray-50/50">
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <Checkbox disabled checked={false} />
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
+                          <div className="flex items-center gap-2 flex-wrap">
+                            <span>{payout.ticketId}</span>
+                            <Badge variant="outline" className="text-[10px] uppercase tracking-wide">
+                              Preview
+                            </Badge>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{payout.date}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{payout.ticketType}</td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{payout.amount}</td>
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <Badge
+                            variant={payout.status === "completed" ? "default" : "secondary"}
+                            className={
+                              payout.status === "completed"
+                                ? "bg-green-100 text-green-800 hover:bg-green-100"
+                                : "bg-yellow-100 text-yellow-800 hover:bg-yellow-100"
+                            }
+                          >
+                            {payout.status === "completed" ? "Completed" : "Pending"}
+                          </Badge>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                          <div className="flex items-center gap-2">
+                            <Button variant="outline" size="sm" type="button" disabled>
+                              Open
+                            </Button>
+                            <Button variant="outline" size="sm" type="button" disabled>
+                              Download PDF
+                            </Button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </>
                 ) : payouts.length === 0 ? (
                   <tr>
                     <td colSpan={7} className="px-6 py-8 text-center text-gray-500">
@@ -296,8 +356,17 @@ export default function HelperReportsPage() {
 
       {/* Monthly Reports Tab Content */}
       {activeTab === "monthly" && (
-        <div className="bg-white rounded-lg border border-gray-200 p-8 text-center">
-          <p className="text-gray-500">Monthly reports content would go here</p>
+        <div className="bg-white rounded-lg border border-dashed border-gray-300 p-8">
+          <p className="text-sm text-gray-600 mb-6 max-w-2xl">{REPORTS_MONTHLY_PREVIEW_DISCLAIMER}</p>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {MONTHLY_PREVIEW_STATS.map((row) => (
+              <div key={row.label} className="rounded-lg border border-gray-200 bg-gray-50/80 p-4">
+                <p className="text-xs font-medium uppercase tracking-wide text-gray-500 mb-1">Preview</p>
+                <p className="text-sm text-gray-700 mb-2">{row.label}</p>
+                <p className="text-2xl font-semibold text-gray-900">{row.value}</p>
+              </div>
+            ))}
+          </div>
         </div>
       )}
         </main>
diff --git a/src/app/helper/support/page.tsx b/src/app/helper/support/page.tsx
index f64e271..802a2ea 100644
--- a/src/app/helper/support/page.tsx
+++ b/src/app/helper/support/page.tsx
@@ -9,6 +9,11 @@ import { Avatar, AvatarFallback } from "@/components/ui/avatar"
 import { Card, CardContent } from "@/components/ui/card"
 import { Clock, Users, Plus, Sparkles } from "lucide-react"
 import { useMemo } from "react"
+import { toast } from "sonner"
+import {
+    SUPPORT_TICKET_PREVIEW_CARDS,
+    SUPPORT_TICKETS_PREVIEW_DISCLAIMER,
+} from "@/lib/helper-area-preview-copy"
 import { useProjectSelection } from "@/contexts/project-context"
 import { useTicketsWithDetails } from "@/hooks/useTicketsWithDetails"
 import { useProjectPaymentSettings } from "@/hooks/useProject"
@@ -111,6 +116,18 @@ export default function HelperSupportPage() {
 
   const todayFormatted = formatDuration(todayMinutes)
 
+  const showSupportTicketPreview =
+    !!projectId &&
+    !ticketsLoading &&
+    availableTickets.length === 0 &&
+    activeTickets.length === 0
+
+  const previewRates = rates ?? {
+    startPrice: "USD 10.00",
+    first60: "USD 1.50/min",
+    after60: "USD 1.00/min",
+  }
+
   return (
     <div className="flex h-screen">
       <Sidebar />
@@ -172,7 +189,103 @@ export default function HelperSupportPage() {
                 {/* Available Tickets */}
                 <div className="space-y-4">
                   <h2 className="text-lg font-semibold text-foreground">Available Tickets</h2>
-                  {formattedAvailable.length === 0 ? (
+                  {formattedAvailable.length === 0 && showSupportTicketPreview ? (
+                    <div className="space-y-4">
+                      <p
+                        role="status"
+                        className="text-sm text-muted-foreground rounded-lg border border-dashed border-border bg-muted/30 px-4 py-3"
+                      >
+                        {SUPPORT_TICKETS_PREVIEW_DISCLAIMER}
+                      </p>
+                      {SUPPORT_TICKET_PREVIEW_CARDS.map((ticket) => (
+                        <Card
+                          key={ticket.id}
+                          className="border border-dashed border-border opacity-95"
+                          role="presentation"
+                        >
+                          <CardContent className="p-6">
+                            <div className="flex items-start gap-4">
+                              <Avatar className="w-10 h-10">
+                                <AvatarFallback className="bg-[#d9dce8] text-foreground">{ticket.avatar}</AvatarFallback>
+                              </Avatar>
+                              <div className="flex-1 space-y-4">
+                                <div>
+                                  <div className="flex flex-wrap items-center gap-2 mb-2">
+                                    <h3 className="font-medium text-foreground">{ticket.title}</h3>
+                                    <Badge variant="outline" className="text-[10px] uppercase tracking-wide">
+                                      Preview
+                                    </Badge>
+                                    <span className="text-sm text-muted-foreground">• {ticket.timestamp}</span>
+                                  </div>
+                                  <p className="text-sm text-muted-foreground mb-3">{ticket.description}</p>
+
+                                  <div className="space-y-3">
+                                    {ticket.topics.length > 0 && (
+                                      <div>
+                                        <p className="text-sm font-medium text-foreground mb-1">Other topics</p>
+                                        <div className="flex gap-2 flex-wrap">
+                                          {ticket.topics.map((topic) => (
+                                            <Badge key={topic} variant="secondary" className="bg-muted text-muted-foreground">
+                                              {topic}
+                                            </Badge>
+                                          ))}
+                                        </div>
+                                      </div>
+                                    )}
+
+                                    <div>
+                                      <p className="text-sm font-medium text-foreground mb-1">Type of help</p>
+                                      <Badge variant="secondary" className="bg-muted text-muted-foreground capitalize">
+                                        {ticket.helpType}
+                                      </Badge>
+                                    </div>
+
+                                    <div>
+                                      <p className="text-sm font-medium text-foreground mb-2">Rates</p>
+                                      <div className="grid grid-cols-3 gap-4 text-sm">
+                                        <div>
+                                          <p className="text-muted-foreground">Start price</p>
+                                          <p className="font-medium text-foreground">{previewRates.startPrice}</p>
+                                        </div>
+                                        <div>
+                                          <p className="text-muted-foreground">First 60 min</p>
+                                          <p className="font-medium text-foreground">{previewRates.first60}</p>
+                                        </div>
+                                        <div>
+                                          <p className="text-muted-foreground">After 60 min</p>
+                                          <p className="font-medium text-foreground">{previewRates.after60}</p>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+
+                                <div className="flex gap-3">
+                                  <Button
+                                    type="button"
+                                    variant="secondary"
+                                    className="cursor-default"
+                                    onClick={() => toast.info("Preview only — this is not a real ticket.")}
+                                  >
+                                    Claim ticket
+                                  </Button>
+                                  <Button
+                                    type="button"
+                                    variant="outline"
+                                    className="border-brand-primary text-brand-primary cursor-default"
+                                    onClick={() => toast.info("Preview only — this is not a real ticket.")}
+                                  >
+                                    <Sparkles className="w-4 h-4" />
+                                    Rephrase with AI
+                                  </Button>
+                                </div>
+                              </div>
+                            </div>
+                          </CardContent>
+                        </Card>
+                      ))}
+                    </div>
+                  ) : formattedAvailable.length === 0 ? (
                     <p className="text-sm text-muted-foreground">No available tickets right now.</p>
                   ) : (
                     formattedAvailable.map((ticket) => (
diff --git a/src/app/helpers/page.tsx b/src/app/helpers/page.tsx
index b43f1a0..fcfd33f 100644
--- a/src/app/helpers/page.tsx
+++ b/src/app/helpers/page.tsx
@@ -19,6 +19,10 @@ import { useCreateProjectInvite, useListProjectInvites, useRevokeProjectInvite }
 import { useProjectSelection } from "@/contexts/project-context"
 import { useUser } from "@/contexts/user-context"
 import Link from "next/link"
+import {
+    HELPER_LIST_PREVIEW_DISCLAIMER,
+    HELPER_PREVIEW_PLACEHOLDERS,
+} from "@/lib/helper-preview-placeholders"
 
 const GithubIcon = ({ className }: { className?: string }) => (
   <svg
@@ -610,8 +614,8 @@ export default function HelpersPage() {
                 )
                 }
                 if (currentView === "added") {
-                  return filteredHelpers.length > 0 ? (
-                    filteredHelpers.map((helper, index) => (
+                  if (filteredHelpers.length > 0) {
+                    return filteredHelpers.map((helper, index) => (
                     <div key={index} className="px-6 py-4 hover:bg-[#f7f9ff]">
                       <div className="grid gap-4 items-center" style={{ gridTemplateColumns: '2rem repeat(11, 1fr)' }}>
                         <div>
@@ -658,16 +662,75 @@ export default function HelpersPage() {
                       </div>
                     </div>
                   ))
-                ) : (
-                  <div className="px-6 py-12 text-center">
-                    <p className="text-muted-foreground mb-2">No helpers yet.</p>
-                    <p className="text-sm text-muted-foreground mb-4">Add helpers by inviting them via email or sharing an invite link.</p>
-                    <Button className="h-10 rounded-xl px-5 text-[14px] font-semibold bg-brand-primary hover:bg-brand-primary/90 text-white shadow-md" onClick={() => setIsDrawerOpen(true)}>
-                      <Plus className="w-4 h-4 mr-2" />
-                      Add new helper
-                    </Button>
-                  </div>
-                )
+                  }
+                  const noRealHelpers = (helpersData?.length ?? 0) === 0
+                  if (noRealHelpers && projectId) {
+                    return (
+                      <>
+                        <div className="px-6 py-5 border-b border-dashed border-border bg-muted/15">
+                          <p className="text-sm text-muted-foreground mb-4 max-w-3xl">
+                            {HELPER_LIST_PREVIEW_DISCLAIMER}
+                          </p>
+                          <div
+                            role="presentation"
+                            aria-hidden
+                            className="rounded-lg border border-dashed border-border divide-y divide-border overflow-hidden bg-background/90 opacity-90"
+                          >
+                            {HELPER_PREVIEW_PLACEHOLDERS.map((h) => (
+                              <div key={h.id} className="px-6 py-4">
+                                <div className="grid gap-4 items-center" style={{ gridTemplateColumns: '2rem repeat(11, 1fr)' }}>
+                                  <div>
+                                    <input type="checkbox" disabled className="rounded border-border opacity-50" />
+                                  </div>
+                                  <div className="col-span-3 flex items-center gap-[18px] min-w-0">
+                                    <div
+                                      className="w-8 h-8 rounded-[11px] flex items-center justify-center text-sm font-medium text-foreground shrink-0"
+                                      style={{ backgroundColor: h.color }}
+                                    >
+                                      {h.initials}
+                                    </div>
+                                    <div className="min-w-0">
+                                      <span className="text-sm font-medium text-foreground block truncate">{h.name}</span>
+                                      <span className="text-xs text-muted-foreground truncate block">{h.involvement}</span>
+                                    </div>
+                                  </div>
+                                  <div className="col-span-3 flex items-center space-x-2 min-w-0">
+                                    <GithubIcon className="w-4 h-4 text-foreground shrink-0" />
+                                    <span className="text-sm text-[#0F0F11] truncate">{h.githubHandle}</span>
+                                  </div>
+                                  <div className="col-span-2">
+                                    <Badge variant="secondary" className="bg-muted text-muted-foreground hover:bg-muted text-[13px] px-3 py-1">
+                                      {mapCategoryToLabel[h.category]}
+                                    </Badge>
+                                  </div>
+                                  <div className="col-span-3 flex items-center justify-end gap-2">
+                                    <Badge variant="outline" className="text-[11px] font-medium uppercase tracking-wide shrink-0">
+                                      Preview
+                                    </Badge>
+                                    <span className="text-sm text-muted-foreground px-2">—</span>
+                                  </div>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                        <div className="px-6 py-12 text-center">
+                          <p className="text-muted-foreground mb-2">No helpers yet.</p>
+                          <p className="text-sm text-muted-foreground mb-4">Add helpers by inviting them via email or sharing an invite link.</p>
+                          <Button className="h-10 rounded-xl px-5 text-[14px] font-semibold bg-brand-primary hover:bg-brand-primary/90 text-white shadow-md" onClick={() => setIsDrawerOpen(true)}>
+                            <Plus className="w-4 h-4 mr-2" />
+                            Add new helper
+                          </Button>
+                        </div>
+                      </>
+                    )
+                  }
+                  return (
+                    <div className="px-6 py-12 text-center text-muted-foreground">
+                      <p className="mb-2">No helpers match your filters.</p>
+                      <p className="text-sm">Try clearing search or switching category to see your team.</p>
+                    </div>
+                  )
                 }
                 return filteredRequests.length > 0 ? (
                   filteredRequests.map((request, index) => (
diff --git a/src/lib/helper-area-preview-copy.ts b/src/lib/helper-area-preview-copy.ts
new file mode 100644
index 0000000..4d06952
--- /dev/null
+++ b/src/lib/helper-area-preview-copy.ts
@@ -0,0 +1,110 @@
+/**
+ * Shared copy and static preview data for helper Support / Reports empty states.
+ * Preview UI only; no API calls or DB writes.
+ */
+
+export const SUPPORT_TICKETS_PREVIEW_DISCLAIMER =
+    "There are no real tickets in this project yet. The cards below are a preview of how available tickets will look."
+
+export const REPORTS_PAYOUTS_PREVIEW_DISCLAIMER =
+    "You have no payout records yet. The table below shows sample rows for layout preview only."
+
+export const REPORTS_MONTHLY_PREVIEW_DISCLAIMER =
+    "Monthly aggregates are not available yet. The figures below are placeholders for preview only."
+
+export type SupportTicketPreviewCard = {
+    id: string
+    title: string
+    customer: string
+    avatar: string
+    description: string
+    topics: string[]
+    helpType: string
+    timestamp: string
+}
+
+export const SUPPORT_TICKET_PREVIEW_CARDS: SupportTicketPreviewCard[] = [
+    {
+        id: "preview-support-1",
+        title: "Dashboard sidebar collapses on navigation",
+        customer: "Preview Customer",
+        avatar: "P",
+        description:
+            "When switching between Analytics and Settings, the sidebar sometimes collapses unexpectedly. Steps to reproduce are attached in the full ticket.",
+        topics: ["Bug", "UI"],
+        helpType: "default",
+        timestamp: "10.05.2026, 09:00",
+    },
+    {
+        id: "preview-support-2",
+        title: "Question about webhook retry policy",
+        customer: "Preview Customer",
+        avatar: "P",
+        description:
+            "We need clarification on how many times failed webhooks are retried and whether exponential backoff applies.",
+        topics: ["Question", "API"],
+        helpType: "default",
+        timestamp: "09.05.2026, 14:30",
+    },
+    {
+        id: "preview-support-3",
+        title: "Feature request: export tickets to CSV",
+        customer: "Preview Customer",
+        avatar: "P",
+        description:
+            "Support managers would like a one-click export of filtered tickets for weekly reporting.",
+        topics: ["General"],
+        helpType: "default",
+        timestamp: "08.05.2026, 11:15",
+    },
+]
+
+export type PayoutPreviewRow = {
+    id: string
+    ticketId: string
+    date: string
+    ticketType: string
+    amount: string
+    status: "pending" | "completed"
+}
+
+export const PAYOUT_PREVIEW_ROWS: PayoutPreviewRow[] = [
+    {
+        id: "preview-payout-1",
+        ticketId: "a1b2c3d",
+        date: "01/05/2026",
+        ticketType: "Bug",
+        amount: "USD 42.00",
+        status: "completed",
+    },
+    {
+        id: "preview-payout-2",
+        ticketId: "e4f5g6h",
+        date: "28/04/2026",
+        ticketType: "Question",
+        amount: "USD 18.50",
+        status: "pending",
+    },
+    {
+        id: "preview-payout-3",
+        ticketId: "i7j8k9l",
+        date: "15/04/2026",
+        ticketType: "General",
+        amount: "USD 120.00",
+        status: "completed",
+    },
+    {
+        id: "preview-payout-4",
+        ticketId: "m0n1o2p",
+        date: "02/04/2026",
+        ticketType: "Bug",
+        amount: "USD 65.25",
+        status: "pending",
+    },
+]
+
+export const MONTHLY_PREVIEW_STATS: { label: string; value: string }[] = [
+    { label: "Tickets closed (preview)", value: "—" },
+    { label: "Hours logged (preview)", value: "—" },
+    { label: "Earnings (preview)", value: "—" },
+]
diff --git a/src/lib/helper-preview-placeholders.ts b/src/lib/helper-preview-placeholders.ts
new file mode 100644
index 0000000..1cda3ac
--- /dev/null
+++ b/src/lib/helper-preview-placeholders.ts
@@ -0,0 +1,58 @@
+/**
+ * Frontend-only preview rows for the helpers list empty state.
+ * No database writes; not shown when filters hide real helpers.
+ */
+
+export const HELPER_LIST_PREVIEW_DISCLAIMER =
+    "You do not have any helpers yet. The rows below are a visual preview only—they are not real team members."
+
+export type HelperPreviewCategory = "core" | "extended" | "community"
+
+export type HelperPreviewPlaceholder = {
+    id: string
+    name: string
+    initials: string
+    githubHandle: string
+    category: HelperPreviewCategory
+    involvement: string
+    color: string
+}
+
+export const HELPER_PREVIEW_PLACEHOLDERS: HelperPreviewPlaceholder[] = [
+    {
+        id: "preview-1",
+        name: "Alex Rivera",
+        initials: "AR",
+        githubHandle: "arivera-demo",
+        category: "core",
+        involvement: "Primary on-call",
+        color: "#f4bccc",
+    },
+    {
+        id: "preview-2",
+        name: "Jordan Lee",
+        initials: "JL",
+        githubHandle: "jlee-extended",
+        category: "extended",
+        involvement: "Occasional reviews",
+        color: "#d0f6bc",
+    },
+    {
+        id: "preview-3",
+        name: "Sam Okonkwo",
+        initials: "SO",
+        githubHandle: "sam-community",
+        category: "community",
+        involvement: "Community triage",
+        color: "#bcedf6",
+    },
+    {
+        id: "preview-4",
+        name: "Morgan Patel",
+        initials: "MP",
+        githubHandle: "mpatel-consult",
+        category: "extended",
+        involvement: "Consulting",
+        color: "#f6e6bc",
+    },
+]