Dashboard changes

app/(dashboard)/pages/home/page.js

@@ -0,0 +1,41 @@
+'use client'
+import { Container, Card } from 'react-bootstrap';
+import ShoppingCartCheckoutIcon from '@mui/icons-material/ShoppingCartCheckout';
+// import widget as custom components
+import { PageHeading } from 'widgets';
+import Link from 'next/link';
+
+function HomePage() {
+
+    return (
+        <Container fluid className="p-6">
+            <PageHeading heading="Home" />
+            <Card>
+                <Card.Body>
+                    <div className="d-flex justify-content-between align-items-center mb-3">
+                        <div>
+                            <h4 className="mb-0">Welcome to Next.js!</h4>
+                        </div>
+                        {/* <div className="icon-shape icon-md bg-light-primary text-primary rounded-2"></div> */}
+                    </div>
+                    <div>
+                        <h3 className="fw-bold">
+                            <Link href="/pages/home/posts" className='me-2'>Go to store</Link>
+                            <ShoppingCartCheckoutIcon style={{ color: "green" }} />
+                        </h3>
+                    </div>
+                    <div className="d-flex justify-content-between align-items-center mb-3">
+                        <div>
+                            <h4 className="mb-0"></h4>
+                        </div>
+                    </div>
+                    <div>
+                        <p className="mb-0"></p>
+                    </div>
+                </Card.Body>
+            </Card>
+        </Container>
+    );
+}
+
+export default HomePage;

app/(dashboard)/pages/home/posts/page.js

@@ -0,0 +1,82 @@
+'use client'
+import { useState, useEffect } from 'react';
+
+import { Col, Row, Container, Card } from 'react-bootstrap';
+import { PageHeading } from 'widgets';
+import Link from 'next/link';
+import "../../../../../styles/posts.css";
+import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
+
+// Default image URL for products without an image_link
+const DEFAULT_IMAGE_URL = 'https://source.unsplash.com/random';
+
+export default function FirstPost() {
+    // State to store fetched data
+    const [cosmeticsData, setCosmeticsData] = useState([]);
+
+    useEffect(() => {
+        // Fetch data from the API
+        const fetchData = async () => {
+            try {
+                const response = await fetch('http://makeup-api.herokuapp.com/api/v1/products.json?product_type=Eyeliner');
+                const data = await response.json();
+                setCosmeticsData(data);
+            } catch (error) {
+                console.error('Error fetching cosmetics data:', error);
+            }
+        };
+
+        fetchData();
+    }, []);
+
+    return (
+        <Container fluid className="p-6">
+            {/* Page Heading */}
+            <PageHeading heading="Cosmetics" />
+            <div className="py-6">
+                <Row>
+                    <div>
+                        <h1 className='float-start'>NYX - Eyeliners</h1>
+                        <h3 className='float-end'>
+                            <span className='me-2'><AddShoppingCartIcon style={{ color: "green", fontSize: "40px" }}/></span>
+                            <Link href="/pages/home">
+                               <ArrowBackIosIcon /> Back
+                            </Link>
+                        </h3>
+                    </div>
+                </Row>
+            </div>
+            {/* Iterate over cosmetics data and generate cards */}
+            <Card className='mt-5'>
+                <Card.Body>
+                    <Row xs={1} sm={2} md={3} lg={4} xl={4} className="g-4">
+                        {cosmeticsData.filter(item => item.price !== '0.0').map((item, index) => (
+                            <Col key={index}>
+                                {/* <Link href={`/product/${item.id}`}> */}
+                                    <Card style={{ height: '100%' }}>
+                                        <div style={{ position: 'relative', overflow: 'hidden', paddingTop: '100%', }}>
+                                            <Card.Img
+                                                variant="top"
+                                                src={item.image_link ? item.image_link : DEFAULT_IMAGE_URL}
+                                                style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '380px', objectFit: 'cover' }}
+                                            />
+                                        </div>
+                                        <Card.Body>
+                                            <Card.Title>{item.name}</Card.Title>
+                                            <div>
+                                                <span className='float-start'><Card.Text>${item.price}</Card.Text></span>
+                                                <span className='float-end'><AddShoppingCartIcon style={{ color: "red", fontSize: "23px" }}/></span>
+                                            </div>
+                                        </Card.Body>
+                                    </Card>
+                                {/* </Link> */}
+                            </Col>
+                        ))}
+                    </Row>
+                </Card.Body>
+            </Card>
+        </Container>
+    );
+}

app/(dashboard)/pages/students/page.js

@@ -0,0 +1,82 @@
+'use client'
+import { useEffect, useState } from 'react';
+import { Row, Container } from 'react-bootstrap';
+import { PageHeading } from 'widgets';
+import "../../../../styles/posts.css";
+import BootstrapTable from 'react-bootstrap-table-next';
+import paginationFactory from 'react-bootstrap-table2-paginator';
+
+export default function StudentData() {
+    const [data, setData] = useState([]);
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    const fetchData = async () => {
+        try {
+            const res = await fetch('https://my-json-server.typicode.com/VinusreeJeyasankar/Server2/students');
+            const jsonData = await res.json();
+            setData(jsonData);
+        } catch (error) {
+            console.error('Error fetching data:', error);
+        }
+    };
+
+    const columns = [
+        {
+            dataField: 'Name',
+            text: 'Name'
+        },
+        {
+            dataField: 'Roll-No',
+            text: 'Roll No'
+        },
+        {
+            dataField: 'Age',
+            text: 'Age'
+        },
+        {
+            dataField: 'Gender',
+            text: 'Gender'
+        },
+        {
+            dataField: 'Course',
+            text: 'Course'
+        },
+        {
+            dataField: 'Course-Duration',
+            text: 'Course Duration'
+        },
+        {
+            dataField: 'Fees',
+            text: 'Fees'
+        },
+        {
+            dataField: 'Status',
+            text: 'Status'
+        },
+        {
+            dataField: 'Date-of-joining',
+            text: 'Date of joining'
+        },
+    ];
+
+    return (
+        <Container fluid className="p-6">
+            {/* Page Heading */}
+            <PageHeading heading="Students" />
+            <div className="py-6">
+                <Row>
+                    <h3 className='text-center pb-2'>Generate Student Table</h3>
+                    <BootstrapTable
+                        keyField='id'
+                        data={data}
+                        columns={columns}
+                        pagination={paginationFactory()}
+                    />
+                </Row>
+            </div>
+        </Container>
+    );
+}

app/layout.js

@@ -1,16 +1,20 @@
-// import theme style scss file
+"use client"
 import 'styles/theme.scss';
+import Navbar from './navbar';
+import { usePathname } from 'next/navigation';
 
-export const metadata = {
-    title: 'Dash UI - Next.Js Admin Dashboard Template',
-    description: 'Dash UI - Next JS admin dashboard template is free and available on GitHub. Create your stunning web apps with our Free Next js template. An open-source admin dashboard built using the new router, server components, and everything new in Next.js 13.',
-    keywords: 'Dash UI, Next.js 13, Admin dashboard, admin template, web apps, bootstrap 5, admin theme'
-}
+// export const metadata = {
+//     title: 'Dash UI - Next.Js Admin Dashboard Template',
+//     description: 'Dash UI - Next JS admin dashboard template is free and available on GitHub. Create your stunning web apps with our Free Next js template. An open-source admin dashboard built using the new router, server components, and everything new in Next.js 13.',
+//     keywords: 'Dash UI, Next.js 13, Admin dashboard, admin template, web apps, bootstrap 5, admin theme'
+// }
 
 export default function RootLayout({ children }) {
+    const location = usePathname ()
     return (
         <html lang="en">
             <body className='bg-light'>
+                {(location === "/login" || location === "/signup") ? <Navbar /> : null }
                 {children}
             </body>
         </html>

app/login/page.js

@@ -0,0 +1,79 @@
+"use client"
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import "../../styles/login_signup.css";
+
+function LoginPage() {
+  const router = useRouter();
+  const [loginData, setLoginData] = useState({
+    uname: '',
+    pwd: ''
+  });
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setLoginData({ ...loginData, [name]: value });
+  };
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+    const storedSignupData = JSON.parse(localStorage.getItem('signups'));
+    const matchedUser = storedSignupData.find(user => user.firstName === loginData.uname && user.password === loginData.pwd);
+    if (matchedUser) {
+    // Set logged-in status in localStorage
+    localStorage.setItem('isUserLogged', true);
+
+    toast.success('Login successful!', {
+      position: 'top-right',
+      autoClose: 1000,
+      onClose: () => {
+        router.push('/');
+      }
+    });
+    } else {
+      toast.error('Invalid username or password.', { position: 'top-right' });
+    }
+  };
+
+  return (
+    <div id="login" className="fPage">
+      <ToastContainer position="top-right" />
+      <form id="loginForm" className="card-container rounded-2">
+        <h2 className="mb-3 text-center">Login</h2>
+        <label htmlFor="uname" className="form-label">
+          Username
+          <input
+            id="uname"
+            name="uname"
+            type="text"
+            className="form-control"
+            value={loginData.uname}
+            onChange={handleInputChange}
+            required
+          />
+        </label>
+        <label htmlFor="pwd" className="form-label">
+          Password
+          <input
+            id="pwd"
+            name="pwd"
+            type="password"
+            className="form-control"
+            value={loginData.pwd}
+            onChange={handleInputChange}
+            required
+          />
+        </label>
+        <div className='d-flex justify-content-center'>
+          <button className="btn btn-outline-primary" type="button" onClick={handleLogin}>
+            Login
+          </button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+export default LoginPage;

app/navbar/index.js

@@ -0,0 +1,38 @@
+"use client"
+import { usePathname } from 'next/navigation';
+import React from 'react';
+
+function Navbar() {
+  const pathName = usePathname();
+
+  return (
+    <div>
+      <nav className="navbar navbar-expand-lg navbar-light bg-light-subtle">
+        <div className="container-fluid">
+        {pathName === '/' && (
+          <a className="navbar-brand" href="/">Dashboard</a>
+        )}
+          <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
+            <span className="navbar-toggler-icon"></span>
+          </button>
+          <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
+            <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
+              {(pathName === '/login') && (
+                <li className="nav-item bg-warning rounded-2">
+                  <a className="nav-link active" aria-current="page" href="/signup">Sign Up</a>
+                </li>
+              )}
+              {pathName === '/signup' && (
+                <li className="nav-item bg-warning rounded-2">
+                  <a className="nav-link active" aria-current="page" href="/login">Login</a>
+                </li>
+              )}
+            </ul>
+          </div>
+        </div>
+      </nav>
+    </div>
+  );
+}
+
+export default Navbar;