From d4d3d6cbb3356bf3aa2ab8d3e1ca1c9d03ba71bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=9Cmit=20Tun=C3=A7?= <umitreva@gmail.com>
Date: Thu, 2 Apr 2026 00:29:38 +0300
Subject: [PATCH] feat: initialize main application dashboard and service
 management interface in App.tsx

---
 src/renderer/src/App.tsx | 66 +++++++++++++++++++++++++++++++++++++++-
 1 file changed, 65 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx
index 392f324..bbc36d6 100644
--- a/src/renderer/src/App.tsx
+++ b/src/renderer/src/App.tsx
@@ -539,6 +539,64 @@ function App(): JSX.Element {
         );
     };
 
+    const ProjectResourceMonitor = ({ serverStats, phpStats, serverType }: { serverStats?: ServiceInfo; phpStats?: ServiceInfo; serverType: string }) => {
+        const hasServerStat = serverStats?.cpu !== undefined || serverStats?.memory !== undefined;
+        const hasPhpStat = phpStats?.cpu !== undefined || phpStats?.memory !== undefined;
+
+        if (!hasServerStat && !hasPhpStat) return null;
+
+        const renderMiniStats = (stats?: ServiceInfo, label: string = 'Service') => {
+            if (!stats) return null;
+            const cpu = stats.cpu || 0;
+            const memory = stats.memory || 0;
+            const ramMB = Math.round(memory / (1024 * 1024));
+            const ramPercent = Math.min((ramMB / 1024) * 100, 100);
+
+            return (
+                <Box sx={{ flex: 1 }}>
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 0.5 }}>
+                        <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.4)', fontSize: '0.65rem', fontWeight: 700 }}>{label.toUpperCase()}</Typography>
+                        <Box sx={{ display: 'flex', gap: 1 }}>
+                            <Typography variant="caption" sx={{ color: 'primary.light', fontSize: '0.65rem', fontWeight: 700 }}>{cpu}%</Typography>
+                            <Typography variant="caption" sx={{ color: 'secondary.light', fontSize: '0.65rem', fontWeight: 700 }}>{formatMemory(memory)}</Typography>
+                        </Box>
+                    </Box>
+                    <Box sx={{ display: 'flex', gap: '2px' }}>
+                        <LinearProgress 
+                            variant="determinate" 
+                            value={cpu} 
+                            sx={{ 
+                                height: 3, 
+                                borderRadius: 1, 
+                                flex: 1,
+                                bgcolor: 'rgba(255,255,255,0.05)',
+                                '.MuiLinearProgress-bar': { borderRadius: 1, backgroundImage: `linear-gradient(90deg, #33d9b2 ${cpu}%, #ff5252 100%)`, bgcolor: 'transparent' }
+                            }} 
+                        />
+                        <LinearProgress 
+                            variant="determinate" 
+                            value={ramPercent} 
+                            sx={{ 
+                                height: 3, 
+                                borderRadius: 1, 
+                                flex: 1,
+                                bgcolor: 'rgba(255,255,255,0.05)',
+                                '.MuiLinearProgress-bar': { borderRadius: 1, bgcolor: 'secondary.main' }
+                            }} 
+                        />
+                    </Box>
+                </Box>
+            );
+        };
+
+        return (
+            <Box sx={{ mt: 1.5, display: 'flex', gap: 2 }}>
+                {renderMiniStats(serverStats, serverType)}
+                {renderMiniStats(phpStats, 'PHP')}
+            </Box>
+        );
+    };
+
     const handleAddProject = async () => {
         if (!window.api) return
         if (newProject.id) {
@@ -1543,7 +1601,7 @@ function App(): JSX.Element {
                                                                 </Tooltip>
                                                             )}
                                                             <Tooltip title="Sil">
-                                                                <IconButton size="small" onClick={() => handleRemoveProject(project.id)} sx={{ color: 'rgba(255,255,255,0.4)', '&:hover': { color: '#ff4444' } }}>
+                                                <IconButton size="small" onClick={() => handleRemoveProject(project.id)} sx={{ color: 'rgba(255,255,255,0.4)', '&:hover': { color: '#ff4444' } }}>
                                                                     <DeleteIcon fontSize="small" />
                                                                 </IconButton>
                                                             </Tooltip>
@@ -1566,6 +1624,12 @@ function App(): JSX.Element {
                                                             />
                                                         </Box>
 
+                                                        <ProjectResourceMonitor 
+                                                            serverType={project.serverType === 'apache' ? 'Apache' : 'Nginx'}
+                                                            serverStats={project.serverType === 'apache' ? status.apache : status.nginx}
+                                                            phpStats={status[`php:${project.phpVersion}`]}
+                                                        />
+
                                                         <Paper variant="outlined" sx={{
                                                             p: 1.5,
                                                             bgcolor: 'rgba(0,0,0,0.2)',