Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added Dashboard template and modified .env.example in backend #136

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Added Dashboard template and modified .env.example in backend #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f9e416b
.env.example updated
Oct 10, 2024
7268c3b
dashboard setup
Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions backend/.env.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
MONGO_URL = ""
JWT_SECRET=""
# Paste your MongoDB URL here for local testing
1 change: 1 addition & 0 deletions frontend/src/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const base_url = 'http://localhost:3001'
2 changes: 2 additions & 0 deletions frontend/src/components/AllRoutes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,15 @@ import FAQs from './FAQ-feature/FAQ.jsx';
import SignInPage from './User/Login.jsx';
import SignupForm from './User/Signup.jsx';
import Page404 from './page404.jsx';
import Dashboard from './Dashboard.jsx';

const AllRoutes = () => {
return (
<>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/FAQs" element={<FAQs />} />
<Route exact path="/dashboard" element={<Dashboard />} />
<Route exact path='/register' element={<SignupForm/>} />
<Route exact path="/login" element={<SignInPage/>} />
<Route exact path="/music" element={<Home />} />
Expand Down
191 changes: 191 additions & 0 deletions frontend/src/components/Dashboard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
import React, { useEffect } from 'react';
import { Container, Row, Col, Card, Table, Button, ListGroup } from 'react-bootstrap';
import { useState } from 'react';

const Dashboard = () => {
const [day,setDay] = useState(new Date().toLocaleDateString())
const [time, setTime] = useState(new Date().toLocaleTimeString())
useEffect(() => {
const intervalId = setInterval(() => {
setTime(new Date().toLocaleTimeString());
}, 1000);

// Clean up the interval on component unmount
return () => clearInterval(intervalId);
}, []);


return (
<Container fluid className="mt-4">
{/* Header */}
<Row className="mb-4">
<Col>
<h1>Welcome back, John Doe!</h1>
<p>{day} | {time}</p>
</Col>
</Row>

{/* Recent Orders */}
<Row className="mt-4">
<Col>
<Card>
<Card.Body>
<Card.Title>Your Recent Orders</Card.Title>
<Table striped bordered hover>
<thead>
<tr>
<th>Order ID</th>
<th>Date</th>
<th>Status</th>
<th>Total Amount</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>#001</td>
<td>2024-10-08</td>
<td>Shipped</td>
<td>$500</td>
<td><Button variant="info" size="sm">Track Order</Button></td>
</tr>
<tr>
<td>#002</td>
<td>2024-10-07</td>
<td>Processing</td>
<td>$200</td>
<td><Button variant="info" size="sm">Track Order</Button></td>
</tr>
</tbody>
</Table>
</Card.Body>
</Card>
</Col>
</Row>

{/* Recommended Products */}
<Row className="mt-4">
<Col>
<Card>
<Card.Body>
<Card.Title>Recommended for You</Card.Title>
<Row>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Product 1</Card.Title>
<Card.Text>$99.99</Card.Text>
<Button variant="primary">View Details</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Product 2</Card.Title>
<Card.Text>$89.99</Card.Text>
<Button variant="primary">View Details</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Product 3</Card.Title>
<Card.Text>$59.99</Card.Text>
<Button variant="primary">View Details</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Card.Body>
</Card>
</Col>
</Row>

{/* Account Details */}
<Row className="mt-4">
<Col md={6}>
<Card>
<Card.Body>
<Card.Title>Your Account Details</Card.Title>
<ListGroup>
<ListGroup.Item>Email: [email protected]</ListGroup.Item>
<ListGroup.Item>Phone: +1234567890</ListGroup.Item>
<ListGroup.Item>Address: 123 Main St, New York, NY</ListGroup.Item>
</ListGroup>
<Button variant="secondary" className="mt-3">Edit Profile</Button>
</Card.Body>
</Card>
</Col>
<Col md={6}>
<Card>
<Card.Body>
<Card.Title>Payment Methods</Card.Title>
<ListGroup>
<ListGroup.Item>Visa ending in 1234</ListGroup.Item>
<ListGroup.Item>MasterCard ending in 5678</ListGroup.Item>
</ListGroup>
<Button variant="secondary" className="mt-3">Manage Payments</Button>
</Card.Body>
</Card>
</Col>
</Row>

{/* Wishlist */}
<Row className="mt-4">
<Col>
<Card>
<Card.Body>
<Card.Title>Your Wishlist</Card.Title>
<ListGroup>
<ListGroup.Item>Product 1 - $99.99 <Button variant="primary" size="sm" className="float-end">Buy Now</Button></ListGroup.Item>
<ListGroup.Item>Product 2 - $89.99 <Button variant="primary" size="sm" className="float-end">Buy Now</Button></ListGroup.Item>
</ListGroup>
</Card.Body>
</Card>
</Col>
</Row>

{/* Notifications */}
<Row className="mt-4">
<Col>
<Card>
<Card.Body>
<Card.Title>Notifications</Card.Title>
<ListGroup>
<ListGroup.Item>Order #001 has been shipped</ListGroup.Item>
<ListGroup.Item>Discount code available for your next purchase</ListGroup.Item>
</ListGroup>
</Card.Body>
</Card>
</Col>
</Row>

{/* Support */}
<Row className="mt-4">
<Col>
<Card>
<Card.Body>
<Card.Title>Need Help?</Card.Title>
<p>Contact our support team or visit our <a href="/help">FAQ page</a>.</p>
<Button variant="danger">Contact Support</Button>
</Card.Body>
</Card>
</Col>
</Row>

{/* Footer */}
<Row className="mt-4">
<Col>
<p className="text-center">© 2024 Your eCommerce App</p>
</Col>
</Row>
</Container>
);
};

export default Dashboard;
4 changes: 3 additions & 1 deletion frontend/src/components/User/Login.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,8 @@ import { useNavigate } from "react-router-dom";

import "../../styles/Login.css"; // Importing CSS

import { base_url } from "../../api";

const SignInPage = () => {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
Expand All @@ -27,7 +29,7 @@ const SignInPage = () => {
}

try {
const response = await axios.post("http://localhost:8080/customer/login", {
const response = await axios.post(`${base_url}/api/v1/auth/login`, {
email,
password,
});
Expand Down
4 changes: 3 additions & 1 deletion frontend/src/components/User/Signup.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { useNavigate } from "react-router-dom";

import "../../styles/Signup.css"; // Importing CSS

import { base_url } from "../../api";

const SignupForm = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
Expand Down Expand Up @@ -43,7 +45,7 @@ const SignupForm = () => {

try {
console.log(name, email, password, phone);
const response = await axios.post("http://localhost:8080/customer/register", {
const response = await axios.post(`${base_url}/api/v1/auth/register`, {
name,
email,
password,
Expand Down
1 change: 1 addition & 0 deletions frontend/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import 'bootstrap/dist/css/bootstrap.min.css';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

Expand Down