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

This commit is contained in:
Ümit Tunç
2026-04-02 00:16:20 +03:00
parent 72b2d297fd
commit 9059314cd1
+19 -14
View File
@@ -746,8 +746,20 @@ function App(): JSX.Element {
backdropFilter: 'blur(10px)' backdropFilter: 'blur(10px)'
}} }}
> >
<Toolbar sx={{ gap: 2 }}> <Toolbar sx={{ gap: 1 }}>
<FormControl size="small" variant="outlined" sx={{ minWidth: 120 }}> <Box sx={{ flexGrow: 1 }} />
<Tooltip title={t('dashboard.start_all')}>
<IconButton color="inherit" onClick={handleStartAll} sx={{ '&:hover': { color: 'success.main' } }}>
<StartIcon />
</IconButton>
</Tooltip>
<Tooltip title={t('dashboard.stop_all')}>
<IconButton color="inherit" onClick={handleStopAll} sx={{ '&:hover': { color: 'error.main' } }}>
<StopIcon />
</IconButton>
</Tooltip>
<Divider orientation="vertical" flexItem sx={{ mx: 1, borderColor: 'rgba(255,255,255,0.1)' }} />
<FormControl size="small" variant="outlined" sx={{ minWidth: 80 }}>
<Select <Select
value={i18n.language} value={i18n.language}
onChange={handleLanguageChange} onChange={handleLanguageChange}
@@ -755,8 +767,10 @@ function App(): JSX.Element {
IconComponent={LanguageIcon} IconComponent={LanguageIcon}
sx={{ sx={{
color: 'white', color: 'white',
'.MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.3)' }, height: '35px',
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.5)' }, fontSize: '0.8rem',
'.MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.2)' },
'&:hover .MuiOutlinedInput-notchedOutline': { borderColor: 'rgba(255,255,255,0.4)' },
'&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: 'primary.main' }, '&.Mui-focused .MuiOutlinedInput-notchedOutline': { borderColor: 'primary.main' },
'.MuiSelect-icon': { color: 'white' } '.MuiSelect-icon': { color: 'white' }
}} }}
@@ -768,7 +782,7 @@ function App(): JSX.Element {
))} ))}
</Select> </Select>
</FormControl> </FormControl>
<IconButton color="inherit" onClick={() => setActiveTab('settings')}> <IconButton color="inherit" onClick={() => setActiveTab('settings')} sx={{ ml: 1 }}>
<SettingsIcon /> <SettingsIcon />
</IconButton> </IconButton>
</Toolbar> </Toolbar>
@@ -1281,15 +1295,6 @@ function App(): JSX.Element {
</Grid> </Grid>
))} ))}
</Grid> </Grid>
<Box sx={{ display: 'flex', gap: 2 }}>
<Button variant="contained" fullWidth startIcon={<StartIcon />} size="large" onClick={handleStartAll} sx={{ borderRadius: 2, padding: '12px', background: 'linear-gradient(45deg, #153E5E 30%, #4A7CA3 90%)', boxShadow: '0 3px 5px 2px rgba(21, 62, 94, .3)' }}>
{t('common.start')}
</Button>
<Button variant="outlined" fullWidth startIcon={<StopIcon />} size="large" color="error" onClick={handleStopAll} sx={{ borderRadius: 2, padding: '12px', borderWidth: 2, '&:hover': { borderWidth: 2 } }}>
{t('common.stop')}
</Button>
</Box>
</> </>
)} )}