feature/BQ-253 into [email protected] 🧊 partner pages

app/org/(panel)/organizations/[organizationId]/(components)/OrganizationHeader/OrganizationHeader.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-import background from '@/assets/images/background/organization.png';
+import organizationBackgroundImage from '@/assets/images/background/organization.png';
 import logo from '@/assets/images/logo/organization.png';
 import { I18nText } from '@/components/common';
 import { Typography } from '@/components/ui';
@@ -16,20 +16,23 @@ export const OrganizationHeader = ({ organization }: OrganizationHeaderProps) =>
     <div className='relative mt-2.5 flex h-64 w-full flex-col items-center'>
       <Image
         priority={false}
-        className='h-[168px] w-full rounded-lg'
-        src={organization.background || background}
+        className='h-[168px] w-full rounded-lg object-cover'
+        src={organization.background || organizationBackgroundImage}
         alt='org-background'
       />
       <div className='absolute bottom-0 mx-4 mt-auto h-36 w-[96%] rounded-lg border-none bg-background/70 pb-4 pl-4 pr-4 pt-3 shadow-sm backdrop-blur-lg'>
         <div className='flex gap-5'>
-          <Image
-            priority={false}
-            className='h-20 w-20 rounded border-none'
-            width={80}
-            height={80}
-            src={organization.avatar || logo}
-            alt='org-background'
-          />
+          <div>
+            <Image
+              priority={false}
+              className='h-15 w-15 rounded border-none'
+              width={60}
+              height={60}
+              src={organization.avatar || logo}
+              alt='org-background'
+            />
+          </div>
+
           <div className='flex flex-col justify-center'>
             <Typography variant='h5' tag='h5'>
               {organization.name}

app/org/(panel)/organizations/[organizationId]/(components)/OrganizationHeader/components/OrganizationHeaderTabs/OrganizationHeaderTabs.tsx

@@ -8,7 +8,7 @@ import { Tabs, TabsList } from '@/components/ui';
 import type { ProfileTab } from '../../../../(constants)/navigation';
 import {
   FRANCHISEE_PROFILE_TABS,
-  ORGANIZATION_PROFILE_TAB_VALUES,
+  ORG_ORGANIZATION_TAB_VALUES,
   ORGANIZER_PROFILE_TABS,
   PARTNER_PROFILE_TABS,
   SPONSOR_PROFILE_TABS
@@ -31,7 +31,7 @@ export const OrganizationHeaderTabs = ({ organization }: OrganizationHeaderTabsP
   const segment = useSelectedLayoutSegment();
 
   return (
-    <Tabs defaultValue={ORGANIZATION_PROFILE_TAB_VALUES[segment?.toUpperCase() ?? 'PROFILE']}>
+    <Tabs defaultValue={ORG_ORGANIZATION_TAB_VALUES[segment?.toUpperCase() ?? 'PROFILE']}>
       <TabsList className='items-top text-organization-tabs flex w-full justify-end gap-1 bg-transparent'>
         {TABS[organization.type].map((tab, index) => {
           const Icon = tab.icon;

app/org/(panel)/organizations/[organizationId]/(constants)/navigation.tsx

@@ -3,21 +3,21 @@ import { ActivityIcon, MapPinIcon, UserIcon, UsersRoundIcon } from 'lucide-react
 
 import { ROUTES } from '@/utils/constants';
 
-export const ORGANIZATION_PROFILE_TAB_VALUES = {
+export const ORG_ORGANIZATION_TAB_VALUES = {
   PROFILE: 'profile',
   ADDRESSES: 'addresses',
   EMPLOYEES: 'employees',
   ACTIVITIES: 'activities',
   SCHEDULE: 'schedule'
-};
+} as const;
 
 export interface ProfileTab {
   icon: LucideIcon;
   title: string;
   value: string;
-  route: (typeof ROUTES.ORG.ORGANIZATIONS)[Exclude<
+  route: (typeof ROUTES.ORG.ORGANIZATIONS)[Extract<
     keyof typeof ROUTES.ORG.ORGANIZATIONS,
-    'ROOT' | 'DASHBOARD'
+    keyof typeof ORG_ORGANIZATION_TAB_VALUES
   >];
 }
 
@@ -26,7 +26,7 @@ export const FRANCHISEE_PROFILE_TABS: ProfileTab[] = [
   {
     icon: UserIcon,
     title: 'organization.profile.header.profile',
-    value: ORGANIZATION_PROFILE_TAB_VALUES.PROFILE,
+    value: ORG_ORGANIZATION_TAB_VALUES.PROFILE,
     route: ROUTES.ORG.ORGANIZATIONS.PROFILE
   }
 ];
@@ -35,7 +35,7 @@ export const SPONSOR_PROFILE_TABS: ProfileTab[] = [
   {
     icon: UserIcon,
     title: 'organization.profile.header.profile',
-    value: ORGANIZATION_PROFILE_TAB_VALUES.PROFILE,
+    value: ORG_ORGANIZATION_TAB_VALUES.PROFILE,
     route: ROUTES.ORG.ORGANIZATIONS.PROFILE
   }
 ];
@@ -44,31 +44,31 @@ export const PARTNER_PROFILE_TABS: ProfileTab[] = [
   {
     icon: UserIcon,
     title: 'organization.profile.header.profile',
-    value: ORGANIZATION_PROFILE_TAB_VALUES.PROFILE,
+    value: ORG_ORGANIZATION_TAB_VALUES.PROFILE,
     route: ROUTES.ORG.ORGANIZATIONS.PROFILE
   },
   {
     icon: MapPinIcon,
     title: 'organization.profile.header.addresses',
-    value: ORGANIZATION_PROFILE_TAB_VALUES.ADDRESSES,
+    value: ORG_ORGANIZATION_TAB_VALUES.ADDRESSES,
     route: ROUTES.ORG.ORGANIZATIONS.ADDRESSES
   },
   {
     icon: UsersRoundIcon,
     title: 'organization.profile.header.employees',
-    value: ORGANIZATION_PROFILE_TAB_VALUES.EMPLOYEES,
+    value: ORG_ORGANIZATION_TAB_VALUES.EMPLOYEES,
     route: ROUTES.ORG.ORGANIZATIONS.EMPLOYEES
   },
   {
     icon: ActivityIcon,
     title: 'organization.profile.header.activities',
-    value: ORGANIZATION_PROFILE_TAB_VALUES.ACTIVITIES,
+    value: ORG_ORGANIZATION_TAB_VALUES.ACTIVITIES,
     route: ROUTES.ORG.ORGANIZATIONS.ACTIVITIES
   },
   {
     icon: ActivityIcon,
     title: 'organization.profile.header.schedule',
-    value: ORGANIZATION_PROFILE_TAB_VALUES.SCHEDULE,
+    value: ORG_ORGANIZATION_TAB_VALUES.SCHEDULE,
     route: ROUTES.ORG.ORGANIZATIONS.SCHEDULE
   }
 ];

app/org/(panel)/organizations/[organizationId]/addresses/(components)/ActionAddressForm/hooks/useActionAddressForm.tsx

@@ -75,7 +75,7 @@ export const useActionAddressForm = ({
 
     if (actionType === 'add') {
       const postOrganizationActionAddressParams = {
-        params: { ...requestParams, legalId: params.organizationId },
+        params: { ...requestParams, legalEntityId: params.organizationId },
         action: actionType
       } as const;
 

app/org/(panel)/organizations/[organizationId]/addresses/loading.tsx

@@ -8,7 +8,7 @@ const OrganizationAddressesLoading = () => (
       <Skeleton className='h-10 w-36 bg-background' />
     </div>
 
-    <div className='justify-center gap-5 2xlx:grid-cols-2 xlx:flex xlx:flex-wrap 2xl:grid-cols-3 xl:grid'>
+    <div className='justify-center gap-5 2xlx:grid-cols-2 xlx:flex xlx:flex-wrap xl:grid 2xl:grid-cols-3'>
       {Array(5)
         .fill({})
         .map((_, index) => (

app/org/(panel)/organizations/[organizationId]/addresses/page.tsx

@@ -25,7 +25,7 @@ const OrganizationAddressesPage = async ({ params }: OrganizationAddressesPagePr
         </Typography>
         <AddAddressDialog />
       </div>
-      <div className='gap-5 2xlx:grid-cols-2 xlx:flex xlx:flex-wrap 2xl:grid-cols-3 xl:grid'>
+      <div className='gap-5 2xlx:grid-cols-2 xlx:flex xlx:flex-wrap xl:grid 2xl:grid-cols-3'>
         {getLegalAddressesByLegalIdResponse.map((address) => (
           <AddressCard key={address.id} address={address} />
         ))}

app/org/(panel)/organizations/[organizationId]/layout.tsx

@@ -12,7 +12,8 @@ interface OrganizationPageLayoutProps {
 
 const OrganizationPageLayout = async ({ params, children }: OrganizationPageLayoutProps) => {
   const organization = await getOrganizationById({
-    params: { id: params.organizationId }
+    params: { id: params.organizationId },
+    config: { cache: 'no-store' }
   });
 
   return (

app/org/(panel)/organizations/[organizationId]/profile/@card/page.tsx

@@ -30,7 +30,7 @@ interface OrganizationProfileCardSlotProps {
 const OrganizationProfileCardPage = async ({ params }: OrganizationProfileCardSlotProps) => {
   const getOrganizationByIdResponse = await getOrganizationById({
     params: { id: params.organizationId },
-    config: { cache: 'no-cache' }
+    config: { cache: 'no-store' }
   });
 
   return (
@@ -42,14 +42,16 @@ const OrganizationProfileCardPage = async ({ params }: OrganizationProfileCardSl
           </Typography>
         </InfoCardTitle>
         <InfoCardAction className='rounded-none bg-transparent'>
-          <EditOrganizationProfileDialog
-            organization={getOrganizationByIdResponse}
-            trigger={
-              <Button variant='ghost' className='ml-3 mr-1 h-8 w-8 p-2'>
-                <Edit3Icon size={20} strokeWidth={1.5} />
-              </Button>
-            }
-          />
+          <div className='right absolute right-2 top-2 z-10'>
+            <EditOrganizationProfileDialog
+              organization={getOrganizationByIdResponse}
+              trigger={
+                <Button variant='ghost' size='icon'>
+                  <Edit3Icon size={20} strokeWidth={1.5} />
+                </Button>
+              }
+            />
+          </div>
         </InfoCardAction>
       </InfoCardHeader>
       <InfoCardContent className='flex w-full flex-col px-7'>

app/org/(panel)/organizations/[organizationId]/profile/@statistics/page.tsx

@@ -14,7 +14,7 @@ import {
 } from '@/components/ui';
 
 const OrganizationProfileStatisticsPage = () => (
-  <div className='flex gap-4'>
+  <div className='flex flex-col gap-4 sm:flex-row'>
     <InfoCard>
       <InfoCardHeader className='p-5'>
         <InfoCardTitle>

app/org/(panel)/organizations/[organizationId]/profile/@tariff/page.tsx

@@ -26,7 +26,7 @@ const OrganizationProfileTariffPage = async ({ params }: OrganizationProfileTari
   const getTariffByLegalEntityIdResponse = await getTariffByLegalEntityId({
     params: { legalEntityId: params.organizationId },
     config: {
-      cache: 'no-cache'
+      cache: 'no-store'
     }
   });
 
@@ -54,7 +54,7 @@ const OrganizationProfileTariffPage = async ({ params }: OrganizationProfileTari
           />
         </InfoCardAction>
       </InfoCardHeader>
-      <InfoCardContent className='mt-3 flex w-full justify-center'>
+      <InfoCardContent className='mt-1 flex w-full justify-center'>
         <InfoCardItem className='flex flex-col items-center border-none'>
           <InfoCardItemTitle>
             <Typography variant='h3' tag='h3'>

app/org/(panel)/organizations/[organizationId]/profile/layout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-interface OrganizationProfilePageLayoutProps {
+interface OrganizationProfileLayoutProps {
   children: React.ReactNode;
   card: React.ReactNode;
   changes: React.ReactNode;
@@ -13,10 +13,10 @@ const OrganizationProfileLayout = ({
   changes,
   statistics,
   tariff
-}: OrganizationProfilePageLayoutProps) => (
-  <div className='flex justify-center gap-[22px] smx:flex-col'>
-    {card}
-    <div className='flex w-1/2 flex-col gap-[22px] smx:w-full'>
+}: OrganizationProfileLayoutProps) => (
+  <div className='flex flex-1 flex-col justify-center gap-4 lg:flex-row'>
+    <div className='flex-1'>{card}</div>
+    <div className='flex flex-1 flex-col gap-4'>
       {tariff}
       {statistics}
       {changes}

app/org/auth/page.tsx

@@ -1,26 +1,26 @@
 import Image from 'next/image';
 
-import AuthImage from '@/assets/images/auth.webp';
+import authImage from '@/assets/images/auth.webp';
 import { I18nText, Logo } from '@/components/common';
 import { Typography } from '@/components/ui';
 
 import { LoginForm } from './(components)/LoginForm/LoginForm';
 
 const OrgAuthPage = () => (
-  <div className='flex min-h-screen flex-col items-center justify-between p-2'>
-    <div className='flex flex-1 items-center justify-around gap-28 xlx:gap-12 xlx:p-5'>
-      <div className='flex flex-col space-y-6'>
-        <div className='mb-10'>
+  <div className='flex min-h-screen flex-col items-center justify-between p-10'>
+    <div className='flex flex-1 items-center justify-around gap-12 p-5 md:gap-28'>
+      <div className='flex max-w-[450px] flex-col space-y-6'>
+        <div className='mb-20 flex justify-start'>
           <Logo className='fill-taiga' />
         </div>
         <div>
-          <Typography variant='h2' tag='h2' className='my-[30px] text-center text-4xl xlx:text-2xl'>
+          <Typography variant='h2' tag='h1' className='my-[30px] text-start text-4xl'>
             <I18nText path='org.auth.title' />
           </Typography>
           <LoginForm />
         </div>
       </div>
-      <Image src={AuthImage} alt='auth image' className='w-[36rem] xlx:block xlx:w-96 mdx:hidden' />
+      <Image src={authImage} alt='auth image' className='mt-20 hidden xl:block' />
     </div>
     <footer className='m-3 flex flex-wrap justify-center divide-x divide-solid divide-gray-700 *:px-1 mdx:divide-x-0'>
       <Typography variant='body3' className='text-foreground'>

app/partner/[organizationId]/(components)/OrganizationHeader/OrganizationHeader.tsx → app/partner/(components)/OrganizationHeader/OrganizationHeader.tsx

@@ -2,7 +2,7 @@
 
 import Image from 'next/image';
 
-import background from '@/assets/images/background/organization.png';
+import organizationBackgroundImage from '@/assets/images/background/organization.png';
 import logo from '@/assets/images/logo/organization.png';
 import { I18nText } from '@/components/common';
 import { Typography } from '@/components/ui';
@@ -26,21 +26,24 @@ export const OrganizationHeader = ({ organization }: OrganizationHeaderProps) =>
       <div className='relative mt-2.5 flex h-64 w-full flex-col items-center'>
         <Image
           priority={false}
-          className='h-[168px] w-full rounded-lg'
-          src={organization.background || background}
+          className='h-[168px] w-full rounded-lg object-cover'
+          src={organization.background || organizationBackgroundImage}
           alt='org-background'
         />
         <div className='absolute bottom-0 mx-4 mt-auto flex h-36 w-[96%] flex-col gap-5 rounded-lg border-none bg-background/70 pb-4 pl-4 pr-4 pt-3 shadow-sm backdrop-blur-lg'>
           <div className='flex justify-between'>
             <div className='flex gap-5'>
-              <Image
-                priority={false}
-                className='h-15 w-15 rounded border-none'
-                width={60}
-                height={60}
-                src={organization.avatar || logo}
-                alt='org-background'
-              />
+              <div>
+                <Image
+                  priority={false}
+                  className='h-15 w-15 rounded border-none'
+                  width={60}
+                  height={60}
+                  src={organization.avatar || logo}
+                  alt='org-background'
+                />
+              </div>
+
               <div className='flex flex-col justify-center'>
                 <Typography variant='h5' tag='h5'>
                   {organization.name}

app/partner/[organizationId]/(components)/OrganizationHeader/components/ActionPartnerForm/ActionPartnerForm.tsx → app/partner/(components)/OrganizationHeader/components/ActionPartnerForm/ActionPartnerForm.tsx

@@ -20,7 +20,7 @@ import {
 } from '@/components/ui';
 import { useI18n } from '@/utils/contexts';
 
-import type { PartnerData } from '../../(constants)/types';
+import type { PartnerData } from '../../constants/types';
 
 import { useActionPartnerForm } from './hooks/useActionPartnerForm';
 

app/partner/[organizationId]/(components)/OrganizationHeader/components/ActionPartnerForm/hooks/useActionPartnerForm.ts → app/partner/(components)/OrganizationHeader/components/ActionPartnerForm/hooks/useActionPartnerForm.ts

@@ -6,7 +6,7 @@ import { toast } from 'sonner';
 import { usePutUserMutation } from '@/utils/api/hooks/usePutUserMutation';
 import { useI18n } from '@/utils/contexts';
 
-import type { PartnerData } from '../../../(constants)/types';
+import type { PartnerData } from '../../../constants/types';
 import type { PartnerSchema } from '../constants/actionPartnerSchema';
 import { actionPartnerSchema } from '../constants/actionPartnerSchema';
 

app/partner/[organizationId]/(components)/OrganizationHeader/components/DesktopProfileMenu/DesktopProfileMenu.tsx → app/partner/(components)/OrganizationHeader/components/DesktopProfileMenu/DesktopProfileMenu.tsx

@@ -4,7 +4,7 @@ import Image from 'next/image';
 import { I18nText, NotificationsDropdownMenu, ThemeSwitcher } from '@/components/common';
 import { Button, CircularButton, Typography } from '@/components/ui';
 
-import type { PartnerData } from '../../(constants)/types';
+import type { PartnerData } from '../../constants/types';
 
 interface DesktopProfileMenuProps {
   partner: PartnerData;

app/partner/[organizationId]/(components)/OrganizationHeader/components/EditPartnerDialog/EditPartnerDialog.tsx → app/partner/(components)/OrganizationHeader/components/EditPartnerDialog/EditPartnerDialog.tsx

@@ -11,7 +11,7 @@ import {
   Typography
 } from '@/components/ui';
 
-import type { PartnerData } from '../../(constants)/types';
+import type { PartnerData } from '../../constants/types';
 import { ActionPartnerForm } from '../ActionPartnerForm/ActionPartnerForm';
 
 interface EditPartnerDialogProps extends React.ComponentProps<typeof Dialog> {
@@ -28,7 +28,7 @@ export const EditPartnerDialog = ({ onEdit, partner, ...props }: EditPartnerDial
       <DialogHeader>
         <DialogTitle>
           <Typography variant='h4' tag='h4'>
-            <I18nText path='dialog.addEmployee.title' />
+            <I18nText path='dialog.editEmployee.title' />
           </Typography>
         </DialogTitle>
       </DialogHeader>

app/partner/[organizationId]/(components)/OrganizationHeader/components/MobileProfileDropdownMenu/MobileProfileDropdownMenu.tsx → app/partner/(components)/OrganizationHeader/components/MobileProfileDropdownMenu/MobileProfileDropdownMenu.tsx

@@ -13,7 +13,7 @@ import {
   Typography
 } from '@/components/ui';
 
-import type { PartnerData } from '../../(constants)/types';
+import type { PartnerData } from '../../constants/types';
 
 import { useMobileProfileDropdownMenu } from './hooks/useMobileProfileDropdownMenu';