Merge branch 'develop'

Author: sajjadmrx

bun.lock

@@ -12,11 +12,14 @@
 		"test": "npx tailwindcss init"
 	},
 	"dependencies": {
+		"@hello-pangea/dnd": "^18.0.1",
 		"@tanstack/react-query": "5.66.0",
 		"add": "2.0.6",
 		"axios": "1.7.9",
 		"chart.js": "^4.4.7",
 		"jalali-moment": "3.3.11",
+		"moment": "^2.30.1",
+		"moment-hijri": "^3.0.0",
 		"motion": "12.3.1",
 		"ms": "2.1.3",
 		"react": "18.3.1",
@@ -33,6 +36,7 @@
 		"@biomejs/biome": "1.9.4",
 		"@eslint/js": "9.17.0",
 		"@tailwindcss/vite": "4.0.0",
+		"@types/moment-hijri": "^2.1.4",
 		"@types/ms": "2.1.0",
 		"@types/node": "22.13.1",
 		"@types/react": "18.2.19",

package.json

@@ -4,5 +4,7 @@ export enum StoreKey {
 	CURRENCY_UPDATED_AT = 'CURRENCY_UPDATED_AT',
 	SELECTED_CITY = 'SELECTED_CITY',
 	CURRENT_WEATHER = 'CURRENT_WEATHER',
+	LAYOUT_ORDER = 'LAYOUT_ORDER',
+	Todos = 'Todos',
 }
 export type StoreKeyType = StoreKey | `currency:${string}`

src/common/constant/store.key.ts

@@ -0,0 +1,61 @@
+import { type ReactNode, createContext, useContext, useEffect, useState } from 'react'
+import { StoreKey } from '../common/constant/store.key'
+import { getFromStorage, setToStorage } from '../common/storage'
+import type { Todo } from '../layouts/calendar/interface/todo.interface'
+
+interface TodoContextType {
+	todos: Todo[]
+	addTodo: (text: string, date: string) => void
+	removeTodo: (id: string) => void
+	toggleTodo: (id: string) => void
+	setTodos: (todos: Todo[]) => void
+}
+
+const TodoContext = createContext<TodoContextType | undefined>(undefined)
+export function TodoProvider({ children }: { children: ReactNode }) {
+	const [todos, setTodos] = useState<Todo[]>([])
+
+	useEffect(() => {
+		const todosFromStorage = getFromStorage(StoreKey.Todos)
+		if (todosFromStorage) {
+			setTodos(todosFromStorage as Todo[])
+		}
+	}, [])
+
+	const addTodo = (text: string, date: string) => {
+		const todoList = [
+			...todos,
+			{ id: Math.random().toString(36).slice(2), text, completed: false, date },
+		]
+
+		setTodos(todoList)
+
+		setToStorage(StoreKey.Todos, todoList)
+	}
+
+	const removeTodo = (id: string) => {
+		setTodos(todos.filter((todo) => todo.id !== id))
+	}
+
+	const toggleTodo = (id: string) => {
+		setTodos(
+			todos.map((todo) =>
+				todo.id === id ? { ...todo, completed: !todo.completed } : todo,
+			),
+		)
+	}
+
+	return (
+		<TodoContext.Provider value={{ todos, addTodo, removeTodo, toggleTodo, setTodos }}>
+			{children}
+		</TodoContext.Provider>
+	)
+}
+
+export function useTodo() {
+	const context = useContext(TodoContext)
+	if (context === undefined) {
+		throw new Error('useTodo must be used within a TodoProvider')
+	}
+	return context
+}

src/context/todo.context.tsx

@@ -0,0 +1,137 @@
+import jalaliMoment from 'jalali-moment'
+import type React from 'react'
+import { useState } from 'react'
+import { FaChevronLeft, FaChevronRight } from 'react-icons/fa6'
+import { TodoProvider, useTodo } from '../../context/todo.context'
+import { useGetEvents } from '../../services/getMethodHooks/getEvents.hook'
+import { DayItem } from './components/day'
+import { Events } from './components/events/event'
+import { Todos } from './components/todos/todos'
+import { formatDateStr } from './utils'
+
+const PERSIAN_MONTHS = [
+	'فروردین',
+	'اردیبهشت',
+	'خرداد',
+	'تیر',
+	'مرداد',
+	'شهریور',
+	'مهر',
+	'آبان',
+	'آذر',
+	'دی',
+	'بهمن',
+	'اسفند',
+]
+
+const WEEKDAYS = ['شنبه', 'یکشنبه', 'دوشنبه', 'سه‌شنبه', 'چهارشنبه', 'پنج‌شنبه', 'جمعه']
+
+export const PersianCalendar: React.FC = () => {
+	const today = jalaliMoment()
+	const [currentDate, setCurrentDate] = useState(today)
+	const [selectedDate, setSelectedDate] = useState(today.clone())
+
+	const firstDayOfMonth = currentDate.clone().startOf('jMonth').day()
+
+	const { data: events } = useGetEvents()
+
+	const daysInMonth = currentDate.clone().endOf('jMonth').jDate()
+
+	const emptyDays = (firstDayOfMonth + 1) % 7
+
+	const changeMonth = (delta: number) => {
+		setCurrentDate((prev) => prev.clone().add(delta, 'jMonth'))
+	}
+
+	const selectedDateStr = formatDateStr(selectedDate)
+
+	const { todos } = useTodo()
+	return (
+		<div className="grid gap-4 md:grid-cols-5" dir="rtl">
+			<div className="p-4 md:col-span-3 bg-gradient-to-br from-neutral-100 to-neutral-50 dark:from-neutral-800 dark:to-neutral-900 rounded-xl backdrop-blur-sm lg:h-96">
+				<div className="flex items-center justify-between mb-4">
+					<h3 className="text-xl font-medium text-gray-200">
+						{PERSIAN_MONTHS[currentDate.jMonth()]} {currentDate.jYear()}
+					</h3>
+					<div className="flex gap-2">
+						<button
+							onClick={() => changeMonth(-1)}
+							className="flex flex-row-reverse items-center gap-1 p-2 text-gray-400 rounded-lg hover:text-gray-200 hover:bg-gray-700/50"
+						>
+							ماه قبل
+							<FaChevronRight />
+						</button>
+						<button
+							onClick={() => changeMonth(1)}
+							className="flex flex-row-reverse items-center gap-1 p-2 text-gray-400 rounded-lg hover:text-gray-200 hover:bg-gray-700/50"
+						>
+							<FaChevronLeft />
+							ماه بعد
+						</button>
+					</div>
+				</div>
+
+				<div className="grid grid-cols-7 gap-2">
+					{WEEKDAYS.map((day) => (
+						<div key={day} className="py-2 text-xs text-center text-gray-400">
+							{day}
+						</div>
+					))}
+
+					{Array.from({ length: emptyDays }).map((_, i) => (
+						<div key={`empty-${i}`} className="p-2" />
+					))}
+
+					{Array.from({ length: daysInMonth }, (_, i) => {
+						return (
+							<DayItem
+								currentDate={currentDate}
+								day={i + 1}
+								events={events}
+								selectedDateStr={selectedDateStr}
+								setSelectedDate={setSelectedDate}
+								todos={todos}
+								key={i + 1}
+							/>
+						)
+					})}
+				</div>
+			</div>
+
+			<div className="p-4 md:col-span-2 bg-gradient-to-br from-neutral-100 to-neutral-50 dark:from-neutral-800 dark:to-neutral-900 rounded-xl backdrop-blur-sm">
+				<h3 className="mb-4 text-xl font-medium text-gray-200">
+					{PERSIAN_MONTHS[selectedDate.jMonth()]} {selectedDate.jDate()}
+				</h3>
+
+				{/* todos */}
+				<Todos currentDate={selectedDate} />
+
+				{/* events */}
+				<Events events={events} currentDate={selectedDate} />
+			</div>
+		</div>
+	)
+}
+
+const CalendarLayout = () => {
+	return (
+		<section className="p-2 mx-1 overflow-y-auto  rounded lg:mx-4 max-h-[calc(100vh-4rem)]">
+			<div className="flex items-center justify-between w-full px-1 mb-4">
+				<h2 className="text-lg font-semibold text-gray-200 font-[balooTamma]">
+					📅 Calender
+				</h2>
+				<div
+					className="text-xs text-gray-400 font-[balooTamma] font-semibold flex items-center gap-1
+                      hover:text-gray-300 cursor-pointer"
+				>
+					<span>-</span>
+				</div>
+			</div>
+			<TodoProvider>
+				<PersianCalendar />
+			</TodoProvider>
+		</section>
+	)
+}
+
+export default CalendarLayout