refactor: refactor to follow Nextjs13 ways

src/Components/app/AppSidebar.tsx → src/app/(app)/AppSidebar.tsx

@@ -19,8 +19,8 @@ import { signOut, useSession } from 'next-auth/react';
 import { HOME_PAGE, SIGN_IN_PAGE } from '@/lib/client-route';
 import { capitalizeEachWord, log, ROLE_ID_OF } from '@/lib/utils';
 
-import { navList } from '@/Components/app/NavList.utils';
-import { SideBarUserInfo } from '@/Components/app/SideBarUserInfo';
+import { navList } from '@/app/(app)/NavList.utils';
+import { SideBarUserInfo } from '@/app/(app)/SideBarUserInfo';
 import { CkAcemLogo } from '@/Components/CkAcemLogo';
 import {
   useSidebarContext,

src/Components/app/ImportCodeProcess.tsx → src/app/(app)/codes/ImportCodeProcess.tsx

@@ -6,9 +6,6 @@ import {
   AccordionIcon,
   AccordionItem,
   AccordionPanel,
-  Alert,
-  AlertIcon,
-  Card,
   Skeleton,
   Stack,
   Text,
@@ -21,13 +18,13 @@ import { Fragment, useCallback, useEffect, useState } from 'react';
 import SockJS from 'sockjs-client';
 import Stomp from 'stompjs';
 
-import { fPercent } from '@/lib/format-number';
 import { POST_CODES_ROUTE, WEB_SOCKET_URL } from '@/lib/server-route';
 import { log } from '@/lib/utils';
 
-import { PreviewImportedCodes } from '@/Components/app/PreviewImportedCodes';
-import { ReadNewScholarshipCodes } from '@/Components/app/ReadNewScholarshipCodes';
-import { SelectScholarshipPeriod } from '@/Components/app/SelectScholarshipPeriod';
+import { ImportProgressMessage } from '@/app/(app)/codes/ImportProgressMessage';
+import { PreviewImportedCodes } from '@/app/(app)/codes/PreviewImportedCodes';
+import { ReadNewScholarshipCodes } from '@/app/(app)/codes/ReadNewScholarshipCodes';
+import { SelectScholarshipPeriod } from '@/app/(app)/codes/SelectScholarshipPeriod';
 import { useCopyToClipBoardToast } from '@/Components/componentFactory';
 import { checkCodeImportStatus } from '@/Services/codes.service';
 
@@ -43,37 +40,6 @@ function crateWebsocketConnection() {
   return Stomp.over(socket);
 }
 
-function ImportProgressMessage({
-  importInProgress,
-}: {
-  importInProgress: CodeImportStatus;
-}) {
-  const { processedPercentage } = importInProgress;
-  return (
-    <Alert
-      as={Card}
-      alignItems='flex-start'
-      flexDirection='row'
-      rounded='md'
-      status='error'
-      colorScheme='twitter'
-      bgColor='transparent'
-    >
-      <AlertIcon />
-      <Text>
-        L&apos;importation des codes est
-        {processedPercentage >= 100
-          ? ' terminée!'
-          : ` en cours... ${fPercent(processedPercentage)}`}
-        <Text as='span' display='block'>
-          Vous receverez une notification lorsque l&apos;importation sera
-          terminée!
-        </Text>
-      </Text>
-    </Alert>
-  );
-}
-
 export function ImportCodeProcess() {
   const [codes, setCodes] = useState<ScholarshipCodeWithPassport[]>([]);
   const [period, setPeriod] = useState<ScholarshipPeriod | undefined>();

src/app/(app)/codes/ImportProgressMessage.tsx

@@ -0,0 +1,36 @@
+import { Alert, AlertIcon, Card, Text } from '@chakra-ui/react';
+
+import { fPercent } from '@/lib/format-number';
+
+import { CodeImportStatus } from '@/types/app.types';
+
+export function ImportProgressMessage({
+  importInProgress,
+}: {
+  importInProgress: CodeImportStatus;
+}) {
+  const { processedPercentage } = importInProgress;
+  return (
+    <Alert
+      as={Card}
+      alignItems='flex-start'
+      flexDirection='row'
+      rounded='md'
+      status='error'
+      colorScheme='twitter'
+      bgColor='transparent'
+    >
+      <AlertIcon />
+      <Text>
+        L&apos;importation des codes est
+        {processedPercentage >= 100
+          ? ' terminée!'
+          : ` en cours... ${fPercent(processedPercentage)}`}
+        <Text as='span' display='block'>
+          Vous receverez une notification lorsque l&apos;importation sera
+          terminée!
+        </Text>
+      </Text>
+    </Alert>
+  );
+}

src/Components/app/ReadNewScholarshipCodes.tsx → src/app/(app)/codes/ReadNewScholarshipCodes.tsx

@@ -2,8 +2,8 @@ import { Alert, AlertIcon, Code, Stack, Text, VStack } from '@chakra-ui/react';
 
 import { csvFormat } from '@/lib/utils';
 
-import { DragAndDropZone } from '@/Components/app/DragAndDropZone';
-import { useCsvFileReading } from '@/Components/app/UseCsvFileReading';
+import { DragAndDropZone } from '@/app/(app)/codes/DragAndDropZone';
+import { useCsvFileReading } from '@/app/(app)/codes/UseCsvFileReading';
 
 import {
   ScholarshipCodeWithPassport,

src/app/(app)/codes/page.tsx

@@ -5,8 +5,8 @@ import { getServerSession } from 'next-auth';
 import { CODES_PAGE, getSignInPageWithNext } from '@/lib/client-route';
 import { log } from '@/lib/utils';
 
+import { ImportCodeProcess } from '@/app/(app)/codes/ImportCodeProcess';
 import { authOptions } from '@/app/api/auth/[...nextauth]/nextAuthOptions';
-import { ImportCodeProcess } from '@/Components/app/ImportCodeProcess';
 import { NotAllowedToAccessModalWarning } from '@/Components/modal/NotAllowedToAccessModalWarning';
 
 export default async function CodesPage() {

src/Components/dashboard/DashboardStats.tsx → src/app/(app)/dashboard/DashboardStats.tsx

@@ -13,10 +13,10 @@ import NextImage from 'next/image';
 import { useSession } from 'next-auth/react';
 import { useEffect, useState } from 'react';
 
+import { CodeAndMatriculeBarChart } from '@/app/(app)/dashboard/CodeAndMatriculeBarChart';
+import { DashboardWidgetSummary } from '@/app/(app)/dashboard/dashboardWidgetSummary';
+import { HistoryImport } from '@/app/(app)/dashboard/HistoryImport';
 import { useCopyToClipBoardToast } from '@/Components/componentFactory';
-import { CodeAndMatriculeBarChart } from '@/Components/dashboard/CodeAndMatriculeBarChart';
-import { DashboardWidgetSummary } from '@/Components/dashboard/dashboardWidgetSummary';
-import { HistoryImport } from '@/Components/dashboard/HistoryImport';
 import { getStats } from '@/Services/stats.service';
 
 import personStanding from '~/images/person-standing.png';

src/Components/dashboard/HistoryImport.tsx → src/app/(app)/dashboard/HistoryImport.tsx

@@ -19,8 +19,8 @@ import { useEffect, useState } from 'react';
 import { fShortenNumber } from '@/lib/format-number';
 import { formattedDate } from '@/lib/utils';
 
+import { OverViewImportHistory } from '@/app/(app)/dashboard/OverViewImportHistory';
 import { useCopyToClipBoardToast } from '@/Components/componentFactory';
-import { OverViewImportHistory } from '@/Components/dashboard/OverViewImportHistory';
 import { evenRowsBg, oddRowsBg } from '@/Components/TableStyles';
 import { getImportHistory } from '@/Services/codes.service';
 

src/Components/dashboard/dashboardWidgetSummary.tsx → src/app/(app)/dashboard/dashboardWidgetSummary.tsx

@@ -4,7 +4,7 @@ import { chakra, Icon, SimpleGrid } from '@chakra-ui/react';
 import NextImage from 'next/image';
 import { RiAdminFill } from 'react-icons/ri';
 
-import AppWidgetSummary from '@/Components/dashboard/AppWidgetSummary';
+import AppWidgetSummary from '@/app/(app)/dashboard/AppWidgetSummary';
 
 import glassUsers from '~/images/glass_users.png';
 import id from '~/images/id.png';

src/app/(app)/dashboard/page.tsx

@@ -1,6 +1,6 @@
 import { Text, VStack } from '@chakra-ui/react';
 
-import { DashboardStats } from '@/Components/dashboard/DashboardStats';
+import { DashboardStats } from '@/app/(app)/dashboard/DashboardStats';
 
 export default function DashboardPage() {
   return (

src/app/(app)/layout.tsx

@@ -4,8 +4,8 @@ import { ReactNode } from 'react';
 
 import { metadata as defaultMetadata } from '@/lib/seo.utils';
 
-import AppSidebar from '@/Components/app/AppSidebar';
-import { AppTopBar } from '@/Components/app/AppTopBar';
+import AppSidebar from '@/app/(app)/AppSidebar';
+import { AppTopBar } from '@/app/(app)/AppTopBar';
 import { ChakraProviders } from '@/Components/react-contexts/ChakraProviders';
 import NextAuthSessionProvider, {
   AppSessionWrapper,

src/app/(app)/profile/ProfileCover.tsx

@@ -0,0 +1,28 @@
+import { chakra } from '@chakra-ui/react';
+import Image from 'next/image';
+
+import cover from '~/images/cover_4.jpg';
+
+const NextImage = chakra(Image, {
+  shouldForwardProp: (prop) => ['width', 'height', 'src', 'alt'].includes(prop),
+});
+
+export function ProfileCover({ alt }: { alt: string }) {
+  return (
+    <NextImage
+      zIndex={-1}
+      position='absolute'
+      inset={0}
+      filter='saturate(0.5) contrast(1.2) brightness(0.7)'
+      src={cover}
+      alt={alt}
+      w='100%'
+      h='100%'
+      rounded='2xl'
+      objectFit='cover'
+      objectPosition='center'
+      color='white'
+      bgColor='primary.dark'
+    />
+  );
+}