hellosoftware-io · davioliveeira · Jun 27, 2024 · Jun 27, 2024 · Jun 27, 2024 · Jun 27, 2024
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>New Electron App</title>
+    <title>Bet Sign</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,9 +23,13 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@hookform/resolvers": "^3.6.0",
+    "@mui/icons-material": "^5.15.20",
     "@mui/material": "^5.9.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-hook-form": "^7.52.0",
+    "yup": "^1.4.0"
   },
   "devDependencies": {
     "@types/node": "^16.11.45",
@@ -35,8 +39,8 @@
     "@typescript-eslint/eslint-plugin": "^5.30.7",
     "@typescript-eslint/parser": "^5.30.7",
     "cross-env": "^7.0.3",
-    "electron": "^19.0.8",
-    "electron-builder": "^23.3.2",
+    "electron": "^31.1.0",
+    "electron-builder": "^24.13.3",
     "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.30.1",
@@ -46,7 +50,7 @@
     "ts-loader": "^9.3.1",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
-    "wait-on": "^6.0.1",
+    "wait-on": "^7.2.0",
     "webpack": "^5.73.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.9.3"

diff --git a/screenshot-1.png b/screenshot-1.png
diff --git a/src/main/main.ts b/src/main/main.ts
@@ -6,8 +6,8 @@ let mainWindow: Electron.BrowserWindow | null;
 
 function createWindow() {
   mainWindow = new BrowserWindow({
-    width: 1100,
-    height: 700,
+    width: 920,
+    height: 1080,
     backgroundColor: "#f2f2f2",
     webPreferences: {
       nodeIntegration: true,

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -0,0 +1,24 @@
+import { Box, CssBaseline, ThemeProvider } from "@mui/material";
+import React from "react";
+import theme from "./theme";
+import SimpleBar from "./components/SimpleBn";
+import Header from "./components/AppBar";
+import FormPage from './pages/FormPage'; 
+import UploadPage from "./pages/UploadPage";
+
+export default function App(): JSX.Element {
+  const [value, setValue] = React.useState('single');
+  return (
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+        <main style={{ height:'100%', display: 'flex', flexDirection:'column'}}>
+        <Header/>
+          { value === 'single' && <FormPage/>} 
+          { value === 'multiple' && <UploadPage/>}
+          { value === 'config' && <Box sx={{fontSize:'50px', color:'pink'}}>Config</Box>}
+        <SimpleBar setValue={setValue}/>
+        </main>
+
+    </ThemeProvider>
+  );
+}
diff --git a/src/renderer/components/App.tsx b/src/renderer/components/App.tsx
diff --git a/src/renderer/components/AppBar.tsx b/src/renderer/components/AppBar.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Toolbar from '@mui/material/Toolbar';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import appLogo from "../../../static/logo-v1.svg";
+import MenuIcon from '@mui/icons-material/Menu';
+import Container from '@mui/material/Container';
+import AdbIcon from '@mui/icons-material/Adb';
+
+function Header() {
+
+  return (
+    <AppBar position="static" sx={{ bgcolor: 'red'}}>
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+        <img src={appLogo} style={{width:'60px'}}/> 
+
+         <Typography
+            variant="h6"
+            noWrap
+            component="a"
+            sx={{
+              mr: 4,
+              display: { xs: 'none', md: 'flex' },
+              fontFamily: 'monospace',
+              fontWeight: 700,
+              letterSpacing: '.5rem',
+              color: 'inherit',
+              textDecoration: 'none',
+              paddingLeft: 3,
+            }}
+          >
+            Bet SignIn 
+          </Typography>
+
+
+
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
+}
+export default Header;
diff --git a/src/renderer/components/FileButton.tsx b/src/renderer/components/FileButton.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Button from '@mui/material/Button';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+
+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,
+});
+
+export default function InputFileUpload() {
+  return (
+    <Button
+      component="label"
+      role={undefined}
+      variant="contained"
+      tabIndex={-1}
+      startIcon={<CloudUploadIcon />}
+    >
+      Upload file
+      <VisuallyHiddenInput type="file" accept='xlsx, csv'/>
+    </Button>
+  );
+}
diff --git a/src/renderer/components/Greetings.tsx b/src/renderer/components/Greetings.tsx
diff --git a/src/renderer/components/SimpleBn.tsx b/src/renderer/components/SimpleBn.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import BottomNavigation from '@mui/material/BottomNavigation';
+import BottomNavigationAction from '@mui/material/BottomNavigationAction';
+import {Person, Group, Settings} from '@mui/icons-material';
+import FavoriteIcon from '@mui/icons-material/Favorite';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+
+export default function SimpleBar(props: any) {
+  const [value, setValue] = React.useState(0);
+
+  return (
+    <Box sx={{ width: '100%', marginTop:'auto' }}>
+
+      <BottomNavigation
+        showLabels
+        value={value}
+        onChange={(event, newValue) => {
+          props.setValue(newValue);
+        }}
+      >
+        <BottomNavigationAction value='single' icon={<Person />} />
+        <BottomNavigationAction value='multiple' icon={<Group />} />
+        <BottomNavigationAction value='config' icon={<Settings />} />
+      </BottomNavigation>
+    </Box>
+  );
+}
diff --git a/src/renderer/components/TextFieldComponent.tsx b/src/renderer/components/TextFieldComponent.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { Control, useController } from 'react-hook-form';
+import { TextField, TextFieldProps as MUITextFieldProps, TextFieldProps } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+type TextFieldVariants = 'outlined' | 'standard' | 'filled';
+
+type CustomTextFieldProps<Variant extends TextFieldVariants = 'outlined'> = MUITextFieldProps & {
+  control: Control<any>;
+  name: string;
+  helperText?: string;
+  variant?: Variant;
+};
+
+export const CustomTextField: React.FC<CustomTextFieldProps> = ({
+  control,
+  name,
+  helperText,
+  ...rest
+}) => {
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    name,
+    control,
+  });
+
+  return (
+    <TextField
+      {...field}
+      {...rest}
+      helperText={error ? error.message : helperText}
+      error={!!error}
+      variant="outlined"
+      fullWidth
+    />
+  );
+};
+
+export const TextFieldStyled = styled(TextField)`
+  .MuiOutlinedInput-root {
+    background: ${({ theme }) => theme.palette.background.paper};
+  }
+  .MuiInputLabel-root {
+    color: ${({ theme }) => theme.palette.text.primary};
+  }
+`;
+
+export const InputContainer = styled('div')`
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
+
+export const InputIconStyled = styled('i')`
+  text-align: center;
+`;
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
-import App from "./components/App";
+import App from "./App";
 
 const rootElement = document.getElementById("root");
 const root = createRoot(rootElement!);