Add quick guide dialog to header (Implement a dialog to display a quick guide)

application/src/components/dashboard/Header.tsx

@@ -9,6 +9,7 @@ import { useEffect, useState } from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { useNavigate } from "react-router-dom";
 import { useSystemSettings } from "@/hooks/useSystemSettings";
+import QuickActionsDialog from "./QuickActionsDialog";
 
 interface HeaderProps {
   currentUser: AuthUser | null;
@@ -28,6 +29,7 @@ export const Header = ({
   const [greeting, setGreeting] = useState<string>("");
   const { systemName } = useSystemSettings();
   const navigate = useNavigate();
+  const [quickActionsOpen, setQuickActionsOpen] = useState(false);
 
   // Set greeting based on time of day
   useEffect(() => {
@@ -88,8 +90,18 @@ export const Header = ({
         <Button variant="ghost" size="icon" onClick={toggleSidebar} className="mr-2">
           {sidebarCollapsed ? <PanelLeft className="h-5 w-5" /> : <PanelLeftClose className="h-5 w-5" />}
         </Button>
-        <div className="flex items-center space-x-2">
+        
+        {/* Quick Actions Button */}
+        <Button 
+          variant="ghost" 
+          size="icon" 
+          onClick={() => setQuickActionsOpen(true)} 
+          className="mr-2"
+        >
           <Grid3x3 className="h-5 w-5 text-green-500" />
+        </Button>
+        
+        <div className="flex items-center space-x-2">
           <h1 className="text-lg font-medium">{greeting}, {currentUser?.name || currentUser?.email?.split('@')[0] || 'User'} 👋 ✨</h1>
         </div>
       </div>
@@ -205,6 +217,9 @@ export const Header = ({
           </DropdownMenuContent>
         </DropdownMenu>
       </div>
+      
+      {/* Quick Actions Dialog */}
+      <QuickActionsDialog isOpen={quickActionsOpen} setIsOpen={setQuickActionsOpen} />
     </header>
   );
 };

application/src/components/dashboard/QuickActionsDialog.tsx

@@ -0,0 +1,145 @@
+
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogClose
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { X } from "lucide-react";
+import { useLanguage } from "@/contexts/LanguageContext";
+
+interface QuickActionsDialogProps {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+}
+
+export const QuickActionsDialog: React.FC<QuickActionsDialogProps> = ({ isOpen, setIsOpen }) => {
+  const { t } = useLanguage();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogContent className="sm:max-w-[800px] bg-background max-h-[90vh] overflow-y-auto">
+        <DialogClose className="absolute right-4 top-4">
+          <X className="h-4 w-4" />
+          <span className="sr-only">Close</span>
+        </DialogClose>
+        <DialogHeader>
+          <DialogTitle className="text-xl font-bold">{t('quickActions')}</DialogTitle>
+          <DialogDescription>
+            {t('quickActionsDescription')}
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
+          {/* Website Monitoring Card */}
+          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
+            <h3 className="font-semibold text-lg mb-2">{t('monitorWebsite')}</h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              {t('monitorWebsiteDesc')}
+            </p>
+            <div className="space-y-2">
+              <p className="text-sm font-medium">{t('quickTips')}:</p>
+              <ul className="list-disc pl-5 text-sm space-y-1">
+                <li>{t('monitorMultipleEndpoints')}</li>
+                <li>{t('trackResponseTimes')}</li>
+                <li>{t('setCustomAlerts')}</li>
+              </ul>
+            </div>
+          </div>
+          
+          {/* Server Monitoring Card */}
+          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
+            <h3 className="font-semibold text-lg mb-2">{t('monitorServer')}</h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              {t('monitorServerDesc')}
+            </p>
+            <div className="space-y-2">
+              <p className="text-sm font-medium">{t('quickTips')}:</p>
+              <ul className="list-disc pl-5 text-sm space-y-1">
+                <li>{t('monitorCPURam')}</li>
+                <li>{t('trackNetworkMetrics')}</li>
+                <li>{t('viewProcesses')}</li>
+              </ul>
+            </div>
+          </div>
+          
+          {/* SSL Certificate Card */}
+          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
+            <h3 className="font-semibold text-lg mb-2">{t('sslCertificate')}</h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              {t('sslCertificateDesc')}
+            </p>
+            <div className="space-y-2">
+              <p className="text-sm font-medium">{t('quickTips')}:</p>
+              <ul className="list-disc pl-5 text-sm space-y-1">
+                <li>{t('trackSSLExpiration')}</li>
+                <li>{t('getEarlyRenewal')}</li>
+                <li>{t('monitorMultipleDomains')}</li>
+              </ul>
+            </div>
+          </div>
+          
+          {/* Incidents Management Card */}
+          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
+            <h3 className="font-semibold text-lg mb-2">{t('incidentsManagement')}</h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              {t('incidentsManagementDesc')}
+            </p>
+            <div className="space-y-2">
+              <p className="text-sm font-medium">{t('quickTips')}:</p>
+              <ul className="list-disc pl-5 text-sm space-y-1">
+                <li>{t('createTrackIncidents')}</li>
+                <li>{t('assignIncidents')}</li>
+                <li>{t('monitorResolution')}</li>
+              </ul>
+            </div>
+          </div>
+          
+          {/* Operational Status Card */}
+          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
+            <h3 className="font-semibold text-lg mb-2">{t('operationalStatus')}</h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              {t('operationalStatusDesc')}
+            </p>
+            <div className="space-y-2">
+              <p className="text-sm font-medium">{t('quickTips')}:</p>
+              <ul className="list-disc pl-5 text-sm space-y-1">
+                <li>{t('createCustomStatus')}</li>
+                <li>{t('displayRealTime')}</li>
+                <li>{t('shareIncidentUpdates')}</li>
+              </ul>
+            </div>
+          </div>
+          
+          {/* Reports & Analytics Card */}
+          <div className="border rounded-lg p-4 bg-card hover:shadow-md transition-shadow">
+            <h3 className="font-semibold text-lg mb-2">{t('reportsAnalytics')}</h3>
+            <p className="text-sm text-muted-foreground mb-4">
+              {t('reportsAnalyticsDesc')}
+            </p>
+            <div className="space-y-2">
+              <p className="text-sm font-medium">{t('quickTips')}:</p>
+              <ul className="list-disc pl-5 text-sm space-y-1">
+                <li>{t('generateUptimeReports')}</li>
+                <li>{t('analyzePerformance')}</li>
+                <li>{t('exportMonitoringData')}</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        
+        <div className="flex justify-end mt-6">
+          <Button variant="outline" onClick={() => setIsOpen(false)}>
+            {t('close')}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default QuickActionsDialog;