feat(access-control): restrict company profile edit to owners/admins and display role

Add conditional rendering for edit button based on user role and show user role in sidebar

Author: akshay0611

app/dashboard/company/[slug]/page.tsx

@@ -164,13 +164,15 @@ export default function CompanySlugDashboardPage() {
               </p>
             </div>
           </div>
-          <div className="pt-4">
-            <Button asChild variant="outline">
-              <Link href={`/dashboard/company/${currentCompany.slug}/settings`}>
-                Edit Company Profile
-              </Link>
-            </Button>
-          </div>
+          {userRole && ['owner', 'admin'].includes(userRole) && (
+            <div className="pt-4">
+              <Button asChild variant="outline">
+                <Link href={`/dashboard/company/${currentCompany.slug}/settings`}>
+                  Edit Company Profile
+                </Link>
+              </Button>
+            </div>
+          )}
         </CardContent>
       </Card>
     </div>

components/dashboard/CompanySidebar.tsx

@@ -70,7 +70,7 @@ export function CompanySidebar({
   const toggleCollapsed = () => setCollapsed(!collapsed)
   const pathname = usePathname()
   const { navigateTo } = useSafeNavigation()
-  const { currentCompany, userCompanies, switchCompany } = useCompanyContext()
+  const { currentCompany, userCompanies, userRole, switchCompany } = useCompanyContext()
 
   return (
     <SidebarProvider>
@@ -164,7 +164,7 @@ export function CompanySidebar({
                           {name}
                         </span>
                         <span className="truncate text-xs text-purple-300">
-                          {currentCompany?.name}
+                          {userRole ? `${userRole.charAt(0).toUpperCase() + userRole.slice(1)} • ${currentCompany?.name}` : currentCompany?.name}
                         </span>
                       </div>
                       <ChevronDown className="size-4 text-zinc-400" />
@@ -420,7 +420,7 @@ export function CompanySidebar({
                               {name}
                             </span>
                             <span className="truncate text-xs text-purple-300">
-                              {currentCompany?.name}
+                              {userRole ? `${userRole.charAt(0).toUpperCase() + userRole.slice(1)} • ${currentCompany?.name}` : currentCompany?.name}
                             </span>
                           </div>
                           <ChevronDown className="ml-auto size-4 text-zinc-400 flex-shrink-0" />