Skip to content

Commit 5638660

Browse files
IamKundaIamKunda
committed
add user dashboard
1 parent 08a6e00 commit 5638660

9 files changed

+254
-1
lines changed

‎src/appRouter.js

+15
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ import LoginPage from "./pages/login";
55
import RegisterPage from "./pages/register";
66
import UserHomePage from "./pages/userHome";
77
import AdminHomePage from "./pages/adminHome";
8+
import UpdateDetailsPage from "./pages/updateDetails";
9+
import UpdatePasswordPage from "./pages/updatePassword";
10+
import UserDetails from "./pages/userDetails";
811

912
const AppRouter = createBrowserRouter([
1013
{
@@ -27,6 +30,18 @@ const AppRouter = createBrowserRouter([
2730
path: "/admin",
2831
element: <AdminHomePage />,
2932
},
33+
{
34+
path: "/user/updateDetails",
35+
element: <UpdateDetailsPage />,
36+
},
37+
{
38+
path: "/user/updatePassword",
39+
element: <UpdatePasswordPage />,
40+
},
41+
{
42+
path: "/user/personalDetails",
43+
element: <UserDetails />,
44+
},
3045
]);
3146

3247
export default AppRouter;

‎src/components/user/dashboard.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import React, { useState } from "react";
2+
// import PersonalDetails from './PersonalDetails';
3+
// import UpdateDetails from './UpdateDetails';
4+
// import UpdatePassword from './UpdatePassword';
5+
import PersonalDetails from "./personalDetails";
6+
import UpdateDetails from "./updateDetails";
7+
import UpdatePassword from "./updatePassword";
8+
9+
const Dashboard = () => {
10+
const [activeTab, setActiveTab] = useState("personalDetails");
11+
12+
const renderTabContent = () => {
13+
switch (activeTab) {
14+
case "personalDetails":
15+
return <PersonalDetails />;
16+
case "UpdateDetails":
17+
return <UpdateDetails />;
18+
case "updatePassword":
19+
return <UpdatePassword />;
20+
default:
21+
return null;
22+
}
23+
};
24+
25+
return (
26+
<div className="container mt-5">
27+
<ul className="nav nav-tabs">
28+
<li
29+
className="nav-item"
30+
onClick={() => setActiveTab("personalDetails")}
31+
>
32+
<span
33+
className={`nav-link ${
34+
activeTab === "personalDetails" && "active"
35+
}`}
36+
>
37+
Personal Details
38+
</span>
39+
</li>
40+
<li className="nav-item" onClick={() => setActiveTab("UpdateDetails")}>
41+
<span
42+
className={`nav-link ${activeTab === "UpdateDetails" && "active"}`}
43+
>
44+
Change Details
45+
</span>
46+
</li>
47+
<li className="nav-item" onClick={() => setActiveTab("updatePassword")}>
48+
<span
49+
className={`nav-link ${activeTab === "updatePassword" && "active"}`}
50+
>
51+
Update Password
52+
</span>
53+
</li>
54+
</ul>
55+
56+
<div className="tab-content mt-2">{renderTabContent()}</div>
57+
</div>
58+
);
59+
};
60+
61+
export default Dashboard;

‎src/components/user/personalDetails.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function PersonalDetails() {
2+
return <div>Personal Details Here</div>;
3+
}

‎src/components/user/updateDetails.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function UpdateDetails() {
2+
return <div>Update User Details</div>;
3+
}

‎src/components/user/updatePassword.js

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function UpdatePassword() {
2+
return <div>Update Password</div>;
3+
}

‎src/pages/updateDetails.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useState } from "react";
2+
// import PersonalDetails from './PersonalDetails';
3+
// import UpdateDetails from './UpdateDetails';
4+
// import UpdatePassword from './UpdatePassword';
5+
6+
import { Link } from "react-router-dom";
7+
import UpdateDetails from "../components/user/updateDetails";
8+
9+
const UpdateDetailsPage = () => {
10+
const [activeTab, setActiveTab] = useState("UpdateDetails");
11+
12+
return (
13+
<div className="container mt-5">
14+
<ul className="nav nav-tabs">
15+
<Link className="nav-item" to={"/user/personalDetails"}>
16+
<span
17+
className={`nav-link ${
18+
activeTab === "personalDetails" && "active"
19+
}`}
20+
>
21+
Personal Details
22+
</span>
23+
</Link>
24+
<Link
25+
to={"/user/updateDetails"}
26+
className="nav-item"
27+
onClick={() => setActiveTab("UpdateDetails")}
28+
>
29+
<span
30+
className={`nav-link ${activeTab === "UpdateDetails" && "active"}`}
31+
>
32+
Change Details
33+
</span>
34+
</Link>
35+
<Link
36+
className="nav-item"
37+
to={"/user/updatePassword"}
38+
onClick={() => setActiveTab("updatePassword")}
39+
>
40+
<span
41+
className={`nav-link ${activeTab === "updatePassword" && "active"}`}
42+
>
43+
Update Password
44+
</span>
45+
</Link>
46+
</ul>
47+
48+
<div className="tab-content mt-2">
49+
<UpdateDetails />
50+
</div>
51+
</div>
52+
);
53+
};
54+
55+
export default UpdateDetailsPage;

‎src/pages/updatePassword.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useState } from "react";
2+
// import PersonalDetails from './PersonalDetails';
3+
// import UpdateDetails from './UpdateDetails';
4+
// import UpdatePassword from './UpdatePassword';
5+
6+
import { Link } from "react-router-dom";
7+
import UpdatePassword from "../components/user/updatePassword";
8+
9+
const UpdatePasswordPage = () => {
10+
const [activeTab, setActiveTab] = useState("UpdateDetails");
11+
12+
return (
13+
<div className="container mt-5">
14+
<ul className="nav nav-tabs">
15+
<Link className="nav-item" to={"/user/personalDetails"}>
16+
<span
17+
className={`nav-link ${
18+
activeTab === "personalDetails" && "active"
19+
}`}
20+
>
21+
Personal Details
22+
</span>
23+
</Link>
24+
<Link
25+
to={"/user/updateDetails"}
26+
className="nav-item"
27+
onClick={() => setActiveTab("UpdateDetails")}
28+
>
29+
<span
30+
className={`nav-link ${activeTab === "UpdateDetails" && "active"}`}
31+
>
32+
Change Details
33+
</span>
34+
</Link>
35+
<Link
36+
className="nav-item"
37+
to={"/user/updatePassword"}
38+
onClick={() => setActiveTab("updatePassword")}
39+
>
40+
<span
41+
className={`nav-link ${activeTab === "updatePassword" && "active"}`}
42+
>
43+
Update Password
44+
</span>
45+
</Link>
46+
</ul>
47+
<div className="tab-content mt-2">
48+
<p>Update password Page</p>
49+
<UpdatePassword />
50+
</div>
51+
</div>
52+
);
53+
};
54+
55+
export default UpdatePasswordPage;

‎src/pages/userDetails.js

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React, { useState } from "react";
2+
// import PersonalDetails from './PersonalDetails';
3+
// import UpdateDetails from './UpdateDetails';
4+
// import UpdatePassword from './UpdatePassword';
5+
6+
import { Link } from "react-router-dom";
7+
import PersonalDetails from "../components/user/personalDetails";
8+
9+
const UserDetails = () => {
10+
const [activeTab, setActiveTab] = useState("personalDetails");
11+
12+
return (
13+
<div className="container mt-5">
14+
<ul className="nav nav-tabs">
15+
<Link className="nav-item" to={"/user/personalDetails"}>
16+
<span
17+
className={`nav-link ${
18+
activeTab === "personalDetails" && "active"
19+
}`}
20+
>
21+
Personal Details
22+
</span>
23+
</Link>
24+
<Link
25+
to={"/user/updateDetails"}
26+
className="nav-item"
27+
onClick={() => setActiveTab("UpdateDetails")}
28+
>
29+
<span
30+
className={`nav-link ${activeTab === "UpdateDetails" && "active"}`}
31+
>
32+
Change Details
33+
</span>
34+
</Link>
35+
<Link
36+
className="nav-item"
37+
to={"/user/updatePassword"}
38+
onClick={() => setActiveTab("updatePassword")}
39+
>
40+
<span
41+
className={`nav-link ${activeTab === "updatePassword" && "active"}`}
42+
>
43+
Update Password
44+
</span>
45+
</Link>
46+
</ul>
47+
48+
<div className="tab-content mt-2">
49+
<PersonalDetails />
50+
</div>
51+
</div>
52+
);
53+
};
54+
55+
export default UserDetails;

‎src/pages/userHome.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import Dashboard from "../components/user/dashboard";
2+
import UserDetails from "./userDetails";
3+
14
export default function UserHomePage() {
25
return (
36
<div>
4-
<p>UserHome Page</p>
7+
<UserDetails />
58
</div>
69
);
710
}

0 commit comments

Comments
 (0)