如何在 React Firebase 中基于时间创建交易历史记录

问：

我有一个这样的网站显示：

输入交易数据的地方

如果单击提交，发送到 API 的数据将如下所示：button

{
    "-NjE-07WS5julczaO0ZD": {
        "bahanSampah": "Kertas",
        "beratSampah": "3",
        "harga": 22500,
        "jenisSampah": "Koran",
        "namaNasabah": "Ita Ibrahim",
        "satuan": "Kilogram",
        "tglSetor": "15 November 2023, 01:01"
    },
    "-NjGQMz_3DRlK5CUiFcH": {
        "bahanSampah": "Plastik",
        "beratSampah": "0.5",
        "harga": 1750,
        "jenisSampah": "Plastik Campur",
        "namaNasabah": "Erna",
        "satuan": "Kilogram",
        "tglSetor": "14 November 2023, 12:21"
    }
}

以上数据如下表所示：

显示已提交到表中的数据

如何根据上面发送到 API 的“存款日期”数据显示交易历史，图片如下所示： 我期望的表格外观概述

这是我为上面的显示创建的代码：

import { Button, Col, Divider, Form, Input, Select } from "antd";
import React, { useState } from "react";
import DataTable from "./components/datatable";
import "../../../styles/inventaris/inventaris.css";
import { useSelector } from "react-redux";
import moment from "moment";
import DataTableTotal from "./components/datatableTotal";

function Inventaris({ createDataInventaris, loadingOnSubmit, handleDeleteDataSampah }) {
  const { data: dataNasabah } = useSelector((state) => state.dataNasabah);
  const { data: dataSampah } = useSelector((state) => state.dataSampah);
  const [selectedBahan, setSelectedBahan] = useState(""); 
  const { currentUser } = useSelector(state => state.auth)

  const [form] = Form.useForm();

  const handleSubmit = (values) => {
    const selectedBahanData = dataSampah[selectedBahan];
    if (selectedBahanData) {
      const data = {
        ...values,
        bahanSampah: selectedBahanData.bahan,
        tglSetor: moment().format("DD MMMM YYYY, HH:mm"),
      };
      createDataInventaris(data);
      form.resetFields();
    }
  };

  const handleBahanChange = (value) => {
    setSelectedBahan(value);
  };

  const isPetugas = Object.values(dataNasabah).some(user => user.status === "Petugas" && user.uid === currentUser.uid)

  return (
    <div>
      <Form disabled={!isPetugas} layout="vertical" form={form} onFinish={handleSubmit}>
        <Form.Item
          label="Nama Nasabah"
          colon={false}
          name="namaNasabah"
          rules={[
            {
              required: true,
              message: "Tolong masukkan nama nasabah!",
            },
          ]}
        >
          <Select
            showSearch
            style={{
              width: "100%",
            }}
            placeholder="Masukkan nama nasabah"
          >
            {Object.values(dataNasabah).map((nasabah) => (
              <Select.Option
                key={nasabah.namaLengkap}
                value={nasabah.namaLengkap}
              >
                {nasabah.namaLengkap}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          label="Bahan Sampah"
          colon={false}
          name="bahanSampah"
          rules={[
            {
              required: true,
              message: "Tolong masukkan nama bahan sampah!",
            },
          ]}
        >
          <Select
            showSearch
            style={{
              width: "100%",
            }}
            placeholder="Masukkan nama bahan sampah"
            onChange={handleBahanChange}
          >
            {Object.keys(dataSampah).map((sampahId) => (
              <Select.Option key={sampahId} value={sampahId}>
                {dataSampah[sampahId].bahan}
              </Select.Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          label="Jenis Sampah"
          colon={false}
          name="jenisSampah"
          rules={[
            {
              required: true,
              message: "Tolong masukkan nama jenis sampah!",
            },
          ]}
        >
          <Select
            showSearch
            style={{
              width: "100%",
            }}
            placeholder="Masukkan nama jenis sampah"
            allowClear
          >
            {selectedBahan &&
              dataSampah[selectedBahan]?.jenis.map((jenis) => (
                <Select.Option key={jenis} value={jenis}>
                  {jenis}
                </Select.Option>
              ))}
          </Select>
        </Form.Item>

        <Form.Item
          label="Berat Sampah"
          colon={false}
          name="beratSampah"
          rules={[
            {
              required: true,
              message: "Tolong masukkan berat sampah!",
            },
          ]}
        >
          <Input
            style={{
              width: "100%",
            }}
            placeholder="Masukkan berat sampah"
          />
        </Form.Item>

        <Form.Item
          label="Satuan"
          colon={false}
          name="satuan"
          rules={[
            {
              required: true,
              message: "Tolong masukkan satuan harga sampah!",
            },
          ]}
        >
          <Select
            placeholder="Masukan satuan"
            allowClear
            options={[
              {
                value: "Kilogram",
                label: "Kilogram",
              },
              {
                value: "Biji",
                label: "Biji",
              },
              {
                value: "Liter",
                label: "Liter",
              },
            ]}
          />
        </Form.Item>

        <Form.Item className="btn-submit">
          <Button htmlType="submit" loading={loadingOnSubmit}>
            Submit
          </Button>
        </Form.Item>
      </Form>


      <Col className="datatable">
        <Divider orientation="left">Setoran Sampah</Divider>
        <DataTable handleDeleteDataSampah={handleDeleteDataSampah} />
      </Col>
      
      <Col className="datatable">
        <Divider orientation="left">Total Keseluruhan Setoran</Divider>
        <DataTableTotal />
      </Col>
    </div>
  );
}

export default Inventaris;

然后在本节“DataTableTotal”中，我显示提交数据的结果：

import React from 'react';
import { Table } from 'antd';
import { useSelector } from 'react-redux';

function DataTableTotal() {
  const { data } = useSelector((state) => state.dataInventaris);

  const getAggregatedData = () => {
    if (!data) return [];
    const aggregatedData = {};
    Object.values(data).forEach((item) => {
      const { namaNasabah, harga, beratSampah } = item;
      if (!aggregatedData[namaNasabah]) {
        aggregatedData[namaNasabah] = {
          namaNasabah,
          totalHarga: 0,
          totalBerat: 0,
        };
      }
      aggregatedData[namaNasabah].totalHarga += harga;
      aggregatedData[namaNasabah].totalBerat += parseFloat(beratSampah);
    });
    return Object.values(aggregatedData);
  };

  const columns = [
    {
      title: "No",
      width: 10,
      render: (text, record, index) => index + 1,
    },
    {
      title: "Nama Nasabah",
      dataIndex: "namaNasabah",
      width: 300,
    },
    {
      title: "Total Harga Setoran",
      dataIndex: "totalHarga",
      width: 200,
    },
    {
      title: "Total Berat Setoran",
      dataIndex: "totalBerat",
      width: 200,
    },
  ];

  return (
    <div>
      <Table dataSource={getAggregatedData()} columns={columns} pagination={false} />
    </div>
  );
}

export default DataTableTotal;

请帮帮我！