feat: init user settings

apps/web/app/orgs/[orgslug]/dash/courses/course/[courseuuid]/[subpage]/page.tsx

@@ -1,5 +1,5 @@
 'use client';
-import EditCourseStructure from '../../../../../../../../components/Dashboard/EditCourseStructure/EditCourseStructure'
+import EditCourseStructure from '../../../../../../../../components/Dashboard/Course/EditCourseStructure/EditCourseStructure'
 import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
 import PageLoading from '@components/Objects/Loaders/PageLoading';
 import ClientComponentSkeleton from '@components/Utils/ClientComp';
@@ -13,7 +13,7 @@ import Link from 'next/link';
 import { CourseOverviewTop } from '@components/Dashboard/UI/CourseOverviewTop';
 import { CSSTransition } from 'react-transition-group';
 import { motion } from 'framer-motion';
-import EditCourseGeneral from '@components/Dashboard/EditCourseGeneral/EditCourseGeneral';
+import EditCourseGeneral from '@components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral';
 import { GalleryVertical, GalleryVerticalEnd, Info } from 'lucide-react';
 
 export type CourseOverviewParams = {
@@ -33,7 +33,6 @@ function CourseOverviewPage({ params }: { params: CourseOverviewParams }) {
 
     return (
         <div className='h-full w-full bg-[#f8f8f8]'>
-             
             <CourseProvider courseuuid={getEntireCourseUUID(params.courseuuid)}>
                 <div className='pl-10 pr-10  tracking-tight bg-[#fcfbfc] shadow-[0px_4px_16px_rgba(0,0,0,0.02)]'>
                     <CourseOverviewTop params={params} />

apps/web/app/orgs/[orgslug]/dash/page.tsx

@@ -1,8 +1,12 @@
+import PageLoading from '@components/Objects/Loaders/PageLoading'
 import React from 'react'
 
 function DashboardHome() {
     return (
-        <div>DashboardHome</div>
+        <div className="flex items-center justify-center mx-auto min-h-screen flex-col space-x-3">
+            <PageLoading />
+            <div className='text-neutral-400 font-bold animate-pulse text-2xl'>This page is work in progress</div>
+        </div>
     )
 }
 

apps/web/app/orgs/[orgslug]/dash/user/settings/[subpage]/page.tsx

@@ -0,0 +1,69 @@
+'use client';
+import React, { useEffect } from 'react'
+import { motion } from 'framer-motion';
+import UserEditGeneral from '@components/Dashboard/User/UserEditGeneral/UserEditGeneral';
+import UserEditPassword from '@components/Dashboard/User/UserEditPassword/UserEditPassword';
+import Link from 'next/link';
+import { getUriWithOrg } from '@services/config/config';
+import { Info, Lock } from 'lucide-react';
+import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs';
+import { useAuth } from '@components/Security/AuthContext';
+
+export type SettingsParams = {
+    subpage: string
+    orgslug: string
+}
+
+function SettingsPage({ params }: { params: SettingsParams }) {
+    const auth = useAuth() as any;
+
+
+    useEffect(() => {
+    }
+        , [auth])
+
+    return (
+        <div className='h-full w-full bg-[#f8f8f8]'>
+            <div className='pl-10 pr-10  tracking-tight bg-[#fcfbfc] shadow-[0px_4px_16px_rgba(0,0,0,0.02)]'>
+                <BreadCrumbs type='user' last_breadcrumb={auth?.user?.username} ></BreadCrumbs>
+                <div className='my-2 tracking-tighter'>
+                    <div className='w-100 flex justify-between'>
+                        <div className='pt-3 flex font-bold text-4xl'>Account Settings</div>
+                    </div>
+                </div>
+                <div className='flex space-x-5 font-black text-sm'>
+                    <Link href={getUriWithOrg(params.orgslug, "") + `/dash/user/settings/general`}>
+                        <div className={`py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'general' ? 'border-b-4' : 'opacity-50'} cursor-pointer`}>
+
+                            <div className='flex items-center space-x-2.5 mx-2'>
+                                <Info size={16} />
+                                <div>General</div>
+                            </div>
+                        </div>
+                    </Link>
+                    <Link href={getUriWithOrg(params.orgslug, "") + `/dash/user/settings/security`}>
+                        <div className={`flex space-x-4 py-2 w-fit text-center border-black transition-all ease-linear ${params.subpage.toString() === 'security' ? 'border-b-4' : 'opacity-50'} cursor-pointer`}>
+                            <div className='flex items-center space-x-2.5 mx-2'>
+                                <Lock size={16} />
+                                <div>Password</div>
+                            </div>
+
+                        </div>
+                    </Link>
+                </div>
+            </div>
+            <div className='h-6'></div>
+            <motion.div
+                initial={{ opacity: 0, }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: 0.10, type: "spring", stiffness: 80 }}
+            >
+                {params.subpage == 'general' ? <UserEditGeneral /> : ''}
+                {params.subpage == 'security' ? <UserEditPassword /> : ''}
+            </motion.div>
+        </div>
+    )
+}
+
+export default SettingsPage

apps/web/app/orgs/[orgslug]/settings/account/profile/profile.tsx

@@ -7,6 +7,8 @@ import { updateProfile } from '@services/settings/profile';
 function ProfileClient() {
     const auth: any = React.useContext(AuthContext);
     
+    
+
     return (
         <div>
 
@@ -51,7 +53,7 @@ function ProfileClient() {
                                 </label>
                                 <Field
                                     as="textarea"
-                                    className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                    className="w-full h-64 px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                                     type="textarea"
                                     name="bio"
                                 />

apps/web/components/Dashboard/Course/EditCourseGeneral/EditCourseGeneral.tsx

@@ -4,7 +4,7 @@ import { AlertTriangle } from 'lucide-react'
 import * as Switch from '@radix-ui/react-switch';
 import * as Form from '@radix-ui/react-form';
 import React from 'react'
-import { useCourse, useCourseDispatch } from '../../Contexts/CourseContext';
+import { useCourse, useCourseDispatch } from '../../../Contexts/CourseContext';
 
 
 type EditCourseStructureProps = {

apps/web/components/Dashboard/UI/BreadCrumbs.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link'
 import React, { use, useEffect } from 'react'
 
 type BreadCrumbsProps = {
-    type: 'courses' | 'users'
+    type: 'courses' | 'user' | 'users',
     last_breadcrumb?: string
 }
 
@@ -17,7 +17,8 @@ function BreadCrumbs(props: BreadCrumbsProps) {
             <div className='text-gray-400 tracking-tight font-medium text-sm flex space-x-1'>
                 <div className='flex items-center space-x-1'>
                     {props.type == 'courses' ? <div className='flex space-x-2 items-center'> <Book className='text-gray' size={14}></Book><Link href='/dash/courses'>Courses</Link></div> : ''}
-                    {props.type == 'users' ? <div> <User size={14}></User><Link href='/dash/users'>Users</Link></div> : ''}
+                    {props.type == 'user' ? <div className='flex space-x-2 items-center'> <User className='text-gray' size={14}></User><Link href='/dash/user/settings/general'>Account Settings</Link></div> : ''}
+                   
                     <div className='flex items-center space-x-1 first-letter:uppercase'>
                         {props.last_breadcrumb ? <ChevronRight size={17} /> : ''}
                         <div className='first-letter:uppercase'>  {props.last_breadcrumb}</div>

apps/web/components/Dashboard/UI/LeftMenu.tsx

@@ -35,12 +35,12 @@ function LeftMenu() {
             className='flex flex-col w-24 bg-black h-screen  text-white shadow-xl'>
             <div className='flex flex-col h-full'>
                 <div className='flex h-20 mt-6'>
-                    <Link className='mx-auto' href={"/dash"}>
+                    <Link className='flex flex-col items-center mx-auto space-y-1' href={"/dash"}>
                         <Image alt="Learnhouse logo" width={40} src={LearnHouseDashboardLogo} />
                     </Link>
                 </div>
                 <div className='flex grow flex-col justify-center space-y-5 items-center mx-auto'>
-                    <ToolTip content={"Back to " + org?.name} slateBlack sideOffset={8} side='right'  >
+                    <ToolTip content={"Back to " + org?.name + "'s Home"} slateBlack sideOffset={8} side='right'  >
                         <Link className='bg-white text-black hover:text-white rounded-lg p-2 hover:bg-white/10 transition-all ease-linear' href={`/`} ><ArrowLeft className='hover:text-white' size={18} /></Link>
                     </ToolTip>
                     <ToolTip content={"Home"} slateBlack sideOffset={8} side='right'  >
@@ -51,15 +51,21 @@ function LeftMenu() {
                     </ToolTip>
                 </div>
                 <div className='flex flex-col mx-auto pb-7 space-y-2'>
-                    <Link href={'/dash/user/settings'} className='py-3'>
+                    <ToolTip content={auth.user.username+ "'s Settings"} slateBlack sideOffset={8} side='right'  >
-                        <Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
+                        <Link href={'/dash/user/settings/general'} className='py-3'>
-                    </Link>
+                            <Settings className='mx-auto text-neutral-400 cursor-pointer' size={18} />
-                    <div className="flex items-center">
+                        </Link>
-                        <div className="mx-auto shadow-lg">
+                    </ToolTip>
-                            <Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={auth.user.user_uuid} style="shape" />
+                    <div className="flex items-center flex-col space-y-4">
-                        </div>
+                        <ToolTip content={auth.user.username} slateBlack sideOffset={8} side='right'  >
+                            <div className="mx-auto shadow-lg">
+                                <Avvvatars radius={3} border borderColor='white' borderSize={3} size={35} value={auth.user.user_uuid} style="shape" />
+                            </div>
+                        </ToolTip>
+                        <ToolTip content={'Learnhouse Version'} slateBlack sideOffset={8} side='right'  >
+                        <div className='py-1 px-3 bg-white/10 opacity-40 rounded-full text-[10px] uppercase justify-center text-center'>alpha</div>
+                        </ToolTip>
                     </div>
-                    <div className="text-xs px-4 text-gray-200 ">{auth.user.username}</div>
 
                 </div>
             </div>

apps/web/components/Dashboard/User/UserEditGeneral/UserEditGeneral.tsx

@@ -0,0 +1,100 @@
+import { useAuth } from '@components/Security/AuthContext';
+import { updateProfile } from '@services/settings/profile';
+import React, { useEffect } from 'react'
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+
+function UserEditGeneral() {
+  const auth = useAuth() as any;
+
+  
+  useEffect(() => {
+  }
+    , [auth, auth.user])
+
+  return (
+    <div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
+      {auth.user && (
+        <Formik
+        enableReinitialize
+        initialValues={{
+          username: auth.user.username,
+          first_name: auth.user.first_name,
+          last_name: auth.user.last_name,
+          email: auth.user.email,
+          bio: auth.user.bio,
+        }}
+        onSubmit={(values, { setSubmitting }) => {
+          setTimeout(() => {
+
+            setSubmitting(false);
+            updateProfile(values,auth.user.id)
+          }, 400);
+        }}
+      >
+        {({ isSubmitting }) => (
+          <Form className="max-w-md">
+            <label className="block mb-2 font-bold" htmlFor="email">
+              Email
+            </label>
+            <Field
+              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              type="email"
+              name="email"
+            />
+
+            <label className="block mb-2 font-bold" htmlFor="username">
+              Username
+            </label>
+            <Field
+              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              type="username"
+              name="username"
+            />
+
+            <label className="block mb-2 font-bold" htmlFor="first_name">
+              First Name
+            </label>
+
+            <Field
+              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              type="first_name"
+              name="first_name"
+            />
+
+            <label className="block mb-2 font-bold" htmlFor="last_name">
+              Last Name
+            </label>
+
+            <Field
+              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              type="last_name"
+              name="last_name"
+            />
+
+            <label className="block mb-2 font-bold" htmlFor="bio">
+              Bio
+            </label>
+
+            <Field
+              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+              type="bio"
+              name="bio"
+
+            />
+            <button
+              type="submit"
+              disabled={isSubmitting}
+              className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+            >
+              Submit
+            </button>
+          </Form>
+
+        )}
+      </Formik>
+      )}
+    </div>
+  )
+}
+
+export default UserEditGeneral

apps/web/components/Dashboard/User/UserEditPassword/UserEditPassword.tsx

@@ -0,0 +1,66 @@
+import { useAuth } from '@components/Security/AuthContext';
+import { updatePassword } from '@services/settings/password';
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import React, { useEffect } from 'react'
+
+function UserEditPassword() {
+    const auth = useAuth() as any;
+
+    const updatePasswordUI = async (values: any) => {
+        let user_id = auth.userInfo.user_object.user_id;
+        await updatePassword(user_id, values)
+    }
+
+    useEffect(() => {
+    }
+        , [auth])
+
+
+    return (
+        <div className='ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5'>
+            <Formik
+                initialValues={{ old_password: '', new_password: '' }}
+                enableReinitialize
+                onSubmit={(values, { setSubmitting }) => {
+                    setTimeout(() => {
+                        setSubmitting(false);
+                        updatePasswordUI(values)
+                    }, 400);
+                }}
+            >
+                {({ isSubmitting }) => (
+                    <Form className="max-w-md">
+                        <label className="block mb-2 font-bold" htmlFor="old_password">
+                            Old Password
+                        </label>
+                        <Field
+                            className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            type="password"
+                            name="old_password"
+                        />
+
+                        <label className="block mb-2 font-bold" htmlFor="new_password">
+                            New Password
+                        </label>
+                        <Field
+                            className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                            type="password"
+                            name="new_password"
+                        />
+
+                        <button
+                            type="submit"
+                            disabled={isSubmitting}
+                            className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        >
+                            Submit
+                        </button>
+                    </Form>
+
+                )}
+            </Formik>
+        </div>
+    )
+}
+
+export default UserEditPassword

apps/web/components/Objects/Menu/ProfileArea.tsx

@@ -8,6 +8,7 @@ import { getNewAccessTokenUsingRefreshToken, getUserInfo } from "@services/auth/
 import { usePathname } from "next/navigation";
 import { useRouter } from "next/router";
 import path from "path";
+import { Settings } from "lucide-react";
 
 export interface Auth {
   access_token: string;
@@ -92,7 +93,7 @@ function ProfileArea() {
           <div>
             <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
           </div>
-          <Link href={"/settings"}><GearIcon /></Link>
+          <Link href={"/dash"}><Settings /></Link>
         </AccountArea>
       )}
     </ProfileAreaStyled>
@@ -104,22 +105,7 @@ const AccountArea = styled.div`
   display: flex;
   place-items: center;
 
-  a{
-    // center the gear icon
-    display: flex;
-    place-items: center;
-    place-content: center;
-    width: 29px;
-    height: 29px;
-    border-radius: 19px;
-    background: #F5F5F5;
   
-    // hover effect
-    &:hover{
-      background: #E5E5E5;
-
-    }
-  }
 
   div {
     margin-right: 10px;

apps/web/components/Security/HeaderProfileBox.tsx

@@ -30,11 +30,11 @@ export const HeaderProfileBox = () => {
       {auth.isAuthenticated && (
         <AccountArea className="-space-x-2">
           <div className="text-xs px-4 text-gray-600 p-1.5 rounded-full bg-gray-50">{auth.userInfo.username}</div>
-          <div className="flex -space-x-2 items-center">
+          <div className="flex items-center">
             <div className="py-4">
               <Avvvatars size={26} value={auth.userInfo.user_uuid} style="shape" />
             </div>
-            <Link className="bg-gray-50 p-1.5 rounded-full" href={"/settings"}><GearIcon fontSize={26} /></Link>
+            <Link className="" href={"/dash"}><GearIcon fontSize={26} /></Link>
           </div>
         </AccountArea>
       )}

apps/web/services/courses/chapters.ts

@@ -1,4 +1,4 @@
-import { OrderPayload } from "@components/Dashboard/EditCourseStructure/EditCourseStructure";
+import { OrderPayload } from "@components/Dashboard/Course/EditCourseStructure/EditCourseStructure";
 import { getAPIUrl } from "@services/config/config";
 import { RequestBody, RequestBodyWithAuthHeader, errorHandling } from "@services/utils/ts/requests";
 

apps/web/services/settings/profile.ts

@@ -6,8 +6,8 @@ import { RequestBody, errorHandling } from "@services/utils/ts/requests";
  GET requests are called from the frontend using SWR (https://swr.vercel.app/)
 */
 
-export async function updateProfile(data: any) {
+export async function updateProfile(data: any,user_id: number) {
-  const result: any = await fetch(`${getAPIUrl()}users/user_id/` + data.user_id, RequestBody("PUT", data, null))
+  const result: any = await fetch(`${getAPIUrl()}users/` + user_id, RequestBody("PUT", data, null))
   const res = await errorHandling(result);
   return res;
 }