@tuturuuu/ui 0.0.4

package/src/components/ui/custom/calendar/core.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { MonthView } from './month-view';
+import { WorkspaceUserAttendance } from './utils';
+import { YearView } from './year-view';
+import { useEffect, useState } from 'react';
+
+interface CalendarProps {
+  locale: string;
+  initialDate?: Date;
+  attendanceData?: WorkspaceUserAttendance[];
+  // eslint-disable-next-line no-unused-vars
+  onDateClick?: (date: Date) => void;
+  hideControls?: boolean;
+  hideYear?: boolean;
+}
+
+export const Calendar: React.FC<CalendarProps> = ({
+  locale,
+  initialDate,
+  attendanceData,
+  onDateClick,
+  hideControls = false,
+  hideYear = false,
+}) => {
+  const [currentDate, setCurrentDate] = useState(initialDate || new Date());
+  const [viewMode, setViewMode] = useState<'month' | 'year'>('month');
+
+  useEffect(() => {
+    setCurrentDate(initialDate || new Date());
+  }, [initialDate]);
+
+  const handleMonthClick = (month: number) => {
+    setCurrentDate(new Date(currentDate.setMonth(month)));
+    setViewMode('month');
+  };
+
+  const handleYearViewClick = () => {
+    setViewMode('year');
+  };
+
+  return viewMode === 'month' ? (
+    <MonthView
+      locale={locale}
+      currentDate={currentDate}
+      setCurrentDate={setCurrentDate}
+      attendanceData={attendanceData}
+      onDateClick={onDateClick}
+      onYearViewClick={handleYearViewClick}
+      hideControls={hideControls}
+      hideYear={hideYear}
+    />
+  ) : (
+    <YearView
+      locale={locale}
+      currentDate={currentDate}
+      setCurrentDate={setCurrentDate}
+      handleMonthClick={handleMonthClick}
+    />
+  );
+};

package/src/components/ui/custom/calendar/day-cell.tsx

@@ -0,0 +1,74 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../tooltip';
+import {
+  WorkspaceUserAttendance,
+  getAttendanceGroupNames,
+  isCurrentMonth,
+  isDateAbsent,
+  isDateAttended,
+} from './utils';
+import { cn } from '@tuturuuu/utils/format';
+import { isAfter } from 'date-fns';
+import { Fragment } from 'react';
+
+export const DayCell: React.FC<{
+  day: Date;
+  currentDate: Date;
+  today: Date;
+  attendanceData?: WorkspaceUserAttendance[];
+  // eslint-disable-next-line no-unused-vars
+  onDateClick?: (date: Date) => void;
+}> = ({ day, currentDate, today, attendanceData, onDateClick }) => {
+  if (!isCurrentMonth(day, currentDate))
+    return (
+      <div className="flex flex-none cursor-default justify-center rounded border border-transparent p-2 font-semibold text-foreground/20 transition duration-300 md:rounded-lg">
+        {day.getDate()}
+      </div>
+    );
+
+  if (
+    !isDateAttended(day, attendanceData) &&
+    !isDateAbsent(day, attendanceData)
+  )
+    return (
+      <button
+        onClick={onDateClick ? () => onDateClick(day) : undefined}
+        className={cn(
+          'flex flex-none cursor-default justify-center rounded border bg-foreground/5 p-2 font-semibold text-foreground/40 transition duration-300 hover:cursor-pointer md:rounded-lg dark:bg-foreground/10',
+          isAfter(day, today) &&
+            'cursor-not-allowed opacity-50 hover:cursor-not-allowed'
+        )}
+      >
+        {day.getDate()}
+      </button>
+    );
+
+  return (
+    <Fragment>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={onDateClick ? () => onDateClick(day) : undefined}
+            className={`flex flex-none cursor-pointer justify-center rounded border p-2 font-semibold transition duration-300 md:rounded-lg ${
+              isDateAttended(day, attendanceData)
+                ? 'border-green-500/30 bg-green-500/10 text-green-600 dark:border-green-300/20 dark:bg-green-300/20 dark:text-green-300'
+                : isDateAbsent(day, attendanceData)
+                  ? 'border-red-500/30 bg-red-500/10 text-red-600 dark:border-red-300/20 dark:bg-red-300/20 dark:text-red-300'
+                  : 'bg-foreground/5 text-foreground/40 dark:bg-foreground/10'
+            }`}
+          >
+            {day.getDate()}
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>
+          {getAttendanceGroupNames(day, attendanceData).map(
+            (groupName, idx) => (
+              <div key={groupName + idx} className="flex items-center gap-1">
+                <span className="text-xs font-semibold">{groupName}</span>
+              </div>
+            )
+          )}
+        </TooltipContent>
+      </Tooltip>
+    </Fragment>
+  );
+};

package/src/components/ui/custom/calendar/month-header.tsx

@@ -0,0 +1,59 @@
+import { Button } from '../../button';
+import { cn } from '@tuturuuu/utils/format';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+
+export const MonthHeader: React.FC<{
+  thisYear: number;
+  thisMonth: string;
+  handlePrev: () => void;
+  handleNext: () => void;
+  currentDate: Date;
+  onYearViewClick: () => void;
+  hideControls?: boolean;
+  hideYear?: boolean;
+}> = ({
+  thisYear,
+  thisMonth,
+  handlePrev,
+  handleNext,
+  currentDate,
+  onYearViewClick,
+  hideControls = false,
+  hideYear = false,
+}) => (
+  <div
+    className={cn(
+      'flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xl font-bold md:text-2xl',
+      hideControls || 'mb-4'
+    )}
+  >
+    <div className="flex items-center gap-1">
+      {hideYear || thisYear}
+      {hideYear || (
+        <div className="mx-2 h-4 w-[1px] rotate-[30deg] bg-foreground/20" />
+      )}
+      <span className="text-lg font-semibold md:text-xl">{thisMonth}</span>
+    </div>
+    {!hideControls && (
+      <div className="flex items-center gap-1">
+        <Button size="xs" variant="secondary" onClick={onYearViewClick}>
+          Year View
+        </Button>
+        <Button size="xs" variant="secondary" onClick={handlePrev}>
+          <ChevronLeft className="h-6 w-6" />
+        </Button>
+        <Button
+          size="xs"
+          variant="secondary"
+          onClick={handleNext}
+          disabled={
+            currentDate.getMonth() === new Date().getMonth() &&
+            currentDate.getFullYear() === new Date().getFullYear()
+          }
+        >
+          <ChevronRight className="h-6 w-6" />
+        </Button>
+      </div>
+    )}
+  </div>
+);

package/src/components/ui/custom/calendar/month-view.tsx

@@ -0,0 +1,110 @@
+import { Separator } from '../../separator';
+import { TooltipProvider } from '../../tooltip';
+import { DayCell } from './day-cell';
+import { MonthHeader } from './month-header';
+import { WorkspaceUserAttendance } from './utils';
+import { startOfDay } from 'date-fns';
+import { useMemo } from 'react';
+
+export const MonthView: React.FC<{
+  locale: string;
+  currentDate: Date;
+  setCurrentDate: React.Dispatch<React.SetStateAction<Date>>;
+  attendanceData?: WorkspaceUserAttendance[];
+  // eslint-disable-next-line no-unused-vars
+  onDateClick?: (date: Date) => void;
+  onYearViewClick: () => void;
+  hideControls?: boolean;
+  hideYear?: boolean;
+}> = ({
+  locale,
+  currentDate,
+  setCurrentDate,
+  attendanceData,
+  onDateClick,
+  onYearViewClick,
+  hideControls = false,
+  hideYear = false,
+}) => {
+  const thisYear = currentDate.getFullYear();
+  const thisMonth = currentDate.toLocaleString(locale, {
+    month: hideYear ? 'long' : '2-digit',
+  });
+  const today = startOfDay(new Date());
+
+  const days = useMemo(
+    () =>
+      Array.from({ length: 7 }, (_, i) => {
+        let newDay = new Date(currentDate);
+        newDay.setDate(currentDate.getDate() - currentDate.getDay() + i + 1);
+        return newDay.toLocaleString(locale, { weekday: 'narrow' });
+      }),
+    [currentDate, locale]
+  );
+
+  const daysInMonth = useMemo(
+    () =>
+      Array.from({ length: 42 }, (_, i) => {
+        let newDay = new Date(
+          currentDate.getFullYear(),
+          currentDate.getMonth(),
+          1
+        );
+        let dayOfWeek = newDay.getDay();
+        let adjustment = dayOfWeek === 0 ? 6 : dayOfWeek - 1;
+        newDay.setDate(newDay.getDate() - adjustment + i);
+        return newDay;
+      }),
+    [currentDate]
+  );
+
+  const handlePrev = () =>
+    setCurrentDate(new Date(currentDate.setMonth(currentDate.getMonth() - 1)));
+  const handleNext = () =>
+    setCurrentDate(new Date(currentDate.setMonth(currentDate.getMonth() + 1)));
+
+  return (
+    <div>
+      <MonthHeader
+        thisYear={thisYear}
+        thisMonth={thisMonth}
+        handlePrev={handlePrev}
+        handleNext={handleNext}
+        currentDate={currentDate}
+        onYearViewClick={onYearViewClick}
+        hideControls={hideControls}
+        hideYear={hideYear}
+      />
+
+      {hideControls && <Separator className="my-2" />}
+
+      <div className="relative grid gap-1 text-xs md:gap-2 md:text-base">
+        <div className="grid grid-cols-7 gap-1 md:gap-2">
+          {days.map((day, idx) => (
+            <div
+              key={`day-${idx}`}
+              className="flex flex-none cursor-default justify-center rounded bg-foreground/5 p-2 font-semibold transition duration-300 md:rounded-lg"
+            >
+              {day}
+            </div>
+          ))}
+        </div>
+
+        <div className="grid grid-cols-7 gap-1 md:gap-2">
+          <TooltipProvider delayDuration={0}>
+            {daysInMonth.map((day, idx) => (
+              <DayCell
+                key={`day-${idx}`}
+                day={day}
+                currentDate={currentDate}
+                today={today}
+                attendanceData={attendanceData}
+                onDateClick={onDateClick}
+              />
+            ))}
+          </TooltipProvider>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/ui/custom/calendar/utils.ts

@@ -0,0 +1,76 @@
+export interface WorkspaceUserAttendance {
+  date: string;
+  status: 'PRESENT' | 'ABSENT';
+  groups?: {
+    id: string;
+    name: string;
+  }[];
+}
+
+export const isCurrentMonth = (date: Date, currentDate: Date) =>
+  date.getMonth() === currentDate.getMonth() &&
+  date.getFullYear() === currentDate.getFullYear();
+
+export const isDateAttended = (
+  date: Date,
+  attendanceData?: WorkspaceUserAttendance[]
+) =>
+  attendanceData
+    ? attendanceData.some((attendance) => {
+        const attendanceDate = new Date(attendance.date);
+        return (
+          attendanceDate.getDate() === date.getDate() &&
+          attendanceDate.getMonth() === date.getMonth() &&
+          attendanceDate.getFullYear() === date.getFullYear() &&
+          attendance.status === 'PRESENT'
+        );
+      })
+    : false;
+
+export const isDateAbsent = (
+  date: Date,
+  attendanceData?: WorkspaceUserAttendance[]
+) =>
+  attendanceData
+    ? attendanceData.some((attendance) => {
+        const attendanceDate = new Date(attendance.date);
+        return (
+          attendanceDate.getDate() === date.getDate() &&
+          attendanceDate.getMonth() === date.getMonth() &&
+          attendanceDate.getFullYear() === date.getFullYear() &&
+          attendance.status === 'ABSENT'
+        );
+      })
+    : false;
+
+export const getAttendanceGroupNames = (
+  date: Date,
+  attendanceData?: WorkspaceUserAttendance[]
+): string[] => {
+  if (!attendanceData) return [];
+  const filteredAttendance = attendanceData.filter((attendance) => {
+    const attendanceDate = new Date(attendance.date);
+    return (
+      attendanceDate.getDate() === date.getDate() &&
+      attendanceDate.getMonth() === date.getMonth() &&
+      attendanceDate.getFullYear() === date.getFullYear()
+    );
+  });
+
+  const uniqueGroups = filteredAttendance.reduce(
+    (acc, curr) => {
+      Array.isArray(curr.groups)
+        ? curr.groups.forEach((group) => {
+            if (!acc.some((g) => g.id === group.id)) {
+              acc.push(group);
+            }
+          })
+        : curr.groups && acc.push(curr.groups);
+
+      return acc;
+    },
+    [] as { id: string; name: string }[]
+  );
+
+  return uniqueGroups.map((group) => group.name);
+};

package/src/components/ui/custom/calendar/year-calendar.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { Calendar } from './core';
+import { WorkspaceUserAttendance } from './utils';
+import { Button } from '@tuturuuu/ui/button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useState } from 'react';
+
+interface YearCalendarProps {
+  locale: string;
+  initialDate?: Date;
+  attendanceData?: WorkspaceUserAttendance[];
+  // eslint-disable-next-line no-unused-vars
+  onDateClick?: (date: Date) => void;
+}
+
+export const YearCalendar: React.FC<YearCalendarProps> = ({
+  locale,
+  initialDate,
+  attendanceData,
+  onDateClick,
+}) => {
+  const [currentYear, setCurrentYear] = useState(
+    initialDate?.getFullYear() || new Date().getFullYear()
+  );
+
+  const handlePrevYear = () => setCurrentYear(currentYear - 1);
+  const handleNextYear = () => setCurrentYear(currentYear + 1);
+
+  const months = Array.from(
+    { length: 12 },
+    (_, i) => new Date(currentYear, i, 1)
+  );
+
+  return (
+    <div>
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 rounded-lg border bg-foreground/5 p-4 text-xl font-bold md:text-2xl">
+        <div className="flex items-center gap-1">{currentYear}</div>
+        <div className="flex items-center gap-1">
+          <Button size="xs" variant="secondary" onClick={handlePrevYear}>
+            <ChevronLeft className="h-6 w-6" />
+          </Button>
+          <Button size="xs" variant="secondary" onClick={handleNextYear}>
+            <ChevronRight className="h-6 w-6" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
+        {months.map((month, idx) => (
+          <div key={idx} className="rounded-lg border p-2">
+            <Calendar
+              locale={locale}
+              initialDate={month}
+              attendanceData={attendanceData}
+              onDateClick={onDateClick}
+              hideControls
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/src/components/ui/custom/calendar/year-view.tsx

@@ -0,0 +1,58 @@
+import { Button } from '../../button';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { useMemo } from 'react';
+
+export const YearView: React.FC<{
+  locale: string;
+  currentDate: Date;
+  setCurrentDate: React.Dispatch<React.SetStateAction<Date>>;
+  // eslint-disable-next-line no-unused-vars
+  handleMonthClick: (month: number) => void;
+}> = ({ locale, currentDate, setCurrentDate, handleMonthClick }) => {
+  const thisYear = currentDate.getFullYear();
+  const months = useMemo(
+    () =>
+      Array.from(
+        { length: 12 },
+        (_, i) => new Date(currentDate.getFullYear(), i, 1)
+      ),
+    [currentDate]
+  );
+
+  const handlePrev = () =>
+    setCurrentDate(
+      new Date(currentDate.setFullYear(currentDate.getFullYear() - 1))
+    );
+  const handleNext = () =>
+    setCurrentDate(
+      new Date(currentDate.setFullYear(currentDate.getFullYear() + 1))
+    );
+
+  return (
+    <div>
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-x-4 gap-y-1 text-xl font-bold md:text-2xl">
+        <div className="flex items-center gap-1">{thisYear}</div>
+        <div className="flex items-center gap-1">
+          <Button size="xs" variant="secondary" onClick={handlePrev}>
+            <ChevronLeft className="h-6 w-6" />
+          </Button>
+          <Button size="xs" variant="secondary" onClick={handleNext}>
+            <ChevronRight className="h-6 w-6" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-3 gap-4">
+        {months.map((month, idx) => (
+          <button
+            key={`month-${idx}`}
+            onClick={() => handleMonthClick(month.getMonth())}
+            className="flex flex-none cursor-pointer justify-center rounded bg-foreground/5 p-4 font-semibold transition duration-300 hover:bg-foreground/10"
+          >
+            {month.toLocaleString(locale, { month: 'long' })}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};