FM / components

/opt/canhelp/apps/web/src/components

Name	Size	Mode	Actions
AdminRolePreview.tsx	4928	0644	edit dl rm
BecomeSpecialistButton.tsx	702	0644	edit dl rm
CategoryIcon.tsx	1576	0644	edit dl rm
FaqAccordion.tsx	1500	0644	edit dl rm
FavoriteSpecialistButton.tsx	1464	0644	edit dl rm
Footer.tsx	3019	0644	edit dl rm
Header.tsx	30479	0644	edit dl rm
HeroFloatingIcons.tsx	4378	0644	edit dl rm
HeroSearch.tsx	1611	0644	edit dl rm
HomeCategoryGrid.tsx	4625	0644	edit dl rm
HomeCityCloud.tsx	1790	0644	edit dl rm
HomeCityPicker.tsx	5490	0644	edit dl rm
HomeSectionArt.tsx	5912	0644	edit dl rm
LanguageSwitcher.tsx	2438	0644	edit dl rm
PlanBadge.tsx	3100	0644	edit dl rm
PromoCountdown.tsx	3483	0644	edit dl rm
ScrollToTopButton.tsx	818	0644	edit dl rm
Section.tsx	252	0644	edit dl rm
ShareButton.tsx	1041	0644	edit dl rm
SocialIcons.tsx	6871	0644	edit dl rm
SpecialistsFiltersClient.tsx	6461	0644	edit dl rm
SpecialistTaskCard.tsx	2837	0644	edit dl rm
SupportModal.tsx	6195	0644	edit dl rm
TaskCategoryPicker.tsx	11117	0644	edit dl rm
TaskLocationPicker.tsx	11038	0644	edit dl rm
Turnstile.tsx	651	0644	edit dl rm
UpgradePrompt.tsx	3427	0644	edit dl rm
UsageMeter.tsx	1602	0644	edit dl rm

Edit: /opt/canhelp/apps/web/src/components/AdminRolePreview.tsx (4928B)

'use client'

import { useSession } from '@/lib/auth'
import { useRouter } from 'next/navigation'
import { useEffect, useState, useRef } from 'react'
import { getPlans, updateAdminUser, type Plan } from '@/lib/api'

const ORIG_PLAN_KEY = 'canhelp_admin_orig_plan'

function getPreviewRole(): null {
  return null
}

const TIER_COLORS: Record<string, string> = {
  free: 'bg-slate-100 text-slate-600',
  pro: 'bg-green-100 text-green-700',
  ultimate: 'bg-amber-100 text-amber-700',
}

export function AdminRolePreview() {
  const { data: session } = useSession()
  const router = useRouter()
  const isAdmin = (session?.user as any)?.role === 'admin'
  const userId = (session?.user as any)?.id as string | undefined

const [mounted, setMounted] = useState(false)
  const [plans, setPlans] = useState<Plan[]>([])
  const [activePlanId, setActivePlanId] = useState<string | null>(null)
  const [loading, setLoading] = useState(false)
  const [expanded, setExpanded] = useState(false)
  const origPlanRef = useRef<string | null>(null)

useEffect(() => setMounted(true), [])

useEffect(() => {
    if (typeof window !== 'undefined') {
      origPlanRef.current = localStorage.getItem(ORIG_PLAN_KEY)
    }
  }, [])

useEffect(() => {
    if (!isAdmin) return
    getPlans().then(setPlans).catch(() => {})
  }, [isAdmin])

useEffect(() => {
    // Sync active plan from session
    const currentPlanId = (session?.user as any)?.planId ?? null
    setActivePlanId(currentPlanId)
  }, [session])

if (!mounted || !isAdmin) return null

const setPlan = async (planId: string | null) => {
    if (!userId) return
    setLoading(true)
    try {
      // Save original plan on first change
      if (!origPlanRef.current && activePlanId) {
        localStorage.setItem(ORIG_PLAN_KEY, activePlanId)
        origPlanRef.current = activePlanId
      }
      await updateAdminUser(userId, { planId })
      setActivePlanId(planId)
      window.dispatchEvent(new CustomEvent('canhelp:plan-changed', { detail: { planId } }))
      router.refresh()
    } catch {}
    setLoading(false)
  }

const restorePlan = async () => {
    const orig = origPlanRef.current
    localStorage.removeItem(ORIG_PLAN_KEY)
    origPlanRef.current = null
    await setPlan(orig ?? null)
  }

const visiblePlans = plans

const hasOrigPlan = !!origPlanRef.current

return (
    <div
      className="fixed bottom-20 right-4 z-50 bg-white border border-slate-200 rounded-2xl shadow-lg text-xs font-medium select-none"
      style={{ minWidth: 130 }}
    >
      {/* Header — always visible, click to expand */}
      <button
        onClick={() => setExpanded((v) => !v)}
        className="flex items-center justify-between gap-2 w-full px-3 py-2 text-slate-500 hover:text-slate-700 transition rounded-2xl"
      >
        <span>👁 Preview</span>
        <span className="text-slate-300">{expanded ? '▲' : '▼'}</span>
      </button>

{expanded && (
        <div className="flex flex-col gap-1 px-2 pb-2 border-t border-slate-100 pt-2">
          {/* Plan selector */}
          {visiblePlans.length > 0 && (
            <>
              <div className="text-slate-400 px-1 mt-2 mb-0.5">Plan</div>
              {visiblePlans.map((plan) => (
                <button
                  key={plan.id}
                  disabled={loading}
                  onClick={() => setPlan(plan.id === activePlanId ? null : plan.id)}
                  className={`flex items-center justify-between gap-2 px-3 py-1.5 rounded-xl transition text-left ${
                    activePlanId === plan.id
                      ? 'bg-indigo-600 text-white'
                      : 'text-slate-600 hover:bg-slate-100'
                  } ${loading ? 'opacity-50' : ''}`}
                >
                  <span className="truncate max-w-[90px]">{plan.name}</span>
                  <span className={`px-1.5 py-0.5 rounded-full text-[10px] font-semibold ${
                    activePlanId === plan.id ? 'bg-white/20 text-white' : (TIER_COLORS[plan.tier] ?? TIER_COLORS.free)
                  }`}>
                    {plan.tier}
                  </span>
                </button>
              ))}
              {activePlanId && (
                <button
                  disabled={loading}
                  onClick={() => setPlan(null)}
                  className="px-3 py-1 rounded-xl text-slate-400 hover:text-red-500 hover:bg-red-50 transition text-left"
                >
                  ✕ No plan
                </button>
              )}
              {hasOrigPlan && (
                <button
                  disabled={loading}
                  onClick={restorePlan}
                  className="px-3 py-1 rounded-xl text-green-600 hover:bg-green-50 transition text-left"
                >
                  ↩ Restore
                </button>
              )}
            </>
          )}
        </div>
      )}
    </div>
  )
}

'use client' import { useSession } from '@/lib/auth' import { useRouter } from 'next/navigation' import { useEffect, useState, useRef } from 'react' import { getPlans, updateAdminUser, type Plan } from '@/lib/api' const ORIG_PLAN_KEY = 'canhelp_admin_orig_plan' function getPreviewRole(): null { return null } const TIER_COLORS: Record = { free: 'bg-slate-100 text-slate-600', pro: 'bg-green-100 text-green-700', ultimate: 'bg-amber-100 text-amber-700', } export function AdminRolePreview() { const { data: session } = useSession() const router = useRouter() const isAdmin = (session?.user as any)?.role === 'admin' const userId = (session?.user as any)?.id as string | undefined const [mounted, setMounted] = useState(false) const [plans, setPlans] = useState([]) const [activePlanId, setActivePlanId] = useState(null) const [loading, setLoading] = useState(false) const [expanded, setExpanded] = useState(false) const origPlanRef = useRef(null) useEffect(() => setMounted(true), []) useEffect(() => { if (typeof window !== 'undefined') { origPlanRef.current = localStorage.getItem(ORIG_PLAN_KEY) } }, []) useEffect(() => { if (!isAdmin) return getPlans().then(setPlans).catch(() => {}) }, [isAdmin]) useEffect(() => { // Sync active plan from session const currentPlanId = (session?.user as any)?.planId ?? null setActivePlanId(currentPlanId) }, [session]) if (!mounted || !isAdmin) return null const setPlan = async (planId: string | null) => { if (!userId) return setLoading(true) try { // Save original plan on first change if (!origPlanRef.current && activePlanId) { localStorage.setItem(ORIG_PLAN_KEY, activePlanId) origPlanRef.current = activePlanId } await updateAdminUser(userId, { planId }) setActivePlanId(planId) window.dispatchEvent(new CustomEvent('canhelp:plan-changed', { detail: { planId } })) router.refresh() } catch {} setLoading(false) } const restorePlan = async () => { const orig = origPlanRef.current localStorage.removeItem(ORIG_PLAN_KEY) origPlanRef.current = null await setPlan(orig ?? null) } const visiblePlans = plans const hasOrigPlan = !!origPlanRef.current return (

{/* Header — always visible, click to expand */} {expanded && (

{/* Plan selector */} {visiblePlans.length > 0 && ( <>

Plan

{visiblePlans.map((plan) => ( ))} {activePlanId && ( )} {hasOrigPlan && ( )} )}

)}

) }