improved account manager and added warning if google keys are missing.

package.json

@@ -48,6 +48,7 @@
     "date-fns": "^3.6.0",
     "date-fns-tz": "^3.2.0",
     "googleapis": "^144.0.0",
+    "lucide-react": "^0.475.0",
     "next": "15.1.6",
     "next-auth": "^4.24.11",
     "react": "^19.0.0",

src/components/settings/AccountManager.tsx

@@ -11,9 +11,12 @@ import {
 } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { AvailableCalendars } from "./AvailableCalendars";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { AlertCircle } from "lucide-react";
 
 export function AccountManager() {
   const { accounts, refreshAccounts, removeAccount } = useSettingsStore();
+  const { system } = useSettingsStore();
   const [showAvailableFor, setShowAvailableFor] = useState<string | null>(null);
 
   useEffect(() => {
@@ -41,18 +44,33 @@ export function AccountManager() {
     );
   }, []);
 
+  const showCredentialsWarning =
+    !system.googleClientId || !system.googleClientSecret;
+
   return (
     <div className="space-y-6">
       <Card>
         <CardHeader>
           <CardTitle>Connected Accounts</CardTitle>
           <CardDescription>
-            Manage your connected calendar accounts
+            Manage your connected calendar accounts. Outlook integration coming
+            soon!
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
+          {showCredentialsWarning && (
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>Missing Google Credentials</AlertTitle>
+              <AlertDescription>
+                Please go to the System Settings tab and configure your Google
+                Client ID and Secret before connecting Google Calendar.
+              </AlertDescription>
+            </Alert>
+          )}
+
           <div className="flex gap-2">
-            <Button onClick={() => handleConnect("GOOGLE")}>
+            <Button onClick={handleConnect} disabled={showCredentialsWarning}>
               Connect Google Calendar
             </Button>
             <Button

src/components/ui/alert.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+));
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };