Design Product Single Page Structure JSX

Author: Soliman3

admin/src/App.js

@@ -12,6 +12,7 @@ import UserSinglePage from "./pages/UserSinglePage";
 import NewUser from "./pages/NewUser";
 import ProductList from "./pages/ProductList";
 import ProductSinglePage from "./pages/ProductSinglePage";
+import NewProduct from "./pages/NewProduct";
 
 // Styling..
 const Container = styled.div``;
@@ -32,6 +33,7 @@ function App() {
             <Route path="/newuser" element={<NewUser />} />
             <Route path="/products" element={<ProductList />} />
             <Route path="/product/:id" element={<ProductSinglePage />} />
+            <Route path="/newproduct" element={<NewProduct />} />
           </Routes>
         </Main>
       </BrowserRouter>

admin/src/Data/dummyData.js

@@ -42,7 +42,33 @@ export const usersData = [
       amt: 2100,
     },
 ];
-  
+
+export const productsData = [
+  {
+    name: 'Jan',
+    Sales: 2500,
+    Returns: 1500,
+    amt: 2400,
+  },
+  {
+    name: 'Feb',
+    Sales: 3000,
+    Returns: 2000,
+    amt: 2210,
+  },
+  {
+    name: 'Mar',
+    Sales: 1000,
+    Returns: 1500,
+    amt: 2290,
+  },
+  {
+    name: 'Apr',
+    Sales: 2780,
+    Returns: 650,
+    amt: 2000,
+  },
+];
 // ###############################33333
 
 export const userRows = [

admin/src/pages/NewProduct.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import styled from 'styled-components'
+
+// Styling...
+const Container = styled.div`
+    flex:4;
+`
+// New Product React Functional Component...
+export default function NewProduct() {
+  return (
+    <Container>
+      Add New Product here...
+    </Container>
+  )
+}

admin/src/pages/ProductSinglePage.jsx

@@ -1,15 +1,103 @@
 import React from 'react'
+
+// import styled components for css styling...
 import styled from 'styled-components'
 
+// import React Router Dom Library for Routing..
+import { Link } from 'react-router-dom'
+
+// import required components...
+import Charts from '../components/Charts'
+
+// import produts data from dummyData.js file...
+import { productsData } from '../Data/dummyData'
+
 // Styling...
 const Container = styled.div`
     flex: 4;
 `
+const ProductTitleContainer = styled.div`
+    
+`
+const ProductTitle = styled.h1`
+
+`
+const ProductAddNew = styled.button`
+
+`
+const ProductTop = styled.div`
 
+`
+const ProductBottom = styled.div`
+    
+`
+const ProductTopLeft = styled.div`
+    
+`
+const ProductTopRight = styled.div`
+    
+`
+const ProductInfoTop = styled.div`
+
+`
+const ProductInfoBottom = styled.div`
+
+`
+const ProductInfoImage = styled.img`
+    
+`
+const ProductInfoName = styled.h1`
+    
+`
+const ProductInfoBottomItem = styled.div`
+    
+`
+const ProductInfoBottomKey = styled.span`
+
+`
+const ProductInfoBottomValue = styled.span`
+    
+`
+// Product Single Page React Functional Component...
 export default function ProductSinglePage() {
-  return (
-    <Container>
-      Product Single Page...
-    </Container>
-  )
+    return (
+        <Container>
+            <ProductTitleContainer>
+                <ProductTitle>Item Page</ProductTitle>
+                <Link to="/newproduct" style={{ color: 'inherit', backgroundColor: 'inherit', textDecoration: 'none' }}>
+                    <ProductAddNew>New</ProductAddNew>
+                </Link>
+            </ProductTitleContainer>
+            <ProductTop>
+                <ProductTopLeft>
+                    <Charts data={productsData} title="Product Movements" secondLine="Sales" firstLine="Returns" />
+                </ProductTopLeft>
+                <ProductTopRight>
+                    <ProductInfoTop>
+                        <ProductInfoImage src="https://i.ibb.co/GsH4D2J/2.png" alt="" />
+                        <ProductInfoName>Iphone 12mini</ProductInfoName>
+                    </ProductInfoTop>
+                    <ProductInfoBottom>
+                        <ProductInfoBottomItem>
+                            <ProductInfoBottomKey>Serial Number</ProductInfoBottomKey>
+                            <ProductInfoBottomValue>09562257110</ProductInfoBottomValue>
+                        </ProductInfoBottomItem>
+                        <ProductInfoBottomItem>
+                            <ProductInfoBottomKey>Sales</ProductInfoBottomKey>
+                            <ProductInfoBottomValue>12500</ProductInfoBottomValue>
+                        </ProductInfoBottomItem>
+                        <ProductInfoBottomItem>
+                            <ProductInfoBottomKey>Active</ProductInfoBottomKey>
+                            <ProductInfoBottomValue>Yes</ProductInfoBottomValue>
+                        </ProductInfoBottomItem>
+                        <ProductInfoBottomItem>
+                            <ProductInfoBottomKey>In Stock</ProductInfoBottomKey>
+                            <ProductInfoBottomValue>Yes</ProductInfoBottomValue>
+                        </ProductInfoBottomItem>
+                    </ProductInfoBottom>
+                </ProductTopRight>
+            </ProductTop>
+            <ProductBottom></ProductBottom>
+        </Container>
+    )
 }