Added pages for coming soon features

This commit is contained in:
Muhammad Ibrahim
2025-10-01 09:33:34 +01:00
parent 0742c4b05c
commit 02f9899b23
6 changed files with 200 additions and 64 deletions

View File

@@ -17,7 +17,9 @@ import Profile from "./pages/Profile";
import Repositories from "./pages/Repositories";
import RepositoryDetail from "./pages/RepositoryDetail";
import AlertChannels from "./pages/settings/AlertChannels";
import Integrations from "./pages/settings/Integrations";
import Notifications from "./pages/settings/Notifications";
import PatchManagement from "./pages/settings/PatchManagement";
import SettingsAgentConfig from "./pages/settings/SettingsAgentConfig";
import SettingsHostGroups from "./pages/settings/SettingsHostGroups";
import SettingsServerConfig from "./pages/settings/SettingsServerConfig";
@@ -248,6 +250,26 @@ function AppRoutes() {
</ProtectedRoute>
}
/>
<Route
path="/settings/integrations"
element={
<ProtectedRoute requirePermission="can_manage_settings">
<Layout>
<Integrations />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/settings/patch-management"
element={
<ProtectedRoute requirePermission="can_manage_settings">
<Layout>
<PatchManagement />
</Layout>
</ProtectedRoute>
}
/>
<Route
path="/settings/server-url"
element={

View File

@@ -92,8 +92,36 @@ const SettingsLayout = ({ children }) => {
});
}
// Patch Management
if (canManageSettings()) {
nav.push({
section: "Patch Management",
items: [
{
name: "Policies",
href: "/settings/patch-management",
icon: Settings,
comingSoon: true,
},
],
});
}
// Server Config
if (canManageSettings()) {
// Integrations section
nav.push({
section: "Integrations",
items: [
{
name: "Integrations",
href: "/settings/integrations",
icon: Wrench,
comingSoon: true,
},
],
});
nav.push({
section: "Server",
items: [

View File

@@ -1,4 +1,4 @@
import { Bell, Plus } from "lucide-react";
import { Bell } from "lucide-react";
const AlertChannels = () => {
return (
@@ -13,10 +13,6 @@ const AlertChannels = () => {
Configure how PatchMon sends notifications and alerts
</p>
</div>
<button type="button" className="btn-primary flex items-center gap-2">
<Plus className="h-4 w-4" />
Add Channel
</button>
</div>
{/* Coming Soon Card */}
@@ -62,12 +58,6 @@ const AlertChannels = () => {
<p className="mt-1 text-sm text-secondary-500 dark:text-secondary-400">
Get started by adding your first alert channel.
</p>
<div className="mt-6">
<button type="button" className="btn-primary">
<Plus className="h-4 w-4 mr-2" />
Add Channel
</button>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,49 @@
import { Plug } from "lucide-react";
import SettingsLayout from "../../components/SettingsLayout";
const Integrations = () => {
return (
<SettingsLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-secondary-900 dark:text-white">
Integrations
</h1>
<p className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
Connect PatchMon to third-party services
</p>
</div>
</div>
{/* Coming Soon Card */}
<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6">
<div className="flex items-center gap-4">
<div className="flex-shrink-0">
<div className="w-12 h-12 bg-secondary-100 dark:bg-secondary-700 rounded-lg flex items-center justify-center">
<Plug className="h-6 w-6 text-secondary-700 dark:text-secondary-200" />
</div>
</div>
<div className="flex-1">
<h3 className="text-lg font-semibold text-secondary-900 dark:text-white">
Integrations Coming Soon
</h3>
<p className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
We are building integrations for Slack, Discord, email, and
webhooks to streamline alerts and workflows.
</p>
<div className="mt-3">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-secondary-100 text-secondary-800 dark:bg-secondary-700 dark:text-secondary-200">
In Development
</span>
</div>
</div>
</div>
</div>
</div>
</SettingsLayout>
);
};
export default Integrations;

View File

@@ -1,4 +1,4 @@
import { Bell, Plus, Settings } from "lucide-react";
import { Bell, Settings } from "lucide-react";
const Notifications = () => {
return (
@@ -13,10 +13,6 @@ const Notifications = () => {
Configure notification preferences and alert rules
</p>
</div>
<button type="button" className="btn-primary flex items-center gap-2">
<Plus className="h-4 w-4" />
Add Rule
</button>
</div>
{/* Coming Soon Card */}
@@ -46,7 +42,7 @@ const Notifications = () => {
</div>
{/* Notification Settings Preview */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="grid grid-cols-1 md:grid-cols-1 gap-6">
{/* Package Updates */}
<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6">
<div className="flex items-center gap-3 mb-4">
@@ -87,47 +83,6 @@ const Notifications = () => {
</div>
</div>
</div>
{/* System Events */}
<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center">
<Bell className="h-4 w-4 text-green-600 dark:text-green-400" />
</div>
<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
System Events
</h3>
</div>
<p className="text-sm text-secondary-600 dark:text-secondary-400 mb-4">
Monitor system health and performance events
</p>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm text-secondary-700 dark:text-secondary-300">
Host Offline
</span>
<span className="text-xs text-secondary-500 dark:text-secondary-400">
Coming Soon
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-secondary-700 dark:text-secondary-300">
High CPU Usage
</span>
<span className="text-xs text-secondary-500 dark:text-secondary-400">
Coming Soon
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-secondary-700 dark:text-secondary-300">
Disk Space Low
</span>
<span className="text-xs text-secondary-500 dark:text-secondary-400">
Coming Soon
</span>
</div>
</div>
</div>
</div>
{/* Empty State */}
@@ -148,12 +103,6 @@ const Notifications = () => {
<p className="mt-1 text-sm text-secondary-500 dark:text-secondary-400">
Get started by creating your first notification rule.
</p>
<div className="mt-6">
<button type="button" className="btn-primary">
<Plus className="h-4 w-4 mr-2" />
Add Rule
</button>
</div>
</div>
</div>
</div>

View File

@@ -0,0 +1,98 @@
import { Settings } from "lucide-react";
import SettingsLayout from "../../components/SettingsLayout";
const PatchManagement = () => {
return (
<SettingsLayout>
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-secondary-900 dark:text-white">
Patch Management
</h1>
<p className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
Define and enforce policies for applying and monitoring patches
</p>
</div>
</div>
{/* Coming Soon Card */}
<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6">
<div className="flex items-center gap-4">
<div className="flex-shrink-0">
<div className="w-12 h-12 bg-primary-100 dark:bg-primary-900 rounded-lg flex items-center justify-center">
<Settings className="h-6 w-6 text-primary-600 dark:text-primary-400" />
</div>
</div>
<div className="flex-1">
<h3 className="text-lg font-semibold text-secondary-900 dark:text-white">
Patch Management Coming Soon
</h3>
<p className="mt-1 text-sm text-secondary-600 dark:text-secondary-400">
We are designing rule sets, approval workflows, and automated
patch policies to give you granular control over updates.
</p>
<div className="mt-3">
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-primary-100 text-primary-800 dark:bg-primary-900 dark:text-primary-200">
In Development
</span>
</div>
</div>
</div>
</div>
{/* Patch Policy */}
<div className="bg-white dark:bg-secondary-800 border border-secondary-200 dark:border-secondary-600 rounded-lg p-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
<Settings className="h-4 w-4 text-blue-600 dark:text-blue-400" />
</div>
<h3 className="text-lg font-medium text-secondary-900 dark:text-white">
Patch Policy
</h3>
</div>
<p className="text-sm text-secondary-600 dark:text-secondary-400 mb-4">
Configure rule sets for patch management and monitoring
</p>
<div className="space-y-2">
<div className="flex items-center justify-between">
<span className="text-sm text-secondary-700 dark:text-secondary-300">
Rule Sets
</span>
<span className="text-xs text-secondary-500 dark:text-secondary-400">
Coming Soon
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-secondary-700 dark:text-secondary-300">
Patch Approval Workflows
</span>
<span className="text-xs text-secondary-500 dark:text-secondary-400">
Coming Soon
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-secondary-700 dark:text-secondary-300">
Security Patch Priority
</span>
<span className="text-xs text-secondary-500 dark:text-secondary-400">
Coming Soon
</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm text-secondary-700 dark:text-secondary-300">
Auto-Update Policies
</span>
<span className="text-xs text-secondary-500 dark:text-secondary-400">
Coming Soon
</span>
</div>
</div>
</div>
</div>
</SettingsLayout>
);
};
export default PatchManagement;