Get transactions

react-app/src/App.js

@@ -5,7 +5,7 @@ import Home from './home/Home.js';
 import Signup from './signup/Signup.js';
 import Dashboard from './dashboard/Dashboard.js';
 import Products from './dashboard/Products.js';
-import Payments from './dashboard/Payments.js';
+import Transactions from './dashboard/Transactions.js';
 import Payouts from './dashboard/Payouts.js';
 import Settings from './dashboard/Settings.js';
 import Login from './signup/Login.js';
@@ -19,7 +19,7 @@ function App() {
           <Route exact path="/login" element={<Login />} />
           <Route exact path="/dashboard" element={<Dashboard />} />
           <Route exact path="/products" element={<Products />} />
-          <Route exact path="/payments" element={<Payments />} />
+          <Route exact path="/transactions" element={<Transactions />} />
           <Route exact path="/payouts" element={<Payouts />} />
           <Route exact path="/settings" element={<Settings />} />
          </Routes>

react-app/src/dashboard/Dashboard.js

@@ -62,9 +62,10 @@ export default function Dashboard() {
 
         <Toolbar />
 
-        <Divider>
-            <Chip label="Status" sx={{ fontSize: "20px" }}/>
+        <Divider sx={{ padding: 1 }}>
+            <Chip label="Status" variant="elevated" sx={{ minWidth: 100, fontSize: "20px", backgroundColor: "#0abf53", color: "white" }}/>
         </Divider>
+
         <br/>
 
         <Box style={{ width: '60%', height: '50%'}} textAlign="left" >

react-app/src/dashboard/DashboardDrawer.js

@@ -65,12 +65,12 @@ export default function DashboardDrawer() {
                 <ListItemText primary="Products" />
               </ListItemButton>
             </ListItem>
-            <ListItem disablePadding button component={RouterLink} to={"/payments/"}>
+            <ListItem disablePadding button component={RouterLink} to={"/transactions/"}>
               <ListItemButton>
                 <ListItemIcon>
                   <PaymentsIcon />
                 </ListItemIcon>
-                <ListItemText primary="Payments" />
+                <ListItemText primary="Transactions" />
               </ListItemButton>
             </ListItem>
             <ListItem disablePadding button component={RouterLink} to={"/payouts/"}>

react-app/src/dashboard/Payouts.js

@@ -26,8 +26,8 @@ export default function Payouts() {
 
         <Toolbar />
 
-        <Divider>
-            <Chip label="My payouts" sx={{ fontSize: "20px" }}/>
+        <Divider sx={{ padding: 1 }}>
+            <Chip label="My Payouts" variant="elevated" sx={{ minWidth: 100, fontSize: "20px", backgroundColor: "#0abf53", color: "white" }}/>
         </Divider>
         <br/><br/>
 

react-app/src/dashboard/Products.js

@@ -28,9 +28,10 @@ export default function Products() {
 
         <Toolbar />
 
-        <Divider>
-            <Chip label="My Products" sx={{ fontSize: "20px" }}/>
+        <Divider sx={{ padding: 1 }}>
+            <Chip label="My Products" variant="elevated" sx={{ minWidth: 100, fontSize: "20px", backgroundColor: "#0abf53", color: "white" }}/>
         </Divider>
+
         <ProductList/>
       </Box>
     </Box>

react-app/src/dashboard/Settings.js

@@ -27,8 +27,8 @@ export default function Settings() {
 
         <Toolbar />
 
-        <Divider>
-            <Chip label="Settings" sx={{ fontSize: "20px" }}/>
+        <Divider sx={{ padding: 1 }}>
+            <Chip label="Settings" variant="elevated" sx={{ minWidth: 100, fontSize: "20px", backgroundColor: "#0abf53", color: "white" }}/>
         </Divider>
         <br/><br/>
 

react-app/src/dashboard/Transactions.js

@@ -0,0 +1,138 @@
+import React, { useState, useEffect } from 'react';
+import axios from "axios";
+
+import Box from '@mui/material/Box';
+import Chip from '@mui/material/Chip';
+import Toolbar from '@mui/material/Toolbar';
+import Divider from '@mui/material/Divider';
+import { useNavigate } from 'react-router-dom';
+
+import Paper from '@mui/material/Paper';
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TablePagination from '@mui/material/TablePagination';
+import TableRow from '@mui/material/TableRow';
+
+import DashboardHeader from "./DashboardHeader.js";
+import DashboardDrawer from "./DashboardDrawer.js";
+
+export default function Products() {
+
+    const navigate = useNavigate()
+
+    const [page, setPage] = useState(0);
+    const [rowsPerPage, setRowsPerPage] = useState(10);
+    const [rows, setRows] = useState([]);
+
+    const handleChangePage = (event, newPage) => {
+        setPage(newPage);
+    };
+
+    const handleChangeRowsPerPage = (event) => {
+        setRowsPerPage(+event.target.value);
+        setPage(0);
+    };
+
+    useEffect(() => {
+        const fetchData = async () => {
+          try {
+            const response = await axios.post('/api/dashboard/getTransactions');
+            setRows(response.data);
+          } catch (error) {
+            console.error('API request error:', error);
+            navigate('/');
+          }
+        };
+
+        fetchData();
+    }, []);
+
+  return (
+    <Box sx={{ display: 'flex' }}>
+
+      <DashboardHeader/>
+
+      <DashboardDrawer/>
+
+        <Box
+              display="flex"
+              flexDirection="column"
+              alignItems="center"
+              width="100%"
+              sx={{ p: 3 }}
+        >
+
+        <Toolbar />
+
+        <Divider sx={{ padding: 1 }}>
+            <Chip label="My Transactions" variant="elevated" sx={{ minWidth: 100, fontSize: "20px", backgroundColor: "#0abf53", color: "white" }}/>
+        </Divider>
+            <Paper sx={{ width: '100%' }}>
+                <TableContainer>
+                    <Table stickyHeader aria-label="sticky table">
+                        <TableHead>
+                            <TableRow>
+                                {columns.map((column) => (
+                                    <TableCell
+                                      key={column.id}
+                                      align={column.align}
+                                      style={{ minWidth: column.minWidth }}
+                                      sx={{ fontSize: "18px", fontWeight: "bold"  }}
+                                    >
+                                        {column.label}
+                                    </TableCell>
+                                ))}
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {rows
+                                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+                                .map((row) => {
+                                return (
+                                    <TableRow hover role="checkbox" tabIndex={-1} key={row.code}>
+                                        {columns.map((column) => {
+                                        const value = row[column.id];
+                                        return (
+                                            <TableCell key={column.id} align={column.align}
+                                                sx={{ fontSize: "15px",
+                                                        color: value === 'Outgoing' ? '#1573C1' : value === 'Incoming' ? '#0A912E' : 'black',
+                                                        fontWeight: value === 'Outgoing' ? 'bold' : value === 'Incoming' ? 'bold' : 'normal'
+                                                    }}
+                                            >
+                                                {column.format && typeof value === 'number'? column.format(value) : value}
+                                            </TableCell>
+                                            );
+                                        })}
+                                    </TableRow>
+                                );
+                                })}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+                <TablePagination
+                    rowsPerPageOptions={[10, 25]}
+                    component="div"
+                    count={rows.length}
+                    rowsPerPage={rowsPerPage}
+                    page={page}
+                    onPageChange={handleChangePage}
+                    onRowsPerPageChange={handleChangeRowsPerPage}
+                />
+            </Paper>
+
+
+      </Box>
+    </Box>
+  );
+}
+
+const columns = [
+    { id: 'id', label: 'ID', minWidth: 100 },
+    { id: 'status', label: 'Status', minWidth: 120 },
+    { id: 'type', label: 'Type', minWidth: 120 },
+    { id: 'created', label: 'Created', minWidth: 220 },
+    { id: 'amount', label: 'Amount', minWidth: 150 },
+];

src/main/java/com/adyen/controller/DashboardController.java

@@ -1,6 +1,7 @@
 package com.adyen.controller;
 
 import com.adyen.model.OnboardingLinkProperties;
+import com.adyen.model.TransactionItem;
 import com.adyen.model.User;
 import com.adyen.model.balanceplatform.AccountHolder;
 import com.adyen.model.legalentitymanagement.LegalEntity;
@@ -15,6 +16,8 @@
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.*;
 
+import java.util.Arrays;
+import java.util.List;
 import java.util.Optional;
 
 @RestController
@@ -92,6 +95,18 @@ ResponseEntity<String> getOnboardingLink(@RequestBody OnboardingLinkProperties o
                 );
     }
 
+    @PostMapping("/getTransactions")
+    ResponseEntity<List<TransactionItem>> getTransactions() {
+
+        if (getUserIdOnSession() == null) {
+            log.warn("User is not logged in");
+            return new ResponseEntity<>(HttpStatus.UNAUTHORIZED);
+        }
+
+        return new ResponseEntity<>(
+                getConfigurationAPIService().getTransactions(getUserIdOnSession()), HttpStatus.ACCEPTED);
+    }
+
     public ConfigurationAPIService getConfigurationAPIService() {
         return configurationAPIService;
     }

src/main/java/com/adyen/model/TransactionItem.java

@@ -0,0 +1,75 @@
+package com.adyen.model;
+
+public class TransactionItem {
+    private String id;
+    private String status;
+    private String type;
+    private String created;
+    private String amount;
+
+    public String getId() {
+        return id;
+    }
+
+    public void setId(String id) {
+        this.id = id;
+    }
+
+    public String getStatus() {
+        return status;
+    }
+
+    public void setStatus(String status) {
+        this.status = status;
+    }
+
+    public String getCreated() {
+        return created;
+    }
+
+    public void setCreated(String created) {
+        this.created = created;
+    }
+
+    public String getAmount() {
+        return amount;
+    }
+
+    public void setAmount(String amount) {
+        this.amount = amount;
+    }
+
+    public String getType() {
+        return type;
+    }
+
+    public void setType(String type) {
+        this.type = type;
+    }
+
+    public TransactionItem id(String id) {
+        this.id = id;
+        return this;
+    }
+
+    public TransactionItem status(String status) {
+        this.status = status;
+        return this;
+    }
+
+    public TransactionItem created(String created) {
+        this.created = created;
+        return this;
+    }
+
+    public TransactionItem amount(String amount) {
+        this.amount = amount;
+        return this;
+    }
+
+    public TransactionItem type(String type) {
+        this.type = type;
+        return this;
+    }
+
+}