Display logs as table in admin side

ahmed0saber · May 30, 2024 · 6d0a333 · 6d0a333
1 parent fc29f6e
commit 6d0a333
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 14 deletions.
diff --git a/app/admin/logs/page.js b/app/admin/logs/page.js
@@ -83,13 +83,30 @@ export default function page() {
                     تسجيل الخروج
                 </button>
                 <div className={styles.logsContainer}>
-                    {logs.map((log, index) => (
-                        <div key={index} className={styles.logRecord}>
-                            {Object.keys(log).map((key => (
-                                <p key={key}>{key}: {log[key]}</p>
-                            )))}
-                        </div>
-                    ))}
+                    <div className={styles.logsTable}>
+                        <header className='row'>
+                            <span className='col service-col'>Service</span>
+                            <span className='col date-col'>Date</span>
+                            <span className='col level-col'>Level</span>
+                            <span className='col message-col'>Message</span>
+                            <span className='col count-col'>Subscribers Count</span>
+                            <span className='col total-time-col'>Total Time Taken</span>
+                            <span className='col subscribers-time-col'>Get Subscribers Time Taken</span>
+                            <span className='col emails-time-col'>Send Emails Time Taken</span>
+                        </header>
+                        {logs.map((log, index) => (
+                            <div key={index} className='row'>
+                                <span className='col service-col'>{log.service}</span>
+                                <span className='col date-col'>{log.date}</span>
+                                <span className='col level-col'>{log.level}</span>
+                                <span className='col message-col'>{log.message}</span>
+                                <span className='col count-col'>{log.subscribersCount}</span>
+                                <span className='col total-time-col'>{log.totalTimeTaken}</span>
+                                <span className='col subscribers-time-col'>{log.getSubscribersTimeTaken}</span>
+                                <span className='col emails-time-col'>{log.sendEmailsTimeTaken}</span>
+                            </div>
+                        ))}
+                    </div>
                 </div>
                 {isLoading | logs.length === 0 | isDone ? null : (
                     <button

diff --git a/app/admin/logs/style.module.css b/app/admin/logs/style.module.css
@@ -1,13 +1,55 @@
 .logsContainer {
     margin-top: 12px;
+    overflow-x: auto;
+    direction: ltr;
+}
+
+.logsTable {
+    min-width: 1410px;
+}
+
+.logsTable header {
+    font-weight: bold;
+}
+
+.logsTable :global(.row) {
     display: flex;
-    flex-direction: column;
-    gap: 12px;
+    padding: 12px 0;
+    border-bottom: 1px solid #E1E1E1;
 }
 
-.logRecord {
-    border: 1px solid #323232;
-    padding: 12px;
-    width: 100%;
-    direction: ltr;
+.logsTable :global(.col) {
+    flex: 1 0;
+}
+
+.logsTable :global(.service-col) {
+    flex-basis: 110px;
+}
+
+.logsTable :global(.date-col) {
+    flex-basis: 190px;
+}
+
+.logsTable :global(.level-col) {
+    flex-basis: 70px;
+}
+
+.logsTable :global(.message-col) {
+    flex-basis: 350px;
+}
+
+.logsTable :global(.count-col) {
+    flex-basis: 150px;
+}
+
+.logsTable :global(.total-time-col) {
+    flex-basis: 140px;
+}
+
+.logsTable :global(.subscribers-time-col) {
+    flex-basis: 210px;
+}
+
+.logsTable :global(.emails-time-col) {
+    flex-basis: 190px;
 }