working

Author: Douglas019BR

.gitignore

@@ -1,5 +1,6 @@
 # frontend (React)
 frontend/node_modules/
+frontend/node_modules/*
 frontend/build/
 frontend/.env
 frontend/.cache/

frontend/package-lock.json

@@ -3,16 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/icons-material": "^6.1.0",
-    "@mui/material": "^6.1.0",
-    "@testing-library/jest-dom": "^5.17.0",
+    "@emotion/react": "^11.11.0",
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.11.16",
+    "@mui/material": "^5.13.0",
+    "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "papaparse": "^5.4.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.28.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
@@ -39,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
   }
 }

frontend/package.json

@@ -0,0 +1,28 @@
+import React from 'react';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import StockPortfolio from './pages/StockPortfolio';
+import HelloWorldPage from './pages/HelloWorldPage'; 
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+    element: <StockPortfolio />,
+    children: [
+      {
+        path: "hello",
+        element: <HelloWorldPage />
+      }
+    ]
+  }
+], {
+  future: {
+    v7_startTransition: true,
+    v7_relativeSplatPath: true
+  }
+});
+
+function App() {
+  return <RouterProvider router={router} />;
+}
+
+export default App;

frontend/src/App.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Button } from '@mui/material';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import { styled } from '@mui/material/styles';
+
+const VisuallyHiddenInput = styled('input')({
+  clip: 'rect(0 0 0 0)',
+  clipPath: 'inset(50%)',
+  height: 1,
+  overflow: 'hidden',
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  whiteSpace: 'nowrap',
+  width: 1,
+});
+
+const FileUploadButton = ({ onFileSelect, accept = '*/*' }) => {
+  return (
+    <Button
+      component="label"
+      variant="contained"
+      startIcon={<CloudUploadIcon />}
+    >
+      Upload file
+      <VisuallyHiddenInput 
+        type="file" 
+        onChange={onFileSelect}
+        accept={accept}
+      />
+    </Button>
+  );
+};
+
+export default FileUploadButton;

frontend/src/App.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { 
+  Table, 
+  TableBody, 
+  TableCell, 
+  TableContainer, 
+  TableHead, 
+  TableRow, 
+  Paper 
+} from '@mui/material';
+
+const DataTable = ({ columns, data, onRowClick }) => {
+  const getStatusColor = (status) => {
+    switch (status) {
+      case 'Profit':
+        return 'success.main';
+      case 'Loss':
+        return 'error.main';
+      default:
+        return 'text.primary';
+    }
+  };
+
+  return (
+    <TableContainer component={Paper}>
+      <Table sx={{ minWidth: 650 }}>
+        <TableHead>
+          <TableRow>
+            {columns.map((column) => (
+              <TableCell
+                key={column.id}
+                align={column.align || 'left'}
+                sx={{
+                  backgroundColor: 'primary.main',
+                  color: 'white',
+                  fontWeight: 'bold'
+                }}
+              >
+                {column.label}
+              </TableCell>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {data.map((row, index) => (
+            <TableRow
+              key={index}
+              onClick={() => onRowClick?.(row)}
+              sx={{ 
+                '&:nth-of-type(odd)': { backgroundColor: 'action.hover' },
+                cursor: onRowClick ? 'pointer' : 'default'
+              }}
+            >
+              {columns.map((column) => (
+                <TableCell
+                  key={column.id}
+                  align={column.align || 'left'}
+                  sx={{
+                    color: column.id === 'status' 
+                      ? getStatusColor(row[column.id])
+                      : 'text.primary'
+                  }}
+                >
+                  {row[column.id]}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default DataTable;

frontend/src/components/common/Button/index.jsx

@@ -0,0 +1,10 @@
+export const stockTableColumns = [
+  { id: 'symbol', label: 'Symbol' },
+  { id: 'quantity', label: 'Quantity' },
+  { id: 'purchasePrice', label: 'Purchase Price ($)', align: 'right' },
+  { id: 'currentValue', label: 'Current Value ($)', align: 'right' },
+  { id: 'dividends', label: 'Dividends ($)', align: 'right' },
+  { id: 'difference', label: 'Difference ($)', align: 'right' },
+  { id: 'balance', label: 'Balance ($)', align: 'right' },
+  { id: 'status', label: 'Status' }
+];

frontend/src/components/common/FileUploadButton/index.jsx

@@ -1,17 +1,11 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
+import './index.css';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();