complete antd-dashboard with @redux/toolkit

jaxkashif34 · Jun 20, 2022 · 7cf5f88 · 7cf5f88 · vercel · Jun 20, 2022
1 parent 921d78a
commit 7cf5f88
Show file tree

Hide file tree

Showing 13 changed files with 304 additions and 80 deletions.
diff --git a/public/index.html b/public/index.html
@@ -9,36 +9,11 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>React App</title>
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
diff --git a/public/robots.txt b/public/robots.txt
diff --git a/src/App.js b/src/App.js
@@ -6,6 +6,7 @@ import { Main } from "components/Layout";
 import Home from "pages/Home";
 import Tables from "pages/Tables";
 import Billing from "pages/Billing";
+import Profile from "pages/Profile";
 export default function App() {
   return (
     <>
@@ -17,6 +18,8 @@ export default function App() {
           <Route path="dashboard" element={<Home />} />
           <Route path="tables" element={<Tables />} />
           <Route path="billing" element={<Billing />} />
+          <Route path="rtl" element={<Home />} />
+          <Route path="profile" element={<Profile />} />
         </Route>
       </Routes>
     </>

diff --git a/src/components/Layout/AntdHeader.js b/src/components/Layout/AntdHeader.js
@@ -5,7 +5,6 @@ import {
   handleFixedNavbar,
   handleSideNavColor,
   handleSidenavType,
-  setPlaceMent,
   handleSidebar,
 } from "Redux/features/MainSlice";
 import {
@@ -57,12 +56,23 @@ const { Title, Text } = Typography;
 const menu = (
   <List
     min-width="100%"
-    className="header-notifications-dropdown "
+    className="header-notifications-dropdown"
+    style={{
+      backgroundColor: "#fff",
+      boxShadow: "0px 0px 20px rgba(0, 0, 0, 0.1)",
+      borderRadius: "1rem",
+    }}
     itemLayout="horizontal"
     dataSource={data}
     renderItem={(item) => (
-      <List.Item>
+      <List.Item style={{ borderRadius: "1rem" }}>
         <List.Item.Meta
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginLeft: "1rem",
+          }}
           avatar={<Avatar shape="square" src={item.avatar} />}
           title={item.title}
           description={item.description}
@@ -78,7 +88,7 @@ const buttonList = [
   { color: "#fadb14", type: "yellow" },
   { color: "#111", type: "black" },
 ];
-export default function AntdHeader({name}) {
+export default function AntdHeader({ name }) {
   const { sideNavType, visible, placement } = useSelector(
     (state) => state.mainSlice
   );
@@ -110,12 +120,13 @@ export default function AntdHeader({name}) {
         </Col>
         <Col span={24} md={18} className="header-control">
           <Badge size="small" count={4}>
-            <Dropdown overlay={menu} trigger={["click"]} placement="top">
-              <a
-                href="#pablo"
-                className="ant-dropdown-link"
-                // onClick={(e) => e.preventDefault()}
-              >
+            <Dropdown
+              overlay={menu}
+              trigger={["click"]}
+              arrow
+              overlayStyle={{ width: "20%" }}
+            >
+              <a href="#pablo" className="ant-dropdown-link">
                 {bell}
               </a>
             </Dropdown>

diff --git a/src/components/Layout/Header.js b/src/components/Layout/Header.js
@@ -1,13 +1,16 @@
 import React from "react";
 import { Layout, Menu, Button } from "antd";
 import { items } from "utils/SignInUpData";
+import { Link } from "react-router-dom";
 const { Header } = Layout;
 
 const AntdHeader = ({ btn }) => {
   return (
     <Header>
       <div className="header-col header-brand">
-        <h5>Ant DashBoard</h5>
+        <Link to="/dashboard">
+          <h5>Ant DashBoard</h5>
+        </Link>
       </div>
       <div className="header-col header-nav">
         <Menu

diff --git a/src/pages/Billing.js b/src/pages/Billing.js
@@ -206,26 +206,41 @@ export default function Billing() {
               className="transactions-list ant-newest"
               itemLayout="horizontal"
               dataSource={newest}
-              renderItem={(
-                amountcolor,
-                textclass,
-                amount,
-                description,
-                title,
-                avatar
-              ) => (
+              renderItem={(item) => (
                 <List.Item>
                   <List.Item.Meta
-                    title={title}
-                    description={description}
+                    title={item.title}
+                    description={item.description}
                     avatar={
-                      <Avatar size="small" className={textclass}>
-                        {avatar}
+                      <Avatar size="small" className={item.textclass}>
+                        {item.avatar}
                       </Avatar>
                     }
                   />
                   <div className="amount">
-                    <span className={amountcolor}>{amount}</span>
+                    <span className={item.amountcolor}>{item.amount}</span>
+                  </div>
+                </List.Item>
+              )}
+            />
+            <List
+              header={<h6>YESTERDAY</h6>}
+              className="yestday transactions-list"
+              itemLayout="horizontal"
+              dataSource={yesterday}
+              renderItem={(item) => (
+                <List.Item>
+                  <List.Item.Meta
+                    avatar={
+                      <Avatar size="small" className={item.textclass}>
+                        {item.avatar}
+                      </Avatar>
+                    }
+                    title={item.title}
+                    description={item.description}
+                  />
+                  <div className="amount">
+                    <span className={item.amountcolor}>{item.amount}</span>
                   </div>
                 </List.Item>
               )}

diff --git a/src/pages/Home.js b/src/pages/Home.js
@@ -179,7 +179,6 @@ export default function Home() {
         <Row gutter={[24, 0]}>
           <AntCard xl={14}>
             <Row>
-              {/* need to take a look at gutter  */}
               <Col xs={24} md={12} sm={24} lg={12} xl={14} className="mb-24">
                 <div className="h-full col-content p-20">
                   <div className="ant-muse">