calendarkit-pro 1.2.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -1
- package/dist/index.js +555 -457
- package/dist/index.mjs +496 -383
- package/package.json +29 -6
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
package/dist/index.mjs
CHANGED
|
@@ -1,17 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
import React15__default, { useState, useId, useMemo, useCallback, useEffect, useRef } from 'react';
|
|
3
|
-
import { useDraggable, useSensors, useSensor, PointerSensor, DndContext, DragOverlay, useDroppable } from '@dnd-kit/core';
|
|
4
|
-
import { createSnapModifier, restrictToWindowEdges } from '@dnd-kit/modifiers';
|
|
5
|
-
import { motion, AnimatePresence } from 'framer-motion';
|
|
6
|
-
import { format, differenceInMinutes, subDays, addDays, differenceInMilliseconds, startOfWeek, endOfWeek, eachDayOfInterval, isSameMonth, isToday, isSameDay, startOfDay, addWeeks, addMonths, subWeeks, subMonths, startOfMonth, endOfMonth, isTomorrow } from 'date-fns';
|
|
7
|
-
import { cva } from 'class-variance-authority';
|
|
8
|
-
import { clsx } from 'clsx';
|
|
9
|
-
import { twMerge } from 'tailwind-merge';
|
|
10
|
-
import { Menu, ChevronLeft, ChevronRight, Sun, Moon, CalendarDays, CalendarRange, Calendar, ListTodo, Plus, ChevronDown, Globe, Clock, Users, Paperclip, Bell, Edit3, Copy, Trash2, X, Edit2, MapPin, ExternalLink, AlignLeft, File, Download, BellRing, Check, Repeat, Tag } from 'lucide-react';
|
|
11
|
-
import { toZonedTime, fromZonedTime } from 'date-fns-tz';
|
|
12
|
-
import { CSS } from '@dnd-kit/utilities';
|
|
13
|
-
import { RRule } from 'rrule';
|
|
1
|
+
"use client";
|
|
14
2
|
|
|
3
|
+
// src/index.tsx
|
|
4
|
+
import React18, { useId, useState as useState6, useMemo as useMemo4 } from "react";
|
|
5
|
+
import { DndContext, useSensor, useSensors, PointerSensor, DragOverlay } from "@dnd-kit/core";
|
|
6
|
+
import { createSnapModifier, restrictToWindowEdges } from "@dnd-kit/modifiers";
|
|
7
|
+
import { AnimatePresence as AnimatePresence3, motion as motion4 } from "framer-motion";
|
|
8
|
+
|
|
9
|
+
// src/components/CalendarHeader.tsx
|
|
10
|
+
import React2 from "react";
|
|
11
|
+
import { format } from "date-fns";
|
|
12
|
+
|
|
13
|
+
// src/components/ui/button.tsx
|
|
14
|
+
import * as React from "react";
|
|
15
|
+
import { cva } from "class-variance-authority";
|
|
16
|
+
|
|
17
|
+
// src/utils.ts
|
|
18
|
+
import { clsx } from "clsx";
|
|
19
|
+
import { twMerge } from "tailwind-merge";
|
|
15
20
|
function cn(...inputs) {
|
|
16
21
|
return twMerge(clsx(inputs));
|
|
17
22
|
}
|
|
@@ -44,10 +49,10 @@ var buttonVariants = cva(
|
|
|
44
49
|
}
|
|
45
50
|
}
|
|
46
51
|
);
|
|
47
|
-
var Button =
|
|
48
|
-
({ className, variant, size,
|
|
52
|
+
var Button = React.forwardRef(
|
|
53
|
+
({ className, variant, size, ...props }, ref) => {
|
|
49
54
|
const Comp = "button";
|
|
50
|
-
return /* @__PURE__ */
|
|
55
|
+
return /* @__PURE__ */ React.createElement(
|
|
51
56
|
Comp,
|
|
52
57
|
{
|
|
53
58
|
className: cn(buttonVariants({ variant, size, className })),
|
|
@@ -58,6 +63,9 @@ var Button = React15.forwardRef(
|
|
|
58
63
|
}
|
|
59
64
|
);
|
|
60
65
|
Button.displayName = "Button";
|
|
66
|
+
|
|
67
|
+
// src/components/CalendarHeader.tsx
|
|
68
|
+
import { ChevronLeft, ChevronRight, Menu, Moon, Sun, CalendarDays, CalendarRange, Calendar, ListTodo } from "lucide-react";
|
|
61
69
|
var CalendarHeader = ({
|
|
62
70
|
currentDate,
|
|
63
71
|
onPrev,
|
|
@@ -80,7 +88,7 @@ var CalendarHeader = ({
|
|
|
80
88
|
{ key: "day", icon: Calendar },
|
|
81
89
|
{ key: "agenda", icon: ListTodo }
|
|
82
90
|
];
|
|
83
|
-
return /* @__PURE__ */
|
|
91
|
+
return /* @__PURE__ */ React2.createElement("div", { className: "flex flex-col md:flex-row items-center justify-between px-3 md:px-5 py-3 border-b-[0px] border-border/50 bg-gradient-to-r from-background via-background to-muted/20 gap-3 md:gap-0 min-h-[64px]" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 w-full md:w-auto justify-between md:justify-start" }, /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 md:gap-3" }, /* @__PURE__ */ React2.createElement(
|
|
84
92
|
Button,
|
|
85
93
|
{
|
|
86
94
|
variant: "ghost",
|
|
@@ -88,8 +96,8 @@ var CalendarHeader = ({
|
|
|
88
96
|
className: "text-muted-foreground hover:text-foreground hover:bg-accent/80 rounded-xl h-10 w-10 hidden md:inline-flex transition-all duration-200",
|
|
89
97
|
onClick: onMenuClick
|
|
90
98
|
},
|
|
91
|
-
/* @__PURE__ */
|
|
92
|
-
), /* @__PURE__ */
|
|
99
|
+
/* @__PURE__ */ React2.createElement(Menu, { className: "h-5 w-5" })
|
|
100
|
+
), /* @__PURE__ */ React2.createElement(
|
|
93
101
|
Button,
|
|
94
102
|
{
|
|
95
103
|
variant: "outline",
|
|
@@ -97,7 +105,7 @@ var CalendarHeader = ({
|
|
|
97
105
|
className: "h-9 px-5 rounded-xl text-sm font-medium hidden sm:inline-flex border-[0.5px] border-border/60 hover:border-primary/40 hover:bg-primary/5 hover:text-primary transition-all duration-200"
|
|
98
106
|
},
|
|
99
107
|
translations.today
|
|
100
|
-
), /* @__PURE__ */
|
|
108
|
+
), /* @__PURE__ */ React2.createElement("div", { className: "flex items-center bg-muted/40 rounded-xl p-0.5" }, /* @__PURE__ */ React2.createElement(
|
|
101
109
|
Button,
|
|
102
110
|
{
|
|
103
111
|
variant: "ghost",
|
|
@@ -105,8 +113,8 @@ var CalendarHeader = ({
|
|
|
105
113
|
onClick: onPrev,
|
|
106
114
|
className: "rounded-lg h-8 w-8 hover:bg-background/80 transition-all duration-200"
|
|
107
115
|
},
|
|
108
|
-
/* @__PURE__ */
|
|
109
|
-
), /* @__PURE__ */
|
|
116
|
+
/* @__PURE__ */ React2.createElement(ChevronLeft, { className: "h-4 w-4 text-muted-foreground" })
|
|
117
|
+
), /* @__PURE__ */ React2.createElement(
|
|
110
118
|
Button,
|
|
111
119
|
{
|
|
112
120
|
variant: "ghost",
|
|
@@ -114,8 +122,8 @@ var CalendarHeader = ({
|
|
|
114
122
|
onClick: onNext,
|
|
115
123
|
className: "rounded-lg h-8 w-8 hover:bg-background/80 transition-all duration-200"
|
|
116
124
|
},
|
|
117
|
-
/* @__PURE__ */
|
|
118
|
-
)), /* @__PURE__ */
|
|
125
|
+
/* @__PURE__ */ React2.createElement(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
|
|
126
|
+
)), /* @__PURE__ */ React2.createElement("div", { className: "ml-2 md:ml-4" }, /* @__PURE__ */ React2.createElement("h2", { className: "text-lg md:text-xl font-semibold text-foreground whitespace-nowrap capitalize tracking-tight" }, format(currentDate, "MMMM yyyy", { locale }))))), /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2 md:gap-3 w-full md:w-auto justify-end" }, onLanguageChange && language && /* @__PURE__ */ React2.createElement(
|
|
119
127
|
Button,
|
|
120
128
|
{
|
|
121
129
|
variant: "ghost",
|
|
@@ -124,7 +132,7 @@ var CalendarHeader = ({
|
|
|
124
132
|
className: "h-9 px-3 rounded-xl text-xs font-semibold text-muted-foreground hover:text-foreground hover:bg-accent/80 transition-all duration-200 uppercase tracking-wider"
|
|
125
133
|
},
|
|
126
134
|
language
|
|
127
|
-
), onThemeToggle && /* @__PURE__ */
|
|
135
|
+
), onThemeToggle && /* @__PURE__ */ React2.createElement(
|
|
128
136
|
Button,
|
|
129
137
|
{
|
|
130
138
|
variant: "ghost",
|
|
@@ -132,8 +140,8 @@ var CalendarHeader = ({
|
|
|
132
140
|
className: "rounded-xl h-9 w-9 hover:bg-accent/80 transition-all duration-200",
|
|
133
141
|
onClick: onThemeToggle
|
|
134
142
|
},
|
|
135
|
-
isDarkMode ? /* @__PURE__ */
|
|
136
|
-
), !hideViewSwitcher && /* @__PURE__ */
|
|
143
|
+
isDarkMode ? /* @__PURE__ */ React2.createElement(Sun, { className: "h-4 w-4 text-amber-500" }) : /* @__PURE__ */ React2.createElement(Moon, { className: "h-4 w-4 text-muted-foreground" })
|
|
144
|
+
), !hideViewSwitcher && /* @__PURE__ */ React2.createElement("div", { className: "flex items-center bg-muted/50 backdrop-blur-sm rounded-xl p-1" }, viewConfig.map(({ key, icon: Icon }) => /* @__PURE__ */ React2.createElement(
|
|
137
145
|
Button,
|
|
138
146
|
{
|
|
139
147
|
key,
|
|
@@ -145,24 +153,35 @@ var CalendarHeader = ({
|
|
|
145
153
|
view === key ? "bg-background shadow-sm text-foreground font-medium border-[0.5px] border-border/50" : "text-muted-foreground hover:text-foreground hover:bg-background/50"
|
|
146
154
|
)
|
|
147
155
|
},
|
|
148
|
-
/* @__PURE__ */
|
|
149
|
-
/* @__PURE__ */
|
|
156
|
+
/* @__PURE__ */ React2.createElement(Icon, { className: "h-3.5 w-3.5" }),
|
|
157
|
+
/* @__PURE__ */ React2.createElement("span", { className: "hidden sm:inline" }, translations[key])
|
|
150
158
|
)))));
|
|
151
159
|
};
|
|
160
|
+
|
|
161
|
+
// src/components/Sidebar.tsx
|
|
162
|
+
import React4, { useState, useEffect } from "react";
|
|
163
|
+
import { Plus, ChevronDown, Globe } from "lucide-react";
|
|
164
|
+
|
|
165
|
+
// src/components/MiniCalendar.tsx
|
|
166
|
+
import React3 from "react";
|
|
167
|
+
import { format as format3, isSameMonth, isSameDay, isToday, addMonths, subMonths } from "date-fns";
|
|
168
|
+
|
|
169
|
+
// src/lib/date.ts
|
|
170
|
+
import { startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, format as format2 } from "date-fns";
|
|
152
171
|
var getMonthGrid = (date, weekStartOn = 0) => {
|
|
153
172
|
const monthStart = startOfMonth(date);
|
|
154
|
-
const monthEnd = endOfMonth(monthStart);
|
|
155
|
-
const startDate = startOfWeek(monthStart, { weekStartsOn: weekStartOn });
|
|
156
|
-
const endDate = endOfWeek(monthEnd, { weekStartsOn: weekStartOn });
|
|
157
173
|
return eachDayOfInterval({
|
|
158
|
-
start:
|
|
159
|
-
end:
|
|
174
|
+
start: startOfWeek(monthStart, { weekStartsOn: weekStartOn }),
|
|
175
|
+
end: endOfWeek(endOfMonth(monthStart), { weekStartsOn: weekStartOn })
|
|
160
176
|
});
|
|
161
177
|
};
|
|
162
178
|
var uses24HourClock = (locale) => {
|
|
163
179
|
if (!locale) return false;
|
|
164
|
-
return !/[ap]\.?m/i.test(
|
|
180
|
+
return !/[ap]\.?m/i.test(format2(new Date(2e3, 0, 1, 13, 0), "p", { locale }));
|
|
165
181
|
};
|
|
182
|
+
|
|
183
|
+
// src/components/MiniCalendar.tsx
|
|
184
|
+
import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight2 } from "lucide-react";
|
|
166
185
|
var MiniCalendar = ({
|
|
167
186
|
currentDate,
|
|
168
187
|
onDateChange,
|
|
@@ -170,12 +189,12 @@ var MiniCalendar = ({
|
|
|
170
189
|
className,
|
|
171
190
|
locale
|
|
172
191
|
}) => {
|
|
173
|
-
const [viewDate, setViewDate] =
|
|
174
|
-
|
|
192
|
+
const [viewDate, setViewDate] = React3.useState(currentDate);
|
|
193
|
+
React3.useEffect(() => {
|
|
175
194
|
setViewDate(currentDate);
|
|
176
195
|
}, [currentDate]);
|
|
177
196
|
const weekStartsOn = locale?.options?.weekStartsOn ?? 0;
|
|
178
|
-
const days =
|
|
197
|
+
const days = React3.useMemo(
|
|
179
198
|
() => getMonthGrid(viewDate, weekStartsOn),
|
|
180
199
|
[viewDate, weekStartsOn]
|
|
181
200
|
);
|
|
@@ -199,7 +218,7 @@ var MiniCalendar = ({
|
|
|
199
218
|
onDateChange(day);
|
|
200
219
|
if (onViewChange) onViewChange("day");
|
|
201
220
|
};
|
|
202
|
-
return /* @__PURE__ */
|
|
221
|
+
return /* @__PURE__ */ React3.createElement("div", { className: cn("px-4 w-[260px]", className) }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center justify-between mb-4" }, /* @__PURE__ */ React3.createElement("span", { className: "text-sm font-semibold text-foreground capitalize" }, format3(viewDate, "MMMM yyyy", { locale })), /* @__PURE__ */ React3.createElement("div", { className: "flex items-center bg-muted/40 rounded-lg p-0.5" }, /* @__PURE__ */ React3.createElement(
|
|
203
222
|
Button,
|
|
204
223
|
{
|
|
205
224
|
variant: "ghost",
|
|
@@ -208,8 +227,8 @@ var MiniCalendar = ({
|
|
|
208
227
|
onClick: handlePrev,
|
|
209
228
|
"aria-label": "Previous month"
|
|
210
229
|
},
|
|
211
|
-
/* @__PURE__ */
|
|
212
|
-
), /* @__PURE__ */
|
|
230
|
+
/* @__PURE__ */ React3.createElement(ChevronLeft2, { className: "h-4 w-4" })
|
|
231
|
+
), /* @__PURE__ */ React3.createElement(
|
|
213
232
|
Button,
|
|
214
233
|
{
|
|
215
234
|
variant: "ghost",
|
|
@@ -218,12 +237,12 @@ var MiniCalendar = ({
|
|
|
218
237
|
onClick: handleNext,
|
|
219
238
|
"aria-label": "Next month"
|
|
220
239
|
},
|
|
221
|
-
/* @__PURE__ */
|
|
222
|
-
))), /* @__PURE__ */
|
|
240
|
+
/* @__PURE__ */ React3.createElement(ChevronRight2, { className: "h-4 w-4" })
|
|
241
|
+
))), /* @__PURE__ */ React3.createElement("div", { className: "grid grid-cols-7 gap-y-2 text-center mb-2" }, weekDays.map((day, i) => /* @__PURE__ */ React3.createElement("div", { key: `${day}-${i}`, className: "text-[10px] text-muted-foreground/70 font-semibold uppercase" }, day))), /* @__PURE__ */ React3.createElement("div", { className: "grid grid-cols-7 gap-y-1 text-center" }, days.map((day) => {
|
|
223
242
|
const isSelected = isSameDay(day, currentDate);
|
|
224
243
|
const isCurrentMonth = isSameMonth(day, viewDate);
|
|
225
244
|
const isTodayDate = isToday(day);
|
|
226
|
-
return /* @__PURE__ */
|
|
245
|
+
return /* @__PURE__ */ React3.createElement(
|
|
227
246
|
"button",
|
|
228
247
|
{
|
|
229
248
|
key: day.toISOString(),
|
|
@@ -236,10 +255,14 @@ var MiniCalendar = ({
|
|
|
236
255
|
!isSelected && isTodayDate && "bg-primary/10 text-primary ring-1 ring-primary/30"
|
|
237
256
|
)
|
|
238
257
|
},
|
|
239
|
-
|
|
258
|
+
format3(day, "d")
|
|
240
259
|
);
|
|
241
260
|
})));
|
|
242
261
|
};
|
|
262
|
+
|
|
263
|
+
// src/components/Sidebar.tsx
|
|
264
|
+
import { toZonedTime } from "date-fns-tz";
|
|
265
|
+
import { format as format4 } from "date-fns";
|
|
243
266
|
var Sidebar = ({
|
|
244
267
|
currentDate,
|
|
245
268
|
onDateChange,
|
|
@@ -274,7 +297,7 @@ var Sidebar = ({
|
|
|
274
297
|
if (!tz || !now) return "LOC";
|
|
275
298
|
try {
|
|
276
299
|
return new Intl.DateTimeFormat("en-US", { timeZone: tz, timeZoneName: "short" }).formatToParts(now).find((part) => part.type === "timeZoneName")?.value || "";
|
|
277
|
-
} catch
|
|
300
|
+
} catch {
|
|
278
301
|
return "";
|
|
279
302
|
}
|
|
280
303
|
};
|
|
@@ -295,56 +318,56 @@ var Sidebar = ({
|
|
|
295
318
|
];
|
|
296
319
|
const formatTzLabel = (tz, showTime = true) => {
|
|
297
320
|
if (!hasMounted || !now || !showTime) {
|
|
298
|
-
return /* @__PURE__ */
|
|
321
|
+
return /* @__PURE__ */ React4.createElement("span", null, tz.label);
|
|
299
322
|
}
|
|
300
323
|
let time = "";
|
|
301
324
|
let acronym = tz.acronym;
|
|
302
325
|
try {
|
|
303
326
|
if (!tz.value) {
|
|
304
|
-
time =
|
|
327
|
+
time = format4(now, "HH:mm");
|
|
305
328
|
try {
|
|
306
329
|
acronym = new Intl.DateTimeFormat("en-US", { timeZoneName: "short" }).formatToParts(now).find((part) => part.type === "timeZoneName")?.value || "LOC";
|
|
307
|
-
} catch
|
|
330
|
+
} catch {
|
|
308
331
|
}
|
|
309
332
|
} else {
|
|
310
333
|
const zDate = toZonedTime(now, tz.value);
|
|
311
|
-
time =
|
|
334
|
+
time = format4(zDate, "HH:mm");
|
|
312
335
|
const dynAcronym = getAcronym(tz.value);
|
|
313
336
|
if (dynAcronym && !dynAcronym.includes("GMT") && !dynAcronym.includes("Time")) {
|
|
314
337
|
acronym = dynAcronym;
|
|
315
338
|
}
|
|
316
339
|
}
|
|
317
|
-
} catch
|
|
318
|
-
return /* @__PURE__ */
|
|
340
|
+
} catch {
|
|
341
|
+
return /* @__PURE__ */ React4.createElement("span", null, tz.label);
|
|
319
342
|
}
|
|
320
|
-
return /* @__PURE__ */
|
|
343
|
+
return /* @__PURE__ */ React4.createElement("div", { className: "flex justify-between w-full" }, /* @__PURE__ */ React4.createElement("span", null, tz.label), /* @__PURE__ */ React4.createElement("span", { className: "text-muted-foreground ml-2 tabular-nums" }, time, " ", /* @__PURE__ */ React4.createElement("span", { className: "text-xs opacity-75" }, "(", acronym, ")")));
|
|
321
344
|
};
|
|
322
345
|
const selectedTzObj = timezones.find((t) => t.value === (timezone || ""));
|
|
323
346
|
const selectedTimezoneLabel = selectedTzObj ? formatTzLabel(selectedTzObj) : translations?.localTime || "Local Time";
|
|
324
|
-
return /* @__PURE__ */
|
|
347
|
+
return /* @__PURE__ */ React4.createElement("div", { className: cn("flex flex-col w-[260px] overflow-x-hidden h-full bg-gradient-to-b scrollbar-hide from-background via-background to-muted/10 pt-4 pb-4 overflow-y-auto hidden lg:flex", className) }, !readOnly && /* @__PURE__ */ React4.createElement("div", { className: "px-4 mb-6" }, /* @__PURE__ */ React4.createElement(
|
|
325
348
|
Button,
|
|
326
349
|
{
|
|
327
350
|
className: "w-full rounded-2xl shadow-lg bg-primary text-primary-foreground hover:bg-primary/90 h-12 gap-3 justify-center transition-all duration-300 hover:shadow-xl hover:shadow-primary/20 hover:scale-[1.02] active:scale-[0.98] font-semibold",
|
|
328
351
|
onClick: onEventCreate
|
|
329
352
|
},
|
|
330
|
-
/* @__PURE__ */
|
|
331
|
-
/* @__PURE__ */
|
|
332
|
-
)), /* @__PURE__ */
|
|
353
|
+
/* @__PURE__ */ React4.createElement(Plus, { className: "w-5 h-5" }),
|
|
354
|
+
/* @__PURE__ */ React4.createElement("span", { className: "text-sm" }, translations?.create || "Create")
|
|
355
|
+
)), /* @__PURE__ */ React4.createElement(MiniCalendar, { currentDate, onDateChange, onViewChange, locale }), /* @__PURE__ */ React4.createElement("div", { className: "flex-1 px-4 space-y-5 mt-5" }, /* @__PURE__ */ React4.createElement("div", { className: "bg-muted/20 rounded-2xl p-3 border-[0px] border-border/30" }, /* @__PURE__ */ React4.createElement(
|
|
333
356
|
"div",
|
|
334
357
|
{
|
|
335
358
|
className: "flex items-center justify-between cursor-pointer hover:bg-accent/50 p-2 -m-1 rounded-xl mb-2 transition-all duration-200",
|
|
336
359
|
onClick: () => setCalendarsOpen(!calendarsOpen)
|
|
337
360
|
},
|
|
338
|
-
/* @__PURE__ */
|
|
339
|
-
/* @__PURE__ */
|
|
340
|
-
), calendarsOpen && /* @__PURE__ */
|
|
361
|
+
/* @__PURE__ */ React4.createElement("span", { className: "text-sm font-semibold text-foreground" }, translations?.calendars || "Calendars"),
|
|
362
|
+
/* @__PURE__ */ React4.createElement(ChevronDown, { className: cn("w-4 h-4 text-muted-foreground transition-transform duration-200", calendarsOpen && "rotate-180") })
|
|
363
|
+
), calendarsOpen && /* @__PURE__ */ React4.createElement("div", { className: "space-y-1" }, displayCalendars.map((cal) => /* @__PURE__ */ React4.createElement(
|
|
341
364
|
"div",
|
|
342
365
|
{
|
|
343
366
|
key: cal.id,
|
|
344
367
|
className: "flex items-center gap-3 py-2 px-2 hover:bg-accent/60 rounded-xl cursor-pointer group transition-all duration-200",
|
|
345
368
|
onClick: () => onCalendarToggle?.(cal.id, !(cal.active ?? true))
|
|
346
369
|
},
|
|
347
|
-
/* @__PURE__ */
|
|
370
|
+
/* @__PURE__ */ React4.createElement("div", { className: "relative flex items-center justify-center" }, /* @__PURE__ */ React4.createElement(
|
|
348
371
|
"input",
|
|
349
372
|
{
|
|
350
373
|
type: "checkbox",
|
|
@@ -357,7 +380,7 @@ var Sidebar = ({
|
|
|
357
380
|
style: { "--primary-color": cal.color },
|
|
358
381
|
"data-cal-id": cal.id
|
|
359
382
|
}
|
|
360
|
-
), /* @__PURE__ */
|
|
383
|
+
), /* @__PURE__ */ React4.createElement("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity" }, /* @__PURE__ */ React4.createElement("svg", { className: "w-3.5 h-3.5 text-white", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 3 }, /* @__PURE__ */ React4.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }))), /* @__PURE__ */ React4.createElement("style", null, `
|
|
361
384
|
input[type="checkbox"][data-cal-id="${cal.id}"]:checked {
|
|
362
385
|
background-color: ${cal.color} !important;
|
|
363
386
|
border-color: ${cal.color} !important;
|
|
@@ -366,23 +389,23 @@ var Sidebar = ({
|
|
|
366
389
|
--tw-ring-color: ${cal.color}40 !important;
|
|
367
390
|
}
|
|
368
391
|
`)),
|
|
369
|
-
/* @__PURE__ */
|
|
370
|
-
/* @__PURE__ */
|
|
392
|
+
/* @__PURE__ */ React4.createElement("div", { className: "flex items-center gap-2 flex-1 min-w-0" }, /* @__PURE__ */ React4.createElement("span", { className: "text-sm text-foreground/90 truncate font-medium" }, cal.label)),
|
|
393
|
+
/* @__PURE__ */ React4.createElement(
|
|
371
394
|
"div",
|
|
372
395
|
{
|
|
373
396
|
className: "w-2 h-2 rounded-full opacity-60 group-hover:opacity-100 transition-opacity",
|
|
374
397
|
style: { backgroundColor: cal.color }
|
|
375
398
|
}
|
|
376
399
|
)
|
|
377
|
-
))))), /* @__PURE__ */
|
|
400
|
+
))))), /* @__PURE__ */ React4.createElement("div", { className: "mt-auto px-4 pt-5" }, /* @__PURE__ */ React4.createElement("div", { className: "bg-muted/20 rounded-2xl p-3" }, /* @__PURE__ */ React4.createElement("div", { className: "flex items-center gap-2 mb-3" }, /* @__PURE__ */ React4.createElement("div", { className: "p-1.5 bg-primary/10 rounded-lg" }, /* @__PURE__ */ React4.createElement(Globe, { className: "w-4 h-4 text-primary" })), /* @__PURE__ */ React4.createElement("span", { className: "text-sm font-semibold text-foreground" }, translations?.timezone || "Timezone")), /* @__PURE__ */ React4.createElement("div", { className: "relative" }, /* @__PURE__ */ React4.createElement(
|
|
378
401
|
"button",
|
|
379
402
|
{
|
|
380
403
|
onClick: () => setTimezoneOpen(!timezoneOpen),
|
|
381
404
|
className: "w-full flex items-center justify-between bg-blue-200/40 hover:bg-blue-200/80 rounded-xl py-2.5 pl-4 pr-3 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/50 transition-all duration-200 text-left"
|
|
382
405
|
},
|
|
383
|
-
/* @__PURE__ */
|
|
384
|
-
/* @__PURE__ */
|
|
385
|
-
), timezoneOpen && /* @__PURE__ */
|
|
406
|
+
/* @__PURE__ */ React4.createElement("div", { className: "flex-1 truncate mr-2 font-medium" }, selectedTimezoneLabel),
|
|
407
|
+
/* @__PURE__ */ React4.createElement(ChevronDown, { className: cn("w-4 h-4 text-muted-foreground transition-transform duration-200", timezoneOpen && "rotate-180") })
|
|
408
|
+
), timezoneOpen && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement("div", { className: "fixed inset-0 z-40", onClick: () => setTimezoneOpen(false) }), /* @__PURE__ */ React4.createElement("div", { className: "absolute bottom-full left-0 w-full mb-2 bg-background rounded-xl shadow-2xl z-50 max-h-[260px] overflow-y-auto p-1.5 animate-in fade-in zoom-in-95 duration-200 backdrop-blur-none" }, timezones.map((tz) => /* @__PURE__ */ React4.createElement(
|
|
386
409
|
"div",
|
|
387
410
|
{
|
|
388
411
|
key: tz.value,
|
|
@@ -398,6 +421,16 @@ var Sidebar = ({
|
|
|
398
421
|
formatTzLabel(tz)
|
|
399
422
|
))))))));
|
|
400
423
|
};
|
|
424
|
+
|
|
425
|
+
// src/views/MonthView.tsx
|
|
426
|
+
import React7, { useMemo, useCallback } from "react";
|
|
427
|
+
import { format as format5, isSameMonth as isSameMonth2, isToday as isToday2, startOfWeek as startOfWeek2, endOfWeek as endOfWeek2, eachDayOfInterval as eachDayOfInterval2 } from "date-fns";
|
|
428
|
+
import { toZonedTime as toZonedTime2 } from "date-fns-tz";
|
|
429
|
+
|
|
430
|
+
// src/components/dnd/DraggableEvent.tsx
|
|
431
|
+
import React5 from "react";
|
|
432
|
+
import { useDraggable } from "@dnd-kit/core";
|
|
433
|
+
import { CSS } from "@dnd-kit/utilities";
|
|
401
434
|
var DraggableEvent = ({ event, children, className, style: propStyle, ...props }) => {
|
|
402
435
|
const dragDisabled = isEventDragDisabled(event);
|
|
403
436
|
const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
|
|
@@ -417,7 +450,7 @@ var DraggableEvent = ({ event, children, className, style: propStyle, ...props }
|
|
|
417
450
|
opacity: isDragging ? 0 : propStyle?.opacity
|
|
418
451
|
// Hiding original element completely
|
|
419
452
|
};
|
|
420
|
-
return /* @__PURE__ */
|
|
453
|
+
return /* @__PURE__ */ React5.createElement(
|
|
421
454
|
"div",
|
|
422
455
|
{
|
|
423
456
|
ref: setNodeRef,
|
|
@@ -430,6 +463,10 @@ var DraggableEvent = ({ event, children, className, style: propStyle, ...props }
|
|
|
430
463
|
children
|
|
431
464
|
);
|
|
432
465
|
};
|
|
466
|
+
|
|
467
|
+
// src/components/dnd/DroppableCell.tsx
|
|
468
|
+
import React6 from "react";
|
|
469
|
+
import { useDroppable } from "@dnd-kit/core";
|
|
433
470
|
var DroppableCell = ({ id, date, resourceId, children, className, style, onClick }) => {
|
|
434
471
|
const { isOver, setNodeRef } = useDroppable({
|
|
435
472
|
id,
|
|
@@ -438,7 +475,7 @@ var DroppableCell = ({ id, date, resourceId, children, className, style, onClick
|
|
|
438
475
|
const minutes = date.getMinutes();
|
|
439
476
|
const quarterClass = minutes === 0 ? "hover:bg-blue-50/50 dark:hover:bg-blue-900/10" : minutes === 15 ? "hover:bg-blue-50/80 dark:hover:bg-blue-900/20" : minutes === 30 ? "hover:bg-blue-100/50 dark:hover:bg-blue-900/30" : "hover:bg-blue-100/80 dark:hover:bg-blue-900/40";
|
|
440
477
|
const activeQuarterClass = minutes === 0 ? "bg-blue-50/50 dark:bg-blue-900/10 ring-2 ring-primary ring-inset" : minutes === 15 ? "bg-blue-50/80 dark:bg-blue-900/20 ring-2 ring-primary ring-inset" : minutes === 30 ? "bg-blue-100/50 dark:bg-blue-900/30 ring-2 ring-primary ring-inset" : "bg-blue-100/80 dark:bg-blue-900/40 ring-2 ring-primary ring-inset";
|
|
441
|
-
return /* @__PURE__ */
|
|
478
|
+
return /* @__PURE__ */ React6.createElement(
|
|
442
479
|
"div",
|
|
443
480
|
{
|
|
444
481
|
ref: setNodeRef,
|
|
@@ -455,7 +492,7 @@ var DroppableCell = ({ id, date, resourceId, children, className, style, onClick
|
|
|
455
492
|
};
|
|
456
493
|
|
|
457
494
|
// src/views/MonthView.tsx
|
|
458
|
-
var EventItem =
|
|
495
|
+
var EventItem = React7.memo(({ event, onEventClick }) => /* @__PURE__ */ React7.createElement(DraggableEvent, { event }, /* @__PURE__ */ React7.createElement(
|
|
459
496
|
"div",
|
|
460
497
|
{
|
|
461
498
|
className: cn(
|
|
@@ -473,7 +510,7 @@ var EventItem = React15__default.memo(({ event, onEventClick }) => /* @__PURE__
|
|
|
473
510
|
onEventClick?.(event);
|
|
474
511
|
}
|
|
475
512
|
},
|
|
476
|
-
/* @__PURE__ */
|
|
513
|
+
/* @__PURE__ */ React7.createElement("span", { className: "font-medium" }, event.title)
|
|
477
514
|
)));
|
|
478
515
|
EventItem.displayName = "EventItem";
|
|
479
516
|
var MonthView = ({
|
|
@@ -490,18 +527,18 @@ var MonthView = ({
|
|
|
490
527
|
[currentDate, weekStartsOn]
|
|
491
528
|
);
|
|
492
529
|
const weekDays = useMemo(() => {
|
|
493
|
-
const start =
|
|
494
|
-
const end =
|
|
495
|
-
return
|
|
530
|
+
const start = startOfWeek2(currentDate, { weekStartsOn });
|
|
531
|
+
const end = endOfWeek2(currentDate, { weekStartsOn });
|
|
532
|
+
return eachDayOfInterval2({ start, end });
|
|
496
533
|
}, [currentDate, weekStartsOn]);
|
|
497
534
|
const getZonedDate = useCallback((date) => {
|
|
498
|
-
return timezone ?
|
|
535
|
+
return timezone ? toZonedTime2(date, timezone) : date;
|
|
499
536
|
}, [timezone]);
|
|
500
537
|
const eventsByDay = useMemo(() => {
|
|
501
538
|
const map = /* @__PURE__ */ new Map();
|
|
502
539
|
events.forEach((event) => {
|
|
503
540
|
const zonedStart = getZonedDate(event.start);
|
|
504
|
-
const key =
|
|
541
|
+
const key = format5(zonedStart, "yyyy-MM-dd");
|
|
505
542
|
if (!map.has(key)) {
|
|
506
543
|
map.set(key, []);
|
|
507
544
|
}
|
|
@@ -509,19 +546,19 @@ var MonthView = ({
|
|
|
509
546
|
});
|
|
510
547
|
return map;
|
|
511
548
|
}, [events, getZonedDate]);
|
|
512
|
-
return /* @__PURE__ */
|
|
549
|
+
return /* @__PURE__ */ React7.createElement("div", { className: "flex flex-col h-full bg-background border-[0.5px] scrollbar-hide border-border/50 rounded-2xl overflow-hidden min-w-[800px] md:min-w-0 shadow-sm" }, /* @__PURE__ */ React7.createElement("div", { className: "overflow-y-auto flex-1 relative" }, /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-7 border-b-[0.5px] border-border/50 bg-gradient-to-r from-muted/30 via-muted/40 to-muted/30 sticky top-0 z-20 backdrop-blur-sm" }, weekDays.map((day) => /* @__PURE__ */ React7.createElement(
|
|
513
550
|
"div",
|
|
514
551
|
{
|
|
515
552
|
key: day.toISOString(),
|
|
516
553
|
className: "py-3 text-center text-xs font-semibold text-muted-foreground border-r-[0.5px] border-border/30 last:border-r-0 uppercase tracking-wider"
|
|
517
554
|
},
|
|
518
|
-
|
|
519
|
-
))), /* @__PURE__ */
|
|
520
|
-
const dayKey =
|
|
555
|
+
format5(day, "EEE", { locale })
|
|
556
|
+
))), /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-7", style: { gridAutoRows: "130px" } }, days.map((day) => {
|
|
557
|
+
const dayKey = format5(day, "yyyy-MM-dd");
|
|
521
558
|
const dayEvents = eventsByDay.get(dayKey) || [];
|
|
522
|
-
const isCurrentMonth =
|
|
559
|
+
const isCurrentMonth = isSameMonth2(day, currentDate);
|
|
523
560
|
const cellId = day.toISOString();
|
|
524
|
-
return /* @__PURE__ */
|
|
561
|
+
return /* @__PURE__ */ React7.createElement(
|
|
525
562
|
DroppableCell,
|
|
526
563
|
{
|
|
527
564
|
key: cellId,
|
|
@@ -530,18 +567,26 @@ var MonthView = ({
|
|
|
530
567
|
className: cn(
|
|
531
568
|
"h-[130px] p-2 border-b-[0.5px] border-r-[0.5px] border-border/30 last:border-r-0 relative transition-all duration-200 hover:bg-accent/5 flex flex-col gap-1.5 overflow-hidden group",
|
|
532
569
|
!isCurrentMonth && "bg-muted/5 text-muted-foreground/60",
|
|
533
|
-
|
|
570
|
+
isToday2(day) && "bg-primary/5 ring-1 ring-inset ring-primary/20"
|
|
534
571
|
),
|
|
535
572
|
onClick: () => onDateClick?.(day)
|
|
536
573
|
},
|
|
537
|
-
/* @__PURE__ */
|
|
574
|
+
/* @__PURE__ */ React7.createElement("div", { className: "flex justify-between items-start" }, /* @__PURE__ */ React7.createElement("div", { className: cn(
|
|
538
575
|
"text-sm font-semibold w-7 h-7 flex items-center justify-center rounded-full transition-all duration-200",
|
|
539
|
-
|
|
540
|
-
) },
|
|
541
|
-
/* @__PURE__ */
|
|
576
|
+
isToday2(day) ? "bg-primary text-primary-foreground shadow-md shadow-primary/30" : "group-hover:bg-accent"
|
|
577
|
+
) }, format5(day, "d", { locale })), dayEvents.length > 0 && /* @__PURE__ */ React7.createElement("div", { className: "text-[10px] font-medium text-muted-foreground/60 bg-muted/50 px-1.5 py-0.5 rounded-full" }, dayEvents.length)),
|
|
578
|
+
/* @__PURE__ */ React7.createElement("div", { className: "flex-1 flex flex-col gap-1 scrollbar-hide overflow-y-auto overflow-x-hidden" }, dayEvents.slice(0, 4).map((event) => /* @__PURE__ */ React7.createElement(EventItem, { key: `${event.id}-${dayKey}`, event, onEventClick })), dayEvents.length > 4 && /* @__PURE__ */ React7.createElement("div", { className: "text-[10px] text-primary font-semibold text-center py-1 px-2 rounded-md bg-primary/5 hover:bg-primary/10 cursor-pointer transition-colors" }, "+", dayEvents.length - 4, " more"))
|
|
542
579
|
);
|
|
543
580
|
}))));
|
|
544
581
|
};
|
|
582
|
+
|
|
583
|
+
// src/views/WeekView.tsx
|
|
584
|
+
import React9 from "react";
|
|
585
|
+
import { format as format6, isSameDay as isSameDay2, differenceInMinutes, isToday as isToday3, startOfWeek as startOfWeek3, endOfWeek as endOfWeek3, eachDayOfInterval as eachDayOfInterval3 } from "date-fns";
|
|
586
|
+
import { toZonedTime as toZonedTime3 } from "date-fns-tz";
|
|
587
|
+
|
|
588
|
+
// src/components/dnd/ResizableEvent.tsx
|
|
589
|
+
import React8, { useState as useState2, useRef, useCallback as useCallback2 } from "react";
|
|
545
590
|
var ResizableEvent = ({
|
|
546
591
|
event,
|
|
547
592
|
hourHeight,
|
|
@@ -553,13 +598,13 @@ var ResizableEvent = ({
|
|
|
553
598
|
readonly
|
|
554
599
|
}) => {
|
|
555
600
|
const resizeLocked = readonly || isEventResizeDisabled(event);
|
|
556
|
-
const [isResizing, setIsResizing] =
|
|
557
|
-
const [resizeHeight, setResizeHeight] =
|
|
601
|
+
const [isResizing, setIsResizing] = useState2(false);
|
|
602
|
+
const [resizeHeight, setResizeHeight] = useState2(null);
|
|
558
603
|
const containerRef = useRef(null);
|
|
559
604
|
const startYRef = useRef(0);
|
|
560
605
|
const startHeightRef = useRef(0);
|
|
561
606
|
const resizeHeightRef = useRef(null);
|
|
562
|
-
const handleResizeStart =
|
|
607
|
+
const handleResizeStart = useCallback2((e) => {
|
|
563
608
|
e.preventDefault();
|
|
564
609
|
e.stopPropagation();
|
|
565
610
|
const clientY = "touches" in e ? e.touches[0].clientY : e.clientY;
|
|
@@ -604,10 +649,10 @@ var ResizableEvent = ({
|
|
|
604
649
|
document.addEventListener("touchmove", handleMove, { passive: false });
|
|
605
650
|
document.addEventListener("touchend", handleEnd);
|
|
606
651
|
}, [event, hourHeight, minDuration, onResize]);
|
|
607
|
-
const handlePointerDown =
|
|
652
|
+
const handlePointerDown = useCallback2((e) => {
|
|
608
653
|
e.stopPropagation();
|
|
609
654
|
}, []);
|
|
610
|
-
return /* @__PURE__ */
|
|
655
|
+
return /* @__PURE__ */ React8.createElement(
|
|
611
656
|
"div",
|
|
612
657
|
{
|
|
613
658
|
ref: containerRef,
|
|
@@ -618,7 +663,7 @@ var ResizableEvent = ({
|
|
|
618
663
|
}
|
|
619
664
|
},
|
|
620
665
|
children,
|
|
621
|
-
/* @__PURE__ */
|
|
666
|
+
/* @__PURE__ */ React8.createElement(
|
|
622
667
|
"div",
|
|
623
668
|
{
|
|
624
669
|
className: cn(
|
|
@@ -631,12 +676,12 @@ var ResizableEvent = ({
|
|
|
631
676
|
onMouseDown: resizeLocked ? void 0 : handleResizeStart,
|
|
632
677
|
onTouchStart: resizeLocked ? void 0 : handleResizeStart
|
|
633
678
|
},
|
|
634
|
-
/* @__PURE__ */
|
|
679
|
+
/* @__PURE__ */ React8.createElement("div", { className: cn(
|
|
635
680
|
"w-8 h-1 rounded-full transition-all",
|
|
636
681
|
isResizing ? "bg-primary" : "bg-muted-foreground/30 group-hover:bg-primary/50"
|
|
637
682
|
) })
|
|
638
683
|
),
|
|
639
|
-
isResizing && /* @__PURE__ */
|
|
684
|
+
isResizing && /* @__PURE__ */ React8.createElement("div", { className: "absolute inset-0 border-2 border-primary border-dashed rounded-md pointer-events-none bg-primary/5" })
|
|
640
685
|
);
|
|
641
686
|
};
|
|
642
687
|
|
|
@@ -652,29 +697,25 @@ var WeekView = ({
|
|
|
652
697
|
readonly
|
|
653
698
|
}) => {
|
|
654
699
|
const weekStartsOn = locale?.options?.weekStartsOn ?? 1;
|
|
655
|
-
const start =
|
|
656
|
-
const end =
|
|
657
|
-
const weekDays =
|
|
700
|
+
const start = startOfWeek3(currentDate, { weekStartsOn });
|
|
701
|
+
const end = endOfWeek3(currentDate, { weekStartsOn });
|
|
702
|
+
const weekDays = eachDayOfInterval3({ start, end });
|
|
658
703
|
const hours = Array.from({ length: 24 }, (_, i) => i);
|
|
659
704
|
const hourHeight = 60;
|
|
660
|
-
const scrollContainerRef =
|
|
661
|
-
const [now, setNow] =
|
|
662
|
-
|
|
705
|
+
const scrollContainerRef = React9.useRef(null);
|
|
706
|
+
const [now, setNow] = React9.useState(/* @__PURE__ */ new Date());
|
|
707
|
+
React9.useEffect(() => {
|
|
663
708
|
const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
|
|
664
709
|
return () => clearInterval(interval);
|
|
665
710
|
}, []);
|
|
666
|
-
|
|
711
|
+
React9.useEffect(() => {
|
|
667
712
|
if (scrollContainerRef.current) {
|
|
668
|
-
const
|
|
669
|
-
|
|
670
|
-
const offsetHour = 4;
|
|
671
|
-
return (currentHour - offsetHour) * hourHeight;
|
|
672
|
-
};
|
|
673
|
-
scrollContainerRef.current.scrollTop = scrollToActualTime();
|
|
713
|
+
const offsetHour = 4;
|
|
714
|
+
scrollContainerRef.current.scrollTop = ((/* @__PURE__ */ new Date()).getHours() - offsetHour) * hourHeight;
|
|
674
715
|
}
|
|
675
716
|
}, []);
|
|
676
717
|
const getZonedDate = (date) => {
|
|
677
|
-
return timezone ?
|
|
718
|
+
return timezone ? toZonedTime3(date, timezone) : date;
|
|
678
719
|
};
|
|
679
720
|
const zonedNow = getZonedDate(/* @__PURE__ */ new Date());
|
|
680
721
|
const getTimezoneDisplay = (tz) => {
|
|
@@ -682,60 +723,60 @@ var WeekView = ({
|
|
|
682
723
|
let displayTime = "";
|
|
683
724
|
let acronym = "";
|
|
684
725
|
if (!tz) {
|
|
685
|
-
displayTime =
|
|
726
|
+
displayTime = format6(date, "HH:mm");
|
|
686
727
|
try {
|
|
687
728
|
acronym = new Intl.DateTimeFormat("en-US", { timeZoneName: "short" }).formatToParts(date).find((part) => part.type === "timeZoneName")?.value || "";
|
|
688
|
-
} catch
|
|
729
|
+
} catch {
|
|
689
730
|
acronym = "LOC";
|
|
690
731
|
}
|
|
691
732
|
} else {
|
|
692
733
|
try {
|
|
693
|
-
const zDate =
|
|
694
|
-
displayTime =
|
|
734
|
+
const zDate = toZonedTime3(date, tz);
|
|
735
|
+
displayTime = format6(zDate, "HH:mm");
|
|
695
736
|
acronym = new Intl.DateTimeFormat("en-US", { timeZone: tz, timeZoneName: "short" }).formatToParts(date).find((part) => part.type === "timeZoneName")?.value || "";
|
|
696
|
-
} catch
|
|
697
|
-
displayTime =
|
|
737
|
+
} catch {
|
|
738
|
+
displayTime = format6(date, "HH:mm");
|
|
698
739
|
acronym = tz;
|
|
699
740
|
}
|
|
700
741
|
}
|
|
701
|
-
return /* @__PURE__ */
|
|
742
|
+
return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col items-center justify-center leading-tight" }, /* @__PURE__ */ React9.createElement("span", null, displayTime), /* @__PURE__ */ React9.createElement("span", { className: "text-[10px] opacity-75" }, "(", acronym, ")"));
|
|
702
743
|
};
|
|
703
744
|
const is24h = uses24HourClock(locale);
|
|
704
745
|
const timeFormat = is24h ? "H:mm" : "h a";
|
|
705
746
|
const eventTimeFormat = is24h ? "H:mm" : "h:mm a";
|
|
706
747
|
const nowFormat = is24h ? "H:mm" : "h:mm";
|
|
707
|
-
return /* @__PURE__ */
|
|
748
|
+
return /* @__PURE__ */ React9.createElement("div", { className: "flex flex-col h-full bg-background border-[0.5px] border-border/50 rounded-2xl overflow-hidden min-w-[800px] md:min-w-0 shadow-sm" }, /* @__PURE__ */ React9.createElement(
|
|
708
749
|
"div",
|
|
709
750
|
{
|
|
710
751
|
ref: scrollContainerRef,
|
|
711
752
|
className: "flex-1 overflow-y-auto scrollbar-hide relative bg-background scroll-smooth"
|
|
712
753
|
},
|
|
713
|
-
/* @__PURE__ */
|
|
754
|
+
/* @__PURE__ */ React9.createElement("div", { className: "flex border-b-[0.5px] border-border/50 bg-gradient-to-r from-muted/20 via-background to-muted/20 z-20 sticky top-0 backdrop-blur-sm" }, /* @__PURE__ */ React9.createElement("div", { className: "flex-none p-3 text-center text-xs font-semibold text-muted-foreground w-16 flex items-center justify-center border-r-[0.5px] border-border/30 bg-muted/10" }, getTimezoneDisplay(timezone)), /* @__PURE__ */ React9.createElement("div", { className: "flex-1 grid grid-cols-7" }, weekDays.map((day, index) => /* @__PURE__ */ React9.createElement("div", { key: day.toISOString(), className: cn("py-3 px-2 text-center", index > 0 && "border-l-[0.5px] border-border/30") }, /* @__PURE__ */ React9.createElement("div", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-1.5" }, format6(day, "EEE", { locale })), /* @__PURE__ */ React9.createElement("div", { className: cn(
|
|
714
755
|
"w-9 h-9 flex items-center justify-center rounded-xl mx-auto text-sm font-semibold transition-all duration-200",
|
|
715
|
-
|
|
716
|
-
) },
|
|
717
|
-
/* @__PURE__ */
|
|
756
|
+
isToday3(day) ? "bg-primary text-primary-foreground shadow-lg shadow-primary/30 scale-110" : "text-foreground hover:bg-accent/80"
|
|
757
|
+
) }, format6(day, "d", { locale })))))),
|
|
758
|
+
/* @__PURE__ */ React9.createElement(
|
|
718
759
|
"div",
|
|
719
760
|
{
|
|
720
761
|
className: "flex min-w-full relative",
|
|
721
762
|
style: { height: hours.length * hourHeight }
|
|
722
763
|
},
|
|
723
|
-
/* @__PURE__ */
|
|
764
|
+
/* @__PURE__ */ React9.createElement("div", { className: "flex-none w-16 border-r-[0.5px] border-border/30 relative bg-muted/5" }, hours.map((hour) => /* @__PURE__ */ React9.createElement(
|
|
724
765
|
"div",
|
|
725
766
|
{
|
|
726
767
|
key: hour,
|
|
727
768
|
className: "relative w-full text-[11px] text-muted-foreground/80 text-right pr-3 font-medium tabular-nums box-border",
|
|
728
769
|
style: { height: hourHeight }
|
|
729
770
|
},
|
|
730
|
-
/* @__PURE__ */
|
|
771
|
+
/* @__PURE__ */ React9.createElement("span", { className: "block -translate-y-1/2" }, hour !== 0 && format6((/* @__PURE__ */ new Date()).setHours(hour, 0, 0, 0), timeFormat, { locale }))
|
|
731
772
|
))),
|
|
732
|
-
/* @__PURE__ */
|
|
773
|
+
/* @__PURE__ */ React9.createElement("div", { className: "flex-1 grid grid-cols-7 relative" }, weekDays.map((day, dayIndex) => {
|
|
733
774
|
const dayEvents = events.filter((e) => {
|
|
734
775
|
const zonedStart = getZonedDate(e.start);
|
|
735
|
-
return
|
|
776
|
+
return isSameDay2(zonedStart, day);
|
|
736
777
|
});
|
|
737
|
-
return /* @__PURE__ */
|
|
738
|
-
return /* @__PURE__ */
|
|
778
|
+
return /* @__PURE__ */ React9.createElement("div", { key: day.toISOString(), className: cn("relative h-full", dayIndex > 0 && "border-l-[0.5px] border-border/30") }, hours.map((hour) => {
|
|
779
|
+
return /* @__PURE__ */ React9.createElement(
|
|
739
780
|
"div",
|
|
740
781
|
{
|
|
741
782
|
key: hour,
|
|
@@ -746,7 +787,7 @@ var WeekView = ({
|
|
|
746
787
|
const cellDate = new Date(day);
|
|
747
788
|
cellDate.setHours(hour, minute, 0, 0);
|
|
748
789
|
const cellId = cellDate.toISOString();
|
|
749
|
-
return /* @__PURE__ */
|
|
790
|
+
return /* @__PURE__ */ React9.createElement(
|
|
750
791
|
DroppableCell,
|
|
751
792
|
{
|
|
752
793
|
key: minute,
|
|
@@ -758,7 +799,7 @@ var WeekView = ({
|
|
|
758
799
|
top: `${minute / 60 * 100}%`
|
|
759
800
|
}
|
|
760
801
|
},
|
|
761
|
-
/* @__PURE__ */
|
|
802
|
+
/* @__PURE__ */ React9.createElement(
|
|
762
803
|
"div",
|
|
763
804
|
{
|
|
764
805
|
className: "w-full h-full bg-transparent cursor-pointer",
|
|
@@ -792,7 +833,7 @@ var WeekView = ({
|
|
|
792
833
|
const top = startMinutes / 60 * hourHeight;
|
|
793
834
|
const height = durationMinutes / 60 * hourHeight;
|
|
794
835
|
const isShortEvent = durationMinutes < 60;
|
|
795
|
-
return /* @__PURE__ */
|
|
836
|
+
return /* @__PURE__ */ React9.createElement(
|
|
796
837
|
DraggableEvent,
|
|
797
838
|
{
|
|
798
839
|
key: `${event.id}-${day.toISOString()}`,
|
|
@@ -807,7 +848,7 @@ var WeekView = ({
|
|
|
807
848
|
paddingRight: count > 1 ? "2px" : "0"
|
|
808
849
|
}
|
|
809
850
|
},
|
|
810
|
-
/* @__PURE__ */
|
|
851
|
+
/* @__PURE__ */ React9.createElement(
|
|
811
852
|
ResizableEvent,
|
|
812
853
|
{
|
|
813
854
|
readonly,
|
|
@@ -817,7 +858,7 @@ var WeekView = ({
|
|
|
817
858
|
className: "h-full",
|
|
818
859
|
style: { height: "100%" }
|
|
819
860
|
},
|
|
820
|
-
/* @__PURE__ */
|
|
861
|
+
/* @__PURE__ */ React9.createElement(
|
|
821
862
|
"div",
|
|
822
863
|
{
|
|
823
864
|
className: cn(
|
|
@@ -842,14 +883,14 @@ var WeekView = ({
|
|
|
842
883
|
},
|
|
843
884
|
title: count > 1 ? `${event.title} (${index + 1}/${count})` : void 0
|
|
844
885
|
},
|
|
845
|
-
/* @__PURE__ */
|
|
886
|
+
/* @__PURE__ */ React9.createElement("div", { className: "flex flex-col h-full overflow-hidden w-full" }, /* @__PURE__ */ React9.createElement("div", { className: cn(
|
|
846
887
|
"font-semibold truncate text-foreground/90 leading-tight",
|
|
847
888
|
isShortEvent ? "text-xs text-center" : "text-xs"
|
|
848
|
-
) }, event.title), !isShortEvent && /* @__PURE__ */
|
|
889
|
+
) }, event.title), !isShortEvent && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("div", { className: "text-[10px] text-muted-foreground truncate mt-0.5 font-medium leading-tight" }, format6(zonedEventStart, eventTimeFormat, { locale }), " - ", format6(zonedEventEnd, eventTimeFormat, { locale })), event.description && height > 50 && /* @__PURE__ */ React9.createElement("div", { className: "text-[10px] text-muted-foreground/80 truncate mt-1 leading-tight opacity-80" }, event.description)), count > 1 && !isShortEvent && /* @__PURE__ */ React9.createElement("div", { className: "absolute top-1 right-1 bg-background/80 backdrop-blur-sm rounded-full w-4 h-4 flex items-center justify-center text-[9px] font-bold text-muted-foreground border border-border shadow-sm" }, count))
|
|
849
890
|
)
|
|
850
891
|
)
|
|
851
892
|
);
|
|
852
|
-
}),
|
|
893
|
+
}), isToday3(day) && /* @__PURE__ */ React9.createElement(
|
|
853
894
|
"div",
|
|
854
895
|
{
|
|
855
896
|
className: "absolute left-0 right-0 z-20 pointer-events-none flex items-center",
|
|
@@ -857,12 +898,12 @@ var WeekView = ({
|
|
|
857
898
|
top: `${(zonedNow.getHours() * 60 + zonedNow.getMinutes()) / 60 * hourHeight}px`
|
|
858
899
|
}
|
|
859
900
|
},
|
|
860
|
-
/* @__PURE__ */
|
|
861
|
-
/* @__PURE__ */
|
|
901
|
+
/* @__PURE__ */ React9.createElement("div", { className: "h-[2px] w-full bg-gradient-to-r from-primary via-primary to-primary/50" }),
|
|
902
|
+
/* @__PURE__ */ React9.createElement("div", { className: "absolute -left-1.5 w-3 h-3 bg-primary rounded-full shadow-lg shadow-primary/40 ring-2 ring-background animate-pulse" })
|
|
862
903
|
));
|
|
863
904
|
}))
|
|
864
905
|
),
|
|
865
|
-
/* @__PURE__ */
|
|
906
|
+
/* @__PURE__ */ React9.createElement(
|
|
866
907
|
"div",
|
|
867
908
|
{
|
|
868
909
|
className: "absolute left-0 w-16 pointer-events-none z-30 flex justify-end pr-2",
|
|
@@ -870,10 +911,15 @@ var WeekView = ({
|
|
|
870
911
|
top: `${(zonedNow.getHours() * 60 + zonedNow.getMinutes()) / 60 * hourHeight + 80}px`
|
|
871
912
|
}
|
|
872
913
|
},
|
|
873
|
-
/* @__PURE__ */
|
|
914
|
+
/* @__PURE__ */ React9.createElement("span", { className: "text-[10px] font-bold text-primary-foreground bg-primary px-1.5 py-0.5 rounded-md shadow-md -translate-y-1/2 backdrop-blur-none" }, format6(zonedNow, nowFormat, { locale }))
|
|
874
915
|
)
|
|
875
916
|
));
|
|
876
917
|
};
|
|
918
|
+
|
|
919
|
+
// src/views/DayView.tsx
|
|
920
|
+
import React10 from "react";
|
|
921
|
+
import { format as format7, differenceInMinutes as differenceInMinutes2, isToday as isToday4, isSameDay as isSameDay3 } from "date-fns";
|
|
922
|
+
import { toZonedTime as toZonedTime4 } from "date-fns-tz";
|
|
877
923
|
var DayView = ({
|
|
878
924
|
currentDate,
|
|
879
925
|
events,
|
|
@@ -886,43 +932,39 @@ var DayView = ({
|
|
|
886
932
|
}) => {
|
|
887
933
|
const hours = Array.from({ length: 24 }, (_, i) => i);
|
|
888
934
|
const hourHeight = 80;
|
|
889
|
-
const scrollContainerRef =
|
|
890
|
-
const [now, setNow] =
|
|
891
|
-
|
|
935
|
+
const scrollContainerRef = React10.useRef(null);
|
|
936
|
+
const [now, setNow] = React10.useState(/* @__PURE__ */ new Date());
|
|
937
|
+
React10.useEffect(() => {
|
|
892
938
|
const interval = setInterval(() => setNow(/* @__PURE__ */ new Date()), 6e4);
|
|
893
939
|
return () => clearInterval(interval);
|
|
894
940
|
}, []);
|
|
895
|
-
|
|
941
|
+
React10.useEffect(() => {
|
|
896
942
|
if (scrollContainerRef.current) {
|
|
897
|
-
const
|
|
898
|
-
|
|
899
|
-
const offsetHour = 3;
|
|
900
|
-
return (currentHour - offsetHour) * hourHeight;
|
|
901
|
-
};
|
|
902
|
-
scrollContainerRef.current.scrollTop = scrollToActualTime();
|
|
943
|
+
const offsetHour = 3;
|
|
944
|
+
scrollContainerRef.current.scrollTop = ((/* @__PURE__ */ new Date()).getHours() - offsetHour) * hourHeight;
|
|
903
945
|
}
|
|
904
946
|
}, []);
|
|
905
947
|
const getZonedDate = (date) => {
|
|
906
|
-
return timezone ?
|
|
948
|
+
return timezone ? toZonedTime4(date, timezone) : date;
|
|
907
949
|
};
|
|
908
950
|
const zonedNow = getZonedDate(now);
|
|
909
951
|
const dayEvents = events.filter((e) => {
|
|
910
952
|
const zonedStart = getZonedDate(e.start);
|
|
911
|
-
return
|
|
953
|
+
return isSameDay3(zonedStart, currentDate);
|
|
912
954
|
});
|
|
913
955
|
const is24h = uses24HourClock(locale);
|
|
914
956
|
const timeFormat = is24h ? "H:mm" : "h a";
|
|
915
957
|
const eventTimeFormat = is24h ? "H:mm" : "h:mm a";
|
|
916
958
|
const nowFormat = is24h ? "H:mm" : "h:mm a";
|
|
917
|
-
return /* @__PURE__ */
|
|
959
|
+
return /* @__PURE__ */ React10.createElement("div", { className: "flex flex-col h-full bg-background border-[0.5px] border-border/50 rounded-2xl overflow-hidden shadow-sm" }, /* @__PURE__ */ React10.createElement("div", { className: "px-6 py-4 border-b-[0.5px] border-border/50 bg-gradient-to-r from-muted/20 via-background to-muted/20 text-center shrink-0" }, /* @__PURE__ */ React10.createElement("div", { className: "flex items-center justify-center gap-3" }, /* @__PURE__ */ React10.createElement("h2", { className: "text-xl font-semibold capitalize text-foreground" }, format7(currentDate, "EEEE, MMMM d, yyyy", { locale })), isToday4(currentDate) && /* @__PURE__ */ React10.createElement("span", { className: "text-xs font-semibold bg-primary text-primary-foreground px-3 py-1 rounded-full shadow-md shadow-primary/20" }, "Today"))), /* @__PURE__ */ React10.createElement("div", { ref: scrollContainerRef, className: "flex-1 overflow-y-auto relative" }, /* @__PURE__ */ React10.createElement("div", { className: "flex relative", style: { height: hours.length * hourHeight } }, /* @__PURE__ */ React10.createElement("div", { className: "w-20 bg-muted/5 border-r-[0.5px] border-border/30 relative" }, hours.map((hour) => /* @__PURE__ */ React10.createElement(
|
|
918
960
|
"div",
|
|
919
961
|
{
|
|
920
962
|
key: hour,
|
|
921
963
|
className: "relative w-full",
|
|
922
964
|
style: { height: hourHeight }
|
|
923
965
|
},
|
|
924
|
-
hour !== 0 && /* @__PURE__ */
|
|
925
|
-
)),
|
|
966
|
+
hour !== 0 && /* @__PURE__ */ React10.createElement("span", { className: "absolute w-full text-center -top-3 left-1/2 -translate-x-1/2 text-[11px] text-muted-foreground/80 font-medium tabular-nums bg-background px-1.5 py-0.5 rounded-md" }, format7((/* @__PURE__ */ new Date()).setHours(hour, 0, 0, 0), timeFormat, { locale }))
|
|
967
|
+
)), isToday4(currentDate) && /* @__PURE__ */ React10.createElement(
|
|
926
968
|
"div",
|
|
927
969
|
{
|
|
928
970
|
className: "absolute left-0 w-full pointer-events-none z-30 flex justify-end pr-2",
|
|
@@ -930,9 +972,9 @@ var DayView = ({
|
|
|
930
972
|
top: `${(zonedNow.getHours() * 60 + zonedNow.getMinutes()) / 60 * hourHeight}px`
|
|
931
973
|
}
|
|
932
974
|
},
|
|
933
|
-
/* @__PURE__ */
|
|
934
|
-
)), /* @__PURE__ */
|
|
935
|
-
return /* @__PURE__ */
|
|
975
|
+
/* @__PURE__ */ React10.createElement("span", { className: "text-[10px] font-bold text-white bg-primary px-2 py-1 rounded-lg shadow-md shadow-primary/30 -translate-y-1/2" }, format7(zonedNow, nowFormat, { locale }))
|
|
976
|
+
)), /* @__PURE__ */ React10.createElement("div", { className: "flex-1 relative" }, hours.map((hour) => {
|
|
977
|
+
return /* @__PURE__ */ React10.createElement(
|
|
936
978
|
"div",
|
|
937
979
|
{
|
|
938
980
|
key: hour,
|
|
@@ -943,7 +985,7 @@ var DayView = ({
|
|
|
943
985
|
const cellDate = new Date(currentDate);
|
|
944
986
|
cellDate.setHours(hour, minute, 0, 0);
|
|
945
987
|
const cellId = cellDate.toISOString();
|
|
946
|
-
return /* @__PURE__ */
|
|
988
|
+
return /* @__PURE__ */ React10.createElement(
|
|
947
989
|
DroppableCell,
|
|
948
990
|
{
|
|
949
991
|
key: minute,
|
|
@@ -955,7 +997,7 @@ var DayView = ({
|
|
|
955
997
|
top: `${minute / 60 * 100}%`
|
|
956
998
|
}
|
|
957
999
|
},
|
|
958
|
-
/* @__PURE__ */
|
|
1000
|
+
/* @__PURE__ */ React10.createElement(
|
|
959
1001
|
"div",
|
|
960
1002
|
{
|
|
961
1003
|
className: "h-full w-full bg-transparent cursor-pointer",
|
|
@@ -984,11 +1026,11 @@ var DayView = ({
|
|
|
984
1026
|
const zonedStart = getZonedDate(event.start);
|
|
985
1027
|
const zonedEnd = getZonedDate(event.end);
|
|
986
1028
|
const startMinutes = zonedStart.getHours() * 60 + zonedStart.getMinutes();
|
|
987
|
-
const durationMinutes =
|
|
1029
|
+
const durationMinutes = differenceInMinutes2(zonedEnd, zonedStart);
|
|
988
1030
|
const top = startMinutes / 60 * hourHeight;
|
|
989
1031
|
const height = durationMinutes / 60 * hourHeight;
|
|
990
1032
|
const isShortEvent = durationMinutes < 45;
|
|
991
|
-
return /* @__PURE__ */
|
|
1033
|
+
return /* @__PURE__ */ React10.createElement(
|
|
992
1034
|
DraggableEvent,
|
|
993
1035
|
{
|
|
994
1036
|
key: `${event.id}-${currentDate.toISOString()}`,
|
|
@@ -1002,7 +1044,7 @@ var DayView = ({
|
|
|
1002
1044
|
paddingRight: count > 1 ? "2px" : "0"
|
|
1003
1045
|
}
|
|
1004
1046
|
},
|
|
1005
|
-
/* @__PURE__ */
|
|
1047
|
+
/* @__PURE__ */ React10.createElement(
|
|
1006
1048
|
ResizableEvent,
|
|
1007
1049
|
{
|
|
1008
1050
|
readonly,
|
|
@@ -1012,7 +1054,7 @@ var DayView = ({
|
|
|
1012
1054
|
className: "h-full",
|
|
1013
1055
|
style: { height: "100%" }
|
|
1014
1056
|
},
|
|
1015
|
-
/* @__PURE__ */
|
|
1057
|
+
/* @__PURE__ */ React10.createElement(
|
|
1016
1058
|
"div",
|
|
1017
1059
|
{
|
|
1018
1060
|
className: cn(
|
|
@@ -1035,15 +1077,15 @@ var DayView = ({
|
|
|
1035
1077
|
},
|
|
1036
1078
|
title: count > 1 ? `${event.title} (${index + 1}/${count})` : void 0
|
|
1037
1079
|
},
|
|
1038
|
-
/* @__PURE__ */
|
|
1080
|
+
/* @__PURE__ */ React10.createElement("div", { className: "flex flex-col h-full overflow-hidden w-full" }, /* @__PURE__ */ React10.createElement("div", { className: cn(
|
|
1039
1081
|
"font-semibold truncate leading-tight",
|
|
1040
1082
|
isShortEvent ? "text-xs" : "text-sm",
|
|
1041
1083
|
event.color ? "text-foreground" : "text-foreground/90"
|
|
1042
|
-
) }, event.title), !isShortEvent && /* @__PURE__ */
|
|
1084
|
+
) }, event.title), !isShortEvent && /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-muted-foreground mt-0.5 font-medium" }, format7(zonedStart, eventTimeFormat, { locale }), " - ", format7(zonedEnd, eventTimeFormat, { locale })), event.description && height > 60 && /* @__PURE__ */ React10.createElement("div", { className: "text-xs text-muted-foreground/80 mt-1 line-clamp-2" }, event.description)), count > 1 && !isShortEvent && /* @__PURE__ */ React10.createElement("div", { className: "absolute top-1.5 right-1.5 bg-background/90 backdrop-blur-sm rounded-full w-5 h-5 flex items-center justify-center text-[10px] font-bold text-muted-foreground border border-border shadow-sm" }, count))
|
|
1043
1085
|
)
|
|
1044
1086
|
)
|
|
1045
1087
|
);
|
|
1046
|
-
}),
|
|
1088
|
+
}), isToday4(currentDate) && /* @__PURE__ */ React10.createElement(
|
|
1047
1089
|
"div",
|
|
1048
1090
|
{
|
|
1049
1091
|
className: "absolute left-0 right-0 z-20 pointer-events-none flex items-center",
|
|
@@ -1051,21 +1093,33 @@ var DayView = ({
|
|
|
1051
1093
|
top: `${(zonedNow.getHours() * 60 + zonedNow.getMinutes()) / 60 * hourHeight}px`
|
|
1052
1094
|
}
|
|
1053
1095
|
},
|
|
1054
|
-
/* @__PURE__ */
|
|
1055
|
-
/* @__PURE__ */
|
|
1096
|
+
/* @__PURE__ */ React10.createElement("div", { className: "h-[2px] w-full bg-gradient-to-r from-primary via-primary to-primary/50" }),
|
|
1097
|
+
/* @__PURE__ */ React10.createElement("div", { className: "absolute -left-1.5 w-3 h-3 bg-primary rounded-full shadow-lg shadow-primary/40 ring-2 ring-background animate-pulse" })
|
|
1056
1098
|
)))));
|
|
1057
1099
|
};
|
|
1058
|
-
|
|
1100
|
+
|
|
1101
|
+
// src/views/AgendaView.tsx
|
|
1102
|
+
import React12, { useMemo as useMemo2 } from "react";
|
|
1103
|
+
import { format as format8, isSameDay as isSameDay4, isToday as isToday5, isTomorrow, addDays, startOfDay, differenceInMinutes as differenceInMinutes3 } from "date-fns";
|
|
1104
|
+
|
|
1105
|
+
// src/components/EmptyState.tsx
|
|
1106
|
+
import React11 from "react";
|
|
1107
|
+
import { Plus as Plus2 } from "lucide-react";
|
|
1108
|
+
var AgendaEmptyState = ({ onCreateEvent, translations }) => /* @__PURE__ */ React11.createElement("div", { className: "flex flex-col items-center justify-center h-full min-h-[400px] py-12" }, /* @__PURE__ */ React11.createElement("div", { className: "relative mb-8" }, /* @__PURE__ */ React11.createElement("div", { className: "p-8 bg-gradient-to-br from-green-50 to-blue-50 dark:from-green-900/10 dark:to-blue-900/10 rounded-3xl border border-border/30" }, /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React11.createElement("div", { className: "w-12 h-12 rounded-2xl bg-green-100 dark:bg-green-900/30 flex items-center justify-center" }, /* @__PURE__ */ React11.createElement("svg", { className: "w-6 h-6 text-green-600 dark:text-green-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2 }, /* @__PURE__ */ React11.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }))), /* @__PURE__ */ React11.createElement("div", { className: "text-left" }, /* @__PURE__ */ React11.createElement("div", { className: "font-medium text-foreground" }, translations?.allCaughtUp || "All caught up!"), /* @__PURE__ */ React11.createElement("div", { className: "text-sm text-muted-foreground" }, translations?.noEventsScheduled || "No events scheduled"))))), /* @__PURE__ */ React11.createElement("div", { className: "text-center max-w-sm" }, /* @__PURE__ */ React11.createElement("h3", { className: "text-lg font-semibold text-foreground mb-2" }, translations?.noUpcoming || "Your schedule is clear"), /* @__PURE__ */ React11.createElement("p", { className: "text-sm text-muted-foreground mb-6" }, translations?.noUpcomingHint || "No upcoming events to show. Create a new event to start planning."), onCreateEvent && /* @__PURE__ */ React11.createElement(
|
|
1059
1109
|
"button",
|
|
1060
1110
|
{
|
|
1061
1111
|
onClick: onCreateEvent,
|
|
1062
1112
|
className: "inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-primary-foreground rounded-xl font-medium text-sm shadow-lg shadow-primary/20 hover:shadow-xl hover:shadow-primary/30 hover:scale-105 active:scale-95 transition-all duration-200"
|
|
1063
1113
|
},
|
|
1064
|
-
/* @__PURE__ */
|
|
1114
|
+
/* @__PURE__ */ React11.createElement(Plus2, { className: "w-4 h-4" }),
|
|
1065
1115
|
translations?.createEvent || "Create Event"
|
|
1066
1116
|
)));
|
|
1117
|
+
|
|
1118
|
+
// src/views/AgendaView.tsx
|
|
1119
|
+
import { motion } from "framer-motion";
|
|
1120
|
+
import { Clock, Users, Paperclip, Bell } from "lucide-react";
|
|
1067
1121
|
var formatDuration = (start, end) => {
|
|
1068
|
-
const minutes =
|
|
1122
|
+
const minutes = differenceInMinutes3(end, start);
|
|
1069
1123
|
if (minutes < 60) return `${minutes}m`;
|
|
1070
1124
|
const hours = Math.floor(minutes / 60);
|
|
1071
1125
|
const remainingMinutes = minutes % 60;
|
|
@@ -1073,9 +1127,9 @@ var formatDuration = (start, end) => {
|
|
|
1073
1127
|
return `${hours}h ${remainingMinutes}m`;
|
|
1074
1128
|
};
|
|
1075
1129
|
var getDateLabel = (date, locale, translations) => {
|
|
1076
|
-
if (
|
|
1130
|
+
if (isToday5(date)) return translations?.today || "Today";
|
|
1077
1131
|
if (isTomorrow(date)) return translations?.tomorrow || "Tomorrow";
|
|
1078
|
-
return
|
|
1132
|
+
return format8(date, "EEEE", { locale });
|
|
1079
1133
|
};
|
|
1080
1134
|
var AgendaView = ({
|
|
1081
1135
|
currentDate,
|
|
@@ -1088,13 +1142,13 @@ var AgendaView = ({
|
|
|
1088
1142
|
const is24h = uses24HourClock(locale);
|
|
1089
1143
|
const timePattern = is24h ? "H:mm" : "h:mm a";
|
|
1090
1144
|
const compactTimePattern = is24h ? "H:mm" : "h:mm";
|
|
1091
|
-
const groupedEvents =
|
|
1145
|
+
const groupedEvents = useMemo2(() => {
|
|
1092
1146
|
const startDate = startOfDay(currentDate);
|
|
1093
1147
|
const groups = [];
|
|
1094
1148
|
const sortedEvents = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
|
|
1095
1149
|
for (let i = 0; i < 30; i++) {
|
|
1096
1150
|
const day = addDays(startDate, i);
|
|
1097
|
-
const dayEvents = sortedEvents.filter((event) =>
|
|
1151
|
+
const dayEvents = sortedEvents.filter((event) => isSameDay4(event.start, day));
|
|
1098
1152
|
if (dayEvents.length > 0) {
|
|
1099
1153
|
groups.push({ date: day, events: dayEvents });
|
|
1100
1154
|
}
|
|
@@ -1114,7 +1168,7 @@ var AgendaView = ({
|
|
|
1114
1168
|
hidden: { opacity: 0, x: -20 },
|
|
1115
1169
|
show: { opacity: 1, x: 0 }
|
|
1116
1170
|
};
|
|
1117
|
-
return /* @__PURE__ */
|
|
1171
|
+
return /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col h-full bg-background overflow-y-auto" }, groupedEvents.length === 0 ? /* @__PURE__ */ React12.createElement(AgendaEmptyState, { onCreateEvent, translations }) : /* @__PURE__ */ React12.createElement(
|
|
1118
1172
|
motion.div,
|
|
1119
1173
|
{
|
|
1120
1174
|
className: "max-w-3xl mx-auto w-full pb-10 px-4 md:px-6",
|
|
@@ -1122,21 +1176,21 @@ var AgendaView = ({
|
|
|
1122
1176
|
initial: "hidden",
|
|
1123
1177
|
animate: "show"
|
|
1124
1178
|
},
|
|
1125
|
-
groupedEvents.map((group
|
|
1179
|
+
groupedEvents.map((group) => /* @__PURE__ */ React12.createElement(
|
|
1126
1180
|
motion.div,
|
|
1127
1181
|
{
|
|
1128
1182
|
key: group.date.toISOString(),
|
|
1129
1183
|
className: "relative",
|
|
1130
1184
|
variants: item
|
|
1131
1185
|
},
|
|
1132
|
-
/* @__PURE__ */
|
|
1186
|
+
/* @__PURE__ */ React12.createElement("div", { className: "sticky top-0 bg-background/95 backdrop-blur-md py-4 z-10 border-b border-border/50" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-4" }, /* @__PURE__ */ React12.createElement("div", { className: cn(
|
|
1133
1187
|
"flex flex-col items-center justify-center w-16 h-16 rounded-2xl transition-all",
|
|
1134
|
-
|
|
1135
|
-
) }, /* @__PURE__ */
|
|
1188
|
+
isToday5(group.date) ? "bg-primary text-primary-foreground shadow-lg shadow-primary/30" : "bg-muted/50 text-foreground"
|
|
1189
|
+
) }, /* @__PURE__ */ React12.createElement("span", { className: "text-2xl font-bold leading-none" }, format8(group.date, "d")), /* @__PURE__ */ React12.createElement("span", { className: "text-xs font-medium uppercase tracking-wide opacity-80" }, format8(group.date, "MMM", { locale }))), /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React12.createElement("span", { className: cn(
|
|
1136
1190
|
"text-lg font-semibold",
|
|
1137
|
-
|
|
1138
|
-
) }, getDateLabel(group.date, locale, translations)), /* @__PURE__ */
|
|
1139
|
-
/* @__PURE__ */
|
|
1191
|
+
isToday5(group.date) && "text-primary"
|
|
1192
|
+
) }, getDateLabel(group.date, locale, translations)), /* @__PURE__ */ React12.createElement("span", { className: "text-sm text-muted-foreground" }, group.events.length, " ", group.events.length !== 1 ? translations?.eventPlural || "events" : translations?.eventSingular || "event")))),
|
|
1193
|
+
/* @__PURE__ */ React12.createElement("div", { className: "py-4 space-y-3" }, group.events.map((event) => /* @__PURE__ */ React12.createElement(
|
|
1140
1194
|
motion.div,
|
|
1141
1195
|
{
|
|
1142
1196
|
key: event.id,
|
|
@@ -1150,26 +1204,30 @@ var AgendaView = ({
|
|
|
1150
1204
|
whileHover: { scale: 1.01, y: -2 },
|
|
1151
1205
|
transition: { duration: 0.2 }
|
|
1152
1206
|
},
|
|
1153
|
-
/* @__PURE__ */
|
|
1207
|
+
/* @__PURE__ */ React12.createElement(
|
|
1154
1208
|
"div",
|
|
1155
1209
|
{
|
|
1156
1210
|
className: "absolute left-0 top-3 bottom-3 w-1 rounded-full",
|
|
1157
1211
|
style: { backgroundColor: event.color || "var(--primary)" }
|
|
1158
1212
|
}
|
|
1159
1213
|
),
|
|
1160
|
-
/* @__PURE__ */
|
|
1161
|
-
/* @__PURE__ */
|
|
1214
|
+
/* @__PURE__ */ React12.createElement("div", { className: "flex flex-col items-center min-w-[70px] pl-2" }, event.allDay ? /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React12.createElement("span", { className: "text-xs font-semibold text-muted-foreground bg-muted/80 px-2.5 py-1 rounded-full" }, translations?.allDay || "All Day")) : /* @__PURE__ */ React12.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React12.createElement("span", { className: "text-base font-semibold text-foreground" }, format8(event.start, compactTimePattern, { locale })), !is24h && /* @__PURE__ */ React12.createElement("span", { className: "text-xs text-muted-foreground uppercase" }, format8(event.start, "a")), /* @__PURE__ */ React12.createElement("div", { className: "w-px h-3 bg-border my-1" }), /* @__PURE__ */ React12.createElement("span", { className: "text-xs text-muted-foreground/70 font-medium" }, formatDuration(event.start, event.end)))),
|
|
1215
|
+
/* @__PURE__ */ React12.createElement("div", { className: "flex-1 min-w-0 space-y-2" }, /* @__PURE__ */ React12.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React12.createElement("h4", { className: "text-base font-semibold text-foreground group-hover:text-primary transition-colors line-clamp-1" }, event.title), /* @__PURE__ */ React12.createElement(
|
|
1162
1216
|
"div",
|
|
1163
1217
|
{
|
|
1164
1218
|
className: "w-3 h-3 rounded-full shrink-0 mt-1.5",
|
|
1165
1219
|
style: { backgroundColor: event.color || "var(--primary)" }
|
|
1166
1220
|
}
|
|
1167
|
-
)), event.description && /* @__PURE__ */
|
|
1168
|
-
/* @__PURE__ */
|
|
1221
|
+
)), event.description && /* @__PURE__ */ React12.createElement("p", { className: "text-sm text-muted-foreground line-clamp-2 leading-relaxed" }, event.description), /* @__PURE__ */ React12.createElement("div", { className: "flex flex-wrap items-center gap-3 pt-1" }, !event.allDay && /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground" }, /* @__PURE__ */ React12.createElement(Clock, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ React12.createElement("span", null, format8(event.start, timePattern, { locale }), " - ", format8(event.end, timePattern, { locale }))), event.guests && event.guests.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground" }, /* @__PURE__ */ React12.createElement(Users, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ React12.createElement("span", null, event.guests.length, " ", event.guests.length !== 1 ? translations?.guestsCount || "guests" : translations?.guestCount || "guest")), event.attachments && event.attachments.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground" }, /* @__PURE__ */ React12.createElement(Paperclip, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ React12.createElement("span", null, event.attachments.length)), event.reminders && event.reminders.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground" }, /* @__PURE__ */ React12.createElement(Bell, { className: "w-3.5 h-3.5" }), /* @__PURE__ */ React12.createElement("span", null, event.reminders.length)))),
|
|
1222
|
+
/* @__PURE__ */ React12.createElement("div", { className: "absolute right-4 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity" }, /* @__PURE__ */ React12.createElement("svg", { className: "w-5 h-5 text-muted-foreground", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ React12.createElement("path", { d: "M9 18l6-6-6-6" })))
|
|
1169
1223
|
)))
|
|
1170
1224
|
))
|
|
1171
1225
|
));
|
|
1172
1226
|
};
|
|
1227
|
+
|
|
1228
|
+
// src/views/ResourceView.tsx
|
|
1229
|
+
import React13, { useRef as useRef2 } from "react";
|
|
1230
|
+
import { format as format9, startOfDay as startOfDay2, differenceInMinutes as differenceInMinutes4, isSameDay as isSameDay5 } from "date-fns";
|
|
1173
1231
|
var ResourceView = ({
|
|
1174
1232
|
currentDate,
|
|
1175
1233
|
events,
|
|
@@ -1178,16 +1236,16 @@ var ResourceView = ({
|
|
|
1178
1236
|
onTimeSlotClick,
|
|
1179
1237
|
locale
|
|
1180
1238
|
}) => {
|
|
1181
|
-
const containerRef =
|
|
1239
|
+
const containerRef = useRef2(null);
|
|
1182
1240
|
const hours = Array.from({ length: 24 }, (_, i) => i);
|
|
1183
1241
|
const hourWidth = 100;
|
|
1184
1242
|
const timeFormat = uses24HourClock(locale) ? "H:mm" : "h a";
|
|
1185
1243
|
const getEventStyle = (event) => {
|
|
1186
1244
|
const start = new Date(event.start);
|
|
1187
1245
|
const end = new Date(event.end);
|
|
1188
|
-
const dayStart =
|
|
1189
|
-
const startMinutes =
|
|
1190
|
-
const durationMinutes =
|
|
1246
|
+
const dayStart = startOfDay2(currentDate);
|
|
1247
|
+
const startMinutes = differenceInMinutes4(start, dayStart);
|
|
1248
|
+
const durationMinutes = differenceInMinutes4(end, start);
|
|
1191
1249
|
const left = startMinutes / 60 * hourWidth;
|
|
1192
1250
|
const width = durationMinutes / 60 * hourWidth;
|
|
1193
1251
|
return {
|
|
@@ -1196,19 +1254,19 @@ var ResourceView = ({
|
|
|
1196
1254
|
// Min width for visibility
|
|
1197
1255
|
};
|
|
1198
1256
|
};
|
|
1199
|
-
return /* @__PURE__ */
|
|
1257
|
+
return /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col h-full bg-background overflow-hidden" }, /* @__PURE__ */ React13.createElement("div", { className: "flex border-b border-border bg-muted/20" }, /* @__PURE__ */ React13.createElement("div", { className: "w-48 shrink-0 border-r border-border p-4 font-semibold text-sm bg-background sticky left-0 z-20" }, "Resources"), /* @__PURE__ */ React13.createElement("div", { className: "flex overflow-hidden" }, /* @__PURE__ */ React13.createElement("div", { className: "flex relative", style: { width: hours.length * hourWidth } }, hours.map((hour) => /* @__PURE__ */ React13.createElement(
|
|
1200
1258
|
"div",
|
|
1201
1259
|
{
|
|
1202
1260
|
key: hour,
|
|
1203
1261
|
className: "border-r border-border/50 text-xs text-muted-foreground p-2 font-medium shrink-0",
|
|
1204
1262
|
style: { width: hourWidth }
|
|
1205
1263
|
},
|
|
1206
|
-
|
|
1207
|
-
))))), /* @__PURE__ */
|
|
1264
|
+
format9((/* @__PURE__ */ new Date()).setHours(hour, 0, 0, 0), timeFormat, { locale })
|
|
1265
|
+
))))), /* @__PURE__ */ React13.createElement("div", { className: "flex-1 overflow-auto relative", ref: containerRef }, /* @__PURE__ */ React13.createElement("div", { className: "min-w-fit" }, resources.map((resource) => {
|
|
1208
1266
|
const resourceEvents = events.filter(
|
|
1209
|
-
(e) => e.resourceId === resource.id &&
|
|
1267
|
+
(e) => e.resourceId === resource.id && isSameDay5(new Date(e.start), currentDate)
|
|
1210
1268
|
);
|
|
1211
|
-
return /* @__PURE__ */
|
|
1269
|
+
return /* @__PURE__ */ React13.createElement("div", { key: resource.id, className: "flex border-b border-border min-h-[100px]" }, /* @__PURE__ */ React13.createElement("div", { className: "w-48 shrink-0 border-r border-border p-4 bg-background sticky left-0 z-10 flex items-center gap-3" }, resource.avatar ? /* @__PURE__ */ React13.createElement("img", { src: resource.avatar, alt: resource.label, className: "w-8 h-8 rounded-full object-cover" }) : /* @__PURE__ */ React13.createElement("div", { className: "w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-xs font-bold text-primary" }, resource.label.substring(0, 2).toUpperCase()), /* @__PURE__ */ React13.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React13.createElement("span", { className: "text-sm font-medium" }, resource.label), /* @__PURE__ */ React13.createElement("span", { className: "text-xs text-muted-foreground" }, "ID: ", resource.id))), /* @__PURE__ */ React13.createElement("div", { className: "relative flex", style: { width: hours.length * hourWidth } }, hours.map((hour) => /* @__PURE__ */ React13.createElement(
|
|
1212
1270
|
"div",
|
|
1213
1271
|
{
|
|
1214
1272
|
key: hour,
|
|
@@ -1219,7 +1277,7 @@ var ResourceView = ({
|
|
|
1219
1277
|
const slotDate = new Date(currentDate);
|
|
1220
1278
|
slotDate.setHours(hour, minute, 0, 0);
|
|
1221
1279
|
const slotId = `${resource.id}-${slotDate.toISOString()}`;
|
|
1222
|
-
return /* @__PURE__ */
|
|
1280
|
+
return /* @__PURE__ */ React13.createElement(
|
|
1223
1281
|
DroppableCell,
|
|
1224
1282
|
{
|
|
1225
1283
|
key: minute,
|
|
@@ -1233,7 +1291,7 @@ var ResourceView = ({
|
|
|
1233
1291
|
}
|
|
1234
1292
|
);
|
|
1235
1293
|
})
|
|
1236
|
-
)), resourceEvents.map((event) => /* @__PURE__ */
|
|
1294
|
+
)), resourceEvents.map((event) => /* @__PURE__ */ React13.createElement(
|
|
1237
1295
|
DraggableEvent,
|
|
1238
1296
|
{
|
|
1239
1297
|
key: event.id,
|
|
@@ -1250,10 +1308,17 @@ var ResourceView = ({
|
|
|
1250
1308
|
color: "#fff"
|
|
1251
1309
|
}
|
|
1252
1310
|
},
|
|
1253
|
-
/* @__PURE__ */
|
|
1311
|
+
/* @__PURE__ */ React13.createElement("div", { className: "truncate" }, event.title)
|
|
1254
1312
|
))));
|
|
1255
1313
|
}))));
|
|
1256
1314
|
};
|
|
1315
|
+
|
|
1316
|
+
// src/components/EventModal.tsx
|
|
1317
|
+
import React15, { useState as useState3, useEffect as useEffect3 } from "react";
|
|
1318
|
+
|
|
1319
|
+
// src/components/ui/Modal.tsx
|
|
1320
|
+
import React14, { useEffect as useEffect2, useRef as useRef3 } from "react";
|
|
1321
|
+
import { X } from "lucide-react";
|
|
1257
1322
|
var Modal = ({
|
|
1258
1323
|
isOpen,
|
|
1259
1324
|
onClose,
|
|
@@ -1262,8 +1327,8 @@ var Modal = ({
|
|
|
1262
1327
|
className,
|
|
1263
1328
|
hideHeader = false
|
|
1264
1329
|
}) => {
|
|
1265
|
-
const overlayRef =
|
|
1266
|
-
|
|
1330
|
+
const overlayRef = useRef3(null);
|
|
1331
|
+
useEffect2(() => {
|
|
1267
1332
|
const handleEscape = (e) => {
|
|
1268
1333
|
if (e.key === "Escape") {
|
|
1269
1334
|
onClose();
|
|
@@ -1277,14 +1342,14 @@ var Modal = ({
|
|
|
1277
1342
|
};
|
|
1278
1343
|
}, [isOpen, onClose]);
|
|
1279
1344
|
if (!isOpen) return null;
|
|
1280
|
-
return /* @__PURE__ */
|
|
1345
|
+
return /* @__PURE__ */ React14.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-md animate-in fade-in duration-300" }, /* @__PURE__ */ React14.createElement(
|
|
1281
1346
|
"div",
|
|
1282
1347
|
{
|
|
1283
1348
|
ref: overlayRef,
|
|
1284
1349
|
className: "absolute inset-0",
|
|
1285
1350
|
onClick: onClose
|
|
1286
1351
|
}
|
|
1287
|
-
), /* @__PURE__ */
|
|
1352
|
+
), /* @__PURE__ */ React14.createElement(
|
|
1288
1353
|
"div",
|
|
1289
1354
|
{
|
|
1290
1355
|
className: cn(
|
|
@@ -1292,7 +1357,7 @@ var Modal = ({
|
|
|
1292
1357
|
className
|
|
1293
1358
|
)
|
|
1294
1359
|
},
|
|
1295
|
-
!hideHeader && /* @__PURE__ */
|
|
1360
|
+
!hideHeader && /* @__PURE__ */ React14.createElement("div", { className: "flex items-center justify-between px-6 py-4 border-b border-border/50 shrink-0 bg-gradient-to-r from-muted/20 to-background" }, /* @__PURE__ */ React14.createElement("h3", { className: "text-lg font-semibold text-foreground" }, title), /* @__PURE__ */ React14.createElement(
|
|
1296
1361
|
Button,
|
|
1297
1362
|
{
|
|
1298
1363
|
variant: "ghost",
|
|
@@ -1300,12 +1365,37 @@ var Modal = ({
|
|
|
1300
1365
|
onClick: onClose,
|
|
1301
1366
|
className: "h-9 w-9 p-0 rounded-xl hover:bg-accent/80 transition-all duration-200"
|
|
1302
1367
|
},
|
|
1303
|
-
/* @__PURE__ */
|
|
1304
|
-
/* @__PURE__ */
|
|
1368
|
+
/* @__PURE__ */ React14.createElement(X, { className: "h-4 w-4" }),
|
|
1369
|
+
/* @__PURE__ */ React14.createElement("span", { className: "sr-only" }, "Close")
|
|
1305
1370
|
)),
|
|
1306
|
-
/* @__PURE__ */
|
|
1371
|
+
/* @__PURE__ */ React14.createElement("div", { className: cn("overflow-y-auto flex-1", !hideHeader && "p-6") }, children)
|
|
1307
1372
|
));
|
|
1308
1373
|
};
|
|
1374
|
+
|
|
1375
|
+
// src/components/EventModal.tsx
|
|
1376
|
+
import { format as format10, differenceInMinutes as differenceInMinutes5 } from "date-fns";
|
|
1377
|
+
import { motion as motion2, AnimatePresence } from "framer-motion";
|
|
1378
|
+
import {
|
|
1379
|
+
Clock as Clock2,
|
|
1380
|
+
MapPin,
|
|
1381
|
+
AlignLeft,
|
|
1382
|
+
Trash2,
|
|
1383
|
+
X as X2,
|
|
1384
|
+
Edit2,
|
|
1385
|
+
Users as Users2,
|
|
1386
|
+
Paperclip as Paperclip2,
|
|
1387
|
+
File,
|
|
1388
|
+
Calendar as Calendar2,
|
|
1389
|
+
ChevronDown as ChevronDown2,
|
|
1390
|
+
Check,
|
|
1391
|
+
Download,
|
|
1392
|
+
Bell as Bell2,
|
|
1393
|
+
BellRing,
|
|
1394
|
+
Plus as Plus3,
|
|
1395
|
+
Repeat,
|
|
1396
|
+
Tag,
|
|
1397
|
+
ExternalLink
|
|
1398
|
+
} from "lucide-react";
|
|
1309
1399
|
var REMINDER_OPTIONS = [
|
|
1310
1400
|
{ value: 0, label: "At time of event" },
|
|
1311
1401
|
{ value: 5, label: "5 minutes before" },
|
|
@@ -1347,13 +1437,10 @@ var EventModal = ({
|
|
|
1347
1437
|
initialDate,
|
|
1348
1438
|
onSave,
|
|
1349
1439
|
onDelete,
|
|
1350
|
-
calendars
|
|
1351
|
-
eventTypes,
|
|
1352
|
-
translations
|
|
1440
|
+
calendars
|
|
1353
1441
|
}) => {
|
|
1354
|
-
const [mode, setMode] =
|
|
1355
|
-
const [
|
|
1356
|
-
const [formData, setFormData] = useState({
|
|
1442
|
+
const [mode, setMode] = useState3("create");
|
|
1443
|
+
const [formData, setFormData] = useState3({
|
|
1357
1444
|
title: "",
|
|
1358
1445
|
description: "",
|
|
1359
1446
|
location: "",
|
|
@@ -1367,10 +1454,10 @@ var EventModal = ({
|
|
|
1367
1454
|
attachments: [],
|
|
1368
1455
|
reminders: [{ id: "1", type: "notification", time: 30, label: "30 minutes before" }]
|
|
1369
1456
|
});
|
|
1370
|
-
const [isCalendarDropdownOpen, setIsCalendarDropdownOpen] =
|
|
1371
|
-
const [isColorPickerOpen, setIsColorPickerOpen] =
|
|
1372
|
-
const [isReminderDropdownOpen, setIsReminderDropdownOpen] =
|
|
1373
|
-
const [isGuestsDropdownOpen, setIsGuestsDropdownOpen] =
|
|
1457
|
+
const [isCalendarDropdownOpen, setIsCalendarDropdownOpen] = useState3(false);
|
|
1458
|
+
const [isColorPickerOpen, setIsColorPickerOpen] = useState3(false);
|
|
1459
|
+
const [isReminderDropdownOpen, setIsReminderDropdownOpen] = useState3(false);
|
|
1460
|
+
const [isGuestsDropdownOpen, setIsGuestsDropdownOpen] = useState3(false);
|
|
1374
1461
|
const fakeGuests = [
|
|
1375
1462
|
"alice@example.com",
|
|
1376
1463
|
"bob@example.com",
|
|
@@ -1378,9 +1465,8 @@ var EventModal = ({
|
|
|
1378
1465
|
"diana@example.com",
|
|
1379
1466
|
"evan@example.com"
|
|
1380
1467
|
];
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
useEffect(() => {
|
|
1468
|
+
const [selectedGuests, setSelectedGuests] = useState3([]);
|
|
1469
|
+
useEffect3(() => {
|
|
1384
1470
|
if (isOpen) {
|
|
1385
1471
|
if (event) {
|
|
1386
1472
|
setMode("view");
|
|
@@ -1410,7 +1496,6 @@ var EventModal = ({
|
|
|
1410
1496
|
reminders: [{ id: "1", type: "notification", time: 30, label: "30 minutes before" }]
|
|
1411
1497
|
});
|
|
1412
1498
|
setSelectedGuests([]);
|
|
1413
|
-
setActiveTab("details");
|
|
1414
1499
|
}
|
|
1415
1500
|
}
|
|
1416
1501
|
}, [isOpen, event, initialDate, calendars]);
|
|
@@ -1445,7 +1530,7 @@ var EventModal = ({
|
|
|
1445
1530
|
};
|
|
1446
1531
|
const formatDateForInput = (date) => {
|
|
1447
1532
|
if (!date) return "";
|
|
1448
|
-
return
|
|
1533
|
+
return format10(date, "yyyy-MM-dd'T'HH:mm");
|
|
1449
1534
|
};
|
|
1450
1535
|
const handleDateChange = (field, value) => {
|
|
1451
1536
|
const date = new Date(value);
|
|
@@ -1495,14 +1580,14 @@ var EventModal = ({
|
|
|
1495
1580
|
};
|
|
1496
1581
|
const getDurationText = () => {
|
|
1497
1582
|
if (!formData.start || !formData.end) return "";
|
|
1498
|
-
const mins =
|
|
1583
|
+
const mins = differenceInMinutes5(formData.end, formData.start);
|
|
1499
1584
|
if (mins < 60) return `${mins} min`;
|
|
1500
1585
|
const hours = Math.floor(mins / 60);
|
|
1501
1586
|
const remainingMins = mins % 60;
|
|
1502
1587
|
if (remainingMins === 0) return `${hours} hr`;
|
|
1503
1588
|
return `${hours} hr ${remainingMins} min`;
|
|
1504
1589
|
};
|
|
1505
|
-
const renderViewMode = () => /* @__PURE__ */
|
|
1590
|
+
const renderViewMode = () => /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col bg-background overflow-hidden w-full max-h-[90vh]" }, /* @__PURE__ */ React15.createElement(
|
|
1506
1591
|
"div",
|
|
1507
1592
|
{
|
|
1508
1593
|
className: "relative px-6 pt-6 pb-8",
|
|
@@ -1510,65 +1595,65 @@ var EventModal = ({
|
|
|
1510
1595
|
background: `linear-gradient(135deg, ${event?.color || "#3b82f6"}15 0%, transparent 100%)`
|
|
1511
1596
|
}
|
|
1512
1597
|
},
|
|
1513
|
-
/* @__PURE__ */
|
|
1598
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between mb-6" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(
|
|
1514
1599
|
"div",
|
|
1515
1600
|
{
|
|
1516
1601
|
className: "w-3 h-3 rounded-full",
|
|
1517
1602
|
style: { backgroundColor: event?.color || "#3b82f6" }
|
|
1518
1603
|
}
|
|
1519
|
-
), /* @__PURE__ */
|
|
1604
|
+
), /* @__PURE__ */ React15.createElement("span", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider" }, calendars?.find((c) => c.id === event?.calendarId)?.label || "Event")), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-1" }, /* @__PURE__ */ React15.createElement(
|
|
1520
1605
|
"button",
|
|
1521
1606
|
{
|
|
1522
1607
|
onClick: () => setMode("edit"),
|
|
1523
1608
|
className: "p-2 hover:bg-background/80 rounded-lg transition-all text-muted-foreground hover:text-foreground",
|
|
1524
1609
|
title: "Edit"
|
|
1525
1610
|
},
|
|
1526
|
-
/* @__PURE__ */
|
|
1527
|
-
), /* @__PURE__ */
|
|
1611
|
+
/* @__PURE__ */ React15.createElement(Edit2, { className: "w-4 h-4" })
|
|
1612
|
+
), /* @__PURE__ */ React15.createElement(
|
|
1528
1613
|
"button",
|
|
1529
1614
|
{
|
|
1530
1615
|
onClick: handleDelete,
|
|
1531
1616
|
className: "p-2 hover:bg-destructive/10 rounded-lg transition-all text-muted-foreground hover:text-destructive",
|
|
1532
1617
|
title: "Delete"
|
|
1533
1618
|
},
|
|
1534
|
-
/* @__PURE__ */
|
|
1535
|
-
), /* @__PURE__ */
|
|
1619
|
+
/* @__PURE__ */ React15.createElement(Trash2, { className: "w-4 h-4" })
|
|
1620
|
+
), /* @__PURE__ */ React15.createElement(
|
|
1536
1621
|
"button",
|
|
1537
1622
|
{
|
|
1538
1623
|
onClick: onClose,
|
|
1539
1624
|
className: "p-2 hover:bg-background/80 rounded-lg transition-all text-muted-foreground hover:text-foreground",
|
|
1540
1625
|
title: "Close"
|
|
1541
1626
|
},
|
|
1542
|
-
/* @__PURE__ */
|
|
1627
|
+
/* @__PURE__ */ React15.createElement(X2, { className: "w-4 h-4" })
|
|
1543
1628
|
))),
|
|
1544
|
-
/* @__PURE__ */
|
|
1545
|
-
/* @__PURE__ */
|
|
1546
|
-
), /* @__PURE__ */
|
|
1547
|
-
|
|
1629
|
+
/* @__PURE__ */ React15.createElement("h1", { className: "text-2xl font-bold text-foreground mb-3 leading-tight" }, event?.title || "(No title)"),
|
|
1630
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-3 text-sm" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-background/60 backdrop-blur-sm rounded-lg border border-border/30" }, /* @__PURE__ */ React15.createElement(Calendar2, { className: "w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React15.createElement("span", { className: "font-medium" }, event?.start && format10(new Date(event.start), "EEE, MMM d"))), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2 px-3 py-1.5 bg-background/60 backdrop-blur-sm rounded-lg border border-border/30" }, /* @__PURE__ */ React15.createElement(Clock2, { className: "w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React15.createElement("span", { className: "font-medium" }, event?.start && format10(new Date(event.start), "h:mm a"), " \u2013 ", event?.end && format10(new Date(event.end), "h:mm a"))))
|
|
1631
|
+
), /* @__PURE__ */ React15.createElement("div", { className: "px-6 pb-6 space-y-4 overflow-y-auto flex-1" }, event?.location && /* @__PURE__ */ React15.createElement(
|
|
1632
|
+
motion2.div,
|
|
1548
1633
|
{
|
|
1549
1634
|
initial: { opacity: 0, y: 10 },
|
|
1550
1635
|
animate: { opacity: 1, y: 0 },
|
|
1551
1636
|
className: "flex items-start gap-3 p-4 rounded-2xl bg-muted/30 border border-border/30 group hover:bg-muted/50 transition-all cursor-pointer"
|
|
1552
1637
|
},
|
|
1553
|
-
/* @__PURE__ */
|
|
1554
|
-
/* @__PURE__ */
|
|
1555
|
-
/* @__PURE__ */
|
|
1556
|
-
), event?.guests && event.guests.length > 0 && /* @__PURE__ */
|
|
1557
|
-
|
|
1638
|
+
/* @__PURE__ */ React15.createElement("div", { className: "p-2 bg-primary/10 rounded-xl" }, /* @__PURE__ */ React15.createElement(MapPin, { className: "w-5 h-5 text-primary" })),
|
|
1639
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React15.createElement("p", { className: "text-sm font-medium text-foreground" }, event.location), /* @__PURE__ */ React15.createElement("p", { className: "text-xs text-muted-foreground mt-0.5" }, "Click to open in maps")),
|
|
1640
|
+
/* @__PURE__ */ React15.createElement(ExternalLink, { className: "w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" })
|
|
1641
|
+
), event?.guests && event.guests.length > 0 && /* @__PURE__ */ React15.createElement(
|
|
1642
|
+
motion2.div,
|
|
1558
1643
|
{
|
|
1559
1644
|
initial: { opacity: 0, y: 10 },
|
|
1560
1645
|
animate: { opacity: 1, y: 0 },
|
|
1561
1646
|
transition: { delay: 0.05 },
|
|
1562
1647
|
className: "space-y-3"
|
|
1563
1648
|
},
|
|
1564
|
-
/* @__PURE__ */
|
|
1565
|
-
/* @__PURE__ */
|
|
1649
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(Users2, { className: "w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React15.createElement("span", { className: "text-sm font-medium text-foreground" }, event.guests.length, " ", event.guests.length > 1 ? "Guests" : "Guest"))),
|
|
1650
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex flex-wrap gap-2" }, event.guests.map((email, index) => /* @__PURE__ */ React15.createElement(
|
|
1566
1651
|
"div",
|
|
1567
1652
|
{
|
|
1568
1653
|
key: index,
|
|
1569
1654
|
className: "flex items-center gap-2 px-3 py-2 rounded-xl bg-muted/30 border border-border/30 hover:bg-muted/50 transition-all cursor-pointer group"
|
|
1570
1655
|
},
|
|
1571
|
-
/* @__PURE__ */
|
|
1656
|
+
/* @__PURE__ */ React15.createElement(
|
|
1572
1657
|
"div",
|
|
1573
1658
|
{
|
|
1574
1659
|
className: "w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold text-white",
|
|
@@ -1576,18 +1661,18 @@ var EventModal = ({
|
|
|
1576
1661
|
},
|
|
1577
1662
|
email[0].toUpperCase()
|
|
1578
1663
|
),
|
|
1579
|
-
/* @__PURE__ */
|
|
1664
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React15.createElement("p", { className: "text-sm font-medium text-foreground" }, email.split("@")[0]), /* @__PURE__ */ React15.createElement("p", { className: "text-xs text-muted-foreground truncate" }, email))
|
|
1580
1665
|
)))
|
|
1581
|
-
), event?.reminders && event.reminders.length > 0 && /* @__PURE__ */
|
|
1582
|
-
|
|
1666
|
+
), event?.reminders && event.reminders.length > 0 && /* @__PURE__ */ React15.createElement(
|
|
1667
|
+
motion2.div,
|
|
1583
1668
|
{
|
|
1584
1669
|
initial: { opacity: 0, y: 10 },
|
|
1585
1670
|
animate: { opacity: 1, y: 0 },
|
|
1586
1671
|
transition: { delay: 0.1 },
|
|
1587
1672
|
className: "flex items-center gap-3"
|
|
1588
1673
|
},
|
|
1589
|
-
/* @__PURE__ */
|
|
1590
|
-
/* @__PURE__ */
|
|
1674
|
+
/* @__PURE__ */ React15.createElement("div", { className: "p-2 bg-amber-500/10 rounded-xl" }, /* @__PURE__ */ React15.createElement(Bell2, { className: "w-4 h-4 text-amber-500" })),
|
|
1675
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex flex-wrap gap-2" }, event.reminders.map((reminder) => /* @__PURE__ */ React15.createElement(
|
|
1591
1676
|
"span",
|
|
1592
1677
|
{
|
|
1593
1678
|
key: reminder.id,
|
|
@@ -1595,45 +1680,45 @@ var EventModal = ({
|
|
|
1595
1680
|
},
|
|
1596
1681
|
reminder.label || `${reminder.time} min before`
|
|
1597
1682
|
)))
|
|
1598
|
-
), event?.description && /* @__PURE__ */
|
|
1599
|
-
|
|
1683
|
+
), event?.description && /* @__PURE__ */ React15.createElement(
|
|
1684
|
+
motion2.div,
|
|
1600
1685
|
{
|
|
1601
1686
|
initial: { opacity: 0, y: 10 },
|
|
1602
1687
|
animate: { opacity: 1, y: 0 },
|
|
1603
1688
|
transition: { delay: 0.15 },
|
|
1604
1689
|
className: "space-y-2"
|
|
1605
1690
|
},
|
|
1606
|
-
/* @__PURE__ */
|
|
1607
|
-
/* @__PURE__ */
|
|
1608
|
-
), event?.attachments && event.attachments.length > 0 && /* @__PURE__ */
|
|
1609
|
-
|
|
1691
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(AlignLeft, { className: "w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React15.createElement("span", { className: "text-sm font-medium text-foreground" }, "Notes")),
|
|
1692
|
+
/* @__PURE__ */ React15.createElement("div", { className: "text-sm text-foreground/80 whitespace-pre-wrap leading-relaxed pl-6 p-3 rounded-xl bg-muted/20 border border-border/30" }, event.description)
|
|
1693
|
+
), event?.attachments && event.attachments.length > 0 && /* @__PURE__ */ React15.createElement(
|
|
1694
|
+
motion2.div,
|
|
1610
1695
|
{
|
|
1611
1696
|
initial: { opacity: 0, y: 10 },
|
|
1612
1697
|
animate: { opacity: 1, y: 0 },
|
|
1613
1698
|
transition: { delay: 0.2 },
|
|
1614
1699
|
className: "space-y-2"
|
|
1615
1700
|
},
|
|
1616
|
-
/* @__PURE__ */
|
|
1617
|
-
/* @__PURE__ */
|
|
1701
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(Paperclip2, { className: "w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React15.createElement("span", { className: "text-sm font-medium text-foreground" }, "Attachments")),
|
|
1702
|
+
/* @__PURE__ */ React15.createElement("div", { className: "grid gap-2" }, event.attachments.map((att) => /* @__PURE__ */ React15.createElement(
|
|
1618
1703
|
"div",
|
|
1619
1704
|
{
|
|
1620
1705
|
key: att.id,
|
|
1621
1706
|
onClick: () => handleDownload(att),
|
|
1622
1707
|
className: "flex items-center gap-3 p-3 rounded-xl border border-border/30 bg-muted/20 hover:bg-muted/40 transition-all cursor-pointer group"
|
|
1623
1708
|
},
|
|
1624
|
-
/* @__PURE__ */
|
|
1625
|
-
/* @__PURE__ */
|
|
1626
|
-
/* @__PURE__ */
|
|
1709
|
+
/* @__PURE__ */ React15.createElement("div", { className: "p-2 bg-primary/10 rounded-lg" }, /* @__PURE__ */ React15.createElement(File, { className: "w-4 h-4 text-primary" })),
|
|
1710
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React15.createElement("p", { className: "text-sm font-medium text-foreground truncate" }, att.name), /* @__PURE__ */ React15.createElement("p", { className: "text-xs text-muted-foreground" }, att.size)),
|
|
1711
|
+
/* @__PURE__ */ React15.createElement(Download, { className: "w-4 h-4 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity" })
|
|
1627
1712
|
)))
|
|
1628
1713
|
)));
|
|
1629
|
-
const renderEditMode = () => /* @__PURE__ */
|
|
1714
|
+
const renderEditMode = () => /* @__PURE__ */ React15.createElement("form", { onSubmit: handleSubmit, className: "flex flex-col bg-background overflow-hidden w-full max-h-[85vh]" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between px-5 py-4 border-b border-border/50 shrink-0" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-3" }, /* @__PURE__ */ React15.createElement(
|
|
1630
1715
|
"button",
|
|
1631
1716
|
{
|
|
1632
1717
|
type: "button",
|
|
1633
1718
|
onClick: () => setIsColorPickerOpen(!isColorPickerOpen),
|
|
1634
1719
|
className: "relative p-1"
|
|
1635
1720
|
},
|
|
1636
|
-
/* @__PURE__ */
|
|
1721
|
+
/* @__PURE__ */ React15.createElement(
|
|
1637
1722
|
"div",
|
|
1638
1723
|
{
|
|
1639
1724
|
className: "w-5 h-5 rounded-full cursor-pointer hover:scale-110 transition-transform",
|
|
@@ -1643,7 +1728,7 @@ var EventModal = ({
|
|
|
1643
1728
|
}
|
|
1644
1729
|
}
|
|
1645
1730
|
),
|
|
1646
|
-
isColorPickerOpen && /* @__PURE__ */
|
|
1731
|
+
isColorPickerOpen && /* @__PURE__ */ React15.createElement("div", { className: "absolute top-full left-0 mt-2 p-2 bg-background border border-border rounded-xl shadow-xl z-50 flex flex-wrap gap-1.5 w-[180px]" }, COLOR_PALETTE.map((color) => /* @__PURE__ */ React15.createElement(
|
|
1647
1732
|
"button",
|
|
1648
1733
|
{
|
|
1649
1734
|
key: color,
|
|
@@ -1659,15 +1744,15 @@ var EventModal = ({
|
|
|
1659
1744
|
style: { backgroundColor: color, color }
|
|
1660
1745
|
}
|
|
1661
1746
|
)))
|
|
1662
|
-
), /* @__PURE__ */
|
|
1747
|
+
), /* @__PURE__ */ React15.createElement("h2", { className: "text-lg font-semibold text-foreground" }, mode === "edit" ? "Edit Event" : "New Event")), /* @__PURE__ */ React15.createElement(
|
|
1663
1748
|
"button",
|
|
1664
1749
|
{
|
|
1665
1750
|
type: "button",
|
|
1666
1751
|
onClick: onClose,
|
|
1667
1752
|
className: "p-2 hover:bg-accent rounded-xl transition-all text-muted-foreground hover:text-foreground"
|
|
1668
1753
|
},
|
|
1669
|
-
/* @__PURE__ */
|
|
1670
|
-
)), /* @__PURE__ */
|
|
1754
|
+
/* @__PURE__ */ React15.createElement(X2, { className: "w-4 h-4" })
|
|
1755
|
+
)), /* @__PURE__ */ React15.createElement("div", { className: "flex-1 overflow-y-auto" }, /* @__PURE__ */ React15.createElement("div", { className: "px-5 py-4 space-y-5" }, /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(
|
|
1671
1756
|
"input",
|
|
1672
1757
|
{
|
|
1673
1758
|
type: "text",
|
|
@@ -1678,7 +1763,7 @@ var EventModal = ({
|
|
|
1678
1763
|
onChange: (e) => setFormData({ ...formData, title: e.target.value }),
|
|
1679
1764
|
placeholder: "Add title"
|
|
1680
1765
|
}
|
|
1681
|
-
)), /* @__PURE__ */
|
|
1766
|
+
)), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-3 p-4 rounded-2xl bg-muted/20 border border-border/30" }, /* @__PURE__ */ React15.createElement("div", { className: "p-2 bg-primary/10 rounded-xl shrink-0" }, /* @__PURE__ */ React15.createElement(Clock2, { className: "w-5 h-5 text-primary" })), /* @__PURE__ */ React15.createElement("div", { className: "flex-1 grid grid-cols-2 gap-3" }, /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("label", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-1 block" }, "Start"), /* @__PURE__ */ React15.createElement(
|
|
1682
1767
|
"input",
|
|
1683
1768
|
{
|
|
1684
1769
|
type: "datetime-local",
|
|
@@ -1686,7 +1771,7 @@ var EventModal = ({
|
|
|
1686
1771
|
value: formatDateForInput(formData.start),
|
|
1687
1772
|
onChange: (e) => handleDateChange("start", e.target.value)
|
|
1688
1773
|
}
|
|
1689
|
-
)), /* @__PURE__ */
|
|
1774
|
+
)), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("label", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-1 block" }, "End"), /* @__PURE__ */ React15.createElement(
|
|
1690
1775
|
"input",
|
|
1691
1776
|
{
|
|
1692
1777
|
type: "datetime-local",
|
|
@@ -1694,16 +1779,16 @@ var EventModal = ({
|
|
|
1694
1779
|
value: formatDateForInput(formData.end),
|
|
1695
1780
|
onChange: (e) => handleDateChange("end", e.target.value)
|
|
1696
1781
|
}
|
|
1697
|
-
)))), getDurationText() && /* @__PURE__ */
|
|
1782
|
+
)))), getDurationText() && /* @__PURE__ */ React15.createElement("div", { className: "flex justify-center" }, /* @__PURE__ */ React15.createElement("span", { className: "text-xs font-medium px-3 py-1 rounded-full bg-primary/10 text-primary" }, getDurationText())), /* @__PURE__ */ React15.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(Bell2, { className: "w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React15.createElement("span", { className: "text-sm font-medium text-foreground" }, "Reminders")), /* @__PURE__ */ React15.createElement("div", { className: "relative" }, /* @__PURE__ */ React15.createElement(
|
|
1698
1783
|
"button",
|
|
1699
1784
|
{
|
|
1700
1785
|
type: "button",
|
|
1701
1786
|
onClick: () => setIsReminderDropdownOpen(!isReminderDropdownOpen),
|
|
1702
1787
|
className: "flex items-center gap-1 text-xs font-medium text-primary hover:text-primary/80 transition-colors"
|
|
1703
1788
|
},
|
|
1704
|
-
/* @__PURE__ */
|
|
1789
|
+
/* @__PURE__ */ React15.createElement(Plus3, { className: "w-3.5 h-3.5" }),
|
|
1705
1790
|
"Add"
|
|
1706
|
-
), isReminderDropdownOpen && /* @__PURE__ */
|
|
1791
|
+
), isReminderDropdownOpen && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", { className: "fixed inset-0 z-40", onClick: () => setIsReminderDropdownOpen(false) }), /* @__PURE__ */ React15.createElement("div", { className: "absolute right-0 top-full mt-1 w-48 bg-background border border-border rounded-xl shadow-xl z-50 py-1 max-h-60 overflow-y-auto" }, REMINDER_OPTIONS.map((option) => /* @__PURE__ */ React15.createElement(
|
|
1707
1792
|
"button",
|
|
1708
1793
|
{
|
|
1709
1794
|
key: option.value,
|
|
@@ -1712,58 +1797,58 @@ var EventModal = ({
|
|
|
1712
1797
|
className: "w-full px-3 py-2 text-left text-sm hover:bg-accent transition-colors"
|
|
1713
1798
|
},
|
|
1714
1799
|
option.label
|
|
1715
|
-
)))))), formData.reminders && formData.reminders.length > 0 && /* @__PURE__ */
|
|
1800
|
+
)))))), formData.reminders && formData.reminders.length > 0 && /* @__PURE__ */ React15.createElement("div", { className: "flex flex-wrap gap-2" }, formData.reminders.map((reminder) => /* @__PURE__ */ React15.createElement(
|
|
1716
1801
|
"div",
|
|
1717
1802
|
{
|
|
1718
1803
|
key: reminder.id,
|
|
1719
1804
|
className: "flex items-center gap-2 px-3 py-1.5 rounded-full bg-amber-500/10 border border-amber-500/20"
|
|
1720
1805
|
},
|
|
1721
|
-
/* @__PURE__ */
|
|
1722
|
-
/* @__PURE__ */
|
|
1723
|
-
/* @__PURE__ */
|
|
1806
|
+
/* @__PURE__ */ React15.createElement(BellRing, { className: "w-3.5 h-3.5 text-amber-500" }),
|
|
1807
|
+
/* @__PURE__ */ React15.createElement("span", { className: "text-xs font-medium text-amber-600 dark:text-amber-400" }, reminder.label),
|
|
1808
|
+
/* @__PURE__ */ React15.createElement(
|
|
1724
1809
|
"button",
|
|
1725
1810
|
{
|
|
1726
1811
|
type: "button",
|
|
1727
1812
|
onClick: () => removeReminder(reminder.id),
|
|
1728
1813
|
className: "p-0.5 hover:bg-amber-500/20 rounded-full transition-colors"
|
|
1729
1814
|
},
|
|
1730
|
-
/* @__PURE__ */
|
|
1815
|
+
/* @__PURE__ */ React15.createElement(X2, { className: "w-3 h-3 text-amber-500" })
|
|
1731
1816
|
)
|
|
1732
|
-
)))), /* @__PURE__ */
|
|
1817
|
+
)))), /* @__PURE__ */ React15.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(Users2, { className: "w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React15.createElement("span", { className: "text-sm font-medium text-foreground" }, "Guests")), /* @__PURE__ */ React15.createElement("div", { className: "relative" }, /* @__PURE__ */ React15.createElement(
|
|
1733
1818
|
"button",
|
|
1734
1819
|
{
|
|
1735
1820
|
type: "button",
|
|
1736
1821
|
onClick: () => setIsGuestsDropdownOpen(!isGuestsDropdownOpen),
|
|
1737
1822
|
className: "w-full flex items-center justify-between px-4 py-3 bg-muted/20 border border-border/30 rounded-xl text-sm text-left hover:bg-muted/30 transition-all"
|
|
1738
1823
|
},
|
|
1739
|
-
/* @__PURE__ */
|
|
1740
|
-
/* @__PURE__ */
|
|
1741
|
-
), isGuestsDropdownOpen && /* @__PURE__ */
|
|
1824
|
+
/* @__PURE__ */ React15.createElement("span", { className: selectedGuests.length > 0 ? "text-foreground font-medium" : "text-muted-foreground" }, selectedGuests.length > 0 ? `${selectedGuests.length} guest${selectedGuests.length > 1 ? "s" : ""} added` : "Add guests"),
|
|
1825
|
+
/* @__PURE__ */ React15.createElement(ChevronDown2, { className: cn("w-4 h-4 text-muted-foreground transition-transform", isGuestsDropdownOpen && "rotate-180") })
|
|
1826
|
+
), isGuestsDropdownOpen && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", { className: "fixed inset-0 z-40", onClick: () => setIsGuestsDropdownOpen(false) }), /* @__PURE__ */ React15.createElement("div", { className: "absolute z-50 w-full mt-2 bg-background border border-border rounded-xl shadow-xl max-h-48 overflow-y-auto" }, fakeGuests.map((email) => /* @__PURE__ */ React15.createElement(
|
|
1742
1827
|
"div",
|
|
1743
1828
|
{
|
|
1744
1829
|
key: email,
|
|
1745
1830
|
className: "px-4 py-3 hover:bg-accent cursor-pointer flex items-center gap-3 transition-colors",
|
|
1746
1831
|
onClick: () => toggleGuest(email)
|
|
1747
1832
|
},
|
|
1748
|
-
/* @__PURE__ */
|
|
1833
|
+
/* @__PURE__ */ React15.createElement("div", { className: cn(
|
|
1749
1834
|
"w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all",
|
|
1750
1835
|
selectedGuests.includes(email) ? "bg-primary border-primary" : "border-border"
|
|
1751
|
-
) }, selectedGuests.includes(email) && /* @__PURE__ */
|
|
1752
|
-
/* @__PURE__ */
|
|
1836
|
+
) }, selectedGuests.includes(email) && /* @__PURE__ */ React15.createElement(Check, { className: "w-3 h-3 text-primary-foreground" })),
|
|
1837
|
+
/* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(
|
|
1753
1838
|
"div",
|
|
1754
1839
|
{
|
|
1755
1840
|
className: "w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold text-white",
|
|
1756
1841
|
style: { backgroundColor: `hsl(${fakeGuests.indexOf(email) * 60}, 70%, 50%)` }
|
|
1757
1842
|
},
|
|
1758
1843
|
email[0].toUpperCase()
|
|
1759
|
-
), /* @__PURE__ */
|
|
1760
|
-
))))), selectedGuests.length > 0 && /* @__PURE__ */
|
|
1844
|
+
), /* @__PURE__ */ React15.createElement("span", { className: "text-sm" }, email))
|
|
1845
|
+
))))), selectedGuests.length > 0 && /* @__PURE__ */ React15.createElement("div", { className: "flex flex-wrap gap-2 mt-2" }, selectedGuests.map((email) => /* @__PURE__ */ React15.createElement(
|
|
1761
1846
|
"div",
|
|
1762
1847
|
{
|
|
1763
1848
|
key: email,
|
|
1764
1849
|
className: "flex items-center gap-2 pl-1 pr-2 py-1 bg-muted/30 border border-border/30 rounded-full"
|
|
1765
1850
|
},
|
|
1766
|
-
/* @__PURE__ */
|
|
1851
|
+
/* @__PURE__ */ React15.createElement(
|
|
1767
1852
|
"div",
|
|
1768
1853
|
{
|
|
1769
1854
|
className: "w-6 h-6 rounded-full flex items-center justify-center text-xs font-semibold text-white",
|
|
@@ -1771,17 +1856,17 @@ var EventModal = ({
|
|
|
1771
1856
|
},
|
|
1772
1857
|
email[0].toUpperCase()
|
|
1773
1858
|
),
|
|
1774
|
-
/* @__PURE__ */
|
|
1775
|
-
/* @__PURE__ */
|
|
1859
|
+
/* @__PURE__ */ React15.createElement("span", { className: "text-xs font-medium text-foreground" }, email.split("@")[0]),
|
|
1860
|
+
/* @__PURE__ */ React15.createElement(
|
|
1776
1861
|
"button",
|
|
1777
1862
|
{
|
|
1778
1863
|
type: "button",
|
|
1779
1864
|
onClick: () => toggleGuest(email),
|
|
1780
1865
|
className: "p-0.5 hover:bg-destructive/10 rounded-full transition-colors"
|
|
1781
1866
|
},
|
|
1782
|
-
/* @__PURE__ */
|
|
1867
|
+
/* @__PURE__ */ React15.createElement(X2, { className: "w-3 h-3 text-muted-foreground" })
|
|
1783
1868
|
)
|
|
1784
|
-
)))), /* @__PURE__ */
|
|
1869
|
+
)))), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-3 p-3 rounded-xl bg-muted/20 border border-border/30" }, /* @__PURE__ */ React15.createElement(MapPin, { className: "w-5 h-5 text-muted-foreground shrink-0" }), /* @__PURE__ */ React15.createElement(
|
|
1785
1870
|
"input",
|
|
1786
1871
|
{
|
|
1787
1872
|
type: "text",
|
|
@@ -1790,7 +1875,7 @@ var EventModal = ({
|
|
|
1790
1875
|
value: formData.location || "",
|
|
1791
1876
|
onChange: (e) => setFormData({ ...formData, location: e.target.value })
|
|
1792
1877
|
}
|
|
1793
|
-
)), /* @__PURE__ */
|
|
1878
|
+
)), /* @__PURE__ */ React15.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(AlignLeft, { className: "w-4 h-4 text-muted-foreground" }), /* @__PURE__ */ React15.createElement("span", { className: "text-sm font-medium text-foreground" }, "Notes")), /* @__PURE__ */ React15.createElement(
|
|
1794
1879
|
"textarea",
|
|
1795
1880
|
{
|
|
1796
1881
|
className: "w-full bg-muted/20 border border-border/30 rounded-xl px-4 py-3 text-sm min-h-[100px] resize-none text-foreground placeholder-muted-foreground focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all",
|
|
@@ -1798,7 +1883,7 @@ var EventModal = ({
|
|
|
1798
1883
|
value: formData.description || "",
|
|
1799
1884
|
onChange: (e) => setFormData({ ...formData, description: e.target.value })
|
|
1800
1885
|
}
|
|
1801
|
-
)), /* @__PURE__ */
|
|
1886
|
+
)), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-3 p-3 rounded-xl bg-muted/20 border border-border/30" }, /* @__PURE__ */ React15.createElement(Repeat, { className: "w-5 h-5 text-muted-foreground shrink-0" }), /* @__PURE__ */ React15.createElement(
|
|
1802
1887
|
"select",
|
|
1803
1888
|
{
|
|
1804
1889
|
className: "flex-1 bg-transparent text-sm text-foreground focus:outline-none cursor-pointer",
|
|
@@ -1817,28 +1902,28 @@ var EventModal = ({
|
|
|
1817
1902
|
}
|
|
1818
1903
|
}
|
|
1819
1904
|
},
|
|
1820
|
-
/* @__PURE__ */
|
|
1821
|
-
/* @__PURE__ */
|
|
1822
|
-
/* @__PURE__ */
|
|
1823
|
-
/* @__PURE__ */
|
|
1824
|
-
/* @__PURE__ */
|
|
1825
|
-
)), /* @__PURE__ */
|
|
1905
|
+
/* @__PURE__ */ React15.createElement("option", { value: "" }, "Does not repeat"),
|
|
1906
|
+
/* @__PURE__ */ React15.createElement("option", { value: "DAILY" }, "Daily"),
|
|
1907
|
+
/* @__PURE__ */ React15.createElement("option", { value: "WEEKLY" }, "Weekly"),
|
|
1908
|
+
/* @__PURE__ */ React15.createElement("option", { value: "MONTHLY" }, "Monthly"),
|
|
1909
|
+
/* @__PURE__ */ React15.createElement("option", { value: "YEARLY" }, "Yearly")
|
|
1910
|
+
)), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between p-3 rounded-xl bg-muted/20 border border-border/30" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(Tag, { className: "w-5 h-5 text-muted-foreground" }), /* @__PURE__ */ React15.createElement("span", { className: "text-sm text-foreground" }, "Calendar")), /* @__PURE__ */ React15.createElement("div", { className: "relative" }, /* @__PURE__ */ React15.createElement(
|
|
1826
1911
|
"button",
|
|
1827
1912
|
{
|
|
1828
1913
|
type: "button",
|
|
1829
1914
|
onClick: () => setIsCalendarDropdownOpen(!isCalendarDropdownOpen),
|
|
1830
1915
|
className: "flex items-center gap-2 px-3 py-1.5 bg-background border border-border/50 rounded-lg text-sm hover:bg-accent/50 transition-all"
|
|
1831
1916
|
},
|
|
1832
|
-
/* @__PURE__ */
|
|
1917
|
+
/* @__PURE__ */ React15.createElement(
|
|
1833
1918
|
"div",
|
|
1834
1919
|
{
|
|
1835
1920
|
className: "w-3 h-3 rounded-full",
|
|
1836
1921
|
style: { backgroundColor: calendars?.find((c) => c.id === formData.calendarId)?.color || "#3b82f6" }
|
|
1837
1922
|
}
|
|
1838
1923
|
),
|
|
1839
|
-
/* @__PURE__ */
|
|
1840
|
-
/* @__PURE__ */
|
|
1841
|
-
), isCalendarDropdownOpen && /* @__PURE__ */
|
|
1924
|
+
/* @__PURE__ */ React15.createElement("span", { className: "font-medium" }, calendars?.find((c) => c.id === formData.calendarId)?.label || "Select"),
|
|
1925
|
+
/* @__PURE__ */ React15.createElement(ChevronDown2, { className: "w-3.5 h-3.5 text-muted-foreground" })
|
|
1926
|
+
), isCalendarDropdownOpen && /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement("div", { className: "fixed inset-0 z-40", onClick: () => setIsCalendarDropdownOpen(false) }), /* @__PURE__ */ React15.createElement("div", { className: "absolute right-0 bottom-full mb-2 w-48 bg-background border border-border rounded-xl shadow-xl z-50 py-1" }, calendars?.map((cal) => /* @__PURE__ */ React15.createElement(
|
|
1842
1927
|
"button",
|
|
1843
1928
|
{
|
|
1844
1929
|
key: cal.id,
|
|
@@ -1853,19 +1938,19 @@ var EventModal = ({
|
|
|
1853
1938
|
setIsCalendarDropdownOpen(false);
|
|
1854
1939
|
}
|
|
1855
1940
|
},
|
|
1856
|
-
/* @__PURE__ */
|
|
1857
|
-
/* @__PURE__ */
|
|
1858
|
-
formData.calendarId === cal.id && /* @__PURE__ */
|
|
1859
|
-
)))))))), /* @__PURE__ */
|
|
1941
|
+
/* @__PURE__ */ React15.createElement("div", { className: "w-3 h-3 rounded-full", style: { backgroundColor: cal.color } }),
|
|
1942
|
+
/* @__PURE__ */ React15.createElement("span", { className: "flex-1 text-sm" }, cal.label),
|
|
1943
|
+
formData.calendarId === cal.id && /* @__PURE__ */ React15.createElement(Check, { className: "w-4 h-4 text-primary" })
|
|
1944
|
+
)))))))), /* @__PURE__ */ React15.createElement("div", { className: "px-5 py-4 border-t border-border/50 flex items-center justify-between bg-muted/10 shrink-0" }, mode === "edit" && /* @__PURE__ */ React15.createElement(
|
|
1860
1945
|
"button",
|
|
1861
1946
|
{
|
|
1862
1947
|
type: "button",
|
|
1863
1948
|
onClick: handleDelete,
|
|
1864
1949
|
className: "flex items-center gap-2 px-4 py-2 text-destructive hover:bg-destructive/10 rounded-xl transition-all text-sm font-medium"
|
|
1865
1950
|
},
|
|
1866
|
-
/* @__PURE__ */
|
|
1951
|
+
/* @__PURE__ */ React15.createElement(Trash2, { className: "w-4 h-4" }),
|
|
1867
1952
|
"Delete"
|
|
1868
|
-
), mode === "create" && /* @__PURE__ */
|
|
1953
|
+
), mode === "create" && /* @__PURE__ */ React15.createElement("div", null), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(
|
|
1869
1954
|
"button",
|
|
1870
1955
|
{
|
|
1871
1956
|
type: "button",
|
|
@@ -1873,7 +1958,7 @@ var EventModal = ({
|
|
|
1873
1958
|
className: "px-4 py-2.5 text-muted-foreground hover:text-foreground font-medium text-sm rounded-xl transition-all hover:bg-accent"
|
|
1874
1959
|
},
|
|
1875
1960
|
"Cancel"
|
|
1876
|
-
), /* @__PURE__ */
|
|
1961
|
+
), /* @__PURE__ */ React15.createElement(
|
|
1877
1962
|
"button",
|
|
1878
1963
|
{
|
|
1879
1964
|
type: "submit",
|
|
@@ -1881,8 +1966,8 @@ var EventModal = ({
|
|
|
1881
1966
|
},
|
|
1882
1967
|
mode === "edit" ? "Save Changes" : "Create Event"
|
|
1883
1968
|
))));
|
|
1884
|
-
return /* @__PURE__ */
|
|
1885
|
-
|
|
1969
|
+
return /* @__PURE__ */ React15.createElement(Modal, { isOpen, onClose, hideHeader: true, className: "p-0 overflow-hidden max-w-lg rounded-2xl shadow-2xl" }, /* @__PURE__ */ React15.createElement(AnimatePresence, { mode: "wait" }, mode === "view" && event ? /* @__PURE__ */ React15.createElement(
|
|
1970
|
+
motion2.div,
|
|
1886
1971
|
{
|
|
1887
1972
|
key: "view",
|
|
1888
1973
|
initial: { opacity: 0 },
|
|
@@ -1891,8 +1976,8 @@ var EventModal = ({
|
|
|
1891
1976
|
transition: { duration: 0.15 }
|
|
1892
1977
|
},
|
|
1893
1978
|
renderViewMode()
|
|
1894
|
-
) : /* @__PURE__ */
|
|
1895
|
-
|
|
1979
|
+
) : /* @__PURE__ */ React15.createElement(
|
|
1980
|
+
motion2.div,
|
|
1896
1981
|
{
|
|
1897
1982
|
key: "edit",
|
|
1898
1983
|
initial: { opacity: 0 },
|
|
@@ -1903,9 +1988,12 @@ var EventModal = ({
|
|
|
1903
1988
|
renderEditMode()
|
|
1904
1989
|
)));
|
|
1905
1990
|
};
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1991
|
+
|
|
1992
|
+
// src/components/Skeleton.tsx
|
|
1993
|
+
import React16 from "react";
|
|
1994
|
+
var Skeleton = ({ className, style }) => /* @__PURE__ */ React16.createElement("div", { className: cn("animate-pulse bg-muted/40 rounded", className), style });
|
|
1995
|
+
var MonthViewSkeleton = () => /* @__PURE__ */ React16.createElement("div", { className: "h-full bg-background border border-border/50 rounded-2xl overflow-hidden" }, /* @__PURE__ */ React16.createElement("div", { className: "grid grid-cols-7 border-b border-border/50 bg-muted/10" }, Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */ React16.createElement("div", { key: i, className: "py-3 px-2 text-center border-r border-border/30 last:border-r-0" }, /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-4 w-8 mx-auto" })))), /* @__PURE__ */ React16.createElement("div", { className: "grid grid-cols-7 flex-1" }, Array.from({ length: 35 }).map((_, i) => /* @__PURE__ */ React16.createElement("div", { key: i, className: "min-h-[120px] border-r border-b border-border/30 p-2" }, /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-4 w-6 mb-2" }), /* @__PURE__ */ React16.createElement("div", { className: "space-y-1" }, Math.random() > 0.5 && /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-5 w-full rounded-md" }), Math.random() > 0.7 && /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-5 w-3/4 rounded-md" }))))));
|
|
1996
|
+
var WeekViewSkeleton = () => /* @__PURE__ */ React16.createElement("div", { className: "h-full bg-background border border-border/50 rounded-2xl overflow-hidden" }, /* @__PURE__ */ React16.createElement("div", { className: "flex border-b border-border/50 bg-muted/10" }, /* @__PURE__ */ React16.createElement("div", { className: "w-16 p-3 border-r border-border/30" }, /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-8 w-10 mx-auto" })), /* @__PURE__ */ React16.createElement("div", { className: "flex-1 grid grid-cols-7" }, Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */ React16.createElement("div", { key: i, className: "py-3 px-2 text-center border-r border-border/30 last:border-r-0" }, /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-3 w-8 mx-auto mb-1" }), /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-8 w-8 mx-auto rounded-xl" }))))), /* @__PURE__ */ React16.createElement("div", { className: "flex flex-1", style: { height: "600px" } }, /* @__PURE__ */ React16.createElement("div", { className: "w-16 border-r border-border/30" }, Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ React16.createElement("div", { key: i, className: "h-[60px] relative" }, /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-4 w-10 absolute right-2 -translate-y-1/2" })))), /* @__PURE__ */ React16.createElement("div", { className: "flex-1 grid grid-cols-7 relative" }, Array.from({ length: 7 }).map((_, colIdx) => /* @__PURE__ */ React16.createElement("div", { key: colIdx, className: "relative border-r border-border/30 last:border-r-0" }, Array.from({ length: 10 }).map((_2, rowIdx) => /* @__PURE__ */ React16.createElement("div", { key: rowIdx, className: "h-[60px] border-b border-dashed border-border/20" })), Math.random() > 0.3 && /* @__PURE__ */ React16.createElement(
|
|
1909
1997
|
Skeleton,
|
|
1910
1998
|
{
|
|
1911
1999
|
className: "absolute rounded-md",
|
|
@@ -1917,20 +2005,25 @@ var WeekViewSkeleton = () => /* @__PURE__ */ React15__default.createElement("div
|
|
|
1917
2005
|
}
|
|
1918
2006
|
}
|
|
1919
2007
|
))))));
|
|
1920
|
-
var DayViewSkeleton = () => /* @__PURE__ */
|
|
2008
|
+
var DayViewSkeleton = () => /* @__PURE__ */ React16.createElement("div", { className: "h-full bg-background border border-border/50 rounded-2xl overflow-hidden" }, /* @__PURE__ */ React16.createElement("div", { className: "px-6 py-4 border-b border-border/50 bg-muted/10 text-center" }, /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-7 w-64 mx-auto" })), /* @__PURE__ */ React16.createElement("div", { className: "flex flex-1", style: { height: "600px" } }, /* @__PURE__ */ React16.createElement("div", { className: "w-20 border-r border-border/30 bg-muted/5" }, Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ React16.createElement("div", { key: i, className: "h-[80px] relative" }, /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-4 w-12 absolute left-1/2 -translate-x-1/2 -translate-y-1/2" })))), /* @__PURE__ */ React16.createElement("div", { className: "flex-1 relative" }, Array.from({ length: 10 }).map((_, i) => /* @__PURE__ */ React16.createElement("div", { key: i, className: "h-[80px] border-b border-dashed border-border/20" })), /* @__PURE__ */ React16.createElement(
|
|
1921
2009
|
Skeleton,
|
|
1922
2010
|
{
|
|
1923
2011
|
className: "absolute rounded-lg left-4 right-4",
|
|
1924
2012
|
style: { top: "160px", height: "120px" }
|
|
1925
2013
|
}
|
|
1926
|
-
), /* @__PURE__ */
|
|
2014
|
+
), /* @__PURE__ */ React16.createElement(
|
|
1927
2015
|
Skeleton,
|
|
1928
2016
|
{
|
|
1929
2017
|
className: "absolute rounded-lg left-4 right-4",
|
|
1930
2018
|
style: { top: "400px", height: "80px" }
|
|
1931
2019
|
}
|
|
1932
2020
|
))));
|
|
1933
|
-
var AgendaViewSkeleton = () => /* @__PURE__ */
|
|
2021
|
+
var AgendaViewSkeleton = () => /* @__PURE__ */ React16.createElement("div", { className: "h-full bg-background border border-border/50 rounded-2xl overflow-hidden p-6" }, /* @__PURE__ */ React16.createElement("div", { className: "space-y-6" }, Array.from({ length: 4 }).map((_, dayIdx) => /* @__PURE__ */ React16.createElement("div", { key: dayIdx }, /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-5 w-40 mb-4" }), /* @__PURE__ */ React16.createElement("div", { className: "space-y-3" }, Array.from({ length: 2 + Math.floor(Math.random() * 3) }).map((_2, eventIdx) => /* @__PURE__ */ React16.createElement("div", { key: eventIdx, className: "flex items-center gap-4 p-3 rounded-xl bg-muted/10" }, /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-10 w-10 rounded-lg" }), /* @__PURE__ */ React16.createElement("div", { className: "flex-1 space-y-2" }, /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-4 w-3/4" }), /* @__PURE__ */ React16.createElement(Skeleton, { className: "h-3 w-1/2" })))))))));
|
|
2022
|
+
|
|
2023
|
+
// src/components/ContextMenu.tsx
|
|
2024
|
+
import React17, { useState as useState4, useCallback as useCallback3, useEffect as useEffect4, useRef as useRef4 } from "react";
|
|
2025
|
+
import { Edit3, Trash2 as Trash22, Copy } from "lucide-react";
|
|
2026
|
+
import { AnimatePresence as AnimatePresence2, motion as motion3 } from "framer-motion";
|
|
1934
2027
|
var EventContextMenu = ({
|
|
1935
2028
|
event,
|
|
1936
2029
|
position,
|
|
@@ -1941,8 +2034,8 @@ var EventContextMenu = ({
|
|
|
1941
2034
|
customActions = [],
|
|
1942
2035
|
translations
|
|
1943
2036
|
}) => {
|
|
1944
|
-
const menuRef =
|
|
1945
|
-
|
|
2037
|
+
const menuRef = useRef4(null);
|
|
2038
|
+
useEffect4(() => {
|
|
1946
2039
|
const handleKeyDown = (e) => {
|
|
1947
2040
|
if (e.key === "Escape") {
|
|
1948
2041
|
onClose();
|
|
@@ -1953,7 +2046,7 @@ var EventContextMenu = ({
|
|
|
1953
2046
|
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
1954
2047
|
}
|
|
1955
2048
|
}, [position, onClose]);
|
|
1956
|
-
|
|
2049
|
+
useEffect4(() => {
|
|
1957
2050
|
const handleClickOutside = (e) => {
|
|
1958
2051
|
if (menuRef.current && !menuRef.current.contains(e.target)) {
|
|
1959
2052
|
onClose();
|
|
@@ -1971,7 +2064,7 @@ var EventContextMenu = ({
|
|
|
1971
2064
|
...onEdit ? [{
|
|
1972
2065
|
id: "edit",
|
|
1973
2066
|
label: translations?.edit || "Edit",
|
|
1974
|
-
icon: /* @__PURE__ */
|
|
2067
|
+
icon: /* @__PURE__ */ React17.createElement(Edit3, { className: "w-4 h-4" }),
|
|
1975
2068
|
onClick: () => {
|
|
1976
2069
|
onEdit(event);
|
|
1977
2070
|
onClose();
|
|
@@ -1980,7 +2073,7 @@ var EventContextMenu = ({
|
|
|
1980
2073
|
...onDuplicate ? [{
|
|
1981
2074
|
id: "duplicate",
|
|
1982
2075
|
label: translations?.duplicate || "Duplicate",
|
|
1983
|
-
icon: /* @__PURE__ */
|
|
2076
|
+
icon: /* @__PURE__ */ React17.createElement(Copy, { className: "w-4 h-4" }),
|
|
1984
2077
|
onClick: () => {
|
|
1985
2078
|
onDuplicate(event);
|
|
1986
2079
|
onClose();
|
|
@@ -1990,7 +2083,7 @@ var EventContextMenu = ({
|
|
|
1990
2083
|
...onDelete ? [{
|
|
1991
2084
|
id: "delete",
|
|
1992
2085
|
label: translations?.delete || "Delete",
|
|
1993
|
-
icon: /* @__PURE__ */
|
|
2086
|
+
icon: /* @__PURE__ */ React17.createElement(Trash22, { className: "w-4 h-4" }),
|
|
1994
2087
|
onClick: () => {
|
|
1995
2088
|
onDelete(event.id);
|
|
1996
2089
|
onClose();
|
|
@@ -2002,8 +2095,8 @@ var EventContextMenu = ({
|
|
|
2002
2095
|
x: Math.min(position.x, window.innerWidth - 200),
|
|
2003
2096
|
y: Math.min(position.y, window.innerHeight - (actions.length * 44 + 80))
|
|
2004
2097
|
};
|
|
2005
|
-
return /* @__PURE__ */
|
|
2006
|
-
|
|
2098
|
+
return /* @__PURE__ */ React17.createElement(AnimatePresence2, null, /* @__PURE__ */ React17.createElement(
|
|
2099
|
+
motion3.div,
|
|
2007
2100
|
{
|
|
2008
2101
|
ref: menuRef,
|
|
2009
2102
|
initial: { opacity: 0, scale: 0.95, y: -5 },
|
|
@@ -2016,14 +2109,14 @@ var EventContextMenu = ({
|
|
|
2016
2109
|
top: adjustedPosition.y
|
|
2017
2110
|
}
|
|
2018
2111
|
},
|
|
2019
|
-
/* @__PURE__ */
|
|
2112
|
+
/* @__PURE__ */ React17.createElement("div", { className: "px-3 py-2 border-b-[0.5px] border-border bg-muted/30" }, /* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React17.createElement(
|
|
2020
2113
|
"div",
|
|
2021
2114
|
{
|
|
2022
2115
|
className: "w-2.5 h-2.5 rounded-full shrink-0",
|
|
2023
2116
|
style: { backgroundColor: event.color || "var(--primary)" }
|
|
2024
2117
|
}
|
|
2025
|
-
), /* @__PURE__ */
|
|
2026
|
-
/* @__PURE__ */
|
|
2118
|
+
), /* @__PURE__ */ React17.createElement("span", { className: "text-sm font-medium truncate text-foreground" }, event.title))),
|
|
2119
|
+
/* @__PURE__ */ React17.createElement("div", { className: "py-1" }, actions.map((action, index) => /* @__PURE__ */ React17.createElement(React17.Fragment, { key: action.id }, index > 0 && action.variant === "danger" && /* @__PURE__ */ React17.createElement("div", { className: "h-px bg-border my-1" }), /* @__PURE__ */ React17.createElement(
|
|
2027
2120
|
"button",
|
|
2028
2121
|
{
|
|
2029
2122
|
onClick: action.onClick,
|
|
@@ -2035,13 +2128,13 @@ var EventContextMenu = ({
|
|
|
2035
2128
|
)
|
|
2036
2129
|
},
|
|
2037
2130
|
action.icon,
|
|
2038
|
-
/* @__PURE__ */
|
|
2131
|
+
/* @__PURE__ */ React17.createElement("span", null, action.label)
|
|
2039
2132
|
))))
|
|
2040
2133
|
));
|
|
2041
2134
|
};
|
|
2042
2135
|
var useEventContextMenu = () => {
|
|
2043
|
-
const [contextMenu, setContextMenu] =
|
|
2044
|
-
const openContextMenu =
|
|
2136
|
+
const [contextMenu, setContextMenu] = useState4({ event: null, position: null });
|
|
2137
|
+
const openContextMenu = useCallback3((event, e) => {
|
|
2045
2138
|
e.preventDefault();
|
|
2046
2139
|
e.stopPropagation();
|
|
2047
2140
|
setContextMenu({
|
|
@@ -2049,7 +2142,7 @@ var useEventContextMenu = () => {
|
|
|
2049
2142
|
position: { x: e.clientX, y: e.clientY }
|
|
2050
2143
|
});
|
|
2051
2144
|
}, []);
|
|
2052
|
-
const closeContextMenu =
|
|
2145
|
+
const closeContextMenu = useCallback3(() => {
|
|
2053
2146
|
setContextMenu({ event: null, position: null });
|
|
2054
2147
|
}, []);
|
|
2055
2148
|
return {
|
|
@@ -2225,7 +2318,7 @@ function colorToHsl(color) {
|
|
|
2225
2318
|
const min = Math.min(r, g, b);
|
|
2226
2319
|
let h = 0;
|
|
2227
2320
|
let s = 0;
|
|
2228
|
-
|
|
2321
|
+
const l = (max + min) / 2;
|
|
2229
2322
|
if (max !== min) {
|
|
2230
2323
|
const d = max - min;
|
|
2231
2324
|
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
|
@@ -2278,6 +2371,20 @@ function getThemeStyles(theme) {
|
|
|
2278
2371
|
}
|
|
2279
2372
|
return styles;
|
|
2280
2373
|
}
|
|
2374
|
+
|
|
2375
|
+
// src/hooks/useCalendarLogic.ts
|
|
2376
|
+
import { useState as useState5, useMemo as useMemo3 } from "react";
|
|
2377
|
+
import {
|
|
2378
|
+
addMonths as addMonths2,
|
|
2379
|
+
subMonths as subMonths2,
|
|
2380
|
+
addWeeks,
|
|
2381
|
+
subWeeks,
|
|
2382
|
+
addDays as addDays2,
|
|
2383
|
+
subDays,
|
|
2384
|
+
differenceInMilliseconds
|
|
2385
|
+
} from "date-fns";
|
|
2386
|
+
import { toZonedTime as toZonedTime5, fromZonedTime } from "date-fns-tz";
|
|
2387
|
+
import { RRule } from "rrule";
|
|
2281
2388
|
var useCalendarLogic = ({
|
|
2282
2389
|
events,
|
|
2283
2390
|
view: controlledView,
|
|
@@ -2291,18 +2398,18 @@ var useCalendarLogic = ({
|
|
|
2291
2398
|
readOnly,
|
|
2292
2399
|
timezone
|
|
2293
2400
|
}) => {
|
|
2294
|
-
const [internalView, setInternalView] =
|
|
2295
|
-
const [internalDate, setInternalDate] =
|
|
2296
|
-
const [isSidebarOpen, setIsSidebarOpen] =
|
|
2297
|
-
const [isModalOpen, setIsModalOpen] =
|
|
2298
|
-
const [selectedEvent, setSelectedEvent] =
|
|
2299
|
-
const [modalInitialDate, setModalInitialDate] =
|
|
2401
|
+
const [internalView, setInternalView] = useState5("week");
|
|
2402
|
+
const [internalDate, setInternalDate] = useState5(/* @__PURE__ */ new Date());
|
|
2403
|
+
const [isSidebarOpen, setIsSidebarOpen] = useState5(true);
|
|
2404
|
+
const [isModalOpen, setIsModalOpen] = useState5(false);
|
|
2405
|
+
const [selectedEvent, setSelectedEvent] = useState5(null);
|
|
2406
|
+
const [modalInitialDate, setModalInitialDate] = useState5(void 0);
|
|
2300
2407
|
const view = controlledView ?? internalView;
|
|
2301
2408
|
const currentDate = controlledDate ?? internalDate;
|
|
2302
|
-
const expandedEvents =
|
|
2409
|
+
const expandedEvents = useMemo3(() => {
|
|
2303
2410
|
const allEvents = [];
|
|
2304
2411
|
const rangeStart = subDays(currentDate, 365);
|
|
2305
|
-
const rangeEnd =
|
|
2412
|
+
const rangeEnd = addDays2(currentDate, 365);
|
|
2306
2413
|
events.forEach((event) => {
|
|
2307
2414
|
if (event.recurrence) {
|
|
2308
2415
|
try {
|
|
@@ -2353,7 +2460,7 @@ var useCalendarLogic = ({
|
|
|
2353
2460
|
const handlePrev = () => {
|
|
2354
2461
|
switch (view) {
|
|
2355
2462
|
case "month":
|
|
2356
|
-
handleDateChange(
|
|
2463
|
+
handleDateChange(subMonths2(currentDate, 1));
|
|
2357
2464
|
break;
|
|
2358
2465
|
case "week":
|
|
2359
2466
|
handleDateChange(subWeeks(currentDate, 1));
|
|
@@ -2370,17 +2477,17 @@ var useCalendarLogic = ({
|
|
|
2370
2477
|
const handleNext = () => {
|
|
2371
2478
|
switch (view) {
|
|
2372
2479
|
case "month":
|
|
2373
|
-
handleDateChange(
|
|
2480
|
+
handleDateChange(addMonths2(currentDate, 1));
|
|
2374
2481
|
break;
|
|
2375
2482
|
case "week":
|
|
2376
2483
|
handleDateChange(addWeeks(currentDate, 1));
|
|
2377
2484
|
break;
|
|
2378
2485
|
case "day":
|
|
2379
2486
|
case "resource":
|
|
2380
|
-
handleDateChange(
|
|
2487
|
+
handleDateChange(addDays2(currentDate, 1));
|
|
2381
2488
|
break;
|
|
2382
2489
|
case "agenda":
|
|
2383
|
-
handleDateChange(
|
|
2490
|
+
handleDateChange(addDays2(currentDate, 7));
|
|
2384
2491
|
break;
|
|
2385
2492
|
}
|
|
2386
2493
|
};
|
|
@@ -2452,7 +2559,7 @@ var useCalendarLogic = ({
|
|
|
2452
2559
|
let newStart;
|
|
2453
2560
|
if (view === "month") {
|
|
2454
2561
|
if (timezone) {
|
|
2455
|
-
const zonedOriginal =
|
|
2562
|
+
const zonedOriginal = toZonedTime5(originalStart, timezone);
|
|
2456
2563
|
const zonedNew = new Date(overDate);
|
|
2457
2564
|
zonedNew.setHours(zonedOriginal.getHours());
|
|
2458
2565
|
zonedNew.setMinutes(zonedOriginal.getMinutes());
|
|
@@ -2517,6 +2624,12 @@ var useCalendarLogic = ({
|
|
|
2517
2624
|
handleDragEnd
|
|
2518
2625
|
};
|
|
2519
2626
|
};
|
|
2627
|
+
|
|
2628
|
+
// src/index.tsx
|
|
2629
|
+
import { differenceInMinutes as differenceInMinutes6, format as format11 } from "date-fns";
|
|
2630
|
+
|
|
2631
|
+
// src/hooks/useSwipeGesture.ts
|
|
2632
|
+
import { useRef as useRef5, useCallback as useCallback4, useEffect as useEffect5 } from "react";
|
|
2520
2633
|
var useSwipeGesture = (options) => {
|
|
2521
2634
|
const {
|
|
2522
2635
|
onSwipeLeft,
|
|
@@ -2528,9 +2641,9 @@ var useSwipeGesture = (options) => {
|
|
|
2528
2641
|
allowedTime = 500,
|
|
2529
2642
|
enabled = true
|
|
2530
2643
|
} = options;
|
|
2531
|
-
const touchInfoRef =
|
|
2532
|
-
const elementRef =
|
|
2533
|
-
const handleTouchStart =
|
|
2644
|
+
const touchInfoRef = useRef5(null);
|
|
2645
|
+
const elementRef = useRef5(null);
|
|
2646
|
+
const handleTouchStart = useCallback4((e) => {
|
|
2534
2647
|
if (!enabled) return;
|
|
2535
2648
|
const touch = e.touches[0];
|
|
2536
2649
|
touchInfoRef.current = {
|
|
@@ -2539,7 +2652,7 @@ var useSwipeGesture = (options) => {
|
|
|
2539
2652
|
startTime: Date.now()
|
|
2540
2653
|
};
|
|
2541
2654
|
}, [enabled]);
|
|
2542
|
-
const handleTouchEnd =
|
|
2655
|
+
const handleTouchEnd = useCallback4((e) => {
|
|
2543
2656
|
if (!enabled || !touchInfoRef.current) return;
|
|
2544
2657
|
const touch = e.changedTouches[0];
|
|
2545
2658
|
const { startX, startY, startTime } = touchInfoRef.current;
|
|
@@ -2563,7 +2676,7 @@ var useSwipeGesture = (options) => {
|
|
|
2563
2676
|
}
|
|
2564
2677
|
touchInfoRef.current = null;
|
|
2565
2678
|
}, [enabled, threshold, restraint, allowedTime, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown]);
|
|
2566
|
-
|
|
2679
|
+
useEffect5(() => {
|
|
2567
2680
|
const element = elementRef.current;
|
|
2568
2681
|
if (!element) return;
|
|
2569
2682
|
element.addEventListener("touchstart", handleTouchStart, { passive: true });
|
|
@@ -2619,7 +2732,7 @@ var Scheduler = ({
|
|
|
2619
2732
|
locale
|
|
2620
2733
|
// Date-fns locale
|
|
2621
2734
|
}) => {
|
|
2622
|
-
const [activeDragEvent, setActiveDragEvent] =
|
|
2735
|
+
const [activeDragEvent, setActiveDragEvent] = useState6(null);
|
|
2623
2736
|
const {
|
|
2624
2737
|
contextMenuEvent,
|
|
2625
2738
|
contextMenuPosition,
|
|
@@ -2709,20 +2822,20 @@ var Scheduler = ({
|
|
|
2709
2822
|
return 80;
|
|
2710
2823
|
}
|
|
2711
2824
|
if (view !== "week" && view !== "day") return void 0;
|
|
2712
|
-
const duration =
|
|
2825
|
+
const duration = differenceInMinutes6(activeDragEvent.end, activeDragEvent.start);
|
|
2713
2826
|
const hourHeight = view === "day" ? 80 : 60;
|
|
2714
2827
|
return duration / 60 * hourHeight;
|
|
2715
2828
|
};
|
|
2716
2829
|
const getDragWidth = () => {
|
|
2717
2830
|
if (view === "month") return "100%";
|
|
2718
2831
|
if (view === "resource" && activeDragEvent) {
|
|
2719
|
-
const duration =
|
|
2832
|
+
const duration = differenceInMinutes6(activeDragEvent.end, activeDragEvent.start);
|
|
2720
2833
|
const width = duration / 60 * 100;
|
|
2721
2834
|
return `${Math.max(width, 4)}px`;
|
|
2722
2835
|
}
|
|
2723
2836
|
return "150px";
|
|
2724
2837
|
};
|
|
2725
|
-
const filteredEvents =
|
|
2838
|
+
const filteredEvents = useMemo4(() => {
|
|
2726
2839
|
if (!calendars) return expandedEvents;
|
|
2727
2840
|
const activeCalendarIds = calendars.filter((c) => c.active !== false).map((c) => c.id);
|
|
2728
2841
|
return expandedEvents.filter((e) => {
|
|
@@ -2730,7 +2843,7 @@ var Scheduler = ({
|
|
|
2730
2843
|
return activeCalendarIds.includes(e.calendarId);
|
|
2731
2844
|
});
|
|
2732
2845
|
}, [expandedEvents, calendars]);
|
|
2733
|
-
return /* @__PURE__ */
|
|
2846
|
+
return /* @__PURE__ */ React18.createElement(
|
|
2734
2847
|
DndContext,
|
|
2735
2848
|
{
|
|
2736
2849
|
id,
|
|
@@ -2739,13 +2852,13 @@ var Scheduler = ({
|
|
|
2739
2852
|
onDragEnd: onDragEndWrapper,
|
|
2740
2853
|
modifiers
|
|
2741
2854
|
},
|
|
2742
|
-
/* @__PURE__ */
|
|
2855
|
+
/* @__PURE__ */ React18.createElement(
|
|
2743
2856
|
"div",
|
|
2744
2857
|
{
|
|
2745
2858
|
className: cn("flex flex-col h-full bg-background text-foreground relative", className),
|
|
2746
2859
|
style: getThemeStyles(theme)
|
|
2747
2860
|
},
|
|
2748
|
-
/* @__PURE__ */
|
|
2861
|
+
/* @__PURE__ */ React18.createElement(
|
|
2749
2862
|
CalendarHeader,
|
|
2750
2863
|
{
|
|
2751
2864
|
currentDate,
|
|
@@ -2764,8 +2877,8 @@ var Scheduler = ({
|
|
|
2764
2877
|
locale
|
|
2765
2878
|
}
|
|
2766
2879
|
),
|
|
2767
|
-
/* @__PURE__ */
|
|
2768
|
-
|
|
2880
|
+
/* @__PURE__ */ React18.createElement("div", { className: "flex flex-1 overflow-hidden" }, /* @__PURE__ */ React18.createElement(
|
|
2881
|
+
motion4.div,
|
|
2769
2882
|
{
|
|
2770
2883
|
className: cn(
|
|
2771
2884
|
"hidden md:block overflow-hidden"
|
|
@@ -2780,7 +2893,7 @@ var Scheduler = ({
|
|
|
2780
2893
|
ease: [0.4, 0, 0.2, 1]
|
|
2781
2894
|
}
|
|
2782
2895
|
},
|
|
2783
|
-
/* @__PURE__ */
|
|
2896
|
+
/* @__PURE__ */ React18.createElement(
|
|
2784
2897
|
Sidebar,
|
|
2785
2898
|
{
|
|
2786
2899
|
currentDate,
|
|
@@ -2797,8 +2910,8 @@ var Scheduler = ({
|
|
|
2797
2910
|
locale
|
|
2798
2911
|
}
|
|
2799
2912
|
)
|
|
2800
|
-
), /* @__PURE__ */
|
|
2801
|
-
|
|
2913
|
+
), /* @__PURE__ */ React18.createElement("div", { className: "flex-1 flex flex-col overflow-hidden relative" }, isLoading ? /* @__PURE__ */ React18.createElement("div", { className: "flex-1 overflow-auto p-0 md:p-4" }, /* @__PURE__ */ React18.createElement("div", { className: "h-full min-w-full" }, view === "month" && /* @__PURE__ */ React18.createElement(MonthViewSkeleton, null), view === "week" && /* @__PURE__ */ React18.createElement(WeekViewSkeleton, null), view === "day" && /* @__PURE__ */ React18.createElement(DayViewSkeleton, null), view === "agenda" && /* @__PURE__ */ React18.createElement(AgendaViewSkeleton, null), view === "resource" && /* @__PURE__ */ React18.createElement(WeekViewSkeleton, null))) : /* @__PURE__ */ React18.createElement("div", { ref: swipeRef, className: "flex-1 overflow-auto p-0 md:p-4 touch-pan-y" }, /* @__PURE__ */ React18.createElement("div", { className: "h-full min-w-full" }, /* @__PURE__ */ React18.createElement(AnimatePresence3, { mode: "wait", initial: false }, /* @__PURE__ */ React18.createElement(
|
|
2914
|
+
motion4.div,
|
|
2802
2915
|
{
|
|
2803
2916
|
key: `${view}-${currentDate.toISOString()}-${timezone || "local"}`,
|
|
2804
2917
|
initial: { opacity: 0, scale: 0.98, y: 15 },
|
|
@@ -2822,7 +2935,7 @@ var Scheduler = ({
|
|
|
2822
2935
|
},
|
|
2823
2936
|
className: "h-full"
|
|
2824
2937
|
},
|
|
2825
|
-
view === "month" && /* @__PURE__ */
|
|
2938
|
+
view === "month" && /* @__PURE__ */ React18.createElement(
|
|
2826
2939
|
MonthView,
|
|
2827
2940
|
{
|
|
2828
2941
|
currentDate,
|
|
@@ -2833,7 +2946,7 @@ var Scheduler = ({
|
|
|
2833
2946
|
locale
|
|
2834
2947
|
}
|
|
2835
2948
|
),
|
|
2836
|
-
view === "week" && /* @__PURE__ */
|
|
2949
|
+
view === "week" && /* @__PURE__ */ React18.createElement(
|
|
2837
2950
|
WeekView,
|
|
2838
2951
|
{
|
|
2839
2952
|
currentDate,
|
|
@@ -2846,7 +2959,7 @@ var Scheduler = ({
|
|
|
2846
2959
|
readonly: readOnly
|
|
2847
2960
|
}
|
|
2848
2961
|
),
|
|
2849
|
-
view === "day" && /* @__PURE__ */
|
|
2962
|
+
view === "day" && /* @__PURE__ */ React18.createElement(
|
|
2850
2963
|
DayView,
|
|
2851
2964
|
{
|
|
2852
2965
|
currentDate,
|
|
@@ -2859,7 +2972,7 @@ var Scheduler = ({
|
|
|
2859
2972
|
readonly: readOnly
|
|
2860
2973
|
}
|
|
2861
2974
|
),
|
|
2862
|
-
view === "agenda" && /* @__PURE__ */
|
|
2975
|
+
view === "agenda" && /* @__PURE__ */ React18.createElement(
|
|
2863
2976
|
AgendaView,
|
|
2864
2977
|
{
|
|
2865
2978
|
currentDate,
|
|
@@ -2870,27 +2983,27 @@ var Scheduler = ({
|
|
|
2870
2983
|
translations: t
|
|
2871
2984
|
}
|
|
2872
2985
|
),
|
|
2873
|
-
view === "resource" && resources && /* @__PURE__ */
|
|
2986
|
+
view === "resource" && resources && /* @__PURE__ */ React18.createElement(
|
|
2874
2987
|
ResourceView,
|
|
2875
2988
|
{
|
|
2876
2989
|
currentDate,
|
|
2877
2990
|
events: filteredEvents,
|
|
2878
2991
|
resources,
|
|
2879
2992
|
onEventClick: handleEventClickInternal,
|
|
2880
|
-
onTimeSlotClick: (date
|
|
2993
|
+
onTimeSlotClick: (date) => {
|
|
2881
2994
|
if (readOnly) return;
|
|
2882
2995
|
handleTimeSlotClick(date);
|
|
2883
2996
|
},
|
|
2884
2997
|
locale
|
|
2885
2998
|
}
|
|
2886
2999
|
)
|
|
2887
|
-
)))), /* @__PURE__ */
|
|
3000
|
+
)))), /* @__PURE__ */ React18.createElement("div", { className: "md:hidden absolute bottom-6 right-6 z-50" }, /* @__PURE__ */ React18.createElement(
|
|
2888
3001
|
"button",
|
|
2889
3002
|
{
|
|
2890
3003
|
onClick: handleCreateEvent,
|
|
2891
3004
|
className: "w-14 h-14 bg-blue-600 rounded-full shadow-lg flex items-center justify-center text-white active:scale-90 transition-transform"
|
|
2892
3005
|
},
|
|
2893
|
-
/* @__PURE__ */
|
|
3006
|
+
/* @__PURE__ */ React18.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React18.createElement("path", { d: "M5 12h14" }), /* @__PURE__ */ React18.createElement("path", { d: "M12 5v14" }))
|
|
2894
3007
|
)))),
|
|
2895
3008
|
renderEventForm ? renderEventForm({
|
|
2896
3009
|
isOpen: isModalOpen,
|
|
@@ -2899,7 +3012,7 @@ var Scheduler = ({
|
|
|
2899
3012
|
initialDate: modalInitialDate,
|
|
2900
3013
|
onSave: handleModalSave,
|
|
2901
3014
|
onDelete: handleModalDelete
|
|
2902
|
-
}) : /* @__PURE__ */
|
|
3015
|
+
}) : /* @__PURE__ */ React18.createElement(
|
|
2903
3016
|
EventModal,
|
|
2904
3017
|
{
|
|
2905
3018
|
isOpen: isModalOpen,
|
|
@@ -2913,7 +3026,7 @@ var Scheduler = ({
|
|
|
2913
3026
|
translations: t
|
|
2914
3027
|
}
|
|
2915
3028
|
),
|
|
2916
|
-
/* @__PURE__ */
|
|
3029
|
+
/* @__PURE__ */ React18.createElement(
|
|
2917
3030
|
EventContextMenu,
|
|
2918
3031
|
{
|
|
2919
3032
|
event: contextMenuEvent,
|
|
@@ -2946,7 +3059,7 @@ var Scheduler = ({
|
|
|
2946
3059
|
}
|
|
2947
3060
|
}
|
|
2948
3061
|
),
|
|
2949
|
-
/* @__PURE__ */
|
|
3062
|
+
/* @__PURE__ */ React18.createElement(DragOverlay, { dropAnimation: null }, activeDragEvent ? /* @__PURE__ */ React18.createElement(
|
|
2950
3063
|
"div",
|
|
2951
3064
|
{
|
|
2952
3065
|
className: cn(
|
|
@@ -2964,18 +3077,18 @@ var Scheduler = ({
|
|
|
2964
3077
|
transform: "rotate(-2deg) scale(1.02)"
|
|
2965
3078
|
}
|
|
2966
3079
|
},
|
|
2967
|
-
/* @__PURE__ */
|
|
3080
|
+
/* @__PURE__ */ React18.createElement("div", { className: "p-2.5 h-full flex flex-col" }, /* @__PURE__ */ React18.createElement(
|
|
2968
3081
|
"div",
|
|
2969
3082
|
{
|
|
2970
3083
|
className: "absolute left-0 top-0 bottom-0 w-1 rounded-l-lg",
|
|
2971
3084
|
style: { backgroundColor: activeDragEvent.color || "var(--primary)" }
|
|
2972
3085
|
}
|
|
2973
|
-
), /* @__PURE__ */
|
|
3086
|
+
), /* @__PURE__ */ React18.createElement("div", { className: "pl-2" }, /* @__PURE__ */ React18.createElement("div", { className: "font-semibold truncate text-sm" }, activeDragEvent.title), (view === "week" || view === "day") && getDragHeight() && getDragHeight() > 40 && /* @__PURE__ */ React18.createElement("div", { className: "text-xs opacity-80 mt-0.5 flex items-center gap-1" }, /* @__PURE__ */ React18.createElement("svg", { className: "w-3 h-3", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" }, /* @__PURE__ */ React18.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React18.createElement("path", { d: "M12 6v6l4 2" })), format11(activeDragEvent.start, overlayTimeFormat, { locale }), " - ", format11(activeDragEvent.end, overlayTimeFormat, { locale }))), /* @__PURE__ */ React18.createElement("div", { className: "absolute bottom-1.5 right-1.5 opacity-60" }, /* @__PURE__ */ React18.createElement("svg", { className: "w-4 h-4", viewBox: "0 0 24 24", fill: "currentColor" }, /* @__PURE__ */ React18.createElement("circle", { cx: "9", cy: "5", r: "1.5" }), /* @__PURE__ */ React18.createElement("circle", { cx: "15", cy: "5", r: "1.5" }), /* @__PURE__ */ React18.createElement("circle", { cx: "9", cy: "12", r: "1.5" }), /* @__PURE__ */ React18.createElement("circle", { cx: "15", cy: "12", r: "1.5" }), /* @__PURE__ */ React18.createElement("circle", { cx: "9", cy: "19", r: "1.5" }), /* @__PURE__ */ React18.createElement("circle", { cx: "15", cy: "19", r: "1.5" }))))
|
|
2974
3087
|
) : null)
|
|
2975
3088
|
)
|
|
2976
3089
|
);
|
|
2977
3090
|
};
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
3091
|
+
export {
|
|
3092
|
+
Scheduler,
|
|
3093
|
+
cn
|
|
3094
|
+
};
|