feat: init payments config backend & dash frontend

apps/web/components/Dashboard/Payments/PaymentsConfigurationPage.tsx

@@ -0,0 +1,148 @@
+import React, { useState } from 'react';
+import { useOrg } from '@components/Contexts/OrgContext';
+import { SiStripe } from '@icons-pack/react-simple-icons'
+import { useLHSession } from '@components/Contexts/LHSessionContext';
+import { getPaymentConfigs, createPaymentConfig, updatePaymentConfig } from '@services/payments/payments';
+import FormLayout, { ButtonBlack, Input, Textarea, FormField, FormLabelAndMessage, Flex } from '@components/StyledElements/Form/Form';
+import { Check, Edit } from 'lucide-react';
+import toast from 'react-hot-toast';
+import useSWR, { mutate } from 'swr';
+import Modal from '@components/StyledElements/Modal/Modal';
+
+const PaymentsConfigurationPage: React.FC = () => {
+    const org = useOrg() as any;
+    const session = useLHSession() as any;
+    const access_token = session?.data?.tokens?.access_token;
+    const { data: paymentConfigs, error, isLoading } = useSWR(
+        () => (org && access_token ? [`/payments/${org.id}/config`, access_token] : null),
+        ([url, token]) => getPaymentConfigs(org.id, token)
+    );
+
+    const stripeConfig = paymentConfigs?.find((config: any) => config.provider === 'stripe');
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    const enableStripe = async () => {
+        try {
+            const newConfig = { provider: 'stripe', enabled: true };
+            const config = await createPaymentConfig(org.id, newConfig, access_token);
+            toast.success('Stripe enabled successfully');
+            mutate([`/payments/${org.id}/config`, access_token]);
+        } catch (error) {
+            console.error('Error enabling Stripe:', error);
+            toast.error('Failed to enable Stripe');
+        }
+    };
+
+    const editConfig = async () => {
+        setIsModalOpen(true);
+    };
+
+    if (isLoading) {
+        return <div>Loading...</div>;
+    }
+
+    if (error) {
+        return <div>Error loading payment configuration</div>;
+    }
+
+    return (
+        <div>
+            <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-4 py-4">
+                <div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 rounded-md mb-3">
+                    <h1 className="font-bold text-xl text-gray-800">Payments Configuration</h1>
+                    <h2 className="text-gray-500 text-md">Manage your organization payments configuration</h2>
+                </div>
+                <div className="flex flex-col py-4 px-6  rounded-lg light-shadow">
+                    {stripeConfig ? (
+                        <div className="flex items-center justify-between bg-white ">
+                            <div className="flex items-center space-x-3">
+                                <Check className="text-green-500" size={24} />
+                                <span className="text-lg font-semibold">Stripe is enabled</span>
+                            </div>
+                            <ButtonBlack onClick={editConfig} className="flex items-center space-x-2 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300">
+                                <Edit size={16} />
+                                <span>Edit Configuration</span>
+                            </ButtonBlack>
+                        </div>
+                    ) : (
+                        <ButtonBlack onClick={enableStripe} className="flex items-center space-x-2 bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300">
+                            <SiStripe size={16} />
+                            <span>Enable Stripe</span>
+                        </ButtonBlack>
+                    )}
+                </div>
+            </div>
+            {stripeConfig && (
+                <EditStripeConfigModal
+                    orgId={org.id}
+                    configId={stripeConfig.id}
+                    accessToken={access_token}
+                    isOpen={isModalOpen}
+                    onClose={() => setIsModalOpen(false)}
+                />
+            )}
+        </div>
+    );
+};
+
+interface EditStripeConfigModalProps {
+    orgId: number;
+    configId: string;
+    accessToken: string;
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const EditStripeConfigModal: React.FC<EditStripeConfigModalProps> = ({ orgId, configId, accessToken, isOpen, onClose }) => {
+    const [stripeKey, setStripeKey] = useState('');
+    const [stripeSecretKey, setStripeSecretKey] = useState('');
+    const [stripeWebhookSecret, setStripeWebhookSecret] = useState('');
+
+    const handleSubmit = async () => {
+        try {
+            const stripe_config = {
+                stripe_key: stripeKey,
+                stripe_secret_key: stripeSecretKey,
+                stripe_webhook_secret: stripeWebhookSecret,
+            };
+            const updatedConfig = {
+                provider_config: stripe_config,
+            };
+            await updatePaymentConfig(orgId, configId, updatedConfig, accessToken);
+            toast.success('Configuration updated successfully');
+            mutate([`/payments/${orgId}/config`, accessToken]);
+            onClose();
+        } catch (error) {
+            console.error('Error updating config:', error);
+            toast.error('Failed to update configuration');
+        }
+    };
+
+    return (
+        <Modal isDialogOpen={isOpen} dialogTitle="Edit Stripe Configuration" dialogDescription='Edit your stripe configuration' onOpenChange={onClose}
+            dialogContent={
+                <FormLayout onSubmit={handleSubmit}>
+                    <FormField name="stripe-key">
+                        <FormLabelAndMessage label="Stripe Key" />
+                        <Input type="password" value={stripeKey} onChange={(e) => setStripeKey(e.target.value)} />
+                    </FormField>
+                    <FormField name="stripe-secret-key">
+                        <FormLabelAndMessage label="Stripe Secret Key" />
+                        <Input type="password" value={stripeSecretKey} onChange={(e) => setStripeSecretKey(e.target.value)} />
+                    </FormField>
+                    <FormField name="stripe-webhook-secret">
+                        <FormLabelAndMessage label="Stripe Webhook Secret" />
+                        <Input type="password" value={stripeWebhookSecret} onChange={(e) => setStripeWebhookSecret(e.target.value)} />
+                    </FormField>
+                    <Flex css={{ marginTop: 25, justifyContent: 'flex-end' }}>
+                        <ButtonBlack type="submit" className="bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition duration-300">
+                            Save
+                        </ButtonBlack>
+                    </Flex>
+                </FormLayout>
+            }
+        />
+    );
+};
+
+export default PaymentsConfigurationPage;

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

@@ -1,11 +1,11 @@
 'use client';
 import { useOrg } from '@components/Contexts/OrgContext';
-import { Backpack, Book, ChevronRight, School, User, Users } from 'lucide-react'
+import { Backpack, Book, ChevronRight, CreditCard, School, User, Users } from 'lucide-react'
 import Link from 'next/link'
 import React from 'react'
 
 type BreadCrumbsProps = {
-  type: 'courses' | 'user' | 'users' | 'org' | 'orgusers' | 'assignments'
+  type: 'courses' | 'user' | 'users' | 'org' | 'orgusers' | 'assignments' | 'payments'
   last_breadcrumb?: string
 }
 
@@ -65,6 +65,15 @@ function BreadCrumbs(props: BreadCrumbsProps) {
           ) : (
             ''
           )}
+          {props.type == 'payments' ? (
+            <div className="flex space-x-2 items-center">
+              {' '}
+              <CreditCard className="text-gray" size={14}></CreditCard>
+              <Link href="/dash/payments">Payments</Link>
+            </div>
+          ) : (
+            ''
+          )}
           <div className="flex items-center space-x-1 first-letter:uppercase">
             {props.last_breadcrumb ? <ChevronRight size={17} /> : ''}
             <div className="first-letter:uppercase">

apps/web/components/Objects/Menus/DashMenu.tsx

@@ -0,0 +1,195 @@
+'use client'
+import { useOrg } from '@components/Contexts/OrgContext'
+import { signOut } from 'next-auth/react'
+import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
+import LearnHouseDashboardLogo from '@public/dashLogo.png'
+import { Backpack, BookCopy, CreditCard, Home, LogOut, School, Settings, Users } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import React, { useEffect } from 'react'
+import UserAvatar from '../UserAvatar'
+import AdminAuthorization from '@components/Security/AdminAuthorization'
+import { useLHSession } from '@components/Contexts/LHSessionContext'
+import { getUriWithOrg, getUriWithoutOrg } from '@services/config/config'
+
+
+function DashLeftMenu() {
+
+  const org = useOrg() as any
+  const session = useLHSession() as any
+  const [loading, setLoading] = React.useState(true)
+
+  function waitForEverythingToLoad() {
+    if (org && session) {
+      return true
+    }
+    return false
+  }
+
+  async function logOutUI() {
+    const res = await signOut({ redirect: true, callbackUrl: getUriWithoutOrg('/login?orgslug=' + org.slug) })
+    if (res) {
+      getUriWithOrg(org.slug, '/')
+    }
+  }
+
+  useEffect(() => {
+    if (waitForEverythingToLoad()) {
+      setLoading(false)
+    }
+  }, [loading])
+
+  return (
+    <div
+      style={{
+        background:
+          'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(271.56% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgb(20 19 19)',
+      }}
+      className="flex flex-col w-[90px] bg-black text-white shadow-xl h-screen sticky top-0"
+    >
+      <div className="flex flex-col h-full">
+        <div className="flex h-20 mt-6">
+          <Link
+            className="flex flex-col items-center mx-auto space-y-3"
+            href={'/'}
+          >
+            <ToolTip
+              content={'Back to Home'}
+              slateBlack
+              sideOffset={8}
+              side="right"
+            >
+              <Image
+                alt="Learnhouse logo"
+                width={40}
+                src={LearnHouseDashboardLogo}
+              />
+            </ToolTip>
+            <ToolTip
+              content={'Your Organization'}
+              slateBlack
+              sideOffset={8}
+              side="right"
+            >
+              <div className="py-1 px-3 bg-black/40 opacity-40 rounded-md text-[10px] justify-center text-center">
+                {org?.name}
+              </div>
+            </ToolTip>
+          </Link>
+        </div>
+        <div className="flex grow flex-col justify-center space-y-5 items-center mx-auto">
+          {/* <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> */}
+          <AdminAuthorization authorizationMode="component">
+            <ToolTip content={'Home'} slateBlack sideOffset={8} side="right">
+              <Link
+                className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
+                href={`/dash`}
+              >
+                <Home size={18} />
+              </Link>
+            </ToolTip>
+            <ToolTip content={'Courses'} slateBlack sideOffset={8} side="right">
+              <Link
+                className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
+                href={`/dash/courses`}
+              >
+                <BookCopy size={18} />
+              </Link>
+            </ToolTip>
+            <ToolTip content={'Assignments'} slateBlack sideOffset={8} side="right">
+              <Link
+                className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
+                href={`/dash/assignments`}
+              >
+                <Backpack size={18} />
+              </Link>
+            </ToolTip>
+            <ToolTip content={'Users'} slateBlack sideOffset={8} side="right">
+              <Link
+                className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
+                href={`/dash/users/settings/users`}
+              >
+                <Users size={18} />
+              </Link>
+            </ToolTip>
+            <ToolTip
+              content={'Payments'}
+              slateBlack
+              sideOffset={8}
+              side="right"
+            >
+              <Link
+                className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
+                href={`/dash/payments/general`}
+              >
+                <CreditCard size={18} />
+              </Link>
+            </ToolTip>
+            <ToolTip
+              content={'Organization'}
+              slateBlack
+              sideOffset={8}
+              side="right"
+            >
+              <Link
+                className="bg-white/5 rounded-lg p-2 hover:bg-white/10 transition-all ease-linear"
+                href={`/dash/org/settings/general`}
+              >
+                <School size={18} />
+              </Link>
+            </ToolTip>
+          </AdminAuthorization>
+        </div>
+        <div className="flex flex-col mx-auto pb-7 space-y-2">
+          <div className="flex items-center flex-col space-y-2">
+            <ToolTip
+              content={'@' + session.data.user.username}
+              slateBlack
+              sideOffset={8}
+              side="right"
+            >
+              <div className="mx-auto">
+                <UserAvatar border="border-4" width={35} />
+              </div>
+            </ToolTip>
+            <div className="flex items-center flex-col space-y-1">
+              <ToolTip
+                content={session.data.user.username + "'s Settings"}
+                slateBlack
+                sideOffset={8}
+                side="right"
+              >
+                <Link
+                  href={'/dash/user-account/settings/general'}
+                  className="py-3"
+                >
+                  <Settings
+                    className="mx-auto text-neutral-400 cursor-pointer"
+                    size={18}
+                  />
+                </Link>
+              </ToolTip>
+              <ToolTip
+                content={'Logout'}
+                slateBlack
+                sideOffset={8}
+                side="right"
+              >
+                <LogOut
+                  onClick={() => logOutUI()}
+                  className="mx-auto text-neutral-400 cursor-pointer"
+                  size={14}
+                />
+              </ToolTip>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DashLeftMenu
+

apps/web/components/Objects/Menus/OrgMenu/OrgMenu.tsx

@@ -3,12 +3,12 @@ import React from 'react'
 import Link from 'next/link'
 import { getUriWithOrg } from '@services/config/config'
 import { HeaderProfileBox } from '@components/Security/HeaderProfileBox'
-import MenuLinks from './MenuLinks'
+import MenuLinks from './OrgMenuLinks'
 import { getOrgLogoMediaDirectory } from '@services/media/media'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
 import { useOrg } from '@components/Contexts/OrgContext'
 
-export const Menu = (props: any) => {
+export const OrgMenu = (props: any) => {
   const orgslug = props.orgslug
   const session = useLHSession() as any;
   const access_token = session?.data?.tokens?.access_token;