attendances.tsx

import React, { useEffect, useState, SetStateAction } from 'react'

import { collection, query, where, onSnapshot } from 'firebase/firestore'
import { firestore } from 'src/firebase/clientApp'

import { DataGrid, GridColDef } from '@mui/x-data-grid'
import { Card, CardHeader } from '@mui/material'

const columns: GridColDef[] = [
  {
    flex: 0.1,
    field: 'staffid',
    minWidth: 80,
    headerName: 'Staff Id'
  },
  {
    flex: 0.1,
    field: 'name',
    minWidth: 80,
    headerName: 'Name'
  },
  {
    flex: 0.1,
    field: 'status',
    minWidth: 80,
    headerName: 'Status'
  },
  {
    flex: 0.1,
    field: 'datetime',
    minWidth: 80,
    headerName: 'Datetime'
  }
]

export default function Admins() {
  const [loading, setLoading] = useState<boolean>(true)
  const [values, setValues] = useState<any[]>([])
  const [total, setTotal] = useState<number>(0)

  useEffect(() => {
    const q = query(
      collection(firestore, '_attendances'),

      // orderBy('time', 'desc'),
      // limit(100),
      where('status', '==', true)
    )
    const unsubscribe = onSnapshot(q, querySnapshot => {
      const cities: SetStateAction<any[]> = []
      querySnapshot.forEach(doc => {
        cities.push(doc.data())
      })

      setValues(cities)
      setLoading(false)
      setTotal(cities.length)
    })

    return unsubscribe
  }, [setValues])

  return (
    <div>
      {loading ? (
        <div>
          <h2>Loading</h2>
        </div>
      ) : values.length === 0 ? (
        <div>
          <p>No records</p>
        </div>
      ) : (
        <Card>
          <CardHeader title='Realtime' />
          <DataGrid
            autoHeight
            pagination
            rows={values}
            rowCount={total}
            getRowId={() => Math.floor(Math.random() * 100000000)}
            columns={columns}
            pageSizeOptions={[50, 100]}
            sortingMode='server'
            paginationMode='server'
            componentsProps={{
              baseButton: {
                variant: 'outlined'
              }
            }}
          />
        </Card>
      )}
    </div>
  )
}