Remove Quick Actions button and dialog
- Remove the QuickActionsDialog component and its associated file from the dashboard.
This commit is contained in:
Tola Leng
@@ -1,15 +1,13 @@
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AuthUser } from "@/services/authService";
|
||||
import { useTheme } from "@/contexts/ThemeContext";
|
||||
import { Moon, PanelLeft, PanelLeftClose, Sun, Globe, FileText, Github, Twitter, MessageSquare, Bell, User, Settings, LogOut, Grid3x3 } from "lucide-react";
|
||||
import { Moon, PanelLeft, PanelLeftClose, Sun, Globe, FileText, Github, Twitter, MessageSquare, Bell, User, Settings, LogOut } from "lucide-react";
|
||||
import { useLanguage } from "@/contexts/LanguageContext";
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
|
||||
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;
|
||||
@@ -29,7 +27,6 @@ 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(() => {
|
||||
@@ -53,7 +50,7 @@ export const Header = ({
|
||||
// Log avatar data for debugging
|
||||
useEffect(() => {
|
||||
if (currentUser) {
|
||||
// console.log("Avatar URL in Header:", currentUser.avatar);
|
||||
//console.log("Avatar URL in Header:", currentUser.avatar);
|
||||
}
|
||||
}, [currentUser]);
|
||||
|
||||
@@ -66,7 +63,7 @@ export const Header = ({
|
||||
} else {
|
||||
avatarUrl = currentUser.avatar;
|
||||
}
|
||||
// console.log("Final avatar URL:", avatarUrl);
|
||||
console.log("Final avatar URL:", avatarUrl);
|
||||
}
|
||||
|
||||
return (
|
||||
@@ -91,16 +88,6 @@ export const Header = ({
|
||||
{sidebarCollapsed ? <PanelLeft className="h-5 w-5" /> : <PanelLeftClose className="h-5 w-5" />}
|
||||
</Button>
|
||||
|
||||
{/* 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>
|
||||
@@ -162,7 +149,7 @@ export const Header = ({
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="rounded-full w-8 h-8 border-border"
|
||||
onClick={() => window.open("https://x.com/checkcle_oss", "_blank")}
|
||||
onClick={() => window.open("https://x.com/checkcle_oss)", "_blank")}
|
||||
>
|
||||
<span className="sr-only">X (Twitter)</span>
|
||||
<Twitter className="w-4 h-4" />
|
||||
@@ -223,9 +210,6 @@ export const Header = ({
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
|
||||
{/* Quick Actions Dialog */}
|
||||
<QuickActionsDialog isOpen={quickActionsOpen} setIsOpen={setQuickActionsOpen} />
|
||||
</header>
|
||||
);
|
||||
};
|
||||
@@ -1,145 +0,0 @@
|
||||
|
||||
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;
|
||||
Reference in New Issue
Block a user