feat(settings): add retention, excluded paths, pagespeed to unified privacy tab

components/settings/unified/tabs/SitePrivacyTab.tsx

@@ -2,8 +2,13 @@
 
 import { useState, useEffect } from 'react'
 import { Button, Select, Toggle, toast, Spinner } from '@ciphera-net/ui'
-import { useSite } from '@/lib/swr/dashboard'
+import { useSite, useSubscription, usePageSpeedConfig } from '@/lib/swr/dashboard'
 import { updateSite } from '@/lib/api/sites'
+import { updatePageSpeedConfig } from '@/lib/api/pagespeed'
+import { getRetentionOptionsForPlan, formatRetentionMonths } from '@/lib/plans'
+import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
+import { Copy, CheckCircle } from '@phosphor-icons/react'
+import Link from 'next/link'
 
 const GEO_OPTIONS = [
   { value: 'full', label: 'Full (country, region, city)' },
@@ -13,6 +18,8 @@ const GEO_OPTIONS = [
 
 export default function SitePrivacyTab({ siteId }: { siteId: string }) {
   const { data: site, mutate } = useSite(siteId)
+  const { data: subscription, error: subscriptionError, mutate: mutateSubscription } = useSubscription()
+  const { data: psiConfig, mutate: mutatePSIConfig } = usePageSpeedConfig(siteId)
   const [collectPagePaths, setCollectPagePaths] = useState(true)
   const [collectReferrers, setCollectReferrers] = useState(true)
   const [collectDeviceInfo, setCollectDeviceInfo] = useState(true)
@@ -20,6 +27,8 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
   const [collectGeoData, setCollectGeoData] = useState('full')
   const [hideUnknownLocations, setHideUnknownLocations] = useState(false)
   const [dataRetention, setDataRetention] = useState(6)
+  const [excludedPaths, setExcludedPaths] = useState('')
+  const [snippetCopied, setSnippetCopied] = useState(false)
   const [saving, setSaving] = useState(false)
 
   useEffect(() => {
@@ -31,6 +40,7 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
       setCollectGeoData(site.collect_geo_data ?? 'full')
       setHideUnknownLocations(site.hide_unknown_locations ?? false)
       setDataRetention(site.data_retention_months ?? 6)
+      setExcludedPaths((site.excluded_paths || []).join('\n'))
     }
   }, [site])
 
@@ -45,6 +55,8 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
         collect_screen_resolution: collectScreenRes,
         collect_geo_data: collectGeoData as 'full' | 'country' | 'none',
         hide_unknown_locations: hideUnknownLocations,
+        data_retention_months: dataRetention,
+        excluded_paths: excludedPaths.split('\n').map(p => p.trim()).filter(Boolean),
       })
       await mutate()
       toast.success('Privacy settings updated')
@@ -93,12 +105,121 @@ export default function SitePrivacyTab({ siteId }: { siteId: string }) {
         <p className="text-xs text-neutral-500 mt-1">Controls location granularity. "Disabled" collects no geographic data at all.</p>
       </div>
 
-      <div>
-        <label className="block text-sm font-medium text-neutral-300 mb-1.5">Data retention</label>
-        <p className="text-sm text-neutral-400">
-          Currently retaining data for <span className="font-medium text-white">{dataRetention} months</span>.
-          Manage retention in the full <a href={`/sites/${siteId}/settings`} className="text-brand-orange hover:underline">site settings</a>.
-        </p>
+      {/* Data Retention */}
+      <div className="space-y-3 pt-6 border-t border-neutral-800">
+        <h4 className="text-sm font-medium text-neutral-300">Data Retention</h4>
+
+        {subscriptionError && (
+          <div className="p-3 rounded-xl border border-amber-800 bg-amber-900/20 flex items-center justify-between">
+            <p className="text-xs text-amber-200">Plan limits could not be loaded.</p>
+            <button onClick={() => mutateSubscription()} className="text-xs font-medium text-amber-400 hover:text-amber-300">Retry</button>
+          </div>
+        )}
+
+        <div className="p-4 bg-neutral-900/50 rounded-xl border border-neutral-800">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-white text-sm">Keep raw event data for</p>
+              <p className="text-xs text-neutral-400 mt-0.5">Events older than this are automatically deleted. Aggregated daily stats are kept permanently.</p>
+            </div>
+            <Select
+              value={String(dataRetention)}
+              onChange={(v) => setDataRetention(Number(v))}
+              options={getRetentionOptionsForPlan(subscription?.plan_id).map(o => ({ value: String(o.value), label: o.label }))}
+              variant="input"
+              className="min-w-[160px]"
+            />
+          </div>
+          {subscription && (
+            <p className="text-xs text-neutral-500 mt-2">
+              Your {subscription.plan_id?.includes('pro') ? 'Pro' : 'Free'} plan supports up to {formatRetentionMonths(Math.max(...getRetentionOptionsForPlan(subscription.plan_id).map(o => o.value)))} of data retention.
+            </p>
+          )}
+          {(!subscription || subscription.plan_id?.includes('free')) && (
+            <p className="text-xs text-neutral-500 mt-2">
+              <Link href="/pricing" className="text-brand-orange hover:underline">Upgrade</Link> for longer retention.
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Path Filtering */}
+      <div className="space-y-3 pt-6 border-t border-neutral-800">
+        <h4 className="text-sm font-medium text-neutral-300">Path Filtering</h4>
+        <div>
+          <label className="block text-sm font-medium text-neutral-300 mb-1.5">Excluded Paths</label>
+          <textarea
+            value={excludedPaths}
+            onChange={e => setExcludedPaths(e.target.value)}
+            rows={4}
+            placeholder={"/admin/*\n/staging/*"}
+            className="w-full px-4 py-3 border border-neutral-800 rounded-lg bg-neutral-900/50 text-white font-mono text-sm focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all"
+          />
+          <p className="text-xs text-neutral-500 mt-1">Enter paths to exclude from tracking (one per line). Supports wildcards (e.g., /admin/*).</p>
+        </div>
+      </div>
+
+      {/* PageSpeed Monitoring */}
+      <div className="space-y-3 pt-6 border-t border-neutral-800">
+        <h4 className="text-sm font-medium text-neutral-300">PageSpeed Monitoring</h4>
+        <div className="p-4 bg-neutral-900/50 rounded-xl border border-neutral-800">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium text-white text-sm">Check frequency</p>
+              <p className="text-xs text-neutral-400 mt-0.5">How often PageSpeed Insights runs automated checks.</p>
+            </div>
+            {psiConfig?.enabled ? (
+              <Select
+                value={psiConfig.check_frequency || 'weekly'}
+                onChange={async (v) => {
+                  try {
+                    await updatePageSpeedConfig(siteId, { check_frequency: v })
+                    mutatePSIConfig()
+                    toast.success('Check frequency updated')
+                  } catch {
+                    toast.error('Failed to update')
+                  }
+                }}
+                options={[
+                  { value: 'daily', label: 'Daily' },
+                  { value: 'weekly', label: 'Weekly' },
+                  { value: 'monthly', label: 'Monthly' },
+                ]}
+                variant="input"
+                className="min-w-[140px]"
+              />
+            ) : (
+              <span className="text-sm text-neutral-400">Not enabled</span>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Privacy Policy */}
+      <div className="space-y-3 pt-6 border-t border-neutral-800">
+        <h4 className="text-sm font-medium text-neutral-300">For your privacy policy</h4>
+        <p className="text-xs text-neutral-400">Copy the text below into your Privacy Policy. It updates automatically based on your saved settings.</p>
+        <p className="text-xs text-amber-600">This is provided for convenience and is not legal advice. Consult a lawyer for compliance requirements.</p>
+        <div className="relative">
+          <textarea
+            readOnly
+            rows={6}
+            value={generatePrivacySnippet(site)}
+            className="w-full px-4 py-3 pr-12 border border-neutral-800 rounded-xl bg-neutral-900/50 text-neutral-300 text-xs font-mono"
+          />
+          <button
+            type="button"
+            onClick={() => {
+              navigator.clipboard.writeText(generatePrivacySnippet(site))
+              setSnippetCopied(true)
+              toast.success('Privacy snippet copied')
+              setTimeout(() => setSnippetCopied(false), 2000)
+            }}
+            className="absolute top-3 right-3 p-2 rounded-lg bg-neutral-700 hover:bg-neutral-600 text-neutral-300 transition-colors"
+          >
+            {snippetCopied ? <CheckCircle weight="bold" className="w-4 h-4" /> : <Copy weight="bold" className="w-4 h-4" />}
+          </button>
+        </div>
       </div>
 
       <div className="flex justify-end pt-2">