From 21372922520bb91096b51acc10794f5c96424b24 Mon Sep 17 00:00:00 2001 From: Manh Dao <108255168+ManhDao0801@users.noreply.github.com> Date: Wed, 7 Feb 2024 04:26:37 -0800 Subject: [PATCH 1/4] Implement onboarding functionality --- src/app/Home.css | 33 +++++++++++ src/app/dashboard/page.tsx | 110 ++++++++++++++++++++++++++++++++++--- src/app/page.tsx | 5 +- 3 files changed, 138 insertions(+), 10 deletions(-) create mode 100644 src/app/Home.css diff --git a/src/app/Home.css b/src/app/Home.css new file mode 100644 index 0000000..6833940 --- /dev/null +++ b/src/app/Home.css @@ -0,0 +1,33 @@ +.step-oval::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: 100%; /* Adjust width as needed */ + height: 45px; /* Adjust height as needed */ + border-radius: 30px; + border: 2px solid #E2E8F0; /* Adjust color as needed */ + transform: translate(-50%, -50%); + z-index: 0; +} + +.step-oval.active::before { + border-color: #FF9500; /* Adjust for active step */ +} + +.step-oval.completed::before { + border-color: #FF9500; /* Adjust for completed step */ +} + +.step-checkmark::after { + content: '\2714'; /* Unicode checkmark */ + color: #FF9500; /* Adjust checkmark color as needed */ + font-size: 18px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + z-index: 1; +} + + diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 013e5ca..40ddfae 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -1,8 +1,102 @@ -export default function Dashboard() { - return ( -
-

Dashboard

-
- ); - } - \ No newline at end of file + +import React, { useState } from 'react'; +import './Home.css'; + + +const steps = [ + "Dashboard Cards", + "Notifications", + "Communicate With Clients", + "Change Status" +]; + + +export default function DashboardHome() { + const [currentPage, setCurrentPage] = useState(0); + const [completedSteps, setCompletedSteps] = useState(new Array(steps.length).fill(false)); + // const tutorialCompleted = localStorage.getItem('tutorialCompleted') === 'true'; + // const [showPopup, setShowPopup] = useState(!tutorialCompleted); + const [showPopup, setShowPopup] = useState(true); + const [showFinishButton, setShowFinishButton] = useState(false); + + + const goToNextPage = () => { + const newCompletedSteps = [...completedSteps]; + newCompletedSteps[currentPage] = true; + setCompletedSteps(newCompletedSteps); + if (currentPage < steps.length - 1) { + setCurrentPage(currentPage + 1); + } else { + setShowFinishButton(true); + } + }; + + + const finishTutorial = () => { + // Set the last step as completed before closing + const newCompletedSteps = [...completedSteps]; + newCompletedSteps[currentPage] = true; + setCompletedSteps(newCompletedSteps); + // localStorage.setItem('tutorialCompleted', 'true'); + setShowPopup(false); + }; + + + return ( +
+ {showPopup && ( +
+ +
+

Welcome to Connie.

+

We’re so happy you’re here. Get to know your space through a few simple steps. Here are the main functions of your dashboard:

+
+ +
+
+ {steps.map((step, index) => ( +
+
+
+ ))} +
+ + +
+ {steps.map((step, index) => ( +
+
+
{step}
+
+ ))} +
+
+ {steps.map((content, index) => ( +
+ {`Content for ${content}`} +
+ ))} +
+
+
+ {!showFinishButton ? ( + + ) : ( + + )} +
+
+ )} +
+ ); +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 20e3960..1a07f78 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,10 +1,11 @@ "use client"; + import { useSession } from 'next-auth/react'; import React from 'react'; import { redirect } from 'next/navigation' export default function Home() { - const {data: session, status} = useSession(); + const { data: session, status } = useSession(); if (status === 'loading') { return Loading...; } else if (session) { @@ -12,4 +13,4 @@ export default function Home() { } else { redirect('/login'); } -} +} \ No newline at end of file From 052f6f6468a4bcd8ef405340faef64ab0066c75a Mon Sep 17 00:00:00 2001 From: Willie Chalmers III Date: Fri, 16 Feb 2024 19:12:38 -0800 Subject: [PATCH 2/4] Fix missing key attribute in onboarding indicator --- src/app/dashboard/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index 40ddfae..cadd61b 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -55,7 +55,7 @@ export default function DashboardHome() {
{steps.map((step, index) => ( -
+
))} From 4fb4a66e9b34561ead34cef2d9aff19013e74f3d Mon Sep 17 00:00:00 2001 From: Willie Chalmers III Date: Fri, 16 Feb 2024 19:17:10 -0800 Subject: [PATCH 3/4] Fix build issues --- src/app/{ => dashboard}/Home.css | 0 src/app/dashboard/page.tsx | 1 + 2 files changed, 1 insertion(+) rename src/app/{ => dashboard}/Home.css (100%) diff --git a/src/app/Home.css b/src/app/dashboard/Home.css similarity index 100% rename from src/app/Home.css rename to src/app/dashboard/Home.css diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx index cadd61b..f40f756 100644 --- a/src/app/dashboard/page.tsx +++ b/src/app/dashboard/page.tsx @@ -1,3 +1,4 @@ +'use client'; import React, { useState } from 'react'; import './Home.css'; From 4da952dd467a4a34c334a91a9f48d48d9bf699a2 Mon Sep 17 00:00:00 2001 From: minfei Date: Mon, 19 Feb 2024 21:30:41 -0500 Subject: [PATCH 4/4] fix spelling --- src/components/audittable/columns.tsx | 2 +- src/components/sidebar/index.tsx | 11 +---------- 2 files changed, 2 insertions(+), 11 deletions(-) diff --git a/src/components/audittable/columns.tsx b/src/components/audittable/columns.tsx index 7df8566..3d09607 100644 --- a/src/components/audittable/columns.tsx +++ b/src/components/audittable/columns.tsx @@ -87,7 +87,7 @@ export const columns: ColumnDef[] = [ Export - View call details + View details ) diff --git a/src/components/sidebar/index.tsx b/src/components/sidebar/index.tsx index b8988a6..c09f433 100644 --- a/src/components/sidebar/index.tsx +++ b/src/components/sidebar/index.tsx @@ -83,7 +83,7 @@ export default function Sidebar({ className, isProgramManager }: SidebarProps) { - Cleints + Clients @@ -105,15 +105,6 @@ export default function Sidebar({ className, isProgramManager }: SidebarProps) { - {/* - - Settings - - - - - Audit-log - */}
); }