94e97a7366
- Fix 'error in libcrypto' issue by using persistent key files instead of temporary ones - Add SSH key pair generation feature with 'Generate Key Pair' button - Add 'View Public Key' button for generated keys with copy-to-clipboard functionality - Remove confusing 'both' authentication option, now only supports 'password' OR 'key' - Add persistent storage in data/ssh-keys/ directory with proper permissions - Update database schema with ssh_key_path and key_generated columns - Add API endpoints for key generation and public key retrieval - Enhance UX by hiding manual key input when key pair is generated - Update HelpModal documentation to reflect new SSH key features - Fix all TypeScript compilation errors and linting issues Resolves SSH authentication failures during script execution
563 lines
32 KiB
TypeScript
563 lines
32 KiB
TypeScript
'use client';
|
||
|
||
import { useState } from 'react';
|
||
import { Button } from './ui/button';
|
||
import { HelpCircle, Server, Settings, RefreshCw, Package, HardDrive, FolderOpen, Search, Download } from 'lucide-react';
|
||
|
||
interface HelpModalProps {
|
||
isOpen: boolean;
|
||
onClose: () => void;
|
||
initialSection?: string;
|
||
}
|
||
|
||
type HelpSection = 'server-settings' | 'general-settings' | 'sync-button' | 'available-scripts' | 'downloaded-scripts' | 'installed-scripts' | 'update-system';
|
||
|
||
export function HelpModal({ isOpen, onClose, initialSection = 'server-settings' }: HelpModalProps) {
|
||
const [activeSection, setActiveSection] = useState<HelpSection>(initialSection as HelpSection);
|
||
|
||
if (!isOpen) return null;
|
||
|
||
const sections = [
|
||
{ id: 'server-settings' as HelpSection, label: 'Server Settings', icon: Server },
|
||
{ id: 'general-settings' as HelpSection, label: 'General Settings', icon: Settings },
|
||
{ id: 'sync-button' as HelpSection, label: 'Sync Button', icon: RefreshCw },
|
||
{ id: 'available-scripts' as HelpSection, label: 'Available Scripts', icon: Package },
|
||
{ id: 'downloaded-scripts' as HelpSection, label: 'Downloaded Scripts', icon: HardDrive },
|
||
{ id: 'installed-scripts' as HelpSection, label: 'Installed Scripts', icon: FolderOpen },
|
||
{ id: 'update-system' as HelpSection, label: 'Update System', icon: Download },
|
||
];
|
||
|
||
const renderContent = () => {
|
||
switch (activeSection) {
|
||
case 'server-settings':
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">Server Settings</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
Manage your Proxmox VE servers and configure connection settings.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Adding PVE Servers</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Server Name:</strong> A friendly name to identify your server</li>
|
||
<li>• <strong>IP Address:</strong> The IP address or hostname of your PVE server</li>
|
||
<li>• <strong>Username:</strong> PVE user account (usually root or a dedicated user)</li>
|
||
<li>• <strong>SSH Port:</strong> Default is 22, change if your server uses a different port</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Authentication Types</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Password:</strong> Use username and password authentication</li>
|
||
<li>• <strong>SSH Key:</strong> Use SSH key pair for secure authentication</li>
|
||
</ul>
|
||
<div className="mt-3 p-3 bg-blue-50 dark:bg-blue-950/20 rounded-md">
|
||
<h5 className="font-medium text-blue-900 dark:text-blue-100 mb-2">SSH Key Features:</h5>
|
||
<ul className="text-xs text-blue-800 dark:text-blue-200 space-y-1">
|
||
<li>• <strong>Generate Key Pair:</strong> Create new SSH keys automatically</li>
|
||
<li>• <strong>View Public Key:</strong> Copy public key for server setup</li>
|
||
<li>• <strong>Persistent Storage:</strong> Keys are stored securely on disk</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Server Color Coding</h4>
|
||
<p className="text-sm text-muted-foreground">
|
||
Assign colors to servers for visual distinction throughout the application.
|
||
This helps identify which server you're working with when managing scripts.
|
||
This needs to be enabled in the General Settings.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case 'general-settings':
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">General Settings</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
Configure application preferences and behavior.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Save Filters</h4>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
When enabled, your script filter preferences (search terms, categories, sorting)
|
||
will be automatically saved and restored when you return to the application.
|
||
</p>
|
||
<ul className="text-sm text-muted-foreground space-y-1">
|
||
<li>• Search queries are preserved</li>
|
||
<li>• Selected script types are remembered</li>
|
||
<li>• Sort preferences are maintained</li>
|
||
<li>• Category selections are saved</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Server Color Coding</h4>
|
||
<p className="text-sm text-muted-foreground">
|
||
Enable visual color coding for servers throughout the application.
|
||
This makes it easier to identify which server you're working with.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">GitHub Integration</h4>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
Add a GitHub Personal Access Token to increase API rate limits and improve performance.
|
||
</p>
|
||
<ul className="text-sm text-muted-foreground space-y-1">
|
||
<li>• Bypasses GitHub's rate limiting for unauthenticated requests</li>
|
||
<li>• Improves script loading and syncing performance</li>
|
||
<li>• Token is stored securely and only used for API calls</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Authentication</h4>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
Secure your application with username and password authentication.
|
||
</p>
|
||
<ul className="text-sm text-muted-foreground space-y-1">
|
||
<li>• Set up username and password for app access</li>
|
||
<li>• Enable/disable authentication as needed</li>
|
||
<li>• Credentials are stored securely</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case 'sync-button':
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">Sync Button</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
Synchronize script metadata from the ProxmoxVE GitHub repository.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">What Does Syncing Do?</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Updates Script Metadata:</strong> Downloads the latest script information (JSON files)</li>
|
||
<li>• <strong>Refreshes Available Scripts:</strong> Updates the list of scripts you can download</li>
|
||
<li>• <strong>Updates Categories:</strong> Refreshes script categories and organization</li>
|
||
<li>• <strong>Checks for Updates:</strong> Identifies which downloaded scripts have newer versions</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Important Notes</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Metadata Only:</strong> Syncing only updates script information, not the actual script files</li>
|
||
<li>• <strong>No Downloads:</strong> Script files are downloaded separately when you choose to install them</li>
|
||
<li>• <strong>Last Sync Time:</strong> Shows when the last successful sync occurred</li>
|
||
<li>• <strong>Rate Limits:</strong> GitHub API limits may apply without a personal access token</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">When to Sync</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-1">
|
||
<li>• When you want to see the latest available scripts</li>
|
||
<li>• To check for updates to your downloaded scripts</li>
|
||
<li>• If you notice scripts are missing or outdated</li>
|
||
<li>• After the ProxmoxVE repository has been updated</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case 'available-scripts':
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">Available Scripts</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
Browse and discover scripts from the ProxmoxVE repository.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Browsing Scripts</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Category Sidebar:</strong> Filter scripts by category (Storage, Network, Security, etc.)</li>
|
||
<li>• <strong>Search:</strong> Find scripts by name or description</li>
|
||
<li>• <strong>View Modes:</strong> Switch between card and list view</li>
|
||
<li>• <strong>Sorting:</strong> Sort by name or creation date</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Filtering Options</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Script Types:</strong> Filter by CT (Container) or other script types</li>
|
||
<li>• <strong>Update Status:</strong> Show only scripts with available updates</li>
|
||
<li>• <strong>Search Query:</strong> Search within script names and descriptions</li>
|
||
<li>• <strong>Categories:</strong> Filter by specific script categories</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Script Actions</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>View Details:</strong> Click on a script to see full information and documentation</li>
|
||
<li>• <strong>Download:</strong> Download script files to your local system</li>
|
||
<li>• <strong>Install:</strong> Run scripts directly on your PVE servers</li>
|
||
<li>• <strong>Preview:</strong> View script content before downloading</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case 'downloaded-scripts':
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">Downloaded Scripts</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
Manage scripts that have been downloaded to your local system.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">What Are Downloaded Scripts?</h4>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
These are scripts that you've downloaded from the repository and are stored locally on your system.
|
||
</p>
|
||
<ul className="text-sm text-muted-foreground space-y-1">
|
||
<li>• Script files are stored in your local scripts directory</li>
|
||
<li>• You can run these scripts on your PVE servers</li>
|
||
<li>• Scripts can be updated when newer versions are available</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Update Detection</h4>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
The system automatically checks if newer versions of your downloaded scripts are available.
|
||
</p>
|
||
<ul className="text-sm text-muted-foreground space-y-1">
|
||
<li>• Scripts with updates available are marked with an update indicator</li>
|
||
<li>• You can filter to show only scripts with available updates</li>
|
||
<li>• Update detection happens when you sync with the repository</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Managing Downloaded Scripts</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Update Scripts:</strong> Download the latest version of a script</li>
|
||
<li>• <strong>View Details:</strong> See script information and documentation</li>
|
||
<li>• <strong>Install/Run:</strong> Execute scripts on your PVE servers</li>
|
||
<li>• <strong>Filter & Search:</strong> Use the same filtering options as Available Scripts</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case 'installed-scripts':
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">Installed Scripts</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
Track and manage scripts that are installed on your PVE servers.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="p-4 border border-border rounded-lg bg-muted/50 border-primary/20">
|
||
<h4 className="font-medium text-foreground mb-2 flex items-center gap-2">
|
||
<Search className="w-4 h-4" />
|
||
Auto-Detection (Primary Feature)
|
||
</h4>
|
||
<p className="text-sm text-muted-foreground mb-3">
|
||
The system can automatically detect LXC containers that have community-script tags on your PVE servers.
|
||
</p>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Automatic Discovery:</strong> Scans your PVE servers for containers with community-script tags</li>
|
||
<li>• <strong>Container Detection:</strong> Identifies LXC containers running Proxmox helper scripts</li>
|
||
<li>• <strong>Server Association:</strong> Links detected scripts to the specific PVE server</li>
|
||
<li>• <strong>Bulk Import:</strong> Automatically creates records for all detected scripts</li>
|
||
</ul>
|
||
<div className="mt-3 p-3 bg-primary/10 rounded-lg border border-primary/20">
|
||
<p className="text-sm font-medium text-primary">How Auto-Detection Works:</p>
|
||
<ol className="text-sm text-muted-foreground mt-1 space-y-1">
|
||
<li>1. Connects to your configured PVE servers</li>
|
||
<li>2. Scans LXC container configurations</li>
|
||
<li>3. Looks for containers with community-script tags</li>
|
||
<li>4. Creates installed script records automatically</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Manual Script Management</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Add Scripts Manually:</strong> Create records for scripts not auto-detected</li>
|
||
<li>• <strong>Edit Script Details:</strong> Update script names and container IDs</li>
|
||
<li>• <strong>Delete Scripts:</strong> Remove scripts from tracking</li>
|
||
<li>• <strong>Bulk Operations:</strong> Clean up old or invalid script records</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Script Tracking Features</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Installation Status:</strong> Track success, failure, or in-progress installations</li>
|
||
<li>• <strong>Server Association:</strong> Know which server each script is installed on</li>
|
||
<li>• <strong>Container ID:</strong> Link scripts to specific LXC containers</li>
|
||
<li>• <strong>Web UI Access:</strong> Track and access Web UI IP addresses and ports</li>
|
||
<li>• <strong>Execution Logs:</strong> View output and logs from script installations</li>
|
||
<li>• <strong>Filtering:</strong> Filter by server, status, or search terms</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Managing Installed Scripts</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>View All Scripts:</strong> See all tracked scripts across all servers</li>
|
||
<li>• <strong>Filter by Server:</strong> Show scripts for a specific PVE server</li>
|
||
<li>• <strong>Filter by Status:</strong> Show successful, failed, or in-progress installations</li>
|
||
<li>• <strong>Sort Options:</strong> Sort by name, container ID, server, status, or date</li>
|
||
<li>• <strong>Update Scripts:</strong> Re-run or update existing script installations</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg bg-blue-900/20 border-blue-700/50">
|
||
<h4 className="font-medium text-foreground mb-2">Web UI Access </h4>
|
||
<p className="text-sm text-muted-foreground mb-3">
|
||
Automatically detect and access Web UI interfaces for your installed scripts.
|
||
</p>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Auto-Detection:</strong> Automatically detects Web UI URLs from script installation output</li>
|
||
<li>• <strong>IP & Port Tracking:</strong> Stores and displays Web UI IP addresses and ports</li>
|
||
<li>• <strong>One-Click Access:</strong> Click IP:port to open Web UI in new tab</li>
|
||
<li>• <strong>Manual Detection:</strong> Re-detect IP using <code>hostname -I</code> inside container</li>
|
||
<li>• <strong>Port Detection:</strong> Uses script metadata to get correct port (e.g., actualbudget:5006)</li>
|
||
<li>• <strong>Editable Fields:</strong> Manually edit IP and port values as needed</li>
|
||
</ul>
|
||
<div className="mt-3 p-3 bg-blue-900/30 rounded-lg border border-blue-700/30">
|
||
<p className="text-sm font-medium text-blue-300">💡 How it works:</p>
|
||
<ul className="text-sm text-muted-foreground mt-1 space-y-1">
|
||
<li>• Scripts automatically detect URLs like <code>http://10.10.10.1:3000</code> during installation</li>
|
||
<li>• Re-detect button runs <code>hostname -I</code> inside the container via SSH</li>
|
||
<li>• Port defaults to 80, but uses script metadata when available</li>
|
||
<li>• Web UI buttons are disabled when container is stopped</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg bg-accent/50 dark:bg-accent/20">
|
||
<h4 className="font-medium text-foreground mb-2">Actions Dropdown </h4>
|
||
<p className="text-sm text-muted-foreground mb-3">
|
||
Clean interface with all actions organized in a dropdown menu.
|
||
</p>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Edit Button:</strong> Always visible for quick script editing</li>
|
||
<li>• <strong>Actions Dropdown:</strong> Contains Update, Shell, Open UI, Start/Stop, Destroy, Delete</li>
|
||
<li>• <strong>Smart Visibility:</strong> Dropdown only appears when actions are available</li>
|
||
<li>• <strong>Color Coding:</strong> Start (green), Stop (red), Update (cyan), Shell (gray), Open UI (blue)</li>
|
||
<li>• <strong>Auto-Close:</strong> Dropdown closes after clicking any action</li>
|
||
<li>• <strong>Disabled States:</strong> Actions are disabled when container is stopped</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg bg-accent/50 dark:bg-accent/20">
|
||
<h4 className="font-medium text-foreground mb-2">Container Control</h4>
|
||
<p className="text-sm text-muted-foreground mb-3">
|
||
Directly control LXC containers from the installed scripts page via SSH.
|
||
</p>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Start/Stop Button:</strong> Control container state with <code>pct start/stop <ID></code></li>
|
||
<li>• <strong>Container Status:</strong> Real-time status indicator (running/stopped/unknown)</li>
|
||
<li>• <strong>Destroy Button:</strong> Permanently remove LXC container with <code>pct destroy <ID></code></li>
|
||
<li>• <strong>Confirmation Modals:</strong> Simple OK/Cancel for start/stop, type container ID to confirm destroy</li>
|
||
<li>• <strong>SSH Execution:</strong> All commands executed remotely via configured SSH connections</li>
|
||
</ul>
|
||
<div className="mt-3 p-3 bg-muted/30 dark:bg-muted/20 rounded-lg border border-border">
|
||
<p className="text-sm font-medium text-foreground">⚠️ Safety Features:</p>
|
||
<ul className="text-sm text-muted-foreground mt-1 space-y-1">
|
||
<li>• Start/Stop actions require simple confirmation</li>
|
||
<li>• Destroy action requires typing the container ID to confirm</li>
|
||
<li>• All actions show loading states and error handling</li>
|
||
<li>• Only works with SSH scripts that have valid container IDs</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case 'update-system':
|
||
return (
|
||
<div className="space-y-6">
|
||
<div>
|
||
<h3 className="text-xl font-semibold text-foreground mb-4">Update System</h3>
|
||
<p className="text-muted-foreground mb-6">
|
||
Keep your PVE Scripts Management application up to date with the latest features and improvements.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">What Does Updating Do?</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Downloads Latest Version:</strong> Fetches the newest release from the GitHub repository</li>
|
||
<li>• <strong>Updates Application Files:</strong> Replaces current files with the latest version</li>
|
||
<li>• <strong>Installs Dependencies:</strong> Updates Node.js packages and dependencies</li>
|
||
<li>• <strong>Rebuilds Application:</strong> Compiles the application with latest changes</li>
|
||
<li>• <strong>Restarts Server:</strong> Automatically restarts the application server</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">How to Update</h4>
|
||
<div className="space-y-3">
|
||
<div>
|
||
<h5 className="font-medium text-foreground mb-2">Automatic Update (Recommended)</h5>
|
||
<ul className="text-sm text-muted-foreground space-y-1">
|
||
<li>• Click the "Update Now" button when an update is available</li>
|
||
<li>• The system will handle everything automatically</li>
|
||
<li>• You'll see a progress overlay with update logs</li>
|
||
<li>• The page will reload automatically when complete</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h5 className="font-medium text-foreground mb-2">Manual Update (Advanced)</h5>
|
||
<p className="text-sm text-muted-foreground mb-2">If automatic update fails, you can update manually:</p>
|
||
<div className="bg-muted p-3 rounded-lg font-mono text-sm">
|
||
<div className="text-muted-foreground"># Navigate to the application directory</div>
|
||
<div>cd $PVESCRIPTLOCAL_DIR</div>
|
||
<div className="text-muted-foreground"># Pull latest changes</div>
|
||
<div>git pull</div>
|
||
<div className="text-muted-foreground"># Install dependencies</div>
|
||
<div>npm install</div>
|
||
<div className="text-muted-foreground"># Build the application</div>
|
||
<div>npm run build</div>
|
||
<div className="text-muted-foreground"># Start the application</div>
|
||
<div>npm start</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Update Process</h4>
|
||
<ol className="text-sm text-muted-foreground space-y-2">
|
||
<li><strong>1. Check for Updates:</strong> System automatically checks GitHub for new releases</li>
|
||
<li><strong>2. Download Update:</strong> Downloads the latest release files</li>
|
||
<li><strong>3. Backup Current Version:</strong> Creates backup of current installation</li>
|
||
<li><strong>4. Install New Version:</strong> Replaces files and updates dependencies</li>
|
||
<li><strong>5. Build Application:</strong> Compiles the updated code</li>
|
||
<li><strong>6. Restart Server:</strong> Stops old server and starts new version</li>
|
||
<li><strong>7. Reload Page:</strong> Automatically refreshes the browser</li>
|
||
</ol>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg">
|
||
<h4 className="font-medium text-foreground mb-2">Release Notes</h4>
|
||
<p className="text-sm text-muted-foreground mb-2">
|
||
Click the external link icon next to the update button to view detailed release notes on GitHub.
|
||
</p>
|
||
<ul className="text-sm text-muted-foreground space-y-1">
|
||
<li>• See what's new in each version</li>
|
||
<li>• Read about bug fixes and improvements</li>
|
||
<li>• Check for any breaking changes</li>
|
||
<li>• View installation requirements</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="p-4 border border-border rounded-lg bg-muted/50">
|
||
<h4 className="font-medium text-foreground mb-2">Important Notes</h4>
|
||
<ul className="text-sm text-muted-foreground space-y-2">
|
||
<li>• <strong>Backup:</strong> Your data and settings are preserved during updates</li>
|
||
<li>• <strong>Downtime:</strong> Brief downtime occurs during the update process</li>
|
||
<li>• <strong>Compatibility:</strong> Updates maintain backward compatibility with your data</li>
|
||
<li>• <strong>Rollback:</strong> If issues occur, you can manually revert to previous version</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="fixed inset-0 backdrop-blur-sm bg-black/50 flex items-center justify-center z-50 p-2 sm:p-4">
|
||
<div className="bg-card rounded-lg shadow-xl max-w-6xl w-full max-h-[95vh] sm:max-h-[90vh] overflow-hidden">
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between p-4 sm:p-6 border-b border-border">
|
||
<h2 className="text-xl sm:text-2xl font-bold text-card-foreground flex items-center gap-2">
|
||
<HelpCircle className="w-6 h-6" />
|
||
Help & Documentation
|
||
</h2>
|
||
<Button
|
||
onClick={onClose}
|
||
variant="ghost"
|
||
size="icon"
|
||
className="text-muted-foreground hover:text-foreground"
|
||
>
|
||
<svg className="w-5 h-5 sm:w-6 sm:h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</Button>
|
||
</div>
|
||
|
||
<div className="flex h-[calc(95vh-120px)] sm:h-[calc(90vh-140px)]">
|
||
{/* Sidebar Navigation */}
|
||
<div className="w-64 border-r border-border bg-muted/30 overflow-y-auto">
|
||
<nav className="p-4 space-y-2">
|
||
{sections.map((section) => {
|
||
const Icon = section.icon;
|
||
return (
|
||
<Button
|
||
key={section.id}
|
||
onClick={() => setActiveSection(section.id)}
|
||
variant={activeSection === section.id ? "default" : "ghost"}
|
||
size="sm"
|
||
className="w-full justify-start gap-2 text-left"
|
||
>
|
||
<Icon className="w-4 h-4" />
|
||
{section.label}
|
||
</Button>
|
||
);
|
||
})}
|
||
</nav>
|
||
</div>
|
||
|
||
{/* Content Area */}
|
||
<div className="flex-1 overflow-y-auto">
|
||
<div className="p-4 sm:p-6">
|
||
{renderContent()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|