feat: add profile settings page

front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx

@@ -3,9 +3,9 @@ import Link from "next/link";
 import { useRouter } from "next/navigation";
 import React from "react";
 import styled from "styled-components";
-import { Title } from "../../../../components/UI/Elements/Styles/Title";
-import { getAPIUrl, getBackendUrl, getUriWithOrg } from "../../../../services/config";
-import { deleteCourseFromBackend } from "../../../../services/courses/courses";
+import { Title } from "@components/UI/Elements/Styles/Title";
+import { getAPIUrl, getBackendUrl, getUriWithOrg } from "@services/config";
+import { deleteCourseFromBackend } from "@services/courses/courses";
 import useSWR, { mutate } from "swr";
 import { swrFetcher } from "@services/utils/requests";
 import { Edit2, Trash } from "lucide-react";

front/app/_orgs/[orgslug]/(withmenu)/layout.tsx

@@ -0,0 +1,15 @@
+import "@styles/globals.css";
+import { Menu } from "@components/UI/Elements/Menu";
+import AuthProvider from "@components/Security/AuthProvider";
+
+export default function RootLayout({ children, params }: { children: React.ReactNode , params:any}) {
+  
+  return (
+    <>
+      <AuthProvider>
+        <Menu></Menu>
+        {children}
+      </AuthProvider>
+    </>
+  );
+}

front/app/_orgs/[orgslug]/layout.tsx

@@ -7,7 +7,6 @@ export default function RootLayout({ children, params }: { children: React.React
   return (
     <>
       <AuthProvider>
-        <Menu></Menu>
         {children}
       </AuthProvider>
     </>

front/app/_orgs/[orgslug]/settings/account/profile/page.tsx

@@ -0,0 +1,52 @@
+"use client";
+import { AuthContext } from '@components/Security/AuthProvider';
+import React, { useEffect } from 'react'
+import { Formik, Form, Field, ErrorMessage } from 'formik';
+import { updateProfile } from '@services/settings/profile';
+
+function SettingsProfilePage() {
+
+    const auth: any = React.useContext(AuthContext);
+
+
+
+    return (
+        <div>
+
+            {auth.isAuthenticated && (
+                <div>
+                    <h1>Profile Settings</h1>
+                    <br /><br />
+
+                    <Formik
+                        initialValues={auth.userInfo.user_object}
+
+                        onSubmit={(values, { setSubmitting }) => {
+                            setTimeout(() => {
+                                alert(JSON.stringify(values, null, 2));
+                                setSubmitting(false);
+                                updateProfile(values)
+                            }, 400);
+                        }}
+                    >
+                        {({ isSubmitting }) => (
+                            <Form>
+                                Full name  <Field type="textarea" name="full_name" /><br />
+                                Email  <Field type="email" name="email" /><br />
+                                Bio  <Field as="textarea" type="textarea" name="bio" /><br />
+                                <button type="submit" disabled={isSubmitting}>
+                                    Submit
+                                </button>
+                            </Form>
+                        )}
+                    </Formik>
+                </div>
+            )}
+
+
+        </div>
+
+    )
+}
+
+export default SettingsProfilePage

front/app/_orgs/[orgslug]/settings/head.tsx

@@ -0,0 +1,15 @@
+import { createStitches } from '@stitches/react';
+
+export const { getCssText } = createStitches();
+
+export default function Head() {
+    return (
+      <>
+        <title>Settings</title>
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <link rel="icon" href="/favicon.ico" />
+        <style id="stitches" dangerouslySetInnerHTML={{ __html: getCssText() }} />
+      </>
+    )
+  }
+  

front/app/_orgs/[orgslug]/settings/layout.tsx

@@ -0,0 +1,88 @@
+"use client";
+import React, { createContext, useState } from 'react'
+import { styled } from '@stitches/react';
+import Link from 'next/link';
+import { AuthContext } from '@components/Security/AuthProvider';
+import Avvvatars from 'avvvatars-react';
+
+
+
+
+function SettingsLayout({ children, params }: { children: React.ReactNode, params: any }) {
+    const auth: any = React.useContext(AuthContext);
+
+    return (
+        <>
+            <Main>
+                <LeftWrapper>
+                    {auth.isAuthenticated && (
+                        <Avvvatars value={auth.userInfo.user_object.user_id} style="shape" />
+                    )}
+                    <LeftMenuWrapper>
+                        <MenuTitle>Account</MenuTitle>
+                        <ul>
+                            <li><Link href="/settings/account/profile">Profile</Link></li>
+                            <li><Link href="/settings/account/passwords">Passwords</Link></li>
+                        </ul>
+                    </LeftMenuWrapper>
+                </LeftWrapper>
+                <RightWrapper>
+                    {children}
+                </RightWrapper>
+            </Main>
+        </>
+    )
+}
+
+export default SettingsLayout
+
+
+const Main = styled('div', {
+    display: 'flex',
+})
+
+const LeftWrapper = styled('div', {
+    width: '250px',
+    background: "linear-gradient(348.55deg, #010101 -8.61%, #343434 105.52%);",
+    height: '100vh',
+    padding: '20px',
+})
+
+const LeftMenuWrapper = styled('div', {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '20px',
+
+    ul: {
+        listStyle: 'none',
+        padding: 0,
+        margin: 0,
+        li: {
+            marginBottom: '10px',
+            a: {
+                color: '#ffffff8c',
+                textDecoration: 'none',
+                fontSize: '14px',
+                fontWeight: 'bold',
+                '&:hover': {
+                    textDecoration: 'underline',
+                }
+            }
+        }
+    }
+
+})
+
+const MenuTitle = styled('h3', {
+    color: 'white',
+    fontSize: '18px',
+    fontWeight: 'bold',
+    marginBottom: '20px',
+})
+
+const RightWrapper = styled('div', {
+    flex: 1,
+    padding: '20px',
+    boxSizing: 'border-box',
+    margin: '40px',
+})

front/app/_orgs/[orgslug]/settings/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+function Settings() {
+  return (
+    <div>Settings</div>
+  )
+}
+
+export default Settings