Organize components into folders

hooks/useUserFiltering.ts

@@ -1,6 +1,6 @@
 import { FilterOptions, UserAPI } from '@utils/types';
 import { useMemo } from 'react';
-import { NO_EMAIL_TAGS } from '../src/components/FilterPopup';
+import { NO_EMAIL_TAGS } from '../src/components/dashboard/user_management/FilterPopup';
 
 const useUserFiltering = (
   users: UserAPI[],

src/components/AdminTeacherFields.tsx → src/components/absences/declare/AdminTeacherFields.tsx

@@ -4,7 +4,7 @@ import {
   FormLabel,
   Text,
 } from '@chakra-ui/react';
-import { SearchDropdown } from './SearchDropdown';
+import { SearchDropdown } from '../../ui/input/SearchDropdown';
 
 interface AdminTeacherFieldsProps {
   formData: {

src/components/DateOfAbsence.tsx → src/components/absences/declare/DateOfAbsence.tsx

@@ -10,7 +10,7 @@ import {
   Text,
 } from '@chakra-ui/react';
 import React, { useCallback, useEffect, useState } from 'react';
-import MiniCalendar from './MiniCalendar';
+import MiniCalendar from '../../calendar/MiniCalendar';
 
 interface DateOfAbsenceProps {
   dateValue: Date;

src/components/DeclareAbsenceForm.tsx → src/components/absences/declare/DeclareAbsenceForm.tsx

@@ -19,8 +19,8 @@ import { useState } from 'react';
 import { AdminTeacherFields } from './AdminTeacherFields';
 import { ConfirmAbsenceModal } from './ConfirmAbsenceModal';
 import { DateOfAbsence } from './DateOfAbsence';
-import { FileUpload } from './FileUpload';
-import { InputDropdown } from './InputDropdown';
+import { FileUpload } from '../../ui/input/FileUpload';
+import { InputDropdown } from '../../ui/input/InputDropdown';
 
 interface DeclareAbsenceFormProps {
   onClose?: () => void;

src/components/AbsenceDetails.tsx → src/components/absences/details/AbsenceDetails.tsx

@@ -24,7 +24,7 @@ import { IoEyeOutline } from 'react-icons/io5';
 import AbsenceFillThanks from './AbsenceFillThanks';
 import AbsenceStatusTag from './AbsenceStatusTag';
 import EditableNotes from './EditableNotes';
-import EditAbsenceForm from './EditAbsenceForm';
+import EditAbsenceForm from '../edit/EditAbsenceForm';
 import LessonPlanView from './LessonPlanView';
 
 interface AbsenceDetailsProps {

src/components/LessonPlanView.tsx → src/components/absences/details/LessonPlanView.tsx

@@ -13,7 +13,7 @@ import { LessonPlanFile } from '@utils/types';
 import { uploadFile } from '@utils/uploadFile';
 import { useEffect, useRef, useState } from 'react';
 import { FiFileText } from 'react-icons/fi';
-import { FileUpload } from './FileUpload';
+import { FileUpload } from '../../ui/input/FileUpload';
 
 const formatFileSize = (sizeInBytes: number) => {
   if (sizeInBytes === 0) return '0 B';

src/components/EditAbsenceForm.tsx → src/components/absences/edit/EditAbsenceForm.tsx

@@ -17,11 +17,11 @@ import { submitAbsence } from '@utils/submitAbsence';
 import { EventDetails } from '@utils/types';
 import { validateAbsenceForm } from '@utils/validateAbsenceForm';
 import { useState } from 'react';
-import { AdminTeacherFields } from './AdminTeacherFields';
+import { AdminTeacherFields } from '../declare/AdminTeacherFields';
 import { ConfirmEditModal } from './ConfirmEditModal';
-import { DateOfAbsence } from './DateOfAbsence';
-import { FileUpload } from './FileUpload';
-import { InputDropdown } from './InputDropdown';
+import { DateOfAbsence } from '../declare/DateOfAbsence';
+import { FileUpload } from '../../ui/input/FileUpload';
+import { InputDropdown } from '../../ui/input/InputDropdown';
 
 interface EditAbsenceFormProps {
   onClose?: () => void;

src/components/CalendarHeader.tsx → src/components/calendar/header/CalendarHeader.tsx

@@ -13,7 +13,7 @@ import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import { IoChevronBack, IoChevronForward, IoStatsChart } from 'react-icons/io5';
 import { AdminTeacherToggle } from './AdminTeacherToggle';
-import ProfileMenu from './ProfileMenu';
+import ProfileMenu from '../../ui/profile/ProfileMenu';
 
 interface CalendarHeaderProps {
   currentMonthYear: string;

src/components/CalendarSidebar.tsx → src/components/calendar/sidebar/CalendarSidebar.tsx

@@ -1,11 +1,11 @@
 import { AddIcon } from '@chakra-ui/icons';
 import { Box, Button, Flex, HStack, useTheme } from '@chakra-ui/react';
 import React, { useCallback, useEffect, useState } from 'react';
-import { TacetLogo } from '../components/SistemaLogoColour';
+import { TacetLogo } from '../../ui/branding/SistemaLogoColour';
 import AbsenceStatusAccordion from './AbsenceStatusAccordion';
 import ArchivedAccordion from './ArchivedAccordion';
 import LocationAccordion from './LocationAccordion';
-import MiniCalendar from './MiniCalendar';
+import MiniCalendar from '../MiniCalendar';
 import SubjectAccordion from './SubjectAccordion';
 
 interface CalendarSidebarProps {

src/components/DashboardHeader.tsx → src/components/dashboard/header/DashboardHeader.tsx

@@ -11,9 +11,9 @@ import { UserData } from '@utils/types';
 import { useRouter } from 'next/navigation';
 import { useCallback, useEffect, useState } from 'react';
 import { IoChevronBack, IoSettingsOutline } from 'react-icons/io5';
-import ExportAbsencesButton from './ExportAbsencesButton';
-import ProfileMenu from './ProfileMenu';
-import SystemOptionsModal from './SystemOptionsModal';
+import ExportAbsencesButton from '../../absences/ExportAbsencesButton';
+import ProfileMenu from '../../ui/profile/ProfileMenu';
+import SystemOptionsModal from '../../dashboard/system_options/SystemOptionsModal';
 import YearDropdown from './YearDropdown';
 
 interface DashboardHeaderProps {

src/components/MonthlyAbsencesCard.tsx → src/components/dashboard/stats/MonthlyAbsencesCard.tsx

@@ -20,7 +20,7 @@ import {
   XAxis,
   YAxis,
 } from 'recharts';
-import { CustomTooltip } from './CustomTooltip';
+import { CustomTooltip } from '../../ui/feedback/CustomTooltip';
 import DualColorBar from './DualColourBar';
 
 export default function MonthlyAbsencesCard({

src/components/TotalAbsencesCard.tsx → src/components/dashboard/stats/TotalAbsencesCard.tsx

@@ -10,7 +10,7 @@ import {
   VStack,
 } from '@chakra-ui/react';
 
-import CircularProgress from './CircularProgress';
+import CircularProgress from '../../ui/feedback/CircularProgress';
 
 interface TotalAbsencesProps {
   width: string;

src/components/EntityTable.tsx → src/components/dashboard/system_options/EntityTable.tsx

@@ -27,7 +27,7 @@ import {
   IoEllipsisHorizontal,
 } from 'react-icons/io5';
 import { LuInfo } from 'react-icons/lu';
-import AbsenceBox from './AbsenceBox';
+import AbsenceBox from '../../absences/AbsenceBox';
 
 export interface EntityTableItem {
   id: number;

src/components/SystemOptionsModal.tsx → src/components/dashboard/system_options/SystemOptionsModal.tsx

@@ -20,7 +20,7 @@ import {
 import { Location, SubjectAPI } from '@utils/types';
 import React, { useCallback, useEffect, useState } from 'react';
 import { IoCloseOutline, IoSettingsOutline } from 'react-icons/io5';
-import { useChangeManagement } from '../../hooks/useChangeManagement';
+import { useChangeManagement } from '../../../../hooks/useChangeManagement';
 import LocationsTable from './LocationsTable';
 import SubjectsTable from './SubjectsTable';
 import SystemChangesConfirmationDialog from './SystemChangesConfirmationDialog';

src/pages/calendar.tsx

@@ -26,12 +26,12 @@ import { getDayCellClassNames } from '@utils/getDayCellClassNames';
 import { EventDetails } from '@utils/types';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import AbsenceBox from '../components/AbsenceBox';
-import AbsenceDetails from '../components/AbsenceDetails';
-import CalendarHeader from '../components/CalendarHeader';
-import CalendarSidebar from '../components/CalendarSidebar';
-import { CalendarTabs } from '../components/CalendarTabs';
-import DeclareAbsenceForm from '../components/DeclareAbsenceForm';
+import AbsenceBox from '../components/absences/AbsenceBox';
+import AbsenceDetails from '../components/absences/details/AbsenceDetails';
+import CalendarHeader from '../components/calendar/header/CalendarHeader';
+import CalendarSidebar from '../components/calendar/sidebar/CalendarSidebar';
+import { CalendarTabs } from '../components/calendar/CalendarTabs';
+import DeclareAbsenceForm from '../components/absences/declare/DeclareAbsenceForm';
 
 const Calendar: React.FC = () => {
   const { refetchUserData, ...userData } = useUserData();

src/pages/dashboard.tsx

@@ -3,10 +3,10 @@ import { useUserData } from '@hooks/useUserData';
 import { Role, YearlyAbsenceData } from '@utils/types';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState, useCallback, useRef } from 'react';
-import DashboardHeader from '../components/DashboardHeader';
-import MonthlyAbsencesCard from '../components/MonthlyAbsencesCard';
-import TotalAbsencesCard from '../components/TotalAbsencesCard';
-import UserManagementCard from '../components/UserManagementCard';
+import DashboardHeader from '../components/dashboard/header/DashboardHeader';
+import MonthlyAbsencesCard from '../components/dashboard/stats/MonthlyAbsencesCard';
+import TotalAbsencesCard from '../components/dashboard/stats/TotalAbsencesCard';
+import UserManagementCard from '../components/dashboard/user_management/UserManagementCard';
 export default function DashboardPage() {
   const theme = useTheme();
   const userData = useUserData();

src/pages/index.tsx

@@ -2,8 +2,8 @@ import { Box, Flex, Text } from '@chakra-ui/react';
 import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
-import { SignInButton } from '../components/SignInButton';
-import { TacetLogo } from '../components/SistemaLogoColour';
+import { SignInButton } from '../components/ui/profile/SignInButton';
+import { TacetLogo } from '../components/ui/branding/SistemaLogoColour';
 
 export default function Index(): JSX.Element | null {
   const { data: session, status } = useSession();