Feat/calendar

package.json

@@ -14,36 +14,44 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.1",
+    "@hookform/resolvers": "^3.10.0",
     "@radix-ui/react-checkbox": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.5",
-    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-dialog": "^1.1.4",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
-    "@tanstack/react-query": "^5.59.20",
+    "@tanstack/react-query": "^5.64.2",
     "axios": "^1.7.7",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^3.6.0",
     "iron-session": "^8.0.4",
     "lucide-react": "^0.454.0",
+    "moment": "^2.30.1",
     "next": "^15.1.4",
     "react": "19.0.0-rc-02c0e824-20241028",
+    "react-big-calendar": "^1.17.1",
+    "react-day-picker": "^8.10.1",
     "react-dom": "19.0.0-rc-02c0e824-20241028",
     "react-hook-form": "^7.54.2",
     "react-icons": "^5.3.0",
     "react-toastify": "^10.0.6",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
+    "@tanstack/react-query-devtools": "^5.64.2",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-big-calendar": "^1.16.0",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
     "@typescript-eslint/parser": "^8.13.0",

src/app/dashboard/_components/SideMenu.tsx

@@ -48,9 +48,13 @@ const SideMenu = () => {
                 </li>
                 <li className='flex items-center'>
                   <div className='h-6 w-6 bg-muted-foreground'></div>
-                  <span className='ml-3 text-sm sm:text-base md:text-lg xl:text-xl'>
-                    Kalendarz
-                  </span>
+                  <Link href={`/dashboard/calendar`}>
+                    <span
+                      className={`ml-3 text-sm sm:text-base md:text-lg xl:text-xl ${isActive(`/dashboard/calendar`) ? 'font-bold' : 'font-normal'}`}
+                    >
+                      Kalendarz
+                    </span>
+                  </Link>
                 </li>
                 <li className='flex items-center'>
                   <div className='h-6 w-6 bg-muted-foreground'></div>

src/app/dashboard/calendar/_components/AddEventDialog.tsx

@@ -0,0 +1,170 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { DateTimePicker } from '@/components/ui/dateTimePicker';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { getQueryClient } from '@/lib/getQueryClient';
+import { sendEvent } from '@/services/events/sendEvent';
+import { Driver, Event } from '@/services/events/types';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { toast } from 'react-toastify';
+
+export default function AddEventDialog({ drivers }: { drivers: Driver[] }) {
+  const [open, setOpen] = useState(false);
+  const queryClient = getQueryClient();
+  const methods = useForm({
+    defaultValues: {
+      title: '',
+      driverId: '',
+      start: new Date(),
+      end: new Date(),
+    },
+  });
+
+  const { mutate } = useMutation<void, Error, Event>({
+    mutationFn: sendEvent,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['events'] });
+      toast.success('Wydarzenie zostało dodane');
+      setOpen(false);
+      methods.reset();
+    },
+    onError: (error: Error) => {
+      console.error('Error creating event:', error);
+      toast.error('wystąpił błąd');
+    },
+  });
+
+  const onSubmit = (data: Event) => {
+    const { title, driverId, start, end } = data;
+    if (!title || !driverId || !start || !end) {
+      toast.info('Please fill in all fields');
+      return;
+    }
+    mutate({
+      title,
+      driverId,
+      start: start,
+      end: end,
+    });
+  };
+
+  const selectedDriver = methods.watch('driverId');
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant='outline' className='mt-4'>
+          Dodaj wydarzenie
+        </Button>
+      </DialogTrigger>
+      <DialogContent className='sm:max-w-[425px]'>
+        <DialogHeader>
+          <DialogTitle>Dodaj nowe wydarzenie</DialogTitle>
+          <DialogDescription>
+            Wprowadź szczegóły wydarzenia. Zapisz zmiany gdy skończysz.
+          </DialogDescription>
+        </DialogHeader>
+        <FormProvider {...methods}>
+          <form onSubmit={methods.handleSubmit(onSubmit)}>
+            <div className='grid gap-4 py-4'>
+              <div className='grid grid-cols-4 items-center gap-4'>
+                <Label htmlFor='title' className='text-right'>
+                  Tytuł
+                </Label>
+                <Input
+                  id='title'
+                  {...methods.register('title')}
+                  className='col-span-3'
+                />
+              </div>
+              <div className='grid grid-cols-4 items-center gap-4'>
+                <Label htmlFor='driver' className='text-right'>
+                  Kursant
+                </Label>
+                <div className='col-span-3'>
+                  <Select
+                    value={selectedDriver}
+                    onValueChange={(value: string) =>
+                      methods.setValue('driverId', value)
+                    }
+                  >
+                    <SelectTrigger className='w-full'>
+                      <SelectValue placeholder='Wybierz kursanta' />
+                    </SelectTrigger>
+                    <SelectContent className='fixed left-0 top-2 z-[9999] border-none shadow-none'>
+                      {drivers.length > 0 ? (
+                        drivers.map((driver) => (
+                          <SelectItem
+                            key={driver.id}
+                            value={driver.id.toString()}
+                          >
+                            {driver.name}
+                          </SelectItem>
+                        ))
+                      ) : (
+                        <SelectItem disabled value={'clear'}>
+                          Brak kursantów
+                        </SelectItem>
+                      )}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+              <div className='grid grid-cols-4 items-center gap-4'>
+                <Label htmlFor='start-date' className='text-right'>
+                  Data rozpoczęcia
+                </Label>
+                <div className='col-span-3'>
+                  <DateTimePicker
+                    value={methods.watch('start')}
+                    onChange={(date) => methods.setValue('start', date)}
+                  />
+                </div>
+              </div>
+              <div className='grid grid-cols-4 items-center gap-4'>
+                <Label htmlFor='end-date' className='text-right'>
+                  Data zakończenia
+                </Label>
+                <div className='col-span-3'>
+                  <DateTimePicker
+                    value={methods.watch('end') ?? null}
+                    onChange={(date) => methods.setValue('end', date)}
+                  />
+                </div>
+              </div>
+            </div>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button type='button' variant='secondary'>
+                  Anuluj
+                </Button>
+              </DialogClose>
+              <Button type='submit'>Zapisz wydarzenia</Button>
+            </DialogFooter>
+          </form>
+        </FormProvider>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/app/dashboard/calendar/_components/BigCalendar/BigCalendar.tsx

@@ -0,0 +1,70 @@
+'use client';
+import { messages } from '@/constants/calendar';
+import { getEventsQueryOptions } from '@/services/events/fetchEvents';
+import { Event } from '@/services/events/types';
+import { useSuspenseQuery } from '@tanstack/react-query';
+import moment from 'moment';
+import 'moment/locale/pl';
+import { useState } from 'react';
+import { Calendar, momentLocalizer, View, Views } from 'react-big-calendar';
+import './bigCalendarStyling.css';
+import { SelectEventDialog } from './SelectEventDialog';
+
+const BigCalendar = ({ endpoint }: { endpoint: string }) => {
+  const eventsQueryOptions = getEventsQueryOptions(endpoint);
+  const { data: events } = useSuspenseQuery(eventsQueryOptions);
+  const [view, setView] = useState<View>(Views.WEEK);
+  const [date, setDate] = useState(new Date());
+  const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
+  const [selectedEvent, setSelectedEvent] = useState<Event>();
+
+  moment.locale('pl');
+  const localizer = momentLocalizer(moment);
+
+  const handleNavigate = (newDate: Date) => {
+    setDate(newDate);
+  };
+
+  const handleViewChange = (newView: View) => {
+    setView(newView);
+  };
+
+  const handleSelectEvent = (event: Event) => {
+    setSelectedEvent(event);
+    setPopoverOpen(true);
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <Calendar
+        localizer={localizer}
+        events={events || []}
+        style={{ height: 700, width: '100%' }}
+        date={date}
+        onNavigate={handleNavigate}
+        messages={messages}
+        culture={'pl'}
+        view={view}
+        onView={handleViewChange}
+        onSelectEvent={handleSelectEvent}
+        formats={{
+          agendaHeaderFormat: ({ start, end }) => {
+            return (
+              moment(start).format('DD-MM-YYYY') +
+              ' — ' +
+              moment(end).format('DD-MM-YYYY')
+            );
+          },
+        }}
+      />
+      {selectedEvent && (
+        <SelectEventDialog
+          open={popoverOpen}
+          onOpenChange={setPopoverOpen}
+          event={selectedEvent}
+        />
+      )}
+    </div>
+  );
+};
+export default BigCalendar;