Merge branch 'stock' into develop

src/App.tsx

@@ -23,9 +23,7 @@ export default function App() {
           <Route path="login" element={<Login/>} />
           <Route path="dashboard" element={<Main />}>
             <Route index element={<Sell />} />
-            <Route path="sell" element={<h1>Sell...</h1>} />
             <Route path="stock" element={<Stock />} />
-            <Route path="settings" element={<h1>Settings...</h1>} />
           </Route>
           <Route path="*" element={<h1>No match !</h1>} />
         </Routes>

src/components/core/navbar.tsx

 import { Fragment } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import {
-  CogIcon,
+  //CogIcon,
   CurrencyEuroIcon,
-  HomeIcon,
+  //HomeIcon,
   ShoppingCartIcon,
   XIcon
 } from '@heroicons/react/outline';
@@ -11,10 +11,10 @@ import {
 import { Link } from 'react-router-dom';
 
 const navigation = [
-  { name: 'Accueil', href: '/dashboard', icon: HomeIcon },
-  { name: 'Vendre', href: '/dashboard/sell', icon: CurrencyEuroIcon },
+ // { name: 'Accueil', href: '/dashboard', icon: HomeIcon },
+  { name: 'Vendre', href: '/dashboard', icon: CurrencyEuroIcon },
   { name: 'Gestion des stocks', href: '/dashboard/stock', icon: ShoppingCartIcon },
-  { name: 'Réglages', href: '/dashboard/settings', icon: CogIcon },
+  // { name: 'Réglages', href: '/dashboard/settings', icon: CogIcon },
 ];
 
 function classNames(...classes: unknown[]) {

src/components/stockListItem.tsx

-import {ShoppingCartIcon} from '@heroicons/react/outline';
-
-import {useState} from 'react';
-  
-  const StockListItem = ({ product }) => {
-    let [stock, setStock] = useState(product.quantity);
-    return (
-      <li className="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200">
-        <div className="w-full flex items-center justify-between p-6 space-x-6">
-          <div className="flex-1 truncate">
-            <div className="flex items-center space-x-3">
-              <h3 className="text-gray-900 text-sm font-medium truncate">{product.name}</h3>
-              <input type="text" name="stock" id="stock" value={stock} style={{width: "60px"}} onChange={(e) => { setStock(e.target.value) }} className="flex-shrink-0 inline-block px-2 py-0.5 text-green-800 text-xs font-medium bg-green-100 rounded-full"/>
-            </div>
-            <p className="mt-1 text-gray-500 text-sm truncate">{product.price}</p>
-          </div>
-        </div>
-        <div>
-          <div className="-mt-px flex divide-x divide-gray-200">
-            <div className="-ml-px w-0 flex-1 flex">
-              <a
-                href='/'
-                className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
-              >
-                <ShoppingCartIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
-                <span className="ml-3">Ajouter</span>
-              </a>
-            </div>
-          </div>
-        </div>
-      </li>
-    );
-  };
-  
-  export default StockListItem;
\ No newline at end of file

src/pages/stock.tsx

 import React, { useState, useEffect } from 'react';
 import { CollectionIcon, EmojiSadIcon } from '@heroicons/react/outline';
 
-import StockListItem from "../components/stockListItem";
-
 interface Product {
 	name: string,
 	category: string,
@@ -98,10 +96,10 @@ const Stock = () => {
 	let toggleEditMode = (productId) => {
 		let productsTemp = productsList
 		let product = productsTemp[productId]
-		product.edit = product.edit == true ? false : true;
+		product.edit = product.edit === true ? false : true;
 		setProductsList([...productsTemp]);
 
-		if (product.edit == false) {
+		if (product.edit === false) {
 			console.log("Save product: " + product.name)
 			//TODO: Do some stuff with API
 		}
@@ -119,6 +117,22 @@ const Stock = () => {
 			</div>
 		</div>
 
+			{productsList.length === 0 ? 
+				<div className="text-center w-full mt-10">
+				<EmojiSadIcon className="mx-auto h-12 w-12 text-gray-400" />
+				<h3 className="mt-2 text-sm font-medium text-gray-900">Aucun produit trouvé !</h3>
+				<p className="mt-1 text-sm text-gray-500">Essayez de réduire vos critères de recherche.</p>
+				<div className="mt-6">
+					<button
+						type="button"
+						onClick={() => setSearch("")}
+						className="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+					>
+						<CollectionIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
+						Afficher tout
+					</button>
+				</div>
+			</div> :
 			<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
 			  <table className="min-w-full divide-y divide-gray-200">
 				<thead className="bg-gray-50">
@@ -164,15 +178,15 @@ const Stock = () => {
 						: <span>{product.quantity}</span>}
 					  </td>
 					  <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
-						<a onClick={() => {toggleEditMode(productIdx)}} className="text-indigo-600 hover:text-indigo-900">
-						  {product.edit ? "Save" : "Edit"}
-						</a>
+						<button onClick={() => {toggleEditMode(productIdx)}} type="button" className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+							{product.edit ? "Save" : "Edit"}
+						</button>
 					  </td>
 					</tr>
 				  ))}
 				</tbody>
 			  </table>
-			</div>
+			</div>}
 		  </div>
 		</div>
 	  </div>