Crud products

.env

@@ -1,2 +1,2 @@
-VITE_BACKEND_BASE_URL="http://localhost:9004/api"
-VITE_APP_PORT="5175"
+VITE_BACKEND_BASE_URL="http://localhost:9001/api/v1"
+VITE_APP_PORT="5173"

package.json

@@ -10,12 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@reduxjs/toolkit": "^2.1.0",
+    "@tanstack/react-table": "^8.11.7",
     "axios": "^1.6.7",
     "framer-motion": "^11.0.3",
     "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
+    "react-redux": "^9.1.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.21.3"
   },

src/App.jsx

@@ -1,33 +1,35 @@
-import { Route, Routes } from 'react-router-dom';
-import RootLayout from './layouts/RootLayout';
-import Users from './pages/Users';
-import Dashboard from './pages/Dashboard';
-import Products from './pages/Products';
-import Discount from './pages/Discount';
-import Order from './pages/Order';
-import Profile from './pages/Profile';
-import Settings from './pages/Settings';
-import AddProducts from './pages/AddProducts';
-import Health from './pages/health';
+import { Route, Routes } from "react-router-dom";
+import RootLayout from "./layouts/RootLayout";
+import Users from "./pages/Users";
+import Dashboard from "./pages/Dashboard";
+import Products from "./pages/Products";
+import Discount from "./pages/Discount";
+import Order from "./pages/Order";
+import Profile from "./pages/Profile";
+import Settings from "./pages/Settings";
+import AddProducts from "./pages/AddProducts";
+import Health from "./pages/health";
+import EditProducts from "./pages/EditProducts";
 
 const App = () => {
-	return (
-		<>
-			<RootLayout>
-				<Routes>
-					<Route path="/" element={<Dashboard />} />
-					<Route path="/users" element={<Users />} />
-					<Route path="/add-products" element={<AddProducts />} />
-					<Route path="/products" element={<Products />} />
-					<Route path="/discount" element={<Discount />} />
-					<Route path="/order" element={<Order />} />
-					<Route path="/profile" element={<Profile />} />
-					<Route path="/settings" element={<Settings />} />
-					<Route path="/health" element={<Health />} />
-				</Routes>
-			</RootLayout>
-		</>
-	);
+  return (
+    <>
+      <RootLayout>
+        <Routes>
+          <Route path="/" element={<Dashboard />} />
+          <Route path="/users" element={<Users />} />
+          <Route path="/add-products" element={<AddProducts />} />
+          <Route path="/products/:id" element={<EditProducts />} />
+          <Route path="/products" element={<Products />} />
+          <Route path="/discount" element={<Discount />} />
+          <Route path="/order" element={<Order />} />
+          <Route path="/profile" element={<Profile />} />
+          <Route path="/settings" element={<Settings />} />
+          <Route path="/health" element={<Health />} />
+        </Routes>
+      </RootLayout>
+    </>
+  );
 };
 
 export default App;

src/components/Box.jsx

@@ -1,13 +1,15 @@
-import React from 'react';
+import React from "react";
 
 const Box = ({ children, className }) => {
-	return (
-		<>
-			<div className={`${className} p-4 border shadow-md rounded-lg bg-white`}>
-				{children}
-			</div>
-		</>
-	);
+  return (
+    <>
+      <div
+        className={`${className} overflow-x-auto p-4 border shadow-md rounded-lg bg-white`}
+      >
+        {children}
+      </div>
+    </>
+  );
 };
 
 export default Box;

src/components/Button.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const Button = ({ children, className, onClick }) => {
+	return (
+		<button
+			className={`${className} px-5 py-2 bg-mod-color-orange-100 hover:bg-[#ff5a13] text-white font-semibold rounded`}
+			onClick={onClick}
+		>
+			{children}
+		</button>
+	);
+};
+
+export default Button;

src/components/Input.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+const Input = ({
+	label,
+	type,
+	placeholder,
+	onChange,
+	name,
+	cols,
+	rows,
+	className = 'w-1/2 mt-1 mb-3 p-2 font-medium bg-slate-100 border shadow border-zinc-200 focus:outline-none rounded-md',
+}) => {
+	return (
+		<div className="flex flex-col mb-4">
+			<label>{label}</label>
+			{type === 'textarea' ? (
+				<textarea
+					name={name}
+					cols={cols}
+					rows={rows}
+					className={className}
+					onChange={onChange}
+				></textarea>
+			) : (
+				<input
+					type={type}
+					placeholder={placeholder}
+					onChange={onChange}
+					className={className}
+				/>
+			)}
+		</div>
+	);
+};
+
+export default Input;

src/layouts/RootLayout.jsx

@@ -5,7 +5,7 @@ function RootLayout({ children }) {
 	return (
 		<div className="flex ">
 			<Sidebar />
-			<div className="flex flex-col w-full">
+			<div className="flex flex-col  w-full">
 				<NavBar />
 				<main className="container mx-auto px-5 py-4">{children}</main>
 			</div>