Initial commits - develop

package.json

@@ -18,13 +18,16 @@
     "@emotion/styled": "11.10.8",
     "@mui/icons-material": "5.11.16",
     "@mui/material": "5.12.3",
+    "@reduxjs/toolkit": "^1.8.5",
     "chart.js": "4.3.0",
     "chroma-js": "2.4.2",
+    "classnames": "^2.3.2",
     "prop-types": "15.8.1",
     "react": "18.2.0",
     "react-chartjs-2": "5.2.0",
     "react-dom": "18.2.0",
     "react-github-btn": "1.4.0",
+    "react-redux": "^8.0.4",
     "react-router-dom": "6.11.0",
     "react-scripts": "5.0.1",
     "react-table": "7.8.0",
@@ -59,6 +62,7 @@
   },
   "devDependencies": {
     "ajv": "^7.2.4",
+    "axios": "^1.1.3",
     "eslint": "8.39.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-import": "2.27.5",

src/App.js

@@ -16,6 +16,7 @@ Coded by www.creative-tim.com
 import { useState, useEffect, useMemo } from "react";
 
 // react-router components
+import { Provider } from 'react-redux';
 import { Routes, Route, Navigate, useLocation } from "react-router-dom";
 
 // @mui material components
@@ -53,6 +54,9 @@ import { useMaterialUIController, setMiniSidenav, setOpenConfigurator } from "co
 import brandWhite from "assets/images/logo-ct.png";
 import brandDark from "assets/images/logo-ct-dark.png";
 
+// Store
+import store from './store'
+
 export default function App() {
   const [controller, dispatch] = useMaterialUIController();
   const {
@@ -147,8 +151,35 @@ export default function App() {
   );
 
   return direction === "rtl" ? (
-    <CacheProvider value={rtlCache}>
-      <ThemeProvider theme={darkMode ? themeDarkRTL : themeRTL}>
+    <Provider store={store}>
+      <CacheProvider value={rtlCache}>
+        <ThemeProvider theme={darkMode ? themeDarkRTL : themeRTL}>
+          <CssBaseline />
+          {layout === "dashboard" && (
+            <>
+              <Sidenav
+                color={sidenavColor}
+                brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
+                brandName="Material Dashboard 2"
+                routes={routes}
+                onMouseEnter={handleOnMouseEnter}
+                onMouseLeave={handleOnMouseLeave}
+              />
+              <Configurator />
+              {configsButton}
+            </>
+          )}
+          {layout === "vr" && <Configurator />}
+          <Routes>
+            {getRoutes(routes)}
+            <Route path="*" element={<Navigate to="/dashboard" />} />
+          </Routes>
+        </ThemeProvider>
+      </CacheProvider>
+    </Provider>
+  ) : (
+    <Provider store={store}>
+      <ThemeProvider theme={darkMode ? themeDark : theme}>
         <CssBaseline />
         {layout === "dashboard" && (
           <>
@@ -170,29 +201,6 @@ export default function App() {
           <Route path="*" element={<Navigate to="/dashboard" />} />
         </Routes>
       </ThemeProvider>
-    </CacheProvider>
-  ) : (
-    <ThemeProvider theme={darkMode ? themeDark : theme}>
-      <CssBaseline />
-      {layout === "dashboard" && (
-        <>
-          <Sidenav
-            color={sidenavColor}
-            brand={(transparentSidenav && !darkMode) || whiteSidenav ? brandDark : brandWhite}
-            brandName="Material Dashboard 2"
-            routes={routes}
-            onMouseEnter={handleOnMouseEnter}
-            onMouseLeave={handleOnMouseLeave}
-          />
-          <Configurator />
-          {configsButton}
-        </>
-      )}
-      {layout === "vr" && <Configurator />}
-      <Routes>
-        {getRoutes(routes)}
-        <Route path="*" element={<Navigate to="/dashboard" />} />
-      </Routes>
-    </ThemeProvider>
+    </Provider>
   );
 }

src/examples/Sidenav/index.js

@@ -179,7 +179,8 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
         }
       />
       <List>{renderRoutes}</List>
-      <MDBox p={2} mt="auto">
+      {/* // ! CHECK THIS OUT */}
+      {/* <MDBox p={2} mt="auto">
         <MDButton
           component="a"
           href="https://www.creative-tim.com/product/material-dashboard-pro-react"
@@ -191,7 +192,7 @@ function Sidenav({ color, brand, brandName, routes, ...rest }) {
         >
           upgrade to pro
         </MDButton>
-      </MDBox>
+      </MDBox> */}
     </SidenavRoot>
   );
 }

src/interfaces/clients.interface.ts

@@ -0,0 +1,8 @@
+export interface Client {
+  id: string;
+  full_name: string;
+  tax_id: string;
+  phone: string;
+  email: string;
+  _deleted: boolean;
+}

src/interfaces/discounts.interface.ts

@@ -0,0 +1,10 @@
+export interface Discount {
+  id: string;
+  products: string[];
+  type: 'total' | 'percentage';
+  amount: number;
+  start_date: Date;
+  end_date: Date;
+  enabled: boolean;
+  _deleted: boolean;
+}

src/interfaces/products.interface.ts

@@ -0,0 +1,9 @@
+export interface Product {
+  id: string;
+  internal_code: string;
+  name: string;
+  description: string;
+  price: number;
+  measurement: string;
+  _deleted: boolean;
+}

src/interfaces/sales.interface.ts

@@ -0,0 +1,10 @@
+export interface Sale {
+  id: string;
+  products: {
+    product_id: string,
+    quantity: number
+  }[];
+  client_id: string;
+  amount: number;
+  _deleted: boolean;
+}

src/layouts/create-sale/CreateSale.jsx

@@ -0,0 +1,52 @@
+import { useNavigate } from "react-router-dom";
+
+import SaleForm from "../sale-form";
+import GeneralButton from "../../shared/components/button";
+
+import "../../shared/styles/GeneralStyles.css";
+
+function CreateSale({ addSale, updateField, saleSelected, fetchClients, clientsList }) {
+
+  const navigate = useNavigate();
+  const navigateData = {
+    url: '/sales/list',
+  }
+
+  const addSaleData = {
+    saleSelected: saleSelected,
+  }
+
+  return (
+    <>
+      <div>
+        <SaleForm
+          formFieldChange={updateField}
+          fetchClients={fetchClients}
+          clientsList={clientsList}
+          saleSelected={saleSelected}>
+        </SaleForm>
+        <div>
+          <GeneralButton
+            buttonText={'Crear'}
+            actionOnSubmit={addSale}
+            data={addSaleData}
+            keysArray={['saleSelected']}
+            buttonClasses={'mb-15'}
+            primary>
+          </GeneralButton>
+        </div>
+        <div>
+          <GeneralButton
+            buttonText={'Quiero regresar a la lista'}
+            actionOnSubmit={navigate}
+            data={navigateData}
+            keysArray={['url']}
+            buttonClasses={'mb-15 btn-secondary'}>
+          </GeneralButton>
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default CreateSale;

src/layouts/create-sale/index.js

@@ -0,0 +1,25 @@
+import { useSelector, useDispatch } from 'react-redux';
+
+import CreateSale from "./CreateSale";
+import fromSales from '../../store/sales/selectors';
+import fromClients from '../../store/clients/selectors';
+import salesCommands from '../../store/sales/commands';
+import clientsCommands from '../../store/clients/commands';
+
+const ConnectedCreateSale = () => {
+  const dispatch = useDispatch();
+
+  const selectorProps = {
+    saleSelected: useSelector(fromSales.currentSaleSelected),
+    clientsList: useSelector(fromClients.currentClients),
+  }
+
+  const dispatchProps = {
+    addSale: sale => dispatch(salesCommands.addSale(sale)),
+    updateField: (value, field) => dispatch(salesCommands.updateField(value, field)),
+    fetchClients: filter => dispatch(clientsCommands.getClients(filter)),
+  }
+  return (<CreateSale {...dispatchProps}{...selectorProps}></CreateSale>)
+}
+
+export default ConnectedCreateSale;