Fakultas Ilmu Komputer UI

ListTransaksi.jsx 2.42 KB
Newer Older
Jeffrey's avatar
Jeffrey committed
1
2
3
import React from "react";
import TableComponent from "../../component/TableComponent";
import { css } from "@emotion/core";
4
5
6
7
8
import {
  stringToCurrency,
  stringToDate,
  transactionToColoredStatus,
} from "../../component/TableUtils";
Jeffrey's avatar
Jeffrey committed
9
import FormDownload from "../../component/FormDownload";
10
import useFetchSingleData from "../../utils/useFetchSingleData";
Jeffrey's avatar
Jeffrey committed
11
12

const ListTransaksi = () => {
13
14
15
16
17
18
19
20
21
  let batchNames = [{"Loading...": "None"}];
  const [batches, error] = useFetchSingleData(`${process.env.REACT_APP_BASE_URL}/batch/`);
  console.log(batches);
  if (!error && batches.results!== undefined){
    const batchArray = batches.results;
    batchNames = batchArray.map( b =>{ 
      return {[b.batch_name] : b.batch_name}
    });
  }
Jeffrey's avatar
Jeffrey committed
22
23
24
25
26
27
28
29
30
31
  const data = {
    url: `${process.env.REACT_APP_BASE_URL}/transactions/`,
    pageDefault: 1,
    title: "",
    keyValuePairs: [
      ["id", "id"],
      ["transaction_number", "ID Transaksi"],
      ["user_username", "Username"],
      ["created_at", "Tanggal Pembuatan", stringToDate],
      ["updated_at", "Tanggal Update", stringToDate],
32
      ["", "Status", transactionToColoredStatus],
Jeffrey's avatar
Jeffrey committed
33
      ["subtotal", "Total", stringToCurrency],
34
      ["batch_name","Batch"]
Jeffrey's avatar
Jeffrey committed
35
36
37
    ],
    link: "/transaksi/",
    filter: [
38
39
      ["updated_at_date_range_after", "Tanggal Update dari", "date"],
      ["updated_at_date_range_before", "Tanggal Update hingga", "date"],
Jeffrey's avatar
Jeffrey committed
40
41
42
43
44
45
46
47
48
49
50
51
      {
        transaction_status: {
          label: "Status transaksi",
          choices: [
            { "001": "Waiting for proof of payment" },
            { "002": "Waiting for seller confirmation" },
            { "003": "In process" },
            { "004": "Being shipped" },
            { "005": "Completed" },
            { "006": "Canceled" },
          ],
        },
52
53
54
55
56
57
      },{
        batch_name: {
          label: "Batch",
          choices: batchNames
        }
      }
Jeffrey's avatar
Jeffrey committed
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
    ],
  };
  return (
    <div
      css={css`
        display: flex;
        flex-direction: column;
        margin: 2rem 3rem 3rem 3rem;
      `}
    >
      <div
        css={css`
          font-size: 35px;
        `}
      >
        KELOLA TRANSAKSI
      </div>
Jeffrey's avatar
Jeffrey committed
75
76
77
78
      <div
        css={css`
          display: flex;
          width: 25%;
79
          margin-left: 60px;
Jeffrey's avatar
Jeffrey committed
80
          margin-right: 26%;
81
          margin-top:10px;
Jeffrey's avatar
Jeffrey committed
82
83
84
85
        `}
      >
        <FormDownload url="/reports/transaction/" />
      </div>
Jeffrey's avatar
Jeffrey committed
86
87
88
89
90
91
      <TableComponent {...data} />
    </div>
  );
};

export default ListTransaksi;