import React, { useState } from 'react'; import { View, Text, ScrollView, TouchableOpacity } from 'react-native'; import { Home, Server, Shield, Users, Menu, Bell, Search } from "lucide-react-native"; const AdminDashboard = () => { const [activeTab, setActiveTab] = useState('dashboard'); const renderContent = () => { switch (activeTab) { case 'proxmox': return ; case 'pfsense': return ; case 'users': return ; default: return ; } }; return ( {/* Header */} AD Admin Dashboard {/* Main Content */} {renderContent()} {/* Bottom Navigation */} } label="Dashboard" isActive={activeTab === 'dashboard'} onPress={() => setActiveTab('dashboard')} /> } label="Proxmox" isActive={activeTab === 'proxmox'} onPress={() => setActiveTab('proxmox')} /> } label="pfSense" isActive={activeTab === 'pfsense'} onPress={() => setActiveTab('pfsense')} /> } label="Users" isActive={activeTab === 'users'} onPress={() => setActiveTab('users')} /> ); }; const TabButton = ({ icon, label, isActive, onPress }) => ( {icon} {label} ); const DashboardSection = () => ( System Overview Monitor your infrastructure at a glance Infrastructure Status System Performance Chart Recent Activity ); const ProxmoxSection = () => ( Proxmox Virtual Environment Manage your virtual machines and containers Virtual Machines + New VM Storage ); const PfSenseSection = () => ( pfSense Firewall Manage network security and routing Interfaces + Add Interface Firewall Rules ); const UserManagementSection = () => ( User Management Manage system users and permissions Users + Add User Groups ); const StatCard = ({ title, value, status }) => ( {title} {value} {status} ); const ActivityItem = ({ title, time, type }) => ( {title} {time} ); const VMItem = ({ name, status, cpu, ram }) => ( {name} CPU: {cpu} | RAM: {ram} {status} ); const StorageItem = ({ name, used, total, percentage }) => ( {name} {used} / {total} 80 ? 'bg-red-500' : percentage > 60 ? 'bg-yellow-500' : 'bg-green-500' }`} style={{ width: `${percentage}%` }} /> ); const InterfaceItem = ({ name, status, ip }) => ( {name} IP: {ip} {status} ); const RuleItem = ({ name, status }) => ( {name} {status} ); const UserItem = ({ name, email, role }) => ( {name.charAt(0)} {name} {email} {role} ); const GroupItem = ({ name, members, permissions }) => ( {name} {members} members {permissions} ); export default AdminDashboard;

React Native NEXT FAS App Preview

Project Screens for NEXT FAS App