Settings + Admin redesign + Community Leader role
## New: Community Leader role Who: Imam Yusuf, Sister Mariam, Uncle Tariq — the person who rallies their mosque, WhatsApp group, neighbourhood to pledge. Not an admin. Not a volunteer. A logged-in coordinator who needs more than a live feed but less than full admin access. /dashboard/community — their scoped dashboard: - 'How are WE doing?' — their stats vs the whole appeal (dark hero section) - Contribution percentage bar - Their links with full share buttons (Copy/WhatsApp/Email/QR) - Create new links (auto-tagged with their name) - Leaderboard: 'How communities compare' with 'You' badge - Read-only pledge list (no status changes, no bank details) Navigation changes for community_leader role: - Sees: My Community → Share Links → Reports (3 items) - Does NOT see: Home, Money, Settings, New Appeal button - Does NOT see: Bank details, WhatsApp config, reconciliation ## New: Team management API + UI GET/POST/PATCH/DELETE /api/team — CRUD for team members - Only org_admin/super_admin can invite - Temp password generated on invite (shown once) - Copy credentials or send via WhatsApp button - Role selector with descriptions (Admin, Community Leader, Staff, Volunteer) - Role change via dropdown, remove with trash icon - Can't change own role or remove self ## Settings page redesign Reordered by Aaisha's thinking: 1. WhatsApp (unchanged — most important) 2. Team (NEW — 'who has access? invite community leaders') 3. Bank account 4. Charity details 5. Direct Debit (collapsed in <details>) Team section shows: - All members with role icons (Crown/Users/Eye) - Inline role change dropdown - Remove button - Invite form with role cards and descriptions - Credentials shown once with copy + WhatsApp share buttons ## Admin page redesign Brand-consistent: no more shadcn Card/Badge/Table - Dark hero section with 7 platform stats - Pipeline status breakdown (gap-px grid) - Pill tab switcher (not shadcn Tabs) - Grid tables matching the rest of the dashboard - Role badges color-coded (blue super, green admin, amber leader) 6 files changed, 4 new routes/pages
This commit is contained in:
@@ -1,31 +1,76 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect, useCallback } from "react"
|
||||
import { useSession } from "next-auth/react"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import {
|
||||
Check, Loader2, AlertCircle,
|
||||
MessageCircle, Radio, RefreshCw, Smartphone, Wifi, WifiOff, QrCode
|
||||
Check, Loader2, AlertCircle, MessageCircle, Radio, RefreshCw,
|
||||
Smartphone, Wifi, WifiOff, QrCode, UserPlus, Trash2, Copy,
|
||||
Users, Crown, Eye
|
||||
} from "lucide-react"
|
||||
|
||||
/**
|
||||
* /dashboard/settings — Aaisha's control panel
|
||||
*
|
||||
* Organised by what she's thinking, not by system concept:
|
||||
* 1. WhatsApp — "I need to connect" (or see it's connected)
|
||||
* 2. Team — "Who has access? I need to invite Imam Yusuf"
|
||||
* 3. Bank — "Where donors send money"
|
||||
* 4. Your charity — name, brand colour
|
||||
* 5. Direct Debit — advanced, for later
|
||||
*
|
||||
* Team management is NEW — the missing feature.
|
||||
* This is how community leaders get invited.
|
||||
*/
|
||||
|
||||
interface OrgSettings {
|
||||
name: string; bankName: string; bankSortCode: string; bankAccountNo: string
|
||||
bankAccountName: string; refPrefix: string; primaryColor: string
|
||||
gcAccessToken: string; gcEnvironment: string; orgType: string
|
||||
}
|
||||
|
||||
interface TeamMember {
|
||||
id: string; email: string; name: string | null; role: string; createdAt: string
|
||||
}
|
||||
|
||||
const ROLE_LABELS: Record<string, { label: string; desc: string; icon: typeof Crown }> = {
|
||||
org_admin: { label: "Admin", desc: "Full access to everything", icon: Crown },
|
||||
community_leader: { label: "Community Leader", desc: "Can see their links, pledges, and share. Can't change settings.", icon: Users },
|
||||
staff: { label: "Staff", desc: "Can view pledges and reports", icon: Eye },
|
||||
volunteer: { label: "Volunteer", desc: "Read-only access", icon: Eye },
|
||||
}
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { data: session } = useSession()
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const currentUser = session?.user as any
|
||||
|
||||
const [settings, setSettings] = useState<OrgSettings | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState<string | null>(null)
|
||||
const [saved, setSaved] = useState<string | null>(null)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
// Team
|
||||
const [team, setTeam] = useState<TeamMember[]>([])
|
||||
const [showInvite, setShowInvite] = useState(false)
|
||||
const [inviteEmail, setInviteEmail] = useState("")
|
||||
const [inviteName, setInviteName] = useState("")
|
||||
const [inviteRole, setInviteRole] = useState("community_leader")
|
||||
const [inviting, setInviting] = useState(false)
|
||||
const [inviteResult, setInviteResult] = useState<{ email: string; tempPassword: string } | null>(null)
|
||||
const [copiedCred, setCopiedCred] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
fetch("/api/settings")
|
||||
.then(r => r.json())
|
||||
.then(data => { if (data.name) setSettings(data) })
|
||||
.catch(() => setError("Failed to load settings"))
|
||||
.finally(() => setLoading(false))
|
||||
Promise.all([
|
||||
fetch("/api/settings").then(r => r.json()),
|
||||
fetch("/api/team").then(r => r.json()).catch(() => ({ members: [] })),
|
||||
]).then(([settingsData, teamData]) => {
|
||||
if (settingsData.name) setSettings(settingsData)
|
||||
if (teamData.members) setTeam(teamData.members)
|
||||
})
|
||||
.catch(() => setError("Failed to load settings"))
|
||||
.finally(() => setLoading(false))
|
||||
}, [])
|
||||
|
||||
const save = async (section: string, data: Record<string, string>) => {
|
||||
@@ -38,10 +83,61 @@ export default function SettingsPage() {
|
||||
setSaving(null)
|
||||
}
|
||||
|
||||
const inviteMember = async () => {
|
||||
if (!inviteEmail.trim()) return
|
||||
setInviting(true)
|
||||
try {
|
||||
const res = await fetch("/api/team", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ email: inviteEmail.trim(), name: inviteName.trim(), role: inviteRole }),
|
||||
})
|
||||
const data = await res.json()
|
||||
if (res.ok) {
|
||||
setTeam(prev => [...prev, { id: data.id, email: data.email, name: data.name, role: data.role, createdAt: new Date().toISOString() }])
|
||||
setInviteResult({ email: data.email, tempPassword: data.tempPassword })
|
||||
setInviteEmail(""); setInviteName("")
|
||||
} else {
|
||||
setError(data.error || "Failed to invite")
|
||||
}
|
||||
} catch { setError("Failed to invite") }
|
||||
setInviting(false)
|
||||
}
|
||||
|
||||
const changeRole = async (userId: string, role: string) => {
|
||||
try {
|
||||
await fetch("/api/team", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ userId, role }),
|
||||
})
|
||||
setTeam(prev => prev.map(m => m.id === userId ? { ...m, role } : m))
|
||||
} catch { setError("Failed to update role") }
|
||||
}
|
||||
|
||||
const removeMember = async (userId: string) => {
|
||||
if (!confirm("Remove this team member? They'll lose access immediately.")) return
|
||||
try {
|
||||
await fetch("/api/team", {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ userId }),
|
||||
})
|
||||
setTeam(prev => prev.filter(m => m.id !== userId))
|
||||
} catch { setError("Failed to remove") }
|
||||
}
|
||||
|
||||
const copyCredentials = (email: string, password: string) => {
|
||||
navigator.clipboard.writeText(`Email: ${email}\nPassword: ${password}\nLogin: ${window.location.origin}/login`)
|
||||
setCopiedCred(true)
|
||||
setTimeout(() => setCopiedCred(false), 2000)
|
||||
}
|
||||
|
||||
if (loading) return <div className="flex items-center justify-center py-20"><Loader2 className="h-6 w-6 text-[#1E40AF] animate-spin" /></div>
|
||||
if (!settings) return <div className="text-center py-20"><AlertCircle className="h-6 w-6 text-[#DC2626] mx-auto mb-2" /><p className="text-sm text-gray-500">Failed to load settings</p></div>
|
||||
|
||||
const update = (key: keyof OrgSettings, value: string) => setSettings(s => s ? { ...s, [key]: value } : s)
|
||||
const isAdmin = currentUser?.role === "org_admin" || currentUser?.role === "super_admin"
|
||||
|
||||
const SaveButton = ({ section, data }: { section: string; data: Record<string, string> }) => (
|
||||
<button
|
||||
@@ -57,19 +153,152 @@ export default function SettingsPage() {
|
||||
<div className="space-y-8 max-w-2xl">
|
||||
<div>
|
||||
<h1 className="text-3xl font-black text-[#111827] tracking-tight">Settings</h1>
|
||||
<p className="text-sm text-gray-500 mt-0.5">Your charity details, bank account, and connections</p>
|
||||
<p className="text-sm text-gray-500 mt-0.5">WhatsApp, team, bank account, and charity details</p>
|
||||
</div>
|
||||
|
||||
{error && <div className="border-l-2 border-[#DC2626] bg-[#DC2626]/5 p-3 text-sm text-[#DC2626]">{error}</div>}
|
||||
|
||||
{/* WhatsApp — most important, always first */}
|
||||
{/* ── 1. WhatsApp ── */}
|
||||
<WhatsAppPanel />
|
||||
|
||||
{/* Bank account */}
|
||||
{/* ── 2. Team management ── */}
|
||||
{isAdmin && (
|
||||
<div className="bg-white border border-gray-200">
|
||||
<div className="p-6 pb-4">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<h3 className="text-base font-bold text-[#111827]">Team</h3>
|
||||
<button
|
||||
onClick={() => { setShowInvite(!showInvite); setInviteResult(null) }}
|
||||
className="bg-[#111827] px-3 py-1.5 text-xs font-bold text-white hover:bg-gray-800 transition-colors flex items-center gap-1.5"
|
||||
>
|
||||
<UserPlus className="h-3.5 w-3.5" /> Invite
|
||||
</button>
|
||||
</div>
|
||||
<p className="text-xs text-gray-500">People who can access your dashboard. Invite community leaders to track their pledges.</p>
|
||||
</div>
|
||||
|
||||
{/* Invite form */}
|
||||
{showInvite && !inviteResult && (
|
||||
<div className="mx-6 mb-4 border-2 border-[#1E40AF] p-4 space-y-3">
|
||||
<p className="text-sm font-bold text-[#111827]">Invite a team member</p>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">Email</label>
|
||||
<input value={inviteEmail} onChange={e => setInviteEmail(e.target.value)} placeholder="imam@mosque.org" className="w-full h-9 px-3 border-2 border-gray-200 text-sm focus:border-[#1E40AF] outline-none" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">Name <span className="font-normal text-gray-400">(optional)</span></label>
|
||||
<input value={inviteName} onChange={e => setInviteName(e.target.value)} placeholder="Imam Yusuf" className="w-full h-9 px-3 border-2 border-gray-200 text-sm focus:border-[#1E40AF] outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-2">Role</label>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{Object.entries(ROLE_LABELS).filter(([k]) => k !== "org_admin" || currentUser?.role === "super_admin").map(([key, r]) => (
|
||||
<button
|
||||
key={key}
|
||||
onClick={() => setInviteRole(key)}
|
||||
className={`border-2 p-3 text-left transition-all ${inviteRole === key ? "border-[#1E40AF] bg-[#1E40AF]/5" : "border-gray-200"}`}
|
||||
>
|
||||
<p className="text-xs font-bold text-[#111827]">{r.label}</p>
|
||||
<p className="text-[10px] text-gray-500 mt-0.5">{r.desc}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => setShowInvite(false)} className="flex-1 border border-gray-200 py-2 text-xs font-bold text-[#111827] hover:bg-gray-50">Cancel</button>
|
||||
<button onClick={inviteMember} disabled={!inviteEmail.trim() || inviting} className="flex-1 bg-[#111827] py-2 text-xs font-bold text-white hover:bg-gray-800 disabled:opacity-40 flex items-center justify-center gap-1.5">
|
||||
{inviting ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : "Send invite"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Invite result — show credentials once */}
|
||||
{inviteResult && (
|
||||
<div className="mx-6 mb-4 bg-[#16A34A]/5 border border-[#16A34A]/20 p-4 space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Check className="h-4 w-4 text-[#16A34A]" />
|
||||
<p className="text-sm font-bold text-[#111827]">Invited!</p>
|
||||
</div>
|
||||
<p className="text-xs text-gray-600">Share these login details with them. The password is shown only once.</p>
|
||||
<div className="bg-white border border-gray-200 p-3 font-mono text-xs space-y-1">
|
||||
<p>Email: <strong>{inviteResult.email}</strong></p>
|
||||
<p>Password: <strong>{inviteResult.tempPassword}</strong></p>
|
||||
<p>Login: <strong>{typeof window !== "undefined" ? window.location.origin : ""}/login</strong></p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
onClick={() => copyCredentials(inviteResult.email, inviteResult.tempPassword)}
|
||||
className="flex-1 bg-[#111827] py-2 text-xs font-bold text-white hover:bg-gray-800 flex items-center justify-center gap-1.5"
|
||||
>
|
||||
{copiedCred ? <><Check className="h-3 w-3" /> Copied</> : <><Copy className="h-3 w-3" /> Copy credentials</>}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
const text = `Your login for ${settings?.name || "Pledge Now Pay Later"}:\n\nEmail: ${inviteResult.email}\nPassword: ${inviteResult.tempPassword}\nLogin: ${window.location.origin}/login`
|
||||
window.open(`https://wa.me/?text=${encodeURIComponent(text)}`, "_blank")
|
||||
}}
|
||||
className="bg-[#25D366] py-2 px-4 text-xs font-bold text-white hover:bg-[#25D366]/90 flex items-center gap-1.5"
|
||||
>
|
||||
<MessageCircle className="h-3 w-3" /> WhatsApp
|
||||
</button>
|
||||
</div>
|
||||
<button onClick={() => { setInviteResult(null); setShowInvite(false) }} className="text-xs text-gray-400 hover:text-gray-600">Done</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Team list */}
|
||||
<div className="divide-y divide-gray-50">
|
||||
{team.map(m => {
|
||||
const r = ROLE_LABELS[m.role] || ROLE_LABELS.staff
|
||||
const isCurrentUser = m.id === currentUser?.id
|
||||
const RoleIcon = r.icon
|
||||
return (
|
||||
<div key={m.id} className="px-6 py-3 flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-[#1E40AF]/10 flex items-center justify-center shrink-0">
|
||||
<RoleIcon className="h-4 w-4 text-[#1E40AF]" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-medium text-[#111827] truncate">{m.name || m.email}</p>
|
||||
{isCurrentUser && <span className="text-[9px] font-bold text-gray-400">You</span>}
|
||||
</div>
|
||||
<p className="text-[10px] text-gray-500">{m.email}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
{isAdmin && !isCurrentUser ? (
|
||||
<select
|
||||
value={m.role}
|
||||
onChange={e => changeRole(m.id, e.target.value)}
|
||||
className="text-[10px] font-bold border border-gray-200 px-2 py-1 bg-white"
|
||||
>
|
||||
{Object.entries(ROLE_LABELS).map(([key, v]) => (
|
||||
<option key={key} value={key}>{v.label}</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<span className="text-[10px] font-bold px-2 py-0.5 bg-gray-100 text-gray-600">{r.label}</span>
|
||||
)}
|
||||
{isAdmin && !isCurrentUser && (
|
||||
<button onClick={() => removeMember(m.id)} className="text-gray-300 hover:text-[#DC2626] p-1 transition-colors">
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ── 3. Bank account ── */}
|
||||
<div className="bg-white border border-gray-200 p-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Bank account</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5">These details are shown to donors so they can transfer money to you. Each pledge gets a unique reference code.</p>
|
||||
<p className="text-xs text-gray-500 mt-0.5">Shown to donors so they know where to transfer. Each pledge gets a unique reference.</p>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div><label className="text-[10px] font-bold text-gray-500 block mb-1">Bank name</label><Input value={settings.bankName} onChange={e => update("bankName", e.target.value)} placeholder="e.g. Barclays" /></div>
|
||||
@@ -80,41 +309,18 @@ export default function SettingsPage() {
|
||||
<div><label className="text-[10px] font-bold text-gray-500 block mb-1">Account number</label><Input value={settings.bankAccountNo} onChange={e => update("bankAccountNo", e.target.value)} placeholder="12345678" /></div>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">Reference code prefix</label>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">Reference prefix</label>
|
||||
<Input value={settings.refPrefix} onChange={e => update("refPrefix", e.target.value)} maxLength={4} className="w-24" />
|
||||
<p className="text-[10px] text-gray-400 mt-1">Donors will see references like <strong>{settings.refPrefix}-XXXX-50</strong></p>
|
||||
<p className="text-[10px] text-gray-400 mt-1">Donors see references like <strong>{settings.refPrefix}-XXXX-50</strong></p>
|
||||
</div>
|
||||
<SaveButton section="bank" data={{ bankName: settings.bankName, bankSortCode: settings.bankSortCode, bankAccountNo: settings.bankAccountNo, bankAccountName: settings.bankAccountName, refPrefix: settings.refPrefix }} />
|
||||
</div>
|
||||
|
||||
{/* Direct Debit */}
|
||||
<div className="bg-white border border-gray-200 p-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Direct Debit</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5">Accept Direct Debit payments via GoCardless. Donors set up a mandate and payments are collected automatically.</p>
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">GoCardless access token</label>
|
||||
<Input type="password" value={settings.gcAccessToken} onChange={e => update("gcAccessToken", e.target.value)} placeholder="sandbox_xxxxx or live_xxxxx" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">Mode</label>
|
||||
<div className="flex gap-2 mt-1">
|
||||
{["sandbox", "live"].map(env => (
|
||||
<button key={env} onClick={() => update("gcEnvironment", env)} className={`px-3 py-1.5 text-xs font-bold border-2 transition-colors ${settings.gcEnvironment === env ? env === "live" ? "border-[#DC2626] bg-[#DC2626]/5 text-[#DC2626]" : "border-[#1E40AF] bg-[#1E40AF]/5 text-[#1E40AF]" : "border-gray-200 text-gray-400"}`}>
|
||||
{env === "sandbox" ? "Test mode" : "Live mode"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<SaveButton section="gc" data={{ gcAccessToken: settings.gcAccessToken, gcEnvironment: settings.gcEnvironment }} />
|
||||
</div>
|
||||
|
||||
{/* Branding */}
|
||||
{/* ── 4. Charity details ── */}
|
||||
<div className="bg-white border border-gray-200 p-6 space-y-4">
|
||||
<div>
|
||||
<h3 className="text-base font-bold text-[#111827]">Your charity</h3>
|
||||
<p className="text-xs text-gray-500 mt-0.5">This name and colour appear on pledge pages and WhatsApp messages.</p>
|
||||
<p className="text-xs text-gray-500 mt-0.5">Name and colour shown on pledge pages and WhatsApp messages.</p>
|
||||
</div>
|
||||
<div><label className="text-[10px] font-bold text-gray-500 block mb-1">Charity name</label><Input value={settings.name} onChange={e => update("name", e.target.value)} /></div>
|
||||
<div>
|
||||
@@ -126,11 +332,36 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
<SaveButton section="brand" data={{ name: settings.name, primaryColor: settings.primaryColor }} />
|
||||
</div>
|
||||
|
||||
{/* ── 5. Direct Debit (collapsed) ── */}
|
||||
<details className="bg-white border border-gray-200">
|
||||
<summary className="p-6 text-base font-bold text-[#111827] cursor-pointer hover:bg-gray-50 transition-colors">
|
||||
Direct Debit <span className="text-xs font-normal text-gray-400 ml-2">GoCardless integration</span>
|
||||
</summary>
|
||||
<div className="px-6 pb-6 space-y-4 border-t border-gray-100 pt-4">
|
||||
<p className="text-xs text-gray-500">Accept Direct Debit payments via GoCardless. Donors set up a mandate and payments are collected automatically.</p>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">GoCardless access token</label>
|
||||
<Input type="password" value={settings.gcAccessToken} onChange={e => update("gcAccessToken", e.target.value)} placeholder="sandbox_xxxxx or live_xxxxx" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="text-[10px] font-bold text-gray-500 block mb-1">Mode</label>
|
||||
<div className="flex gap-2 mt-1">
|
||||
{["sandbox", "live"].map(env => (
|
||||
<button key={env} onClick={() => update("gcEnvironment", env)} className={`px-3 py-1.5 text-xs font-bold border-2 transition-colors ${settings.gcEnvironment === env ? env === "live" ? "border-[#DC2626] bg-[#DC2626]/5 text-[#DC2626]" : "border-[#1E40AF] bg-[#1E40AF]/5 text-[#1E40AF]" : "border-gray-200 text-gray-400"}`}>
|
||||
{env === "sandbox" ? "Test mode" : "Live mode"}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<SaveButton section="gc" data={{ gcAccessToken: settings.gcAccessToken, gcEnvironment: settings.gcEnvironment }} />
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ─── WhatsApp Connection Panel ───────────────────────────────
|
||||
// ─── WhatsApp Connection Panel (unchanged) ───────────────────
|
||||
|
||||
function WhatsAppPanel() {
|
||||
const [status, setStatus] = useState<string>("loading")
|
||||
@@ -167,10 +398,7 @@ function WhatsAppPanel() {
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-10 h-10 bg-[#25D366]/10 flex items-center justify-center"><Smartphone className="h-5 w-5 text-[#25D366]" /></div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-[#111827]">{pushName || "WhatsApp"}</p>
|
||||
<p className="text-xs text-gray-500">+{phone}</p>
|
||||
</div>
|
||||
<div><p className="text-sm font-medium text-[#111827]">{pushName || "WhatsApp"}</p><p className="text-xs text-gray-500">+{phone}</p></div>
|
||||
<Wifi className="h-5 w-5 text-[#25D366] ml-auto" />
|
||||
</div>
|
||||
<div className="mt-4 pt-3 border-t border-[#25D366]/10 grid grid-cols-3 gap-3">
|
||||
@@ -178,12 +406,7 @@ function WhatsAppPanel() {
|
||||
{ label: "Receipts", desc: "Auto-sends when someone pledges" },
|
||||
{ label: "Reminders", desc: "4-step reminder sequence" },
|
||||
{ label: "Chatbot", desc: "Donors reply PAID, HELP, etc." },
|
||||
].map(f => (
|
||||
<div key={f.label} className="text-center">
|
||||
<p className="text-xs font-bold text-[#111827]">{f.label}</p>
|
||||
<p className="text-[9px] text-gray-500 mt-0.5">{f.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
].map(f => (<div key={f.label} className="text-center"><p className="text-xs font-bold text-[#111827]">{f.label}</p><p className="text-[9px] text-gray-500 mt-0.5">{f.desc}</p></div>))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -194,7 +417,7 @@ function WhatsAppPanel() {
|
||||
<div className="bg-white border border-[#F59E0B]/30 p-6">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<h3 className="text-base font-bold text-[#111827]">WhatsApp</h3>
|
||||
<span className="text-[10px] font-bold px-1.5 py-0.5 bg-[#F59E0B]/10 text-[#F59E0B] flex items-center gap-1"><QrCode className="h-2.5 w-2.5" /> Scan QR code</span>
|
||||
<span className="text-[10px] font-bold px-1.5 py-0.5 bg-[#F59E0B]/10 text-[#F59E0B] flex items-center gap-1"><QrCode className="h-2.5 w-2.5" /> Scan QR</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
{qrImage ? (
|
||||
@@ -203,18 +426,13 @@ function WhatsAppPanel() {
|
||||
<img src={qrImage} alt="WhatsApp QR Code" className="w-[200%] h-auto max-w-none" style={{ marginLeft: "-30%", marginTop: "-35%" }} />
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-64 h-64 border-2 border-dashed border-gray-200 flex items-center justify-center">
|
||||
<Loader2 className="h-6 w-6 text-gray-400 animate-spin" />
|
||||
</div>
|
||||
<div className="w-64 h-64 border-2 border-dashed border-gray-200 flex items-center justify-center"><Loader2 className="h-6 w-6 text-gray-400 animate-spin" /></div>
|
||||
)}
|
||||
<div className="text-center space-y-1">
|
||||
<p className="text-sm font-bold text-[#111827]">Scan with your phone</p>
|
||||
<p className="text-xs text-gray-500">Open WhatsApp → Settings → Linked Devices → Link a Device</p>
|
||||
<p className="text-[10px] text-gray-400">Auto-refreshes every 5 seconds</p>
|
||||
<p className="text-xs text-gray-500">WhatsApp → Settings → Linked Devices → Link a Device</p>
|
||||
</div>
|
||||
<button onClick={checkStatus} className="border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-50 flex items-center gap-1.5">
|
||||
<RefreshCw className="h-3 w-3" /> Refresh
|
||||
</button>
|
||||
<button onClick={checkStatus} className="border border-gray-200 px-3 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-50 flex items-center gap-1.5"><RefreshCw className="h-3 w-3" /> Refresh</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
@@ -233,15 +451,11 @@ function WhatsAppPanel() {
|
||||
<p className="font-medium text-gray-600">• Pledge receipts with bank details</p>
|
||||
<p className="font-medium text-gray-600">• Payment reminders on a 4-step schedule</p>
|
||||
<p className="font-medium text-gray-600">• A chatbot (they reply PAID, HELP, or CANCEL)</p>
|
||||
<p className="font-medium text-gray-600">• Volunteer notifications on each pledge</p>
|
||||
</div>
|
||||
</div>
|
||||
<button onClick={startSession} disabled={starting} className="mt-4 w-full bg-[#25D366] px-4 py-2.5 text-sm font-bold text-white hover:bg-[#25D366]/90 disabled:opacity-50 transition-colors flex items-center justify-center gap-2">
|
||||
{starting ? <><Loader2 className="h-4 w-4 animate-spin" /> Starting...</> : <><MessageCircle className="h-4 w-4" /> Connect WhatsApp</>}
|
||||
</button>
|
||||
<p className="text-[10px] text-gray-400 text-center mt-2">
|
||||
Free — no WhatsApp Business API required
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user