feat: init org thumbnails creation & edition & redesign dash org config page

apps/api/migrations/versions/040ccb1d456e_add_thumbnail_image_to_orgs.py

@@ -0,0 +1,30 @@
+"""Add thumbnail image to orgs
+
+Revision ID: 040ccb1d456e
+Revises: 83b6d9d6f57a
+Create Date: 2024-09-27 10:23:50.508031
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa # noqa: F401
+import sqlmodel # noqa: F401
+
+# revision identifiers, used by Alembic.
+revision: str = '040ccb1d456e'
+down_revision: Union[str, None] = '83b6d9d6f57a'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('organization', sa.Column('thumbnail_image', sa.String(), nullable=True))
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('organization', 'thumbnail_image')
+    # ### end Alembic commands ###

apps/api/src/db/organizations.py

@@ -12,6 +12,7 @@ class OrganizationBase(SQLModel):
     slug: str
     email: str
     logo_image: Optional[str]
+    thumbnail_image: Optional[str]
 
 
 class Organization(OrganizationBase, table=True):

apps/api/src/routers/orgs.py

@@ -38,6 +38,7 @@ from src.services.orgs.orgs import (
     update_org,
     update_org_logo,
     update_org_signup_mechanism,
+    update_org_thumbnail,
 )
 
 
@@ -303,7 +304,7 @@ async def api_update_org_logo(
     db_session: Session = Depends(get_db_session),
 ):
     """
-    Get single Org by Slug
+    Update org logo
     """
     return await update_org_logo(
         request=request,
@@ -314,6 +315,26 @@ async def api_update_org_logo(
     )
 
 
+@router.put("/{org_id}/thumbnail")
+async def api_update_org_thumbnail(
+    request: Request,
+    org_id: str,
+    thumbnail_file: UploadFile,
+    current_user: PublicUser = Depends(get_current_user),
+    db_session: Session = Depends(get_db_session),
+):
+    """
+    Update org thumbnail
+    """
+    return await update_org_thumbnail(
+        request=request,
+        thumbnail_file=thumbnail_file,
+        org_id=org_id,
+        current_user=current_user,
+        db_session=db_session,
+    )
+
+
 @router.get("/user/page/{page}/limit/{limit}")
 async def api_user_orgs(
     request: Request,

apps/api/src/services/orgs/orgs.py

@@ -34,9 +34,10 @@ from src.db.organizations import (
     OrganizationRead,
     OrganizationUpdate,
 )
-from src.services.orgs.logos import upload_org_logo
 from fastapi import HTTPException, UploadFile, status, Request
 
+from src.services.orgs.uploads import upload_org_logo, upload_org_thumbnail
+
 
 async def get_organization(
     request: Request,
@@ -421,6 +422,42 @@ async def update_org_logo(
 
     return {"detail": "Logo updated"}
 
+async def update_org_thumbnail(
+    request: Request,
+    thumbnail_file: UploadFile,
+    org_id: str,
+    current_user: PublicUser | AnonymousUser,
+    db_session: Session,
+):
+    statement = select(Organization).where(Organization.id == org_id)
+    result = db_session.exec(statement)
+
+    org = result.first()
+
+    if not org:
+        raise HTTPException(
+            status_code=404,
+            detail="Organization not found",
+        )
+
+    # RBAC check
+    await rbac_check(request, org.org_uuid, current_user, "update", db_session)
+
+    # Upload logo
+    name_in_disk = await upload_org_thumbnail(thumbnail_file, org.org_uuid)
+
+    # Update org
+    org.thumbnail_image = name_in_disk
+
+    # Complete the org object
+    org.update_date = str(datetime.now())
+
+    db_session.add(org)
+    db_session.commit()
+    db_session.refresh(org)
+
+    return {"detail": "Thumbnail updated"}
+
 
 async def delete_org(
     request: Request,

apps/api/src/services/orgs/uploads.py

@@ -16,3 +16,18 @@ async def upload_org_logo(logo_file, org_uuid):
     )
 
     return name_in_disk
+
+
+async def upload_org_thumbnail(thumbnail_file, org_uuid):
+    contents = thumbnail_file.file.read()
+    name_in_disk = f"{uuid4()}.{thumbnail_file.filename.split('.')[-1]}"
+
+    await upload_content(
+        "thumbnails",
+        "orgs",
+        org_uuid,
+        contents,
+        name_in_disk,
+    )
+
+    return name_in_disk

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

@@ -3,7 +3,7 @@ import BreadCrumbs from '@components/Dashboard/UI/BreadCrumbs'
 import { getUriWithOrg } from '@services/config/config'
 import { Info } from 'lucide-react'
 import Link from 'next/link'
-import React from 'react'
+import React, { useEffect } from 'react'
 import { motion } from 'framer-motion'
 import OrgEditGeneral from '@components/Dashboard/Org/OrgEditGeneral/OrgEditGeneral'
 
@@ -13,14 +13,31 @@ export type OrgParams = {
 }
 
 function OrgPage({ params }: { params: OrgParams }) {
+  const [H1Label, setH1Label] = React.useState('')
+  const [H2Label, setH2Label] = React.useState('')
+
+  function handleLabels() {
+    if (params.subpage == 'general') {
+      setH1Label('General')
+      setH2Label('Manage your organization settings')
+    }
+  }
+
+  useEffect(() => {
+    handleLabels()
+  }, [params.subpage, params])
+
   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="org"></BreadCrumbs>
-        <div className="my-2 tracking-tighter">
+        <div className="my-2  py-3">
-          <div className="w-100 flex justify-between">
+          <div className="w-100 flex flex-col space-y-1">
-            <div className="pt-3 flex font-bold text-4xl">
+            <div className="pt-3 flex font-bold text-4xl tracking-tighter">
-              Organization Settings
+              {H1Label}
+            </div>
+            <div className="flex font-medium text-gray-400 text-md">
+              {H2Label}{' '}
             </div>
           </div>
         </div>

apps/web/components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

apps/web/components/Dashboard/Org/OrgEditGeneral/OrgEditGeneral.tsx

@@ -4,12 +4,16 @@ import { Field, Form, Formik } from 'formik'
 import {
   updateOrganization,
   uploadOrganizationLogo,
+  uploadOrganizationThumbnail,
 } from '@services/settings/org'
-import { UploadCloud } from 'lucide-react'
+import { UploadCloud, Info, Check, FileWarning } from 'lucide-react'
 import { revalidateTags } from '@services/utils/ts/requests'
 import { useRouter } from 'next/navigation'
 import { useOrg } from '@components/Contexts/OrgContext'
 import { useLHSession } from '@components/Contexts/LHSessionContext'
+import { getOrgLogoMediaDirectory, getOrgThumbnailMediaDirectory } from '@services/media/media'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import { Toaster, toast } from 'react-hot-toast';
 
 interface OrganizationValues {
   name: string
@@ -17,32 +21,54 @@ interface OrganizationValues {
   slug: string
   logo: string
   email: string
+  thumbnail: string
 }
 
-function OrgEditGeneral(props: any) {
+function OrgEditGeneral() {
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const router = useRouter()
-  const router = useRouter();
+  const session = useLHSession() as any
-  const session = useLHSession() as any;
+  const access_token = session?.data?.tokens?.access_token
-  const access_token = session?.data?.tokens?.access_token;
   const org = useOrg() as any
-  // ...
+  const [selectedTab, setSelectedTab] = useState<'logo' | 'thumbnail'>('logo');
+  const [localLogo, setLocalLogo] = useState<string | null>(null);
+  const [localThumbnail, setLocalThumbnail] = useState<string | null>(null);
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files.length > 0) {
       const file = event.target.files[0]
-      setSelectedFile(file)
+      setLocalLogo(URL.createObjectURL(file))
+      const loadingToast = toast.loading('Uploading logo...');
+      try {
+        await uploadOrganizationLogo(org.id, file, access_token)
+        await new Promise((r) => setTimeout(r, 1500))
+        toast.success('Logo Updated', { id: loadingToast });
+        router.refresh()
+      } catch (err) {
+        toast.error('Failed to upload logo', { id: loadingToast });
+      }
     }
   }
 
-  const uploadLogo = async () => {
+  const handleThumbnailChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (selectedFile) {
+    if (event.target.files && event.target.files.length > 0) {
-      let org_id = org.id
+      const file = event.target.files[0];
-      await uploadOrganizationLogo(org_id, selectedFile, access_token)
+      setLocalThumbnail(URL.createObjectURL(file));
-      setSelectedFile(null) // Reset the selected file
+      const loadingToast = toast.loading('Uploading thumbnail...');
-      await revalidateTags(['organizations'], org.slug)
+      try {
-      router.refresh()
+        await uploadOrganizationThumbnail(org.id, file, access_token);
+        await new Promise((r) => setTimeout(r, 1500));
+        toast.success('Thumbnail Updated', { id: loadingToast });
+        router.refresh()
+      } catch (err) {
+        toast.error('Failed to upload thumbnail', { id: loadingToast });
+      }
     }
-  }
+  };
+
+  const handleImageButtonClick = (inputId: string) => (event: React.MouseEvent) => {
+    event.preventDefault(); // Prevent form submission
+    document.getElementById(inputId)?.click();
+  };
 
   let orgValues: OrganizationValues = {
     name: org?.name,
@@ -50,21 +76,25 @@ function OrgEditGeneral(props: any) {
     slug: org?.slug,
     logo: org?.logo,
     email: org?.email,
+    thumbnail: org?.thumbnail,
   }
 
   const updateOrg = async (values: OrganizationValues) => {
-    let org_id = org.id
+    const loadingToast = toast.loading('Updating organization...');
-    await updateOrganization(org_id, values, access_token)
+    try {
-
+      await updateOrganization(org.id, values, access_token)
-    // Mutate the org
+      await revalidateTags(['organizations'], org.slug)
-    await revalidateTags(['organizations'], org.slug)
+      toast.success('Organization Updated', { id: loadingToast });
-    router.refresh()
+    } catch (err) {
+      toast.error('Failed to update organization', { id: loadingToast });
+    }
   }
 
-  useEffect(() => { }, [org])
+  useEffect(() => {}, [org])
 
   return (
     <div className="ml-10 mr-10 mx-auto bg-white rounded-xl shadow-sm px-6 py-5">
+      <Toaster />
       <Formik
         enableReinitialize
         initialValues={orgValues}
@@ -77,71 +107,127 @@ function OrgEditGeneral(props: any) {
       >
         {({ isSubmitting }) => (
           <Form>
-            <label className="block mb-2 font-bold" htmlFor="name">
+            <div className="flex space-x-8">
-              Name
+              <div className="max-w-md flex-grow">
-            </label>
+                <label className="block mb-2 font-bold" htmlFor="name">
-            <Field
+                  Name
-              className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                </label>
-              type="text"
+                <Field
-              name="name"
+                  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-            />
+                  type="text"
+                  name="name"
+                />
 
-            <label className="block mb-2 font-bold" htmlFor="description">
+                <label className="block mb-2 font-bold" htmlFor="description">
-              Description
+                  Description
-            </label>
+                </label>
-            <Field
+                <Field
-              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 px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-              type="text"
+                  type="text"
-              name="description"
+                  name="description"
-            />
+                />
 
-            <label className="block mb-2 font-bold" htmlFor="slug">
+                <label className="block mb-2 font-bold" htmlFor="slug">
-              Logo
+                  Slug
-            </label>
+                </label>
+                <Field
+                  className="w-full px-4 py-2 mb-4 border rounded-lg bg-gray-200 cursor-not-allowed"
+                  disabled
+                  type="text"
+                  name="slug"
+                />
 
-            <div className="flex items-center justify-center w-full ">
+                <label className="block mb-2 font-bold" htmlFor="email">
-              <input
+                  Email
-                className="w-full px-4 py-2 mr-1 border rounded-lg bg-gray-200 cursor-not-allowed"
+                </label>
-                type="file"
+                <Field
-                name="logo"
+                  className="w-full px-4 py-2 mb-4 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                onChange={handleFileChange}
+                  type="email"
-              />
+                  name="email"
-              <button
+                />
-                type="button"
+
-                onClick={uploadLogo}
+                <button
-                disabled={isSubmitting || selectedFile === null}
+                  type="submit"
-                className="px-6 py-3 text-white bg-gray-500 rounded-lg  hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-black"
+                  disabled={isSubmitting}
-              >
+                  className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
-                <UploadCloud size={24} />
+                >
-              </button>
+                  Submit
+                </button>
+              </div>
+
+              <div className="flex flex-col grow  space-y-3">
+                <Tabs defaultValue="logo" className="w-full ">
+                  <TabsList className="grid w-full grid-cols-2 mb-20">
+                    <TabsTrigger value="logo">Logo</TabsTrigger>
+                    <TabsTrigger value="thumbnail">Thumbnail</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="logo">
+                    <div className="flex flex-col space-y-3">
+                      <div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20">
+                        <div className="flex flex-col justify-center items-center mt-10">
+                          <div
+                            className="w-[200px] h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
+                            style={{ backgroundImage: `url(${localLogo || getOrgLogoMediaDirectory(org?.org_uuid, org?.logo_image)})` }}
+                          />
+                        </div>
+                        <div className="flex justify-center items-center">
+                          <input
+                            type="file"
+                            id="fileInput"
+                            style={{ display: 'none' }}
+                            onChange={handleFileChange}
+                          />
+                          <button
+                            type="button"
+                            className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 py-2 mt-4 flex"
+                            onClick={handleImageButtonClick('fileInput')}
+                          >
+                            <UploadCloud size={16} className="mr-2" />
+                            <span>Change Logo</span>
+                          </button>
+                        </div>
+                      </div>
+                      <div className="flex text-xs space-x-2 items-center text-gray-500 justify-center">
+                        <Info size={13} />
+                        <p>Accepts PNG , JPG</p>
+                      </div>
+                    </div>
+                  </TabsContent>
+                  <TabsContent value="thumbnail">
+                    <div className="flex flex-col space-y-3">
+                      <div className="w-auto bg-gray-50 rounded-xl outline outline-1 outline-gray-200 h-[200px] shadow mx-20">
+                        <div className="flex flex-col justify-center items-center mt-10">
+                          <div
+                            className="w-[200px] h-[100px] bg-contain bg-no-repeat bg-center rounded-lg nice-shadow bg-white"
+                            style={{ backgroundImage: `url(${localThumbnail || getOrgThumbnailMediaDirectory(org?.org_uuid, org?.thumbnail_image)})` }}
+                          />
+                        </div>
+                        <div className="flex justify-center items-center">
+                          <input
+                            type="file"
+                            id="thumbnailInput"
+                            style={{ display: 'none' }}
+                            onChange={handleThumbnailChange}
+                          />
+                          <button
+                            type="button"
+                            className="font-bold antialiased items-center text-gray text-sm rounded-md px-4 py-2 mt-4 flex"
+                            onClick={handleImageButtonClick('thumbnailInput')}
+                          >
+                            <UploadCloud size={16} className="mr-2" />
+                            <span>Change Thumbnail</span>
+                          </button>
+                        </div>
+                      </div>
+                      <div className="flex text-xs space-x-2 items-center text-gray-500 justify-center">
+                        <Info size={13} />
+                        <p>Accepts PNG, JPG</p>
+                      </div>
+                    </div>
+                  </TabsContent>
+                </Tabs>
+              </div>
             </div>
-
-            <label className="block mb-2 font-bold" htmlFor="slug">
-              Slug
-            </label>
-            <Field
-              className="w-full px-4 py-2 mb-4 border rounded-lg bg-gray-200 cursor-not-allowed"
-              disabled
-              type="text"
-              name="slug"
-            />
-
-            <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"
-            />
-
-            <button
-              type="submit"
-              disabled={isSubmitting}
-              className="px-6 py-3 text-white bg-black rounded-lg shadow-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-black"
-            >
-              Submit
-            </button>
           </Form>
         )}
       </Formik>

apps/web/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

apps/web/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

apps/web/package.json

@@ -18,6 +18,7 @@
     "@radix-ui/react-form": "^0.0.3",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-switch": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@sentry/nextjs": "^8.27.0",
     "@stitches/react": "^1.2.8",
@@ -32,6 +33,8 @@
     "@tiptap/starter-kit": "^2.6.6",
     "@types/randomcolor": "^0.5.9",
     "avvvatars-react": "^0.4.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
     "formik": "^2.4.6",
     "framer-motion": "^10.18.0",
@@ -59,6 +62,7 @@
     "swr": "^2.2.5",
     "tailwind-merge": "^2.5.2",
     "tailwind-scrollbar": "^3.1.0",
+    "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.1",
     "y-indexeddb": "^9.0.12",
     "y-prosemirror": "^1.2.12",

apps/web/pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@radix-ui/react-switch':
         specifier: ^1.1.0
         version: 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-tabs':
+        specifier: ^1.1.0
+        version: 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-tooltip':
         specifier: ^1.1.2
         version: 1.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -71,6 +74,12 @@ importers:
       avvvatars-react:
         specifier: ^0.4.2
         version: 0.4.2(csstype@3.1.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      class-variance-authority:
+        specifier: ^0.7.0
+        version: 0.7.0
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       dayjs:
         specifier: ^1.11.13
         version: 1.11.13
@@ -152,6 +161,9 @@ importers:
       tailwind-scrollbar:
         specifier: ^3.1.0
         version: 3.1.0(tailwindcss@3.4.10)
+      tailwindcss-animate:
+        specifier: ^1.0.7
+        version: 1.0.7(tailwindcss@3.4.10)
       uuid:
         specifier: ^9.0.1
         version: 9.0.1
@@ -799,6 +811,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.0':
+    resolution: {integrity: sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.0.1':
     resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==}
     peerDependencies:
@@ -848,6 +873,15 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-direction@1.1.0':
+    resolution: {integrity: sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-dismissable-layer@1.1.0':
     resolution: {integrity: sha512-/UovfmmXGptwGcBQawLzvn2jOfM0t4z3/uKffoBlj724+n3FvBbZ7M0aaBOmkp6pqFYpO4yx8tSVJjx3Fl2jig==}
     peerDependencies:
@@ -997,6 +1031,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-roving-focus@1.1.0':
+    resolution: {integrity: sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-slot@1.0.2':
     resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==}
     peerDependencies:
@@ -1028,6 +1075,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-tabs@1.1.0':
+    resolution: {integrity: sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-tooltip@1.1.2':
     resolution: {integrity: sha512-9XRsLwe6Yb9B/tlnYCPVUd/TFS4J7HuOZW345DCeC6vKIxQGMZdx21RK4VoZauPD5frgkXTYVS5y90L+3YBn4w==}
     peerDependencies:
@@ -1817,9 +1877,20 @@ packages:
   cjs-module-lexer@1.4.0:
     resolution: {integrity: sha512-N1NGmowPlGBLsOZLPvm48StN04V4YvQRL0i6b7ctrVY3epjP/ct7hFLOItz6pDIvRjwpfPxi52a2UWV2ziir8g==}
 
+  class-variance-authority@0.7.0:
+    resolution: {integrity: sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==}
+
   client-only@0.0.1:
     resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
 
+  clsx@2.0.0:
+    resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==}
+    engines: {node: '>=6'}
+
+  clsx@2.1.1:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -3535,6 +3606,11 @@ packages:
     peerDependencies:
       tailwindcss: 3.x
 
+  tailwindcss-animate@1.0.7:
+    resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==}
+    peerDependencies:
+      tailwindcss: '>=3.0.0 || insiders'
+
   tailwindcss@3.4.10:
     resolution: {integrity: sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==}
     engines: {node: '>=14.0.0'}
@@ -4475,6 +4551,18 @@ snapshots:
       '@types/react': 18.2.74
       '@types/react-dom': 18.2.23
 
+  '@radix-ui/react-collection@1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-slot': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.74
+      '@types/react-dom': 18.2.23
+
   '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.74)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
@@ -4523,6 +4611,12 @@ snapshots:
       '@types/react': 18.2.74
       '@types/react-dom': 18.2.23
 
+  '@radix-ui/react-direction@1.1.0(@types/react@18.2.74)(react@18.3.1)':
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      '@types/react': 18.2.74
+
   '@radix-ui/react-dismissable-layer@1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -4654,6 +4748,23 @@ snapshots:
       '@types/react': 18.2.74
       '@types/react-dom': 18.2.23
 
+  '@radix-ui/react-roving-focus@1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-collection': 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-callback-ref': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.74
+      '@types/react-dom': 18.2.23
+
   '@radix-ui/react-slot@1.0.2(@types/react@18.2.74)(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.25.6
@@ -4684,6 +4795,22 @@ snapshots:
       '@types/react': 18.2.74
       '@types/react-dom': 18.2.23
 
+  '@radix-ui/react-tabs@1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.0
+      '@radix-ui/react-context': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      '@radix-ui/react-id': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.0(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.2.74)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.2.74
+      '@types/react-dom': 18.2.23
+
   '@radix-ui/react-tooltip@1.1.2(@types/react-dom@18.2.23)(@types/react@18.2.74)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.0
@@ -5637,8 +5764,16 @@ snapshots:
 
   cjs-module-lexer@1.4.0: {}
 
+  class-variance-authority@0.7.0:
+    dependencies:
+      clsx: 2.0.0
+
   client-only@0.0.1: {}
 
+  clsx@2.0.0: {}
+
+  clsx@2.1.1: {}
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -5937,7 +6072,7 @@ snapshots:
       eslint: 8.57.0
       eslint-import-resolver-node: 0.3.9
       eslint-import-resolver-typescript: 3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0)
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
       eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0)
       eslint-plugin-react: 7.35.0(eslint@8.57.0)
       eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0)
@@ -5968,7 +6103,7 @@ snapshots:
       is-bun-module: 1.1.0
       is-glob: 4.0.3
     optionalDependencies:
-      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0)
+      eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0)
     transitivePeerDependencies:
       - '@typescript-eslint/parser'
       - eslint-import-resolver-node
@@ -5986,7 +6121,7 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.0):
+  eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.4.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0):
     dependencies:
       array-includes: 3.1.8
       array.prototype.findlastindex: 1.2.5
@@ -7578,6 +7713,10 @@ snapshots:
     dependencies:
       tailwindcss: 3.4.10
 
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.10):
+    dependencies:
+      tailwindcss: 3.4.10
+
   tailwindcss@3.4.10:
     dependencies:
       '@alloc/quick-lru': 5.2.0

apps/web/services/media/media.ts

@@ -91,3 +91,8 @@ export function getOrgLogoMediaDirectory(orgUUID: string, fileId: string) {
   let uri = `${getMediaUrl()}content/orgs/${orgUUID}/logos/${fileId}`
   return uri
 }
+
+export function getOrgThumbnailMediaDirectory(orgUUID: string, fileId: string) {
+  let uri = `${getMediaUrl()}content/orgs/${orgUUID}/thumbnails/${fileId}`
+  return uri
+}

apps/web/services/settings/org.ts

@@ -38,3 +38,19 @@ export async function uploadOrganizationLogo(
   const res = await errorHandling(result)
   return res
 }
+
+export async function uploadOrganizationThumbnail(
+  org_id: string,
+  thumbnail_file: any,
+  access_token: string
+) {
+  // Send file thumbnail as form data
+  const formData = new FormData()
+  formData.append('thumbnail_file', thumbnail_file)
+  const result: any = await fetch(
+    `${getAPIUrl()}orgs/` + org_id + '/thumbnail',
+    RequestBodyFormWithAuthHeader('PUT', formData, null, access_token)
+  )
+  const res = await errorHandling(result)
+  return res
+}

apps/web/styles/globals.css

@@ -108,3 +108,62 @@ a {
   transform: translateY(-20px);
   transition: opacity 300ms, transform 300ms;
 }
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem;}
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;}}
+
+@layer base {
+  * {
+    @apply border-border;}
+  body {
+    @apply bg-background text-foreground;}}

apps/web/tailwind.config.js

@@ -1,14 +1,64 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
+    darkMode: ['class'],
+    content: [
     './app/**/*.{js,jsx,ts,tsx}',
     './components/**/*.{js,jsx,ts,tsx}',
   ],
   theme: {
-    extend: {},
+  	extend: {
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		}
+  	}
   },
   plugins: [
     require('tailwind-scrollbar')({ nocompatible: true }),
-  ],
+      require("tailwindcss-animate")
+],
 }
 

apps/web/tsconfig.json

@@ -25,7 +25,8 @@
       "@images/*": ["public/img/*"],
       "@styles/*": ["styles/*"],
       "@services/*": ["services/*"],
-      "@editor/*": ["components/Objects/Editor/*"]
+      "@editor/*": ["components/Objects/Editor/*"],
+      "@/*": ["./*"]  
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/**/*.tsx", ".next/types/**/*.ts"],