Merge branch 'main' of https://github.com/operacle/checkcle

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>
@@ -118,25 +130,45 @@ export const Header = ({
         </DropdownMenu>
         
         {/* Documentation */}
-        <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border">
+        <Button 
+          variant="outline" 
+          size="icon" 
+          className="rounded-full w-8 h-8 border-border"
+          onClick={() => window.open("https://docs.checkcle.io", "_blank")}
+        >
           <span className="sr-only">{t("documentation")}</span>
           <FileText className="w-4 h-4" />
         </Button>
         
         {/* GitHub */}
-        <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border">
+        <Button 
+          variant="outline" 
+          size="icon" 
+          className="rounded-full w-8 h-8 border-border"
+          onClick={() => window.open("https://github.com/operacle/checkcle", "_blank")}
+        >
           <span className="sr-only">GitHub</span>
           <Github className="w-4 h-4" />
         </Button>
         
         {/* X (Twitter) */}
-        <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border">
+        <Button 
+          variant="outline" 
+          size="icon" 
+          className="rounded-full w-8 h-8 border-border"
+          onClick={() => window.open("https://x.com/tlengoss", "_blank")}
+        >
           <span className="sr-only">X (Twitter)</span>
           <Twitter className="w-4 h-4" />
         </Button>
         
-        {/* Discord (replaced with MessageSquare) */}
-        <Button variant="outline" size="icon" className="rounded-full w-8 h-8 border-border">
+        {/* Discord */}
+        <Button 
+          variant="outline" 
+          size="icon" 
+          className="rounded-full w-8 h-8 border-border"
+          onClick={() => window.open("https://discord.gg/xs9gbubGwX", "_blank")}
+        >
           <span className="sr-only">Discord</span>
           <MessageSquare className="w-4 h-4" />
         </Button>
@@ -185,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;

application/src/components/settings/about-system/AboutSystem.tsx

@@ -1,3 +1,4 @@
+
 import React from 'react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
@@ -19,7 +20,7 @@ export const AboutSystem: React.FC = () => {
   return <div className="space-y-6 animate-fade-in">
       <div>
         <h1 className="text-3xl font-bold tracking-tight">{t('aboutSystem')}</h1>
-        <p className="text-muted-foreground text-base leading-relaxed mt-2">{t('aboutCheckCle')}</p>
+        <p className="text-muted-foreground text-base leading-relaxed mt-2">{t('aboutReamStack')}</p>
       </div>
       
       <Separator />
@@ -31,10 +32,13 @@ export const AboutSystem: React.FC = () => {
               <ServerIcon className={`h-5 w-5 ${theme === 'dark' ? 'text-sky-400' : 'text-sky-600'}`} />
               <span className="font-thin text-xl">{t('systemDescription')}</span>
             </CardTitle>
+            <CardDescription className="font-medium text-base">{systemName || 'ReamStack'}</CardDescription>
           </CardHeader>
           <CardContent className="space-y-6 pt-6">
             <div className="flex flex-col space-y-4">
-
+              <p className="text-base leading-relaxed">
+                {t('systemVersion')} <span className="font-semibold">1.0.0</span> {t('isAModern')} {t('serverMonitoring')} {t('solution')} {t('designedFor')} {t('enterpriseUse')}. {t('providesRealtime')} {t('uptimeTracking')}, {t('performanceAnalytics')}, {t('andAlertNotifications')}.
+              </p>
               
               <div className="flex flex-col space-y-3 pt-2">
                 <div className="flex justify-between items-center">
@@ -49,7 +53,7 @@ export const AboutSystem: React.FC = () => {
                 <Separator className="my-1" />
                 <div className="flex justify-between items-center">
                   <span className="text-muted-foreground">{t('releasedOn')}</span>
-                  <span className="text-foreground font-medium">May 10, 2025</span>
+                  <span className="text-foreground font-medium">January 15, 2025</span>
                 </div>
               </div>
             </div>
@@ -62,7 +66,7 @@ export const AboutSystem: React.FC = () => {
               <Code2 className={`h-5 w-5 ${theme === 'dark' ? 'text-emerald-400' : 'text-emerald-600'}`} />
               <span>{t('links')}</span>
             </CardTitle>
-            <CardDescription className="font-medium text-base">{systemName || 'CheckCle'} {t('resources').toLowerCase()}</CardDescription>
+            <CardDescription className="font-medium text-base">{systemName || 'ReamStack'} {t('resources').toLowerCase()}</CardDescription>
           </CardHeader>
           <CardContent className="space-y-4 pt-6">
             <div className="grid grid-cols-1 gap-3">
@@ -78,7 +82,7 @@ export const AboutSystem: React.FC = () => {
                 <Twitter className={`h-5 w-5 ${theme === 'dark' ? 'text-white/80' : 'text-gray-700'}`} />
                 <span>{t('followOnX')}</span>
               </Button>
-              <Button variant="outline" className="flex items-center justify-start gap-3 h-12 hover:bg-muted/50 transition-all duration-200" onClick={() => window.open("#", "_blank")}>
+              <Button variant="outline" className="flex items-center justify-start gap-3 h-12 hover:bg-muted/50 transition-all duration-200" onClick={() => window.open("https://discord.gg/xs9gbubGwX", "_blank")}>
                 <MessageCircle className={`h-5 w-5 ${theme === 'dark' ? 'text-white/80' : 'text-gray-700'}`} />
                 <span>{t('joinDiscord')}</span>
               </Button>

application/src/translations/en.ts

@@ -72,5 +72,46 @@ export const enTranslations = {
   viewOnGithub: "View on GitHub",
   viewDocumentation: "View Documentation",
   followOnX: "Follow on X",
-  joinDiscord: "Join Discord"
-};
+  joinDiscord: "Join Discord",
+  // Quick Actions Dialog translations
+  quickActions: "Quick Actions",
+  quickActionsDescription: "Access common monitoring operations and features quickly. Select an action below to get started.",
+  close: "Close",
+  quickTips: "Quick Tips",
+  // Website Monitoring Card
+  monitorWebsite: "Website Monitoring",
+  monitorWebsiteDesc: "Monitor website availability and performance with detailed metrics and alerts.",
+  monitorMultipleEndpoints: "Monitor multiple endpoints",
+  trackResponseTimes: "Track response times",
+  setCustomAlerts: "Set custom alerts",
+  // Server Monitoring Card
+  monitorServer: "Server Monitoring",
+  monitorServerDesc: "Track server health metrics including CPU, memory, disk usage, and network traffic.",
+  monitorCPURam: "Monitor CPU & RAM usage",
+  trackNetworkMetrics: "Track network metrics",
+  viewProcesses: "View active processes",
+  // SSL Certificate Card
+  sslCertificate: "SSL Certificate",
+  sslCertificateDesc: "Monitor SSL certificate validity and receive alerts before expiration dates.",
+  trackSSLExpiration: "Track SSL expiration dates",
+  getEarlyRenewal: "Get early renewal notices",
+  monitorMultipleDomains: "Monitor multiple domains",
+  // Incidents Management Card
+  incidentsManagement: "Incidents Management",
+  incidentsManagementDesc: "Create, track, and manage incidents including assignment and resolution workflows.",
+  createTrackIncidents: "Create & track incidents",
+  assignIncidents: "Assign incidents to team",
+  monitorResolution: "Monitor resolution progress",
+  // Operational Status Card
+  operationalStatus: "Operational Status",
+  operationalStatusDesc: "Create and manage public status pages to communicate system health to users.",
+  createCustomStatus: "Create custom status pages",
+  displayRealTime: "Display real-time metrics",
+  shareIncidentUpdates: "Share incident updates",
+  // Reports & Analytics Card
+  reportsAnalytics: "Reports & Analytics",
+  reportsAnalyticsDesc: "Generate reports on system performance, uptime history, and incident metrics.",
+  generateUptimeReports: "Generate uptime reports",
+  analyzePerformance: "Analyze performance trends",
+  exportMonitoringData: "Export monitoring data"
+};

application/src/translations/km.ts

@@ -72,5 +72,46 @@ export const kmTranslations = {
   viewOnGithub: "មើលលើ GitHub",
   viewDocumentation: "មើលឯកសារ",
   followOnX: "តាមដានលើ X",
-  joinDiscord: "ចូលរួមក្នុង Discord"
-};
+  joinDiscord: "ចូលរួមក្នុង Discord",
+  // Quick Actions Dialog translations
+  quickActions: "សកម្មភាពរហ័ស",
+  quickActionsDescription: "ចូលប្រើប្រតិបត្តិការត្រួតពិនិត្យ និងមុខងារទូទៅយ៉ាងរហ័ស។ ជ្រើសរើសសកម្មភាពខាងក្រោមដើម្បីចាប់ផ្តើម។",
+  close: "បិទ",
+  quickTips: "គន្លឹះរហ័ស",
+  // Website Monitoring Card
+  monitorWebsite: "ការត្រួតពិនិត្យគេហទំព័រ",
+  monitorWebsiteDesc: "ត្រួតពិនិត្យការអាចប្រើបាននៃគេហទំព័រ និងដំណើរការដោយមានព័ត៌មានលម្អិត និងការជូនដំណឹង។",
+  monitorMultipleEndpoints: "ត្រួតពិនិត្យចំណុចចប់ច្រើន",
+  trackResponseTimes: "តាមដានពេលវេលាឆ្លើយតប",
+  setCustomAlerts: "កំណត់ការជូនដំណឹងផ្ទាល់ខ្លួន",
+  // Server Monitoring Card
+  monitorServer: "ការត្រួតពិនិត្យម៉ាស៊ីនមេ",
+  monitorServerDesc: "តាមដានសុខភាពម៉ាស៊ីនមេរួមទាំងការប្រើប្រាស់ CPU, អង្គចងចាំ, ថាស, និងចរាចរណ៍បណ្តាញ។",
+  monitorCPURam: "ត្រួតពិនិត្យការប្រើប្រាស់ CPU និង RAM",
+  trackNetworkMetrics: "តាមដានចរាចរណ៍បណ្តាញ",
+  viewProcesses: "មើលដំណើរការសកម្ម",
+  // SSL Certificate Card
+  sslCertificate: "វិញ្ញាបនបត្រ SSL",
+  sslCertificateDesc: "ត្រួតពិនិត្យសុពលភាពវិញ្ញាបនបត្រ SSL និងទទួលបានការជូនដំណឹងមុនថ្ងៃផុតកំណត់។",
+  trackSSLExpiration: "តាមដានកាលបរិច្ឆេទផុតកំណត់ SSL",
+  getEarlyRenewal: "ទទួលបានការជូនដំណឹងបន្តមុនពេល",
+  monitorMultipleDomains: "ត្រួតពិនិត្យដែនជាច្រើន",
+  // Incidents Management Card
+  incidentsManagement: "ការគ្រប់គ្រងឧប្បត្តិហេតុ",
+  incidentsManagementDesc: "បង្កើត, តាមដាន និងគ្រប់គ្រងឧប្បត្តិហេតុរួមទាំងការចាត់តាំង និងដំណើរការដោះស្រាយ។",
+  createTrackIncidents: "បង្កើត និងតាមដានឧប្បត្តិហេតុ",
+  assignIncidents: "ចាត់តាំងឧប្បត្តិហេតុទៅក្រុម",
+  monitorResolution: "តាមដានដំណើរការដោះស្រាយ",
+  // Operational Status Card
+  operationalStatus: "ស្ថានភាពប្រតិបត្តិការ",
+  operationalStatusDesc: "បង្កើត និងគ្រប់គ្រងទំព័រស្ថានភាពសាធារណៈដើម្បីទំនាក់ទំនងសុខភាពប្រព័ន្ធទៅកាន់អ្នកប្រើប្រាស់។",
+  createCustomStatus: "បង្កើតទំព័រស្ថានភាពតាមបំណង",
+  displayRealTime: "បង្ហាញទិន្នន័យជាក់ស្តែង",
+  shareIncidentUpdates: "ចែករំលែកព័ត៌មានថ្មីៗអំពីឧប្បត្តិហេតុ",
+  // Reports & Analytics Card
+  reportsAnalytics: "របាយការណ៍និងការវិភាគ",
+  reportsAnalyticsDesc: "បង្កើតរបាយការណ៍អំពីដំណើរការប្រព័ន្ធ, ប្រវត្តិនៃពេលវេលាដំណើរការ, និងទិន្នន័យឧប្បត្តិហេតុ។",
+  generateUptimeReports: "បង្កើតរបាយការណ៍ពេលវេលាដំណើរការ",
+  analyzePerformance: "វិភាគនិន្នាការដំណើរការ",
+  exportMonitoringData: "នាំចេញទិន្នន័យត្រួតពិនិត្យ"
+};