Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 | 2x 2x | // import * as React from "react";
import { palette } from "@palette";
// @mui
import Box from "@mui/material/Box";
// components
import { Text } from "@common/Text";
import { ExpandedRow } from "./ExpandedRow";
import { Table_V2 as Table, TableColumnType } from "@common/Table";
import CustomPagination from "@common/pagination/pagination/pagination";
// data
import { tableData, RevenuesData } from "./data";
// utils
import { toEnFormat } from "@utils/index";
type RevenuesProps = {
type: string;
VisitorsViews: boolean;
Visitors: boolean;
};
export const RevenuesTable = ({
type,
VisitorsViews,
Visitors,
}: RevenuesProps) => {
const columns: TableColumnType[] = [
{
key: "Source",
sortable: true,
title: "Source",
hasExpandButton: true,
renderColumn: (row: RevenuesData) => (
<Box>
<Text fontWeight="medium" color={palette.neutral[800]}>
{type === "Membership" ? "General Membership" : row.source}
</Text>
<Text color={palette.neutral[800]}>{row.sourceDescription}</Text>
</Box>
),
},
{
key: "Amount",
sortable: true,
title: "Amount",
renderColumn: (row: RevenuesData) => (
<Text fontWeight="bold" color={palette.neutral[800]}>
{toEnFormat(row.amount)}
<sup>
<Box
component="span"
color={palette.neutral[800]}
fontWeight="medium"
>
USD
</Box>{" "}
</sup>
</Text>
),
},
{
key: "Average",
sortable: true,
title: "Average",
renderColumn: (row: RevenuesData) => (
<Text fontWeight="bold" color={palette.neutral[800]}>
{toEnFormat(row.average)}
<sup>
<Box
component="span"
color={palette.neutral[800]}
fontWeight="medium"
>
USD
</Box>{" "}
</sup>
</Text>
),
},
];
return (
<Box sx={tableWrapper}>
<Table
small
expandable
data={tableData}
columns={columns}
renderExpandedRow={(row: RevenuesData) => (
<ExpandedRow
rowData={row}
type={type}
VisitorsViews={VisitorsViews}
Visitors={Visitors}
/>
)}
/>
<CustomPagination pages={1} />
</Box>
);
};
const tableWrapper = {
marginTop: "16px",
display: "flex",
alignItems: "center",
flexDirection: "column",
};
|