mirror of
https://github.com/Studio-Saelix/sencho.git
synced 2026-08-20 07:13:05 +00:00
feat: add Community/Pro licensing, fleet view, and UI reorganization (#145)
* feat: add license gating system with Lemon Squeezy integration Add Community/Pro tier infrastructure: - LicenseService singleton with Lemon Squeezy license API integration - /api/license endpoints (GET info, POST activate/deactivate/validate) - 14-day Pro trial activated automatically on first boot - 72-hour periodic validation with 30-day offline grace period - LicenseContext provider for frontend tier awareness - License settings tab with activation UI and status display - ProBadge and ProGate reusable components for feature gating - requirePro per-route guard for backend Pro-only endpoints - Proxy bypass for /api/license routes (local-only, never proxied) * feat: add user profile dropdown and reorganize top navigation - Create UserProfileDropdown component with settings, billing, theme toggle (System/Light/Dark), documentation links, and logout button - Remove logout button from sidebar header - Remove standalone settings button from top bar - Move theme toggle from Settings modal to profile dropdown - Inject app version via Vite define from root package.json - Add globals.d.ts for __APP_VERSION__ type declaration * refactor(settings): remove appearance tab from settings modal Theme toggle was moved to the User Profile Dropdown in the previous commit. Remove the now-redundant Appearance section, its nav button, and the unused theme/setTheme props from SettingsModal. * feat: add fleet view dashboard and about settings section Fleet Overview: aggregates all nodes into a card grid showing status, container counts, CPU/RAM/disk usage bars. Pro tier unlocks stack drill-down with auto-refresh (30s). Backend endpoints /api/fleet/overview and /api/fleet/node/:nodeId/stacks query nodes in parallel. About section in Settings: displays version, license tier, status, instance ID, and links to docs/changelog/issues. Sidebar perf fix: stack status fetches now run in parallel via Promise.allSettled instead of sequential for-loop, significantly reducing load time for nodes with many stacks. Also removes version number from User Profile Dropdown (now in About). * fix(ci): resolve Docker build and E2E test failures - Copy root package.json into frontend build stage so vite.config.ts can read the app version during Docker multi-stage build. - Update auth E2E test: logout button moved into User Profile Dropdown. - Update nodes E2E test: Settings button moved into User Profile Dropdown.
This commit is contained in:
Anso
@@ -18,10 +18,12 @@ import { Badge } from '@/components/ui/badge';
|
||||
import { toast } from 'sonner';
|
||||
import { apiFetch } from '@/lib/api';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Shield, Activity, Bell, Palette, Moon, Sun, Monitor, Code, Server, Package, RefreshCw, Database, Info } from 'lucide-react';
|
||||
import { Shield, Activity, Bell, Code, Server, Package, RefreshCw, Database, Info, Crown, CheckCircle, XCircle, Clock } from 'lucide-react';
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||
import { NodeManager } from './NodeManager';
|
||||
import { useNodes } from '@/context/NodeContext';
|
||||
import { useLicense } from '@/context/LicenseContext';
|
||||
import { ProBadge } from './ProBadge';
|
||||
|
||||
interface Agent {
|
||||
type: 'discord' | 'slack' | 'webhook';
|
||||
@@ -43,15 +45,11 @@ interface PatchableSettings {
|
||||
log_retention_days?: string;
|
||||
}
|
||||
|
||||
type SectionId = 'account' | 'system' | 'notifications' | 'appearance' | 'developer' | 'nodes' | 'appstore';
|
||||
|
||||
type Theme = 'light' | 'dark' | 'auto';
|
||||
type SectionId = 'account' | 'license' | 'system' | 'notifications' | 'developer' | 'nodes' | 'appstore' | 'about';
|
||||
|
||||
interface SettingsModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
theme: Theme;
|
||||
setTheme: (theme: Theme) => void;
|
||||
}
|
||||
|
||||
const DEFAULT_SETTINGS: PatchableSettings = {
|
||||
@@ -67,14 +65,18 @@ const DEFAULT_SETTINGS: PatchableSettings = {
|
||||
log_retention_days: '30',
|
||||
};
|
||||
|
||||
export function SettingsModal({ isOpen, onClose, theme, setTheme }: SettingsModalProps) {
|
||||
export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
|
||||
const { activeNode } = useNodes();
|
||||
const { license, activate, deactivate } = useLicense();
|
||||
const isRemote = activeNode?.type === 'remote';
|
||||
const [activeSection, setActiveSection] = useState<SectionId>('account');
|
||||
const [licenseKeyInput, setLicenseKeyInput] = useState('');
|
||||
const [isActivating, setIsActivating] = useState(false);
|
||||
const [isDeactivating, setIsDeactivating] = useState(false);
|
||||
|
||||
// When switching to a remote node, reset to a node-scoped section if on a global-only one
|
||||
useEffect(() => {
|
||||
if (isRemote && (activeSection === 'account' || activeSection === 'notifications' || activeSection === 'appearance' || activeSection === 'nodes' || activeSection === 'appstore')) {
|
||||
if (isRemote && (activeSection === 'account' || activeSection === 'license' || activeSection === 'notifications' || activeSection === 'nodes' || activeSection === 'appstore')) {
|
||||
setActiveSection('system');
|
||||
}
|
||||
}, [isRemote]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
@@ -409,6 +411,9 @@ export function SettingsModal({ isOpen, onClose, theme, setTheme }: SettingsModa
|
||||
{!isRemote && (
|
||||
<NavButton section="account" icon={<Shield className="w-4 h-4 mr-2" />} label="Account" />
|
||||
)}
|
||||
{!isRemote && (
|
||||
<NavButton section="license" icon={<Crown className="w-4 h-4 mr-2" />} label="License" />
|
||||
)}
|
||||
<NavButton
|
||||
section="system"
|
||||
icon={<Activity className="w-4 h-4 mr-2" />}
|
||||
@@ -416,9 +421,6 @@ export function SettingsModal({ isOpen, onClose, theme, setTheme }: SettingsModa
|
||||
showDot={hasSystemChanges}
|
||||
/>
|
||||
<NavButton section="notifications" icon={<Bell className="w-4 h-4 mr-2" />} label="Notifications" />
|
||||
{!isRemote && (
|
||||
<NavButton section="appearance" icon={<Palette className="w-4 h-4 mr-2" />} label="Appearance" />
|
||||
)}
|
||||
<NavButton
|
||||
section="developer"
|
||||
icon={<Code className="w-4 h-4 mr-2" />}
|
||||
@@ -431,6 +433,7 @@ export function SettingsModal({ isOpen, onClose, theme, setTheme }: SettingsModa
|
||||
{!isRemote && (
|
||||
<NavButton section="appstore" icon={<Package className="w-4 h-4 mr-2" />} label="App Store" />
|
||||
)}
|
||||
<NavButton section="about" icon={<Info className="w-4 h-4 mr-2" />} label="About" />
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@@ -478,6 +481,151 @@ export function SettingsModal({ isOpen, onClose, theme, setTheme }: SettingsModa
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeSection === 'license' && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold tracking-tight">License</h3>
|
||||
<p className="text-sm text-muted-foreground">Manage your Sencho Pro license.</p>
|
||||
</div>
|
||||
|
||||
{/* Current Tier Display */}
|
||||
<div className="bg-muted/10 p-4 border border-border rounded-xl space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{license?.tier === 'pro' ? (
|
||||
<CheckCircle className="w-5 h-5 text-green-500" />
|
||||
) : (
|
||||
<Crown className="w-5 h-5 text-muted-foreground" />
|
||||
)}
|
||||
<span className="font-medium text-base">
|
||||
{license?.tier === 'pro' ? 'Sencho Pro' : 'Sencho Community'}
|
||||
</span>
|
||||
</div>
|
||||
{license?.tier === 'pro' && <ProBadge />}
|
||||
</div>
|
||||
|
||||
{license?.status === 'trial' && license.trialDaysRemaining !== null && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Trial: {license.trialDaysRemaining} day{license.trialDaysRemaining !== 1 ? 's' : ''} remaining</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{license?.status === 'active' && (
|
||||
<div className="space-y-2 text-sm">
|
||||
{license.customerName && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Customer</span>
|
||||
<span>{license.customerName}</span>
|
||||
</div>
|
||||
)}
|
||||
{license.productName && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Plan</span>
|
||||
<span>{license.productName}</span>
|
||||
</div>
|
||||
)}
|
||||
{license.maskedKey && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">License Key</span>
|
||||
<span className="font-mono text-xs">{license.maskedKey}</span>
|
||||
</div>
|
||||
)}
|
||||
{license.validUntil && (
|
||||
<div className="flex justify-between">
|
||||
<span className="text-muted-foreground">Renews</span>
|
||||
<span>{new Date(license.validUntil).toLocaleDateString()}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{license?.status === 'expired' && (
|
||||
<div className="flex items-center gap-2 text-sm text-destructive">
|
||||
<XCircle className="w-4 h-4" />
|
||||
<span>Your Pro license has expired. Renew to restore Pro features.</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{license?.status === 'disabled' && (
|
||||
<div className="flex items-center gap-2 text-sm text-destructive">
|
||||
<XCircle className="w-4 h-4" />
|
||||
<span>Your license has been disabled. Contact support for assistance.</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Activation / Deactivation */}
|
||||
{license?.status === 'active' ? (
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Deactivating will revert to Community features.
|
||||
</p>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={async () => {
|
||||
setIsDeactivating(true);
|
||||
const result = await deactivate();
|
||||
if (result.success) {
|
||||
toast.success('License deactivated.');
|
||||
} else {
|
||||
toast.error(result.error || 'Deactivation failed');
|
||||
}
|
||||
setIsDeactivating(false);
|
||||
}}
|
||||
disabled={isDeactivating}
|
||||
>
|
||||
{isDeactivating
|
||||
? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Deactivating...</>
|
||||
: 'Deactivate License'
|
||||
}
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-base">Activate License Key</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Enter your Sencho Pro license key to unlock all features.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
placeholder="XXXXX-XXXXX-XXXXX-XXXXX"
|
||||
value={licenseKeyInput}
|
||||
onChange={(e) => setLicenseKeyInput(e.target.value)}
|
||||
className="font-mono"
|
||||
/>
|
||||
<Button
|
||||
onClick={async () => {
|
||||
if (!licenseKeyInput.trim()) return;
|
||||
setIsActivating(true);
|
||||
const result = await activate(licenseKeyInput.trim());
|
||||
if (result.success) {
|
||||
toast.success('License activated! Welcome to Sencho Pro.');
|
||||
setLicenseKeyInput('');
|
||||
} else {
|
||||
toast.error(result.error || 'Activation failed');
|
||||
}
|
||||
setIsActivating(false);
|
||||
}}
|
||||
disabled={isActivating || !licenseKeyInput.trim()}
|
||||
>
|
||||
{isActivating
|
||||
? <><RefreshCw className="w-4 h-4 mr-2 animate-spin" />Activating...</>
|
||||
: 'Activate'
|
||||
}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Don't have a license? <a href="https://sencho.io/pricing" target="_blank" rel="noopener noreferrer" className="underline hover:text-foreground transition-colors">Get Sencho Pro</a>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeSection === 'system' && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start justify-between pr-8">
|
||||
@@ -630,41 +778,6 @@ export function SettingsModal({ isOpen, onClose, theme, setTheme }: SettingsModa
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeSection === 'appearance' && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold tracking-tight">Appearance</h3>
|
||||
<p className="text-sm text-muted-foreground">Customize Sencho's visual theme.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 mt-6 flex-wrap">
|
||||
<Button
|
||||
variant={theme === 'light' ? 'default' : 'outline'}
|
||||
className="w-32 h-20 flex flex-col gap-2 rounded-xl"
|
||||
onClick={() => setTheme('light')}
|
||||
>
|
||||
<Sun className="w-6 h-6" />
|
||||
Light
|
||||
</Button>
|
||||
<Button
|
||||
variant={theme === 'dark' ? 'default' : 'outline'}
|
||||
className="w-32 h-20 flex flex-col gap-2 rounded-xl"
|
||||
onClick={() => setTheme('dark')}
|
||||
>
|
||||
<Moon className="w-6 h-6" />
|
||||
Dark
|
||||
</Button>
|
||||
<Button
|
||||
variant={theme === 'auto' ? 'default' : 'outline'}
|
||||
className="w-32 h-20 flex flex-col gap-2 rounded-xl"
|
||||
onClick={() => setTheme('auto')}
|
||||
>
|
||||
<Monitor className="w-6 h-6" />
|
||||
Auto
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeSection === 'developer' && (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-start justify-between pr-8">
|
||||
@@ -791,6 +904,66 @@ export function SettingsModal({ isOpen, onClose, theme, setTheme }: SettingsModa
|
||||
<NodeManager />
|
||||
)}
|
||||
|
||||
{activeSection === 'about' && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold tracking-tight">About Sencho</h3>
|
||||
<p className="text-sm text-muted-foreground">Version and instance information.</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 bg-muted/10 p-4 border border-border rounded-xl">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Version</span>
|
||||
<Badge variant="secondary" className="font-mono">v{__APP_VERSION__}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Tier</span>
|
||||
<div>{license?.tier === 'pro' ? <ProBadge /> : <Badge variant="outline">Community</Badge>}</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">License Status</span>
|
||||
<Badge variant="outline" className="capitalize">{license?.status ?? 'community'}</Badge>
|
||||
</div>
|
||||
{license?.instanceId && (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">Instance ID</span>
|
||||
<code className="text-xs font-mono bg-muted px-2 py-1 rounded">{license.instanceId.slice(0, 8)}</code>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-sm font-medium">Links</h4>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<a
|
||||
href="https://docs.sencho.io"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Documentation →
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/AnsoCode/Sencho/blob/main/CHANGELOG.md"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Changelog →
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/AnsoCode/Sencho/issues"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
Report an Issue →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeSection === 'appstore' && (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user