Implement user onboarding

src/app/dashboard/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;
+}
+
+

src/app/dashboard/page.tsx

@@ -1,8 +1,103 @@
-export default function Dashboard() {
-    return (
-      <main>
-        <h1>Dashboard</h1>
-      </main>
-    );
-  }
-
+'use client';
+
+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 (
+    <div className={`fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50 ${!showPopup ? 'hidden' : ''}`}>
+      {showPopup && (
+        <div className="bg-white rounded-2xl max-w-[836px] max-h-[537px] flex flex-col shadow overflow-hidden p-6 relative">
+
+          <div className="text-center pb-4">
+            <h1 className="text-2xl font-bold mb-2.5">Welcome to Connie.</h1>
+            <p className="text-base text-gray-500">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:</p>
+          </div>
+
+          <div className="flex mt-4">
+            <div className="flex flex-col">
+              {steps.map((step, index) => (
+                <div key={index} className="flex items-center mb-5 ml-2 relative">
+                  <div className={`w-7 h-7 rounded-full ${index === currentPage ? 'bg-orange-500' : completedSteps[index] ? 'bg-orange-500' : 'bg-gray-200'}`}></div>
+                </div>
+              ))}
+            </div>
+
+
+            <div className="flex flex-col">
+              {steps.map((step, index) => (
+                <div key={step} className={`flex items-center mb-8 ml-9 relative step-oval ${index === currentPage ? "active" : completedSteps[index] ? "completed" : ""}`}>
+                  <div className={`w-6 h-6 rounded-full border flex items-center justify-center absolute left-2.5 ${index === currentPage ? "active" : ""} ${completedSteps[index] ? "completed step-checkmark" : ""} ${index === currentPage || completedSteps[index] ? 'border-orange-500' : 'border-gray-300'} `}></div>
+                  <div className="ml-10 mr-4 text-sm">{step}</div>
+                </div>
+              ))}
+            </div>
+            <div className="flex-grow">
+              {steps.map((content, index) => (
+                <div key={content} className={`ml-7 content ${index === currentPage ? "block" : "hidden"}`}>
+                  {`Content for ${content}`}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="absolute bottom-6 right-6">
+            {!showFinishButton ? (
+              <button
+                className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded"
+                onClick={goToNextPage}
+              >
+                {currentPage === steps.length - 1 ? 'Finish' : 'Next'}
+              </button>
+            ) : (
+              <button
+                className="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded"
+                onClick={finishTutorial}
+              >
+                Exit
+              </button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,15 +1,16 @@
 "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 <React.Fragment>Loading...</React.Fragment>;
   } else if (session) {
     redirect('/dashboard');
   } else {
     redirect('/login');
   }
-}
+}

src/components/audittable/columns.tsx

@@ -87,7 +87,7 @@ export const columns: ColumnDef<FetchedCalls>[] = [
               Export
             </DropdownMenuItem>
             <DropdownMenuSeparator />
-            <DropdownMenuItem>View call details</DropdownMenuItem>
+            <DropdownMenuItem>View details</DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
       )

src/components/sidebar/index.tsx

@@ -83,7 +83,7 @@ export default function Sidebar({ className, isProgramManager }: SidebarProps) {
 
       <ButtonLink href="/dashboard/clients">
         <SquareUser className="mr-2 h-4 w-4" />
-        Cleints
+        Clients
       </ButtonLink>
       <Collapsible>
 
@@ -105,15 +105,6 @@ export default function Sidebar({ className, isProgramManager }: SidebarProps) {
               </ButtonLink>
           </CollapsibleContent>
       </Collapsible>
-      {/* <ButtonLink href="/dashboard/settings">
-        <Settings className="mr-2 h-4 w-4" />
-        Settings
-      </ButtonLink>
-
-      <ButtonLink href="/dashboard/settings/org/audit-log">
-        <Settings className="mr-2 h-4 w-4" />
-        Audit-log
-      </ButtonLink> */}
     </div>
   );
 }