From 68706346b319c060242fdd6cf52cf247ad19baec Mon Sep 17 00:00:00 2001
From: DirkSchlossmacher <62424946+DirkSchlossmacher@users.noreply.github.com>
Date: Tue, 14 Nov 2023 09:42:26 +0100
Subject: [PATCH] div

---
 app/components/usage-stats/UsageStats.tsx | 66 +++++++++++------------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/app/components/usage-stats/UsageStats.tsx b/app/components/usage-stats/UsageStats.tsx
index 38fb13944..e02fd9819 100644
--- a/app/components/usage-stats/UsageStats.tsx
+++ b/app/components/usage-stats/UsageStats.tsx
@@ -36,46 +36,44 @@ const UsageStats: React.FC<{ onClose: () => void }> = ({ onClose }) => {
   return (
     <div className={styles.usageStatsContainer}>
       <div className={styles.usageStatsModal}>
-          <h1>Usage Stats</h1>
-          <select value={selectedDateKey} onChange={handleDateChange}>
-            {dateKeys.map(dateKey => (
-              <option key={dateKey} value={dateKey}>
-                {dateKey}
-              </option>
-            ))}
-          </select>
-          <p>Number of events: {signInCount}</p>
-          <button onClick={handleDrillDown}>Drill-down</button>
-          <div>
-            {showDrillDown && (
-                  
-                    
-                    {/* ... other UI elements ... */}
-
-              <table>
-                <thead>
-                  <tr>
-                    <th>Email</th>
-                    <th>Count</th>
+        <h1>Usage Stats</h1>
+        <select value={selectedDateKey} onChange={handleDateChange}>
+          {dateKeys.map(dateKey => (
+            <option key={dateKey} value={dateKey}>
+              {dateKey}
+            </option>
+          ))}
+        </select>
+        <p>Number of events: {signInCount}</p>
+        <button onClick={handleDrillDown}>Drill-down</button>
+        {/* Wrap the conditional block and the button with a div or fragment */}
+        <div>
+          {showDrillDown && (
+            <table>
+              <thead>
+                <tr>
+                  <th>Email</th>
+                  <th>Count</th>
+                </tr>
+              </thead>
+              <tbody>
+                {Object.entries(userDetails).map(([email, count]) => (
+                  <tr key={email}>
+                    <td>{email}</td>
+                    <td>{count}</td>
                   </tr>
-                </thead>
-                <tbody>
-                  {Object.entries(userDetails).map(([email, count]) => (
-                    <tr key={email}>
-                      <td>{email}</td>
-                      <td>{count}</td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            )}
+                ))}
+              </tbody>
+            </table>
+          )}
           <button className={styles.closeButton} onClick={onClose}>
-                    Close
+            Close
           </button>
-        </div> 
+        </div>
       </div>
     </div>
   );
+  
 };
 
 export default UsageStats;
\ No newline at end of file