ChatGPT-Next-Web/app/components/usage-stats/UsageStats.tsx

// UsageStats.tsx

import React, { useState, useEffect } from 'react';
import { getAvailableDateKeys, getSignInCountForPeriod, getDetailsByUser } from '../../utils/cloud/redisRestClient';

import styles from './UsageStats.module.scss'; // Assume you have a separate SCSS module for UsageStats

const UsageStats: React.FC<{ onClose: () => void }> = ({ onClose }) => {
  const [dateKeys, setDateKeys] = useState<string[]>([]);
  const [selectedDateKey, setSelectedDateKey] = useState<string>('');
  const [signInCount, setSignInCount] = useState<number>(0);
  const [userDetails, setUserDetails] = useState<Record<string, number>>({});
  const [showDrillDown, setShowDrillDown] = useState<boolean>(false);

  useEffect(() => {
    const fetchData = async () => {
      const availableDateKeys = await getAvailableDateKeys();
      setDateKeys(availableDateKeys);
    };
    fetchData();
  }, []);

  const handleDateChange = async (event: React.ChangeEvent<HTMLSelectElement>) => {
    const dateKey = event.target.value;
    setSelectedDateKey(dateKey);
    const count = await getSignInCountForPeriod(dateKey);
    setSignInCount(count);
    setShowDrillDown(false);
  };

  const handleDrillDown = async () => {
    const details = await getDetailsByUser(selectedDateKey);
    setUserDetails(details);
    setShowDrillDown(true);
  };

  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>
        {/* 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>
                ))}
              </tbody>
            </table>
          )}
          <button className={styles.closeButton} onClick={onClose}>
            Close
          </button>
        </div>
      </div>
    </div>
  );
  
};

export default UsageStats;