\n \n
\n {/* Sportiva 1
*/}\n \n ![](\"img/logo.png\")
\n
\n \n\n \n \n \n
\n \n );\n}\n","import { Route, Redirect } from 'react-router-dom';\nimport { useRecoilValue } from 'recoil';\n\nimport { authAtom } from '_state';\n\nexport { PrivateRoute };\n\nfunction PrivateRoute({ component: Component, ...rest }) {\n const auth = useRecoilValue(authAtom);\n \n return (\n \n
\n ) : null}\n - \n
- \n \n Edit\n \n \n {/*
- userActions.delete(user.id)}>Delete */}\n
- deleteUser()}>Delete \n
\n
\n \n {heading}\n
\n {subLinkTitle ? \n \n {subLinkTitle}\n \n : null }\n\n
\n \n );\n}\n","import { Link } from \"react-router-dom\";\nimport { useState } from \"react\";\n\nimport { FaEllipsisV } from \"react-icons/fa\";\nimport moment from 'moment';\n\nexport { BetItem };\n\nfunction BetItem({ data, path, onDelete }) {\n const [showAction, setShowAction] = useState(false);\n\n const deleteUser = () => {\n setShowAction(false);\n onDelete(data.id)\n }\n\n var date = moment(data.gamedate, 'DD-MM-YYYY')\n const convertedDate = date.format('YYYY-MM-DD');\n\n return (\n \n ![](\"img/sort.png\")
\n
\n \n Sort
\n\n
\n Filter
\n\n
\n ) : null}\n - \n
- \n \n Edit\n \n \n
- deleteUser()}>Delete \n
\n
\n ) : null}\n - \n
- \n Edit\n \n
- deletedata()}>\n Delete\n \n
\n
\n \n
\n \n
\n\n \n {/* Page Heading */}\n {/*
\n \n
*/}\n\n {/* Content Row */}\n Admin Overview
\n\n {/* Informational Cards */}\n
\n
\n\n \n
\n \n
\n \n
\n \n
\n \n Games Bet Today\n
\n \n 100\n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n \n Todays Bet Total\n
\n \n $27,000\n
\n \n
\n \n
\n \n
\n \n
\n \n
\n \n Todays Bets Won\n
\n \n 57\n
\n \n
\n\n {/* \n
\n \n
\n \n
\n \n
\n \n Todays Bets Lost\n
\n \n 43\n
\n \n
*/}\n\n {/* \n
\n \n
\n \n
\n \n
\n \n Todays Bet Total
\n $27,000
\n \n \n
\n \n
\n\n \n
\n \n
\n \n
\n \n
\n Bets Won\n
\n \n
\n \n
\n 57
\n \n
\n */}\n \n
\n \n
\n \n
\n \n
\n \n Bets Lost
\n 43
\n \n
\n */}\n \n
\n\n {/* \n
\n \n
\n \n
\n \n Fund Balance Overview\n
\n as of 25 November 2021 at 9:15 PM\n\n {/*
\n \n
\n \n
\n - \n
- \n Fund Total Balance\n $1,925,438\n \n
- \n Fund Return %92%\n \n
- \n Total Games Bet\n 2654\n \n
- \n Total Won\n 1327\n \n
- \n Total Lost\n 1327\n \n
\n
\n \n
\n\n \n
\n \n Revenue Sources\n
\n\n \n \n \n \n
\n Dropdown Header:
\n Action\n Another action\n \n Something else here\n \n
\n \n \n
\n \n \n Direct\n \n \n Social\n \n \n Referral\n \n
\n \n
\n {/* \n
\n \n \n \n
\n
\n \n
\n \n Pick History\n
\n| \n Matchup\n | \n\n Pick\n | \n\n Game Date\n | \n\n Outcome\n | \n
|---|
\n\n \n
*/}\n \n\n \n
\n\n \n
\n\n \n \n
\n Projects
\n\n Server Migration
\n Sales Tracking
\n Customer Database
\n Payout Details
\n Account Setup
\n
\n Server Migration 20%
\n \n \n
\n Sales Tracking 40%
\n \n \n
\n Customer Database 60%
\n \n \n
\n Payout Details 80%
\n \n \n
\n Account Setup Complete!
\n \n \n
\n \n
\n\n \n
\n \n
\n \n Primary\n
\n #4e73df
\n \n
\n \n
\n \n Success\n
\n #1cc88a
\n \n
\n \n
\n \n Info\n
\n #36b9cc
\n \n
\n \n
\n \n Warning\n
\n #f6c23e
\n \n
\n \n
\n \n Danger\n
\n #e74a3b
\n \n
\n \n
\n \n Secondary\n
\n #858796
\n \n
\n \n
\n \n Light\n
\n #f8f9fc
\n \n
\n \n
\n \n Dark\n
\n #5a5c69
\n \n\n \n
\n \n
\n\n \n \n
\n Illustrations
\n\n
\n \n \n
\n Add some quality, svg illustrations to your project courtesy of
\n
\n\n \n
\n Development Approach
\n\n
\n SB Admin 2 makes extensive use of Bootstrap 4 utility classNamees in order to reduce\n CSS bloat and poor page performance. Custom CSS classNamees are used to create\n custom components and custom utility classNamees.
\nBefore working with this theme, you should become familiar with the\n Bootstrap framework, especially the utility classes.
\n\n
\n \n );\n}\n","import { useEffect, useState } from \"react\";\nimport { useRecoilValue } from \"recoil\";\nimport { TablePagination } from \"@material-ui/core\";\n\nimport { usersAtom } from \"_state\";\nimport { useUserActions } from \"_actions\";\n\nimport { UserItem, SectionHeader, Confirm } from \"_components\";\n\nexport { List };\n\nfunction List({ match }) {\n const { path } = match;\n const users = useRecoilValue(usersAtom);\n const userActions = useUserActions();\n const [rowsPerPage, setRowPerPage] = useState(2);\n const [page, setPage] = useState(0);\n const [showModal, setShowModal] = useState(false);\n const [selectedUser, setSelectedUser] = useState('')\n const [selectedViewOption, setSelectedViewOption] = useState('')\n\n useEffect(() => {\n userActions.getAll();\n return userActions.resetUsers;\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleChangePage = (event, page) => {\n setPage(page);\n };\n\n const handleChangeRowsPerPage = event => {\n setRowPerPage(event.target.value);\n };\n\n const handleDelete = (id) => {\n setSelectedUser(id);\n setShowModal(true)\n }\n\n const deleteuser = () => {\n userActions.delete(selectedUser)\n setShowModal(false)\n }\n\n const onCloseModal = () => {\n setShowModal(false)\n }\n\n return (\n \n
\n \n
\n {!loading && (\n \n )}\n {loading && (\n \n {mode.add ? 'Create A New User' : 'Edit User'}\n
\n\n \n
\n )}\n \n
\n );\n}\n","import React from \"react\";\nimport { Route, Switch } from \"react-router-dom\";\n\nimport { List, AddEdit } from \"./\";\n\nimport { TopNav, Nav, Alert } from \"_components\";\n\nexport { Users };\n\nfunction Users({ match, location }) {\n const { path } = match;\n\n return (\n <>\n \n \n
\n \n \n \n
\n
\n | First Name | \nLast Name | \nPhone | \nView Profile | \n\n | |
|---|---|---|---|---|---|
| \n \n | \n|||||
| \n | \n
\n
\n \n );\n}\n","import { useEffect } from \"react\";\nimport { Link } from \"react-router-dom\";\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from \"@hookform/resolvers/yup\";\nimport * as Yup from \"yup\";\nimport { useRecoilValue } from \"recoil\";\n\nimport { betAtom } from \"_state\";\nimport { useBetActions, useAlertActions } from \"_actions\";\n\nexport { AddEdit };\n\nfunction AddEdit({ history, match }) {\n const { id } = match.params;\n const mode = { add: !id, edit: !!id };\n const betActions = useBetActions();\n const alertActions = useAlertActions();\n const bet = useRecoilValue(betAtom);\n\n // form validation rules\n const validationSchema = Yup.object().shape({\n team1: Yup.string().required(\"Team 1 is required\"),\n team2: Yup.string().required(\"Team 2 is required\"),\n betamount: Yup.string().required(\"Bet Amount is required\"),\n picks: Yup.string().required(\"Predicted Winner is required\"),\n gamedate: Yup.string().required(\"Match Date is required\"),\n outcome: Yup.string().required(\"Win or Loss is required\"),\n\n });\n const formOptions = { resolver: yupResolver(validationSchema) };\n\n // get functions to build form with useForm() hook\n const { register, handleSubmit, reset, formState } = useForm(formOptions);\n const { errors, isSubmitting } = formState;\n\n useEffect(() => {\n // fetch user details into recoil state in edit mode\n if (mode.edit) {\n betActions.getById(id);\n }\n\n return betActions.resetBet;\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useEffect(() => {\n // set default form values after user set in recoil state (in edit mode)\n if (mode.edit && bet) {\n reset(bet);\n }\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [bet]);\n\n function onSubmit(data) {\n // history.push(\"/bet\");\n return mode.add ? createUser(data) : updateBet(data.id, data);\n }\n\n function createUser(data) {\n // return userActions.register(data).then(() => {\n // history.push(\"/accounts\");\n // alertActions.success(\"User added\");\n // });\n }\n\n function updateBet(id, data) {\n return betActions.update(id, data).then(() => {\n history.push(\"/bet\");\n alertActions.success(\"Bet updated\");\n });\n }\n\n const loading = mode.edit && !bet;\n \n return (\n <>\n \n
\n \n \n \n
\n \n
\n \n );\n}\n","import { useState, useEffect } from \"react\";\nimport { TablePagination } from \"@material-ui/core\";\nimport { useRecoilValue } from \"recoil\";\nimport { BetItem, SectionHeader, Confirm } from \"_components\";\nimport { useFetchWrapper } from '_helpers';\nimport { betsAtom } from \"_state\";\nimport { useBetActions, useAlertActions } from \"_actions\";\nimport Pagination from \"react-js-pagination\";\n\nexport { List };\n\nfunction List({ match }) {\n const { path } = match;\n const fetchWrapper = useFetchWrapper();\n const baseUrl = `${process.env.REACT_APP_API_URL}/bets`;\n const listItem = useRecoilValue(betsAtom);\n const alertActions = useAlertActions();\n const [betsList, setBetsList] = useState([]);\n const betsActions = useBetActions();\n const [rowsPerPage, setRowPerPage] = useState(10);\n const [page, setPage] = useState(0);\n const [showModal, setShowModal] = useState(false);\n const [selectedUser, setSelectedUser] = useState(\"\");\n const [inside, setInside] = useState(true);\n\n\n useEffect(() => {\n betsActions.getAll();\n setTimeout(() => {\n setInside(true)\n }, 1000)\n }, []);\n\n\n if (inside && listItem && listItem.length > 0) {\n setBetsList(listItem.slice(0, 10))\n setInside(false);\n }\n\n\n const handleChangePage = event => {\n const eventActive = event - 1\n setBetsList(listItem.slice(eventActive * 10, event * 10))\n setPage(event);\n };\n\n const handleChangeRowsPerPage = event => {\n setRowPerPage(event.target.value);\n };\n\n const handleDelete = id => {\n setSelectedUser(id);\n setShowModal(true);\n };\n\n const deleteuser = () => {\n fetchWrapper.delete(`${baseUrl}/${selectedUser}`)\n .then(resp => {\n setShowModal(false);\n alertActions.success(\"Bet deleted successfully\");\n betsActions.getAll()\n setTimeout(() => {\n setInside(true)\n }, 1000)\n })\n .catch(err => {\n });\n };\n\n\n const onCloseModal = () => {\n setShowModal(false);\n };\n\n\n return (\n \n
\n \n
\n {!loading && (\n \n )}\n {loading && (\n \n {mode.add ? 'Create A New Bet' : 'Edit Bet'}\n
\n\n \n
\n )}\n \n
\n );\n}\n","import React from \"react\";\nimport { Route, Switch } from \"react-router-dom\";\n\nimport { List, AddEdit } from \"./\";\n\nimport { TopNav, Nav, Alert } from \"_components\";\n\nexport { Bet };\n\nfunction Bet({ match, location }) {\n const { path } = match;\n\n return (\n <>\n \n \n
\n \n \n \n
\n
\n | \n Matchup\n | \n\n Bet Details\n | \n\n Pick and Odds\n | \n\n Game Date\n | \n\n Outcome\n | \n\n |
|---|---|---|---|---|---|
| \n \n | \n|||||
| \n | \n
\n
\n \n );\n}\n","import { useState } from \"react\";\nimport { TablePagination } from \"@material-ui/core\";\nimport { history, useFetchWrapper } from '_helpers';\nimport { BetItem, SectionHeader } from \"_components\";\n\nexport { List };\n\nconst data = [\n {\n heading: \"Update Database with Handicapper Weekly Picks\",\n subHeading:\n \"Place csv file to update the current database with the new data provided by handicappers on weekly game picks\",\n button: \"Update\",\n displayInput: true,\n id: 1,\n },\n {\n heading: \"Export Matchups\",\n subHeading:\n \"Place gameday or weekly matchups into a csv file and upload. Click export to have the algorithm update the matchup predictions into the existing spreadsheet based on existing data.\",\n button: \"Export and Download\",\n displayInput: false,\n id: 2,\n },\n {\n heading: \"Posting Bets\",\n subHeading: \"\",\n button: \"Post\",\n displayInput: true,\n id: 3,\n }\n];\n\n\n\nfunction List({ match }) {\n const fetchWrapper = useFetchWrapper();\n const baseUrl = `${process.env.REACT_APP_API_URL}/bets/upload`;\n const [fileValue, setFileValue] = useState('');\n\n console.log('baseUrl', baseUrl);\n console.log('fileValue', fileValue)\n\n const handleSave = item => {\n if (item.id === 1 && fileValue) {\n let data = new FormData();\n data.append(\"file\", fileValue);\n return fetchWrapper.post(`${baseUrl}`, fileValue)\n .then(resp => {\n setFileValue('');\n console.log('resp', resp)\n })\n .catch(err => {\n console.log('err', err)\n });\n }\n };\n\n const onFileChange = value => {\n const image = value.target.files[0];\n // setFileValue(image);\n console.log('image', image)\n console.log('value', value.target.value);\n setFileValue(value.target.value)\n };\n\n\n return (\n \n
\n \n
\n \n \n \n
\n \n
\n );\n}\n","import React from \"react\";\nimport { Route, Switch } from \"react-router-dom\";\n\nimport { List } from \"./\";\n\nimport { TopNav, Nav, Alert } from \"_components\";\n\nexport { Export };\n\nfunction Export({ match, location }) {\n const { path } = match;\n\n return (\n <>\n \n \n
\n \n
\n \n
\n \n {data.map(item => (\n
\n \n
\n ))}\n ;\n \n {item.heading}\n
\n {item.subHeading ? (\n \n {item.subHeading}\n \n ) : null}\n\n
\n handleSave(item)} >{item.button}
\n {item.displayInput ? (\n <>\n \n \n \n ) : null}\n \n
\n \n );\n}\n","import { useEffect } from 'react';\nimport { Route, Switch } from 'react-router-dom';\nimport { useRecoilValue } from 'recoil';\n\nimport { authAtom } from '_state';\nimport { Login, Register } from './';\n\nexport { Account };\n\nfunction Account({ history, match }) {\n const auth = useRecoilValue(authAtom);\n const { path } = match;\n\n useEffect(() => {\n // redirect to home if already logged in\n if (auth) history.push('/');\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n \n
\n \n
\n \n \n \n
\n \n
\n );\n}\n","import { useState } from \"react\";\nimport { Link } from 'react-router-dom';\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as Yup from 'yup';\n\nimport { useUserActions } from '_actions';\n\nimport { FaEyeSlash, FaEye } from \"react-icons/fa\";\n\nexport { Login };\n\nfunction Login() {\n const userActions = useUserActions();\n const [showPassword, setShowPassword] = useState(false)\n\n // form validation rules \n const validationSchema = Yup.object().shape({\n email: Yup.string().required('Email is required'),\n password: Yup.string().required('Password is required')\n });\n const formOptions = { resolver: yupResolver(validationSchema) };\n\n // get functions to build form with useForm() hook\n const { register, handleSubmit, formState } = useForm(formOptions);\n const { errors, isSubmitting } = formState;\n\n return (\n \n
\n \n \n \n
\n \n
\n )\n}\n","import { Link } from 'react-router-dom';\nimport { useForm } from \"react-hook-form\";\nimport { yupResolver } from '@hookform/resolvers/yup';\nimport * as Yup from 'yup';\n\nimport { useUserActions, useAlertActions } from '_actions';\n\nexport { Register };\n\nfunction Register({ history }) {\n const userActions = useUserActions();\n const alertActions = useAlertActions();\n\n // form validation rules \n const validationSchema = Yup.object().shape({\n firstName: Yup.string()\n .required('First Name is required'),\n lastName: Yup.string()\n .required('Last Name is required'),\n username: Yup.string()\n .required('Username is required'),\n email: Yup.string()\n .required('Email is required'), \n password: Yup.string()\n .required('Password is required')\n .min(6, 'Password must be at least 6 characters'),\n confirmPassword: Yup.string()\n .required('Password is required')\n .min(6, 'Password must be at least 6 characters') \n });\n const formOptions = { resolver: yupResolver(validationSchema) };\n\n // get functions to build form with useForm() hook\n const { register, handleSubmit, formState } = useForm(formOptions);\n const { errors, isSubmitting } = formState;\n\n function onSubmit(data) {\n return userActions.register(data)\n .then(() => {\n history.push('/account/login');\n alertActions.success('Registration successful');\n })\n }\n\n return (\n \n ![](\"/img/black-logo.png\")
\n
\n \n Enter your email and password below
\n\n \n
\n \n
\n )\n}\n","import { Router, Route, Switch, Redirect } from \"react-router-dom\";\nimport { useRecoilValue } from \"recoil\";\n\nimport { authAtom } from \"_state\";\nimport { PrivateRoute } from \"_components\";\nimport { history } from \"_helpers\";\nimport { Home } from \"home\";\nimport { Users } from \"users\";\nimport { Bet } from \"bet\";\nimport { AddEdit } from \"bet\";\nimport { Export } from \"export\";\nimport { Account } from \"account\";\n\nexport { App };\n\nfunction App() {\n const auth = useRecoilValue(authAtom);\n\n return (\n Register
\n\n \n
\n \n
\n );\n}\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { RecoilRoot } from 'recoil';\n\nimport 'index.css';\nimport { App } from 'App';\n\n\n// setup fake backend\n//import { fakeBackend } from '_helpers';\n//fakeBackend();\n\nReactDOM.render(\n \n \n \n \n \n
\n