feat: implement main application dashboard with service management and project configuration UI

This commit is contained in:
Ümit Tunç
2026-03-28 21:50:53 +03:00
parent 2a66537f86
commit 026090e99b
4 changed files with 47 additions and 32 deletions
+41 -29
View File
@@ -99,6 +99,7 @@ function App(): JSX.Element {
})
const [activeTab, setActiveTab] = useState('dashboard')
const [settingsTab, setSettingsTab] = useState(0)
const [dashboardTab, setDashboardTab] = useState(0)
const [projects, setProjects] = useState<any[]>([])
const [phpVersions, setPhpVersions] = useState<any[]>([])
const [mySqlVersions, setMySqlVersions] = useState<any[]>([])
@@ -738,38 +739,49 @@ function App(): JSX.Element {
Hızlı Bakış
</Typography>
<Box sx={{ borderBottom: 1, borderColor: 'divider', mb: 3 }}>
<Tabs value={dashboardTab} onChange={(_e, v) => setDashboardTab(v)} textColor="primary" indicatorColor="primary">
<Tab label={t('common.all')} />
<Tab label="Nginx" />
<Tab label="PHP" />
<Tab label="MySQL" />
</Tabs>
</Box>
<Grid container spacing={3} sx={{ mb: 4 }}>
{/* Nginx Box */}
<Grid item xs={12} sm={6} md={4}>
<Paper elevation={4} sx={{
p: 3, borderRadius: 3,
bgcolor: 'rgba(255, 255, 255, 0.03)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(255, 255, 255, 0.05)',
transition: 'transform 0.2s',
'&:hover': { transform: 'scale(1.02)' }
}}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
<WebIcon color="primary" sx={{ fontSize: 40 }} />
{getStatusChip(status.nginx)}
</Box>
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>Nginx</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Port: {settings.nginxPort}</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<IconButton onClick={() => handleOpenLogs('nginx')} size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}>
<TerminalIcon fontSize="small" />
</IconButton>
<Switch
checked={status.nginx === 'running' || status.nginx === 'starting'}
onChange={() => handleToggleService('nginx')}
disabled={status.nginx === 'starting'}
/>
</Box>
</Paper>
</Grid>
{(dashboardTab === 0 || dashboardTab === 1) && (
<Grid item xs={12} sm={6} md={4}>
<Paper elevation={4} sx={{
p: 3, borderRadius: 3,
bgcolor: 'rgba(255, 255, 255, 0.03)',
backdropFilter: 'blur(10px)',
border: '1px solid rgba(255, 255, 255, 0.05)',
transition: 'transform 0.2s',
'&:hover': { transform: 'scale(1.02)' }
}}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
<WebIcon color="primary" sx={{ fontSize: 40 }} />
{getStatusChip(status.nginx)}
</Box>
<Typography variant="h6" sx={{ fontWeight: 'bold' }}>Nginx</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>Port: {settings.nginxPort}</Typography>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
<IconButton onClick={() => handleOpenLogs('nginx')} size="small" sx={{ bgcolor: 'rgba(255,255,255,0.05)' }}>
<TerminalIcon fontSize="small" />
</IconButton>
<Switch
checked={status.nginx === 'running' || status.nginx === 'starting'}
onChange={() => handleToggleService('nginx')}
disabled={status.nginx === 'starting'}
/>
</Box>
</Paper>
</Grid>
)}
{/* PHP Boxes */}
{installedPhpVersions.map(v => (
{(dashboardTab === 0 || dashboardTab === 2) && installedPhpVersions.map(v => (
<Grid item xs={12} sm={6} md={4} key={v.id}>
<Paper elevation={4} sx={{
p: 3, borderRadius: 3,
@@ -800,7 +812,7 @@ function App(): JSX.Element {
))}
{/* MySQL Boxes */}
{mySqlVersions.filter(v => v.status === 'installed').map(v => (
{(dashboardTab === 0 || dashboardTab === 3) && mySqlVersions.filter(v => v.status === 'installed').map(v => (
<Grid item xs={12} sm={6} md={4} key={v.id}>
<Paper elevation={4} sx={{
p: 3, borderRadius: 3,
+2 -1
View File
@@ -8,7 +8,8 @@
"close": "Schließen",
"quit": "Beenden",
"save": "Speichern",
"port": "Port"
"port": "Port",
"all": "Alle"
},
"dashboard": {
"title": "Trunçgil Multi-PHP Server",
+2 -1
View File
@@ -8,7 +8,8 @@
"close": "Close",
"quit": "Quit",
"save": "Save",
"port": "Port"
"port": "Port",
"all": "All"
},
"dashboard": {
"title": "Trunçgil Multi-PHP Server",
+2 -1
View File
@@ -8,7 +8,8 @@
"close": "Kapat",
"quit": "Çıkış",
"save": "Kaydet",
"port": "Port"
"port": "Port",
"all": "Tümü"
},
"dashboard": {
"title": "Trunçgil Multi-PHP Server",