3

frontend/src/pages/Dashboard/Home.tsx

@@ -6,6 +6,8 @@ import UsageChartWidget from "../../components/dashboard/UsageChartWidget";
 import EnhancedMetricCard from "../../components/dashboard/EnhancedMetricCard";
 import ComponentCard from "../../components/common/ComponentCard";
 import PageHeader from "../../components/common/PageHeader";
+import WorkflowGuide from "../../components/onboarding/WorkflowGuide";
+import { useOnboardingStore } from "../../store/onboardingStore";
 import { Card } from "../../components/ui/card";
 import { ProgressBar } from "../../components/ui/progress";
 import { ApexOptions } from "apexcharts";
@@ -115,11 +117,19 @@ export default function Home() {
   const toast = useToast();
   const { activeSite } = useSiteStore();
   const { activeSector } = useSectorStore();
+  const { isGuideDismissed, showGuide } = useOnboardingStore();
   
   const [insights, setInsights] = useState<AppInsights | null>(null);
   const [loading, setLoading] = useState(true);
   const [lastUpdated, setLastUpdated] = useState<Date>(new Date());
 
+  // Show guide on first visit if not dismissed
+  useEffect(() => {
+    if (!isGuideDismissed) {
+      showGuide();
+    }
+  }, [isGuideDismissed, showGuide]);
+
   const appModules = [
     {
       title: "Planner",
@@ -323,6 +333,9 @@ export default function Home() {
         onRefresh={fetchAppInsights}
       />
 
+      {/* Welcome/Guide Screen - Inline at top */}
+      <WorkflowGuide />
+
       <div className="space-y-6">
         {/* Hero Section */}
         <div className="bg-gradient-to-r from-brand-500 to-purple-600 rounded-2xl p-8 md:p-12 text-white relative overflow-hidden">