Make the AddEntity buttons be disabled instead of invisible when the user doesn't have permission or the appropriate pre-conditions chosen to be able to use them.

Author: jhodapp

src/components/ui/dashboard/add-coaching-session-button.tsx

@@ -4,13 +4,14 @@ import { cn } from "@/components/lib/utils";
 
 interface AddCoachingSessionButtonProps
   extends React.ComponentPropsWithoutRef<"button"> {
+  disabled?: boolean;
   onClick?: () => void;
 }
 
 export const AddCoachingSessionButton = forwardRef<
   HTMLButtonElement,
   AddCoachingSessionButtonProps
->(({ className, onClick, ...props }, ref) => {
+>(({ className, disabled, onClick, ...props }, ref) => {
   const [hoveredItem, setHoveredItem] = useState<string | null>(null);
 
   const handleMouseEnter = (item: string) => {
@@ -24,10 +25,13 @@ export const AddCoachingSessionButton = forwardRef<
   return (
     <button
       ref={ref}
+      disabled={disabled}
       className={cn(
-        "flex items-center rounded-lg border border-border bg-card p-4 text-left transition-all hover:shadow-md",
-        hoveredItem === "coaching" && "shadow-md",
-        className // Merges passed className with existing classes
+        "flex items-center rounded-lg border border-border bg-card p-4 text-left",
+        disabled
+          ? "text-gray-300 cursor-not-allowed dark:bg-gray-700 dark:text-gray-400"
+          : "bg-card text-black hover:shadow-md transition-all dark:bg-gray-800 dark:text-white",
+        className
       )}
       onMouseEnter={() => handleMouseEnter("coaching")}
       onMouseLeave={handleMouseLeave}
@@ -38,7 +42,7 @@ export const AddCoachingSessionButton = forwardRef<
         <Calendar className="h-8 w-8 text-primary" />
       </div>
       <span className="ml-4 text-lg font-medium">Coaching Session</span>
-      {hoveredItem === "coaching" && (
+      {!disabled && hoveredItem === "coaching" && (
         <Plus className="ml-auto h-6 w-6 text-primary" />
       )}
     </button>

src/components/ui/dashboard/add-coaching-session-dialog.tsx

@@ -91,8 +91,7 @@ export function AddCoachingSessionDialog({
           ...(dialogTrigger.props as React.HTMLAttributes<HTMLButtonElement>),
           className: cn(
             (dialogTrigger.props as React.HTMLAttributes<HTMLButtonElement>)
-              .className,
-            isCoach ? "visible" : "invisible"
+              .className
           ),
         })}
       </DialogTrigger>

src/components/ui/dashboard/add-entities.tsx

@@ -6,11 +6,13 @@ import { AddCoachingSessionButton } from "./add-coaching-session-button";
 import { AddMemberButton } from "./add-member-button";
 import { useRouter } from "next/navigation";
 import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
+import { useAuthStore } from "@/lib/providers/auth-store-provider";
 
 export default function AddEntities() {
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const { currentOrganizationId } = useOrganizationStateStore((state) => state);
+  const { isCoach } = useAuthStore((state) => state);
 
   const onCoachingSessionAdded = () => {
     setOpen(false);
@@ -30,14 +32,21 @@ export default function AddEntities() {
           open={open}
           onOpenChange={setOpen}
           onCoachingSessionAdded={onCoachingSessionAdded}
-          dialogTrigger={<AddCoachingSessionButton />}
+          dialogTrigger={
+            <AddCoachingSessionButton
+              disabled={!isCoach || !currentOrganizationId}
+            />
+          }
         />
 
         {/* TODO: Refactor the AddMemberButton and AddMemberDialog to work just like
             AddCoachingSessionDialog does above, where the dialog is the parent container
             and it accepts a AddMemberButton as the dialogTrigger parameter.
         */}
-        <AddMemberButton onClick={onMemberButtonClicked} />
+        <AddMemberButton
+          disabled={!isCoach || !currentOrganizationId}
+          onClick={onMemberButtonClicked}
+        />
       </div>
     </div>
   );

src/components/ui/dashboard/add-member-button.tsx

@@ -2,15 +2,17 @@
 
 import { useState } from "react";
 import { Plus, Users } from "lucide-react";
-import { cn } from "@/components/lib/utils";
 import { useOrganizationStateStore } from "@/lib/providers/organization-state-store-provider";
 import { useRouter } from "next/navigation";
 
+import { cn } from "@/components/lib/utils";
+
 interface AddMemberButtonProps {
+  disabled?: boolean;
   onClick?: () => void;
 }
 
-export function AddMemberButton({ onClick }: AddMemberButtonProps) {
+export function AddMemberButton({ disabled, onClick }: AddMemberButtonProps) {
   const router = useRouter();
   const { currentOrganizationId } = useOrganizationStateStore((state) => state);
   const [hoveredItem, setHoveredItem] = useState<string | null>(null);
@@ -27,24 +29,28 @@ export function AddMemberButton({ onClick }: AddMemberButtonProps) {
     <>
       <button
         className={cn(
-          "flex items-center rounded-lg border border-border bg-card p-4 text-left transition-all hover:shadow-md",
-          hoveredItem === "member" && "shadow-md"
+          "flex items-center rounded-lg border border-border bg-card p-4 text-left",
+          disabled
+            ? "text-gray-300 cursor-not-allowed dark:bg-gray-700 dark:text-gray-400"
+            : "bg-card text-black hover:shadow-md transition-all dark:bg-gray-800 dark:text-white"
         )}
         onMouseEnter={() => handleMouseEnter("member")}
         onMouseLeave={handleMouseLeave}
         onClick={() => {
-          // Navigate to the Members page and display the AddMemberDialog
-          router.push(
-            `/organizations/${currentOrganizationId}/members?addMember=true`
-          );
-          onClick;
+          if (!disabled) {
+            // Navigate to the Members page and display the AddMemberDialog
+            router.push(
+              `/organizations/${currentOrganizationId}/members?addMember=true`
+            );
+            onClick;
+          }
         }}
       >
         <div className="flex h-16 w-16 items-center justify-center rounded-md bg-primary/10">
           <Users className="h-8 w-8 text-primary" />
         </div>
         <span className="ml-4 text-lg font-medium">Organization Member</span>
-        {hoveredItem === "member" && (
+        {!disabled && hoveredItem === "member" && (
           <Plus className="ml-auto h-6 w-6 text-primary" />
         )}
       </button>

src/styles/globals.css

@@ -2,94 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-/* @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
- 
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
- 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
- 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
- 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
- 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
- 
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 210 40% 98%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
- 
-    --radius: 0.5rem;
- 
-    --sidebar-background: 0 0% 98%;
- 
-    --sidebar-foreground: 240 5.3% 26.1%;
- 
-    --sidebar-primary: 240 5.9% 10%;
- 
-    --sidebar-primary-foreground: 0 0% 98%;
- 
-    --sidebar-accent: 240 4.8% 95.9%;
- 
-    --sidebar-accent-foreground: 240 5.9% 10%;
- 
-    --sidebar-border: 220 13% 91%;
- 
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
- 
-  .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
- 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
- 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
- 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
- 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
- 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
- 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
- 
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 210 40% 98%;
- 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
-    --sidebar-background: 240 5.9% 10%;
-    --sidebar-foreground: 240 4.8% 95.9%;
-    --sidebar-primary: 224.3 76.3% 48%;
-    --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
-    --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
-    --sidebar-ring: 217.2 91.2% 59.8%;
-  }
-} */
- 
 @layer base {
   * {
     @apply border-border;
@@ -190,4 +102,3 @@
 .group-data-\[collapsible\=icon\]\/sidebar-wrapper [data-sidebar="menu-button"] {
   justify-content: center;
 }
-