From 3996c2550ed524a233eb969c427fc2594eb81f5f Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Thu, 22 Jan 2026 20:28:44 +0100
Subject: [PATCH] feat(auth): implement role-based access control in
 SiteDashboard and SiteSettings, enhancing user experience with edit
 permissions

---
 app/sites/[id]/page.tsx          |   6 ++
 app/sites/[id]/settings/page.tsx | 156 +++++++++++++++++--------------
 components/sites/SiteList.tsx    |  18 ++--
 lib/auth/context.tsx             |  12 ++-
 4 files changed, 115 insertions(+), 77 deletions(-)

diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx
index 517e971..bf74656 100644
--- a/app/sites/[id]/page.tsx
+++ b/app/sites/[id]/page.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { useAuth } from '@/lib/auth/context'
 import { useEffect, useState } from 'react'
 import { useParams, useRouter } from 'next/navigation'
 import { getSite, type Site } from '@/lib/api/sites'
@@ -17,6 +18,9 @@ import Chart from '@/components/dashboard/Chart'
 import PerformanceStats from '@/components/dashboard/PerformanceStats'
 
 export default function SiteDashboardPage() {
+  const { user } = useAuth()
+  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+
   const params = useParams()
   const router = useRouter()
   const siteId = params.id as string
@@ -221,12 +225,14 @@ export default function SiteDashboardPage() {
                 className="min-w-[100px]"
               />
             )}
+            {canEdit && (
             <button
               onClick={() => router.push(`/sites/${siteId}/settings`)}
               className="btn-secondary text-sm"
             >
               Settings
             </button>
+            )}
           </div>
         </div>
       </div>
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index f8999df..203a0a0 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -12,6 +12,7 @@ import Select from '@/components/ui/Select'
 import { APP_URL, API_URL } from '@/lib/api/client'
 import { generatePrivacySnippet } from '@/lib/utils/privacySnippet'
 import { motion, AnimatePresence } from 'framer-motion'
+import { useAuth } from '@/lib/auth/context'
 import {
   GearIcon,
   GlobeIcon,
@@ -51,6 +52,9 @@ const TIMEZONES = [
 ]
 
 export default function SiteSettingsPage() {
+  const { user } = useAuth()
+  const canEdit = user?.role === 'owner' || user?.role === 'admin'
+
   const params = useParams()
   const router = useRouter()
   const siteId = params.id as string
@@ -302,6 +306,13 @@ export default function SiteSettingsPage() {
 
         {/* Content Area */}
         <div className="flex-1 relative">
+          {!canEdit && (
+            <div className="mb-6 p-4 bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200 rounded-xl border border-blue-200 dark:border-blue-800 flex items-center gap-3">
+              <ExclamationTriangleIcon className="w-5 h-5" />
+              <p className="text-sm font-medium">You have read-only access to this site. Contact an admin to make changes.</p>
+            </div>
+          )}
+
           <motion.div
             key={activeTab}
             initial={{ opacity: 0, x: 20 }}
@@ -398,28 +409,31 @@ export default function SiteSettingsPage() {
                     </div>
                   </div>
 
-                  <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
-                    <button
-                      type="submit"
-                      disabled={saving}
-                      className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium 
-                      hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                    >
-                      {saving ? (
-                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                      ) : (
-                        <>
-                          <CheckIcon className="w-4 h-4" />
-                          Save Changes
-                        </>
-                      )}
-                    </button>
-                  </div>
-                </form>
+                    <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
+                    {canEdit && (
+                      <button
+                        type="submit"
+                        disabled={saving}
+                        className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium 
+                        hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+                      >
+                        {saving ? (
+                          <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                        ) : (
+                          <>
+                            <CheckIcon className="w-4 h-4" />
+                            Save Changes
+                          </>
+                        )}
+                      </button>
+                    )}
+                    </div>
+                  </form>
 
-                <div className="space-y-6">
-                  <div>
-                    <h2 className="text-xl font-semibold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
+                  {canEdit && (
+                  <div className="space-y-6">
+                    <div>
+                      <h2 className="text-xl font-semibold text-red-600 dark:text-red-500 mb-1">Danger Zone</h2>
                     <p className="text-sm text-neutral-500 dark:text-neutral-400">Irreversible actions for your site.</p>
                   </div>
 
@@ -450,9 +464,9 @@ export default function SiteSettingsPage() {
                       </button>
                     </div>
                   </div>
+                  )}
                 </div>
-              </div>
-            )}
+              )}
 
             {activeTab === 'visibility' && (
               <div className="space-y-12">
@@ -566,21 +580,23 @@ export default function SiteSettingsPage() {
                   </div>
 
                   <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
-                    <button
-                      type="submit"
-                      disabled={saving}
-                      className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium 
-                      hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                    >
-                      {saving ? (
-                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                      ) : (
-                        <>
-                          <CheckIcon className="w-4 h-4" />
-                          Save Changes
-                        </>
-                      )}
-                    </button>
+                    {canEdit && (
+                      <button
+                        type="submit"
+                        disabled={saving}
+                        className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium 
+                        hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+                      >
+                        {saving ? (
+                          <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                        ) : (
+                          <>
+                            <CheckIcon className="w-4 h-4" />
+                            Save Changes
+                          </>
+                        )}
+                      </button>
+                    )}
                   </div>
                 </form>
               </div>
@@ -819,21 +835,23 @@ export default function SiteSettingsPage() {
                   </div>
 
                   <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
-                    <button
-                      type="submit"
-                      disabled={saving}
-                      className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
-                      hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                    >
-                      {saving ? (
-                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                      ) : (
-                        <>
-                          <CheckIcon className="w-4 h-4" />
-                          Save Changes
-                        </>
-                      )}
-                    </button>
+                    {canEdit && (
+                      <button
+                        type="submit"
+                        disabled={saving}
+                        className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
+                        hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+                      >
+                        {saving ? (
+                          <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                        ) : (
+                          <>
+                            <CheckIcon className="w-4 h-4" />
+                            Save Changes
+                          </>
+                        )}
+                      </button>
+                    )}
                   </div>
                 </form>
               </div>
@@ -985,21 +1003,23 @@ export default function SiteSettingsPage() {
                   </AnimatePresence>
 
                   <div className="pt-4 border-t border-neutral-100 dark:border-neutral-800 flex justify-end">
-                    <button
-                      type="submit"
-                      disabled={saving}
-                      className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
-                      hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
-                    >
-                      {saving ? (
-                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
-                      ) : (
-                        <>
-                          <CheckIcon className="w-4 h-4" />
-                          Save Changes
-                        </>
-                      )}
-                    </button>
+                    {canEdit && (
+                      <button
+                        type="submit"
+                        disabled={saving}
+                        className="flex items-center gap-2 px-6 py-2.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 rounded-xl font-medium
+                        hover:bg-neutral-800 dark:hover:bg-neutral-100 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+                      >
+                        {saving ? (
+                          <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+                        ) : (
+                          <>
+                            <CheckIcon className="w-4 h-4" />
+                            Save Changes
+                          </>
+                        )}
+                      </button>
+                    )}
                   </div>
                 </form>
               </div>
diff --git a/components/sites/SiteList.tsx b/components/sites/SiteList.tsx
index daf73bc..e619a29 100644
--- a/components/sites/SiteList.tsx
+++ b/components/sites/SiteList.tsx
@@ -5,9 +5,11 @@ import Link from 'next/link'
 import { listSites, deleteSite, type Site } from '@/lib/api/sites'
 import { toast } from 'sonner'
 import LoadingOverlay from '../LoadingOverlay'
+import { useAuth } from '@/lib/auth/context'
 import { BarChartIcon } from '@radix-ui/react-icons'
 
 export default function SiteList() {
+  const { user } = useAuth()
   const [sites, setSites] = useState<Site[]>([])
   const [loading, setLoading] = useState(true)
 
@@ -72,13 +74,15 @@ export default function SiteList() {
               <BarChartIcon className="w-4 h-4" />
               View Dashboard
             </Link>
-            <button
-              type="button"
-              onClick={() => handleDelete(site.id)}
-              className="shrink-0 text-sm text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 py-2 px-2"
-            >
-              Delete
-            </button>
+            {(user?.role === 'owner' || user?.role === 'admin') && (
+              <button
+                type="button"
+                onClick={() => handleDelete(site.id)}
+                className="shrink-0 text-sm text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 py-2 px-2"
+              >
+                Delete
+              </button>
+            )}
           </div>
         </div>
       ))}
diff --git a/lib/auth/context.tsx b/lib/auth/context.tsx
index 3837d7c..61687b2 100644
--- a/lib/auth/context.tsx
+++ b/lib/auth/context.tsx
@@ -63,8 +63,16 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
   const refresh = useCallback(async () => {
     try {
       const userData = await apiRequest<User>('/auth/user/me')
-      setUser(userData)
-      localStorage.setItem('user', JSON.stringify(userData))
+      
+      setUser(prev => {
+        const merged = {
+          ...userData,
+          org_id: prev?.org_id,
+          role: prev?.role
+        }
+        localStorage.setItem('user', JSON.stringify(merged))
+        return merged
+      })
     } catch (e) {
       console.error('Failed to refresh user data', e)
     }