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 | import * as React from "react";
import { palette } from "@palette";
import { useNavigate } from "react-router";
// mui
import Box from "@mui/material/Box";
// import Menu from "@mui/material/Menu";
import Stack from "@mui/material/Stack";
// components
import { Text } from "@common/Text";
// utils
import { parseAmount, toEnFormat } from "utils";
// assets
import { MoreIcon } from "@assets/icons";
// data
import { TransactionData } from "@components/ManageMoney/TransactionTable/data";
// localization
import { useTranslation } from "react-i18next";
import { namespaces } from "localization/resources/i18n.constants";
type TableCardProps = {
rowData: TransactionData;
closeModal: () => void;
};
const Container = {
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
padding: "12px 8px",
gap: "8px",
width: "100%",
height: "122px",
borderRadius: "8px",
background: "#FFFFFF",
boxShadow:
"0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03)",
};
const TableCard: React.FC<TableCardProps> = ({ rowData, closeModal }) => {
const navigate = useNavigate();
const { t } = useTranslation(namespaces.common);
return (
<Box sx={Container}>
<Box width="100%" display="flex" justifyContent="space-between">
<Box
onClick={() => {
closeModal();
navigate(`/provider/merchants/transactions/${rowData.id}`, {
state: { rowData },
});
}}
>
<Text variant="body" color={palette.neutral[600]}>
{rowData.time}
</Text>
<Text
variant="headline"
color={palette.neutral[800]}
fontWeight="medium"
>
{rowData.title}
</Text>
</Box>
</Box>
<Box
width="100%"
display="flex"
alignItems="flex-end"
justifyContent="space-between"
onClick={() => {
closeModal();
navigate(`/provider/merchants/transactions/${rowData.id}`, {
state: { rowData },
});
}}
>
<Text
variant="headline"
color={palette.neutral[800]}
fontWeight="medium"
>
{rowData.type}
</Text>
<Stack>
<Text
variant="headline"
color={palette.neutral[800]}
fontWeight="medium"
>
{parseAmount(rowData.amount)}
</Text>
<Text variant="body" color={palette.neutral[600]}>
{parseAmount(rowData.balance)}
</Text>
</Stack>
</Box>
</Box>
);
};
export default TableCard;
|