feat: enhance team account creation with policy checks and UI updates (#436)

* feat: enhance team account creation with policy checks and UI updates

apps/web/app/home/(user)/_components/home-add-account-button.tsx

@@ -4,19 +4,54 @@ import { useState } from 'react';
 
 import { CreateTeamAccountDialog } from '@kit/team-accounts/components';
 import { Button } from '@kit/ui/button';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@kit/ui/tooltip';
 import { Trans } from '@kit/ui/trans';
 
-export function HomeAddAccountButton(props: { className?: string }) {
+interface HomeAddAccountButtonProps {
+  className?: string;
+  canCreateTeamAccount?: {
+    allowed: boolean;
+    reason?: string;
+  };
+}
+
+export function HomeAddAccountButton(props: HomeAddAccountButtonProps) {
   const [isAddingAccount, setIsAddingAccount] = useState(false);
 
+  const canCreate = props.canCreateTeamAccount?.allowed ?? true;
+  const reason = props.canCreateTeamAccount?.reason;
+
+  const button = (
+    <Button
+      className={props.className}
+      onClick={() => setIsAddingAccount(true)}
+      disabled={!canCreate}
+    >
+      <Trans i18nKey={'account:createTeamButtonLabel'} />
+    </Button>
+  );
+
   return (
     <>
-      <Button
-        className={props.className}
-        onClick={() => setIsAddingAccount(true)}
-      >
-        <Trans i18nKey={'account:createTeamButtonLabel'} />
-      </Button>
+      {!canCreate && reason ? (
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="cursor-not-allowed">{button}</span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <Trans i18nKey={reason} defaults={reason} />
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      ) : (
+        button
+      )}
 
       <CreateTeamAccountDialog
         isOpen={isAddingAccount}