Merge pull request Anjaliavv51#108 from vashukashyap/added-dashboard

Admin Dashboard Added

public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

src/App.jsx

@@ -1,14 +1,31 @@
 import { Route, Routes} from "react-router-dom";
 import "./App.css";
-import { Home, Login, Registration } from "./pages";
+import { Home, Login, Registration , Dashboard} from "./pages";
+import AddNewRental from "./components/dashboard-components/AddNewRental/AddNewRental";
+import SearchRental from "./components/dashboard-components/SearchRental-section/SearchRental";
+import RenterDetails from "./components/dashboard-components/RenterDetails/RenterDetails";
+import PaymentsRecord from "./components/dashboard-components/PaymentsRecord/PaymentsRecord";
+import TotalRentCollected from "./components/dashboard-components/TotalRentCollected/TotalRentCollected";
+import PropertyListing from "./components/dashboard-components/PropertyListing/PropertyListing";
+import ListedProperty from "./components/dashboard-components/ListedProperty/ListedProperty";
+import CreateNewRental from "./components/dashboard-components/CreateNewRental/CreateNewRental";
 
 const App = () => {
-
+  
   return (
     <Routes>
       <Route path="/" element={<Home />} />
       <Route path="/login" element={<Login />} />
       <Route path="/register" element={<Registration />} />
+      <Route path="/dashboard" element={<Dashboard />}/>
+      <Route path="/dashboard/searchrenter" element={<SearchRental/>}/>
+      <Route path="/dashboard/createnewrenter" element={<CreateNewRental/>}/>
+        <Route path="/dashboard/addnewrenter" element={<AddNewRental/>}/>
+        <Route path="/dashboard/renterdetails" element={<RenterDetails/>}/>
+        <Route path="/dashboard/paymentsrecord" element={<PaymentsRecord/>}/>
+        <Route path="/dashboard/totalrentcollected" element={<TotalRentCollected/>}/>
+        <Route path="/dashboard/propertylisting" element={<PropertyListing/>}/>
+        <Route path="/dashboard/listedproperty" element={<ListedProperty/>}/>
     </Routes>
   );
 };

src/components/dashboard-components/AddNewRental/AddNewRental.jsx

@@ -0,0 +1,9 @@
+
+
+const AddNewRental = () => {
+    return(
+        <h1>Add New Rental</h1>
+    )
+}
+
+export default AddNewRental;

src/components/dashboard-components/CreateNewRental/CreateNewRental.jsx

@@ -0,0 +1,9 @@
+
+
+const CreateNewRental = () => {
+    return(
+        <h1>Create New Rental</h1>
+    )
+}
+
+export default CreateNewRental;

src/components/dashboard-components/Header-section/Header.jsx

@@ -0,0 +1,22 @@
+import { Link } from "react-router-dom";
+import banner from '../../../assets/Images/dashboardbanner.png'
+const Header = () => {
+  return (
+    <>
+      <div className="w-full mt-20">
+        <section className="h-[90vh] flex justify-around p-6 flex-col lg:flex-row">
+          <div className="mt-10 flex flex-col justify-center items-start">
+            <h1 className="mb-4 text-4xl font-extrabold text-gray-900 md:text-5xl lg:text-6xl">
+              Dashboard
+            </h1>
+            <p className="mb-8 text-lg font-medium text-gray-500 lg:text-xl">
+                Hello <span className="text-customRed">name</span>, Welcome to your Dashboard
+            </p>
+          </div>
+          <img src={banner}></img>
+        </section>
+      </div>
+    </>
+  );
+};
+export default Header;

src/components/dashboard-components/ListedProperty/ListedProperty.jsx

@@ -0,0 +1,11 @@
+
+
+const ListedProperty= () => {
+    return(
+        <>
+        <h1>Listed Property</h1>
+        </>
+    )
+}
+
+export default ListedProperty;

src/components/dashboard-components/PaymentsRecord/PaymentsRecord.jsx

@@ -0,0 +1,11 @@
+
+
+const PaymentsRecord = () =>{
+    return(
+        <>
+        <h1>PaymentsRecord</h1>
+        </>
+    )
+}
+
+export default PaymentsRecord;

src/components/dashboard-components/PropertyListing/PropertyListing.jsx

@@ -0,0 +1,11 @@
+
+
+const PropertyListing = () => {
+    return(
+        <>
+        <h1>Property Listing</h1>
+        </>
+    )
+}
+
+export default PropertyListing;

src/components/dashboard-components/RenterDetails/RenterDetails.jsx

@@ -0,0 +1,11 @@
+
+
+const RenterDetails = () => {
+    return(
+        <>
+        <h1>RenterDetails</h1>
+        </>
+    )
+}
+
+export default RenterDetails;

src/components/dashboard-components/SearchRental-section/SearchRental.jsx

@@ -0,0 +1,12 @@
+
+
+const SearchRental = () =>{
+    return(
+        <>
+         <h1>Search Rental</h1>
+        </>
+    )
+}
+
+
+export default SearchRental;

src/components/dashboard-components/TotalRentCollected/TotalRentCollected.jsx

@@ -0,0 +1,11 @@
+
+
+const TotalRentCollected = () =>{
+    return(
+        <>
+        <h1>Total Rent Collected</h1>
+        </>
+    )
+}
+
+export default TotalRentCollected;

src/components/dashboard-components/Widget-section/Widget-section.jsx

@@ -0,0 +1,51 @@
+import { Link } from "react-router-dom";
+
+
+const WidgetSection = () => {
+    return(
+        <div className="w-full bg-light-blue md:px-20 md:py-10 p-2">
+            <div className="flex flex-row justify-between items-center md:mt-10 md:px-10 py-8 px-4">
+                <h1 className="font-bold md:text-4xl text-2xl">Widgets</h1>
+                <Link to="/dashboard/createnewrenter">
+                <div className="bg-textWhite p-4 font-semibold rounded-md hover:shadow-widget">Create new Rental</div>
+                </Link>
+            </div>
+            <div className="flex flex-col md:flex-row gap-10 justify-around items-center my-10 md:my-8 mx-2">
+            <Link to="/dashboard/renterdetails">
+                <section className="md:w-80 md:h-60 w-40 h-40  bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
+                    Rental's Details
+                </section>
+                </Link>
+                <Link to="/dashboard/paymentsrecord">
+                <section className="md:w-80 md:h-60 w-40 h-40 bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
+                    Rent Payment Record
+                </section>
+                </Link>
+                <Link to="/dashboard/searchrenter">
+                <section className="md:w-80 md:h-60 w-40 h-40 bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
+                Search Renter
+                </section>
+                </Link>
+            </div>
+            <div className="flex flex-col md:flex-row gap-10 justify-around items-center my-5 md:my-8 mx-2">
+            <Link to="/dashboard/totalrentcollected">
+                <section className="md:w-80 md:h-60 w-40 h-40 bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
+                Total Rent collected
+                </section>
+                </Link>
+                <Link to="/dashboard/propertylisting">
+                <section className="md:w-80 md:h-60 w-40 h-40 bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
+                Property Listing
+                </section>
+                </Link>
+                <Link to="/dashboard/addnewrenter">
+                <section className="md:w-80 md:h-60 w-40 h-40 bg-textWhite font-semibold flex justify-center items-center rounded-lg shadow-widget opacity-1 hover:shadow-widget-hover text-center">
+                Add New Rental
+                </section>
+                </Link>
+            </div>
+        </div>
+    )
+}
+
+export default WidgetSection;

src/pages/Dashboard.jsx

@@ -0,0 +1,25 @@
+import Navbar from '../components/Header-section/Navbar';
+import Header from "../components/dashboard-components/Header-section/Header";
+import WidgetSection from "../components/dashboard-components/Widget-section/Widget-section";
+import Footer from "../components/Footer-section/Footer";
+import ScrollToTop from "react-scroll-to-top";
+
+
+
+const Dashboard = () => {
+    return(
+        <>
+        <Navbar/>
+        <Header/>
+        <WidgetSection/>
+        <Footer/>
+        <ScrollToTop
+        smooth
+        color="darkgreen"
+        className="flex justify-center hover:scale-125 duration-200 transition items-center p-1"
+      />
+        </>
+    )
+}
+
+export default Dashboard

src/pages/index.js

@@ -1,3 +1,4 @@
 export { default as Home } from "./Home";
 export { default as Login } from "./Login";
 export { default as Registration } from "./Registration";
+export { default as Dashboard } from "./Dashboard";

tailwind.config.js

@@ -20,12 +20,17 @@ export default {
       "gray-dark": "#273444",
       "gray": "#8492a6",
       "gray-light": "#d3dce6",
+      "light-blue":"#e8f8f4"
     },
     fontFamily: {
       sans: ["Graphik", "sans-serif"],
       serif: ["Merriweather", "serif"],
       monsterrat: ["Montserrat", "sans-serif"],
     },
+    boxShadow: {
+      'widget': '3px 3px #b9c3c1;',
+      'widget-hover': '5px 5px #b9c3c1;',
+    },
   },
   plugins: [],
 };