Repair beautiful apps

src/components/Global/DateRealTime.jsx

@@ -0,0 +1,48 @@
+import { useState, useEffect } from 'react';
+import { Typography } from 'antd';
+
+const { Title, Text } = Typography;
+
+const JamRealtimeAntd = () => {
+    const [waktu, setWaktu] = useState(new Date());
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setWaktu(new Date());
+        }, 1000);
+
+        return () => clearInterval(interval);
+    }, []);
+
+    // Format custom manual untuk konsistensi
+    const formatWaktuLengkap = (date) => {
+        const hari = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+        const bulan = [
+            'Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
+            'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'
+        ];
+
+        const namaHari = hari[date.getDay()];
+        const tanggal = date.getDate().toString().padStart(2, '0');
+        const namaBulan = bulan[date.getMonth()];
+        const tahun = date.getFullYear();
+        
+        const jam = date.getHours().toString().padStart(2, '0');
+        const menit = date.getMinutes().toString().padStart(2, '0');
+        const detik = date.getSeconds().toString().padStart(2, '0');
+
+        return `${namaHari}, ${tanggal} ${namaBulan} ${tahun} ${jam}:${menit}:${detik}`;
+    };
+
+    return (
+        <Text style={{ 
+            fontSize: '25px', 
+            // fontWeight: 'bold',
+            color: '#1BAA56'
+        }}>
+            {formatWaktuLengkap(waktu)}
+        </Text>
+    );
+};
+
+export default JamRealtimeAntd;

src/layout/LayoutHeader.jsx

@@ -5,6 +5,7 @@ import handleLogOut from '../Utils/Auth/Logout';
 import { useBreadcrumb } from './LayoutBreadcrumb';
 import { decryptData } from '../components/Global/Formatter';
 import { useNavigate } from 'react-router-dom';
+import DateRealTime from '../components/Global/DateRealTime';
 
 const { Link, Text } = Typography;
 const { Header } = Layout;
@@ -17,7 +18,7 @@ const LayoutHeader = () => {
     const { token } = theme.useToken() || {};
     const colorBgContainer = token?.colorBgContainer || '#fff';
     const colorBorder = token?.colorBorder || '#d9d9d9';
-    const colorText = token?.colorText || '#000';
+    const colorText = token?.colorText || '#1BAA56';
 
     // Ambil data user dari localStorage
     let userData = null;
@@ -73,8 +74,9 @@ const LayoutHeader = () => {
                     paddingBottom: 20,
                     paddingLeft: 24,
                     paddingRight: 24,
-                    minHeight: 100,
+                    // minHeight: 100,
                     boxSizing: 'border-box',
+                    boxShadow: '5px 0 10px rgba(0, 0, 0, 0.4)'
                 }}
             >
                 <div
@@ -87,16 +89,39 @@ const LayoutHeader = () => {
                 >
                     <Text
                         style={{
-                            color: colorText,
+                            color: '#1BAA56',
-                            fontSize: 16,
+                            fontSize: 26,
                             fontWeight: 'bold',
                             whiteSpace: 'nowrap',
                         }}
                     >
-                        Login AS {roleName}
+                        {/* Login AS {roleName} */}
+                        CALL OF DUTY
                     </Text>
                 </div>
 
+                <div
+                    style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        gap: 12,
+                    }}
+                >
+                    {/* <Text
+                        style={{
+                            color: '#000000',
+                            fontSize: 20,
+                            fontWeight: 'bold',
+                            whiteSpace: 'nowrap',
+                        }}
+                    > */}
+                        {/* Login AS {roleName} */}
+                        {/* Kamis, 04 November 2025 16:35:00 */}
+                    {/* </Text> */}
+                    <DateRealTime/>
+                </div>
+
                 <div
                     style={{
                         display: 'flex',

src/layout/LayoutSidebar.jsx

@@ -24,6 +24,10 @@ const LayoutSidebar = () => {
                 left: 0,
                 top: 0,
                 bottom: 0,
+                borderTopRightRadius: '30px',
+                borderBottomRightRadius: '30px',
+                boxShadow: '5px 0 10px rgba(0, 0, 0, 0.4)',
+                zIndex: 9999
             }}
         >
             <LayoutLogo />