@dialiq/calendar-component 1.1.1 → 1.1.3

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.
@@ -4,7 +4,10 @@ import './BookingDetailsModal.css';
4
4
  interface BookingDetailsModalProps {
5
5
  booking: Booking;
6
6
  timezone: string;
7
+ businessId: string;
8
+ apiBaseUrl?: string;
7
9
  onClose: () => void;
10
+ onBookingDeleted: () => void;
8
11
  }
9
12
  declare const BookingDetailsModal: React.FC<BookingDetailsModalProps>;
10
13
  export default BookingDetailsModal;
@@ -1 +1 @@
1
- {"version":3,"file":"BookingDetailsModal.d.ts","sourceRoot":"","sources":["../src/BookingDetailsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,2BAA2B,CAAC;AAEnC,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAiH3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
1
+ {"version":3,"file":"BookingDetailsModal.d.ts","sourceRoot":"","sources":["../src/BookingDetailsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAElC,OAAO,2BAA2B,CAAC;AAEnC,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAkJ3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../src/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAW,MAAM,SAAS,CAAC;AAQjD,OAAO,gBAAgB,CAAC;AAIxB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAiOrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../src/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,aAAa,EAAW,MAAM,SAAS,CAAC;AAQjD,OAAO,gBAAgB,CAAC;AAIxB,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAqOrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/dist/api.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  import { Booking, CreateBookingRequest } from './types';
2
2
  export declare const createBooking: (businessId: string, booking: CreateBookingRequest, apiBaseUrl?: string) => Promise<Booking>;
3
- export declare const getResourceSchedule: (businessId: string, resourceId: string, startDate: string, endDate: string, apiBaseUrl?: string) => Promise<Booking[]>;
4
- export declare const getAllBookings: (businessId: string, startDate: string, endDate: string, apiBaseUrl?: string) => Promise<Booking[]>;
5
- export declare const getMeetingDetails: (businessId: string, meetingId: string, apiBaseUrl?: string) => Promise<Booking>;
3
+ export declare const getResourceSchedule: (businessId: string, resourceId: string, startDate: string, endDate: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking[]>;
4
+ export declare const getAllBookings: (businessId: string, startDate: string, endDate: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking[]>;
5
+ export declare const getMeetingDetails: (businessId: string, meetingId: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking>;
6
+ export declare const deleteMeeting: (businessId: string, meetingId: string, apiBaseUrl?: string) => Promise<{
7
+ success: boolean;
8
+ }>;
6
9
  //# sourceMappingURL=api.d.ts.map
package/dist/api.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAYxD,eAAO,MAAM,aAAa,GACxB,YAAY,MAAM,EAClB,SAAS,oBAAoB,EAC7B,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAgBjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,YAAY,MAAM,EAClB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,CAcnB,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,CAcnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAUjB,CAAC"}
1
+ {"version":3,"file":"api.d.ts","sourceRoot":"","sources":["../src/api.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAYxD,eAAO,MAAM,aAAa,GACxB,YAAY,MAAM,EAClB,SAAS,oBAAoB,EAC7B,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAgBjB,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAC9B,YAAY,MAAM,EAClB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,CAiBnB,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,SAAS,MAAM,EACf,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,EAAE,CAiBnB,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC5B,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC,OAAO,CAejB,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,YAAY,MAAM,EAClB,WAAW,MAAM,EACjB,aAAa,MAAM,KAClB,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,CAY9B,CAAC"}
@@ -6,7 +6,6 @@ interface CalendarHeaderProps {
6
6
  onNext: () => void;
7
7
  onPrevious: () => void;
8
8
  onToday: () => void;
9
- onCreateClick: () => void;
10
9
  dateRangeText: string;
11
10
  }
12
11
  declare const CalendarHeader: React.FC<CalendarHeaderProps>;
@@ -1 +1 @@
1
- {"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../src/components/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,mBAAmB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC;IACpE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,aAAa,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAuEjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
1
+ {"version":3,"file":"CalendarHeader.d.ts","sourceRoot":"","sources":["../../src/components/CalendarHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,mBAAmB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAC;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,KAAK,IAAI,CAAC;IACpE,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;CACzB;AAED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAgEjD,CAAC;AAEF,eAAe,cAAc,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"TimeGrid.d.ts","sourceRoot":"","sources":["../../src/components/TimeGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGxD,UAAU,aAAa;IACnB,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IAClC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA6RrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"TimeGrid.d.ts","sourceRoot":"","sources":["../../src/components/TimeGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAGxD,UAAU,aAAa;IACnB,WAAW,EAAE,MAAM,CAAC,MAAM,CAAC;IAC3B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,UAAU,CAAC;IAClC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,eAAe,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACvC;AAED,QAAA,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAuRrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/dist/index.esm.js CHANGED
@@ -7355,11 +7355,14 @@ const createBooking = (businessId, booking, apiBaseUrl) => __awaiter(void 0, voi
7355
7355
  }
7356
7356
  return response.json();
7357
7357
  });
7358
- const getResourceSchedule = (businessId, resourceId, startDate, endDate, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
7358
+ const getResourceSchedule = (businessId, resourceId, startDate, endDate, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
7359
7359
  const baseUrl = apiBaseUrl || getBaseUrl();
7360
7360
  const url = new URL(`${baseUrl}/businesses/${businessId}/schedules/${resourceId}`);
7361
7361
  url.searchParams.append('start_date', startDate);
7362
7362
  url.searchParams.append('end_date', endDate);
7363
+ if (timezone) {
7364
+ url.searchParams.append('timezone', timezone);
7365
+ }
7363
7366
  const response = yield fetch(url.toString());
7364
7367
  if (!response.ok) {
7365
7368
  const error = yield response.json();
@@ -7367,11 +7370,14 @@ const getResourceSchedule = (businessId, resourceId, startDate, endDate, apiBase
7367
7370
  }
7368
7371
  return response.json();
7369
7372
  });
7370
- const getAllBookings = (businessId, startDate, endDate, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
7373
+ const getAllBookings = (businessId, startDate, endDate, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
7371
7374
  const baseUrl = apiBaseUrl || getBaseUrl();
7372
7375
  const url = new URL(`${baseUrl}/businesses/${businessId}/bookings`);
7373
7376
  url.searchParams.append('start_date', startDate);
7374
7377
  url.searchParams.append('end_date', endDate);
7378
+ if (timezone) {
7379
+ url.searchParams.append('timezone', timezone);
7380
+ }
7375
7381
  const response = yield fetch(url.toString());
7376
7382
  if (!response.ok) {
7377
7383
  const error = yield response.json();
@@ -7379,15 +7385,30 @@ const getAllBookings = (businessId, startDate, endDate, apiBaseUrl) => __awaiter
7379
7385
  }
7380
7386
  return response.json();
7381
7387
  });
7382
- const getMeetingDetails = (businessId, meetingId, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
7388
+ const getMeetingDetails = (businessId, meetingId, timezone, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
7383
7389
  const baseUrl = apiBaseUrl || getBaseUrl();
7384
- const response = yield fetch(`${baseUrl}/businesses/${businessId}/meetings/${meetingId}`);
7390
+ const url = new URL(`${baseUrl}/businesses/${businessId}/meetings/${meetingId}`);
7391
+ if (timezone) {
7392
+ url.searchParams.append('timezone', timezone);
7393
+ }
7394
+ const response = yield fetch(url.toString());
7385
7395
  if (!response.ok) {
7386
7396
  const error = yield response.json();
7387
7397
  throw new Error(error.error || 'Failed to fetch meeting details');
7388
7398
  }
7389
7399
  return response.json();
7390
7400
  });
7401
+ const deleteMeeting = (businessId, meetingId, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
7402
+ const baseUrl = apiBaseUrl || getBaseUrl();
7403
+ const response = yield fetch(`${baseUrl}/businesses/${businessId}/meetings/${meetingId}`, {
7404
+ method: 'DELETE',
7405
+ });
7406
+ if (!response.ok) {
7407
+ const error = yield response.json();
7408
+ throw new Error(error.error || 'Failed to delete meeting');
7409
+ }
7410
+ return response.json();
7411
+ });
7391
7412
 
7392
7413
  function styleInject(css, ref) {
7393
7414
  if ( ref === void 0 ) ref = {};
@@ -7435,7 +7456,7 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
7435
7456
  const dayName = start.format('dddd');
7436
7457
  const businessDay = businessHours[dayName];
7437
7458
  if (!businessDay)
7438
- return; // Assuming open if not defined, or closed? Usually open if not specified or handle as error.
7459
+ return; // Assuming open if not defined, or closed? Usually open if not specified or handle as error.
7439
7460
  // Based on provided JSON, all days are present. If missing, maybe assume open.
7440
7461
  if (businessDay.isClosed) {
7441
7462
  throw new Error(`Business is closed on ${dayName}`);
@@ -7475,8 +7496,8 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
7475
7496
  validateBusinessHours(startDateTime, endDateTime);
7476
7497
  const booking = yield createBooking(businessId, {
7477
7498
  participants: participantList,
7478
- start: startDateTime.toISOString(),
7479
- end: endDateTime.toISOString(),
7499
+ start: startDateTime.format(),
7500
+ end: endDateTime.format(),
7480
7501
  metadata: {
7481
7502
  title: title || 'Untitled Meeting',
7482
7503
  description,
@@ -7529,20 +7550,48 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
7529
7550
  React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
7530
7551
  };
7531
7552
 
7532
- var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\r\n\r\n.booking-details-modal {\r\n max-width: 500px;\r\n}\r\n\r\n.detail-section {\r\n padding: 12px 0;\r\n border-bottom: 1px solid #e9ecef;\r\n}\r\n\r\n.detail-section:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.detail-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: flex-start;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.detail-row:last-child {\r\n margin-bottom: 0;\r\n}\r\n\r\n.detail-row.full-width {\r\n flex-direction: column;\r\n}\r\n\r\n.detail-label {\r\n font-weight: 500;\r\n color: #6c757d;\r\n font-size: 14px;\r\n min-width: 100px;\r\n}\r\n\r\n.detail-label-muted {\r\n color: #adb5bd;\r\n font-size: 12px;\r\n}\r\n\r\n.detail-value {\r\n font-weight: 500;\r\n color: #212529;\r\n font-size: 14px;\r\n text-align: right;\r\n}\r\n\r\n.detail-value-muted {\r\n color: #adb5bd;\r\n font-size: 12px;\r\n font-family: monospace;\r\n}\r\n\r\n.detail-description {\r\n margin: 8px 0 0 0;\r\n color: #495057;\r\n font-size: 14px;\r\n line-height: 1.5;\r\n white-space: pre-wrap;\r\n}\r\n\r\n.participants-list {\r\n margin: 8px 0 0 0;\r\n padding-left: 20px;\r\n list-style-type: disc;\r\n}\r\n\r\n.participant-item {\r\n color: #495057;\r\n font-size: 14px;\r\n margin-bottom: 4px;\r\n}\r\n\r\n@media (max-width: 576px) {\r\n .booking-details-modal {\r\n max-width: 100%;\r\n }\r\n\r\n .detail-row {\r\n flex-direction: column;\r\n gap: 4px;\r\n }\r\n\r\n .detail-value {\r\n text-align: left;\r\n }\r\n}\r\n";
7553
+ var css_248z$1 = "/* BookingDetailsModal - extends base modal styles from CreateBookingModal.css */\n\n.booking-details-modal {\n max-width: 500px;\n}\n\n.detail-section {\n padding: 12px 0;\n border-bottom: 1px solid #e9ecef;\n}\n\n.detail-section:last-child {\n border-bottom: none;\n}\n\n.detail-row {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n margin-bottom: 8px;\n}\n\n.detail-row:last-child {\n margin-bottom: 0;\n}\n\n.detail-row.full-width {\n flex-direction: column;\n}\n\n.detail-label {\n font-weight: 500;\n color: #6c757d;\n font-size: 14px;\n min-width: 100px;\n}\n\n.detail-label-muted {\n color: #adb5bd;\n font-size: 12px;\n}\n\n.detail-value {\n font-weight: 500;\n color: #212529;\n font-size: 14px;\n text-align: right;\n}\n\n.detail-value-muted {\n color: #adb5bd;\n font-size: 12px;\n font-family: monospace;\n}\n\n.detail-description {\n margin: 8px 0 0 0;\n color: #495057;\n font-size: 14px;\n line-height: 1.5;\n white-space: pre-wrap;\n}\n\n.participants-list {\n margin: 8px 0 0 0;\n padding-left: 20px;\n list-style-type: disc;\n}\n\n.participant-item {\n color: #495057;\n font-size: 14px;\n margin-bottom: 4px;\n}\n\n.modal-header-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.modal-delete-btn {\n background: none;\n border: none;\n color: #dc3545;\n cursor: pointer;\n padding: 6px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 4px;\n transition: background-color 0.2s;\n}\n\n.modal-delete-btn:hover:not(:disabled) {\n background: #f8d7da;\n}\n\n.modal-delete-btn:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.delete-confirm-box {\n background: #fff3cd;\n border: 1px solid #ffc107;\n border-radius: 4px;\n padding: 16px;\n margin-bottom: 16px;\n}\n\n.delete-confirm-box p {\n margin: 0 0 12px 0;\n font-size: 14px;\n color: #856404;\n}\n\n.delete-confirm-actions {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n}\n\n.modal-btn-danger {\n background: #dc3545;\n color: #ffffff;\n}\n\n.modal-btn-danger:hover:not(:disabled) {\n background: #bb2d3b;\n}\n\n@media (max-width: 576px) {\n .booking-details-modal {\n max-width: 100%;\n }\n\n .detail-row {\n flex-direction: column;\n gap: 4px;\n }\n\n .detail-value {\n text-align: left;\n }\n}\n";
7533
7554
  styleInject(css_248z$1);
7534
7555
 
7535
- const BookingDetailsModal = ({ booking, timezone, onClose, }) => {
7536
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
7556
+ const BookingDetailsModal = ({ booking, timezone, businessId, apiBaseUrl, onClose, onBookingDeleted, }) => {
7557
+ var _a, _b, _c, _d, _e, _f, _g, _h;
7558
+ const [showConfirm, setShowConfirm] = useState(false);
7559
+ const [deleting, setDeleting] = useState(false);
7560
+ const [error, setError] = useState(null);
7537
7561
  const startMoment = moment$1(booking.start).tz(timezone);
7538
7562
  const endMoment = moment$1(booking.end).tz(timezone);
7539
7563
  const durationMinutes = endMoment.diff(startMoment, 'minutes');
7564
+ const handleDelete = () => __awaiter(void 0, void 0, void 0, function* () {
7565
+ setDeleting(true);
7566
+ setError(null);
7567
+ try {
7568
+ yield deleteMeeting(businessId, booking.meeting_id, apiBaseUrl);
7569
+ onBookingDeleted();
7570
+ }
7571
+ catch (err) {
7572
+ setError(err instanceof Error ? err.message : 'Failed to delete meeting');
7573
+ setDeleting(false);
7574
+ }
7575
+ });
7540
7576
  return (React.createElement("div", { className: "modal-overlay", onClick: onClose },
7541
7577
  React.createElement("div", { className: "modal-content booking-details-modal", onClick: (e) => e.stopPropagation() },
7542
7578
  React.createElement("div", { className: "modal-header" },
7543
7579
  React.createElement("h3", null, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled Booking'),
7544
- React.createElement("button", { className: "modal-close-btn", onClick: onClose }, "\u00D7")),
7580
+ React.createElement("div", { className: "modal-header-actions" },
7581
+ React.createElement("button", { className: "modal-delete-btn", onClick: () => setShowConfirm(true), title: "Delete meeting", disabled: deleting },
7582
+ React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
7583
+ React.createElement("polyline", { points: "3 6 5 6 21 6" }),
7584
+ React.createElement("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }),
7585
+ React.createElement("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
7586
+ React.createElement("line", { x1: "14", y1: "11", x2: "14", y2: "17" }))),
7587
+ React.createElement("button", { className: "modal-close-btn", onClick: onClose }, "\u00D7"))),
7545
7588
  React.createElement("div", { className: "modal-body" },
7589
+ error && React.createElement("div", { className: "modal-error" }, error),
7590
+ showConfirm && (React.createElement("div", { className: "delete-confirm-box" },
7591
+ React.createElement("p", null, "Are you sure you want to delete this meeting?"),
7592
+ React.createElement("div", { className: "delete-confirm-actions" },
7593
+ React.createElement("button", { className: "modal-btn modal-btn-secondary", onClick: () => setShowConfirm(false), disabled: deleting }, "Cancel"),
7594
+ React.createElement("button", { className: "modal-btn modal-btn-danger", onClick: handleDelete, disabled: deleting }, deleting ? 'Deleting...' : 'Delete')))),
7546
7595
  React.createElement("div", { className: "detail-section" },
7547
7596
  React.createElement("div", { className: "detail-row" },
7548
7597
  React.createElement("span", { className: "detail-label" }, "Date:"),
@@ -7569,14 +7618,6 @@ const BookingDetailsModal = ({ booking, timezone, onClose, }) => {
7569
7618
  (booking.room || ((_g = booking.metadata) === null || _g === void 0 ? void 0 : _g.room)) && (React.createElement("div", { className: "detail-row" },
7570
7619
  React.createElement("span", { className: "detail-label" }, "Room:"),
7571
7620
  React.createElement("span", { className: "detail-value" }, booking.room || ((_h = booking.metadata) === null || _h === void 0 ? void 0 : _h.room)))))),
7572
- booking.participants && booking.participants.length > 0 && (React.createElement("div", { className: "detail-section" },
7573
- React.createElement("div", { className: "detail-row full-width" },
7574
- React.createElement("span", { className: "detail-label" }, "Participants:"),
7575
- React.createElement("ul", { className: "participants-list" }, booking.participants.map((participant, index) => (React.createElement("li", { key: index, className: "participant-item" }, participant))))))),
7576
- ((_j = booking.metadata) === null || _j === void 0 ? void 0 : _j.organizer) && (React.createElement("div", { className: "detail-section" },
7577
- React.createElement("div", { className: "detail-row" },
7578
- React.createElement("span", { className: "detail-label" }, "Organizer:"),
7579
- React.createElement("span", { className: "detail-value" }, booking.metadata.organizer)))),
7580
7621
  React.createElement("div", { className: "detail-section" },
7581
7622
  React.createElement("div", { className: "detail-row" },
7582
7623
  React.createElement("span", { className: "detail-label detail-label-muted" }, "Meeting ID:"),
@@ -7712,7 +7753,7 @@ const isMobile = () => {
7712
7753
  return false;
7713
7754
  };
7714
7755
 
7715
- const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious, onToday, onCreateClick, dateRangeText, }) => {
7756
+ const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious, onToday, dateRangeText, }) => {
7716
7757
  const mobile = isMobile();
7717
7758
  return (React.createElement("div", { className: "calendar-header" },
7718
7759
  React.createElement("div", { className: "calendar-title-section" },
@@ -7722,12 +7763,11 @@ const CalendarHeader = ({ title, currentView, onViewChange, onNext, onPrevious,
7722
7763
  React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'week' ? 'active' : ''}`, onClick: () => onViewChange('week'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Week"),
7723
7764
  React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'workWeek' ? 'active' : ''}`, onClick: () => onViewChange('workWeek'), disabled: mobile, style: mobile ? { display: 'none' } : {} }, "Work Week"),
7724
7765
  React.createElement("button", { className: `calendar-btn calendar-btn-view ${currentView === 'day' ? 'active' : ''}`, onClick: () => onViewChange('day') }, "Day")),
7725
- React.createElement("button", { className: "calendar-btn calendar-btn-create", onClick: onCreateClick }, "+ Create Booking")),
7726
- React.createElement("div", { className: "calendar-navigation" },
7727
- React.createElement("button", { className: "calendar-btn", onClick: onPrevious }, "\u2039"),
7728
- React.createElement("button", { className: "calendar-btn", onClick: onToday }, "Today"),
7729
- React.createElement("button", { className: "calendar-btn", onClick: onNext }, "\u203A"),
7730
- React.createElement("span", { className: "calendar-current-month" }, dateRangeText))));
7766
+ React.createElement("div", { className: "calendar-navigation" },
7767
+ React.createElement("button", { className: "calendar-btn", onClick: onPrevious }, "\u2039"),
7768
+ React.createElement("button", { className: "calendar-btn", onClick: onToday }, "Today"),
7769
+ React.createElement("button", { className: "calendar-btn", onClick: onNext }, "\u203A"),
7770
+ React.createElement("span", { className: "calendar-current-month" }, dateRangeText)))));
7731
7771
  };
7732
7772
 
7733
7773
  const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTimeSlotClick, businessHours, }) => {
@@ -7751,7 +7791,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
7751
7791
  days.forEach(day => {
7752
7792
  const dayName = day.format('dddd');
7753
7793
  const dayHours = businessHours[dayName];
7754
- console.log('Day:', dayName, 'Hours:', dayHours);
7755
7794
  if (!(dayHours === null || dayHours === void 0 ? void 0 : dayHours.isClosed) && (dayHours === null || dayHours === void 0 ? void 0 : dayHours.openTime) && (dayHours === null || dayHours === void 0 ? void 0 : dayHours.closeTime)) {
7756
7795
  const openTime = moment$1(dayHours.openTime, ['h:mm A', 'hh:mm A'], true);
7757
7796
  const closeTime = moment$1(dayHours.closeTime, ['h:mm A', 'hh:mm A'], true);
@@ -7762,7 +7801,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
7762
7801
  const openMinutes = openTime.hours() * 60 + openTime.minutes();
7763
7802
  const closeMinutes = closeTime.hours() * 60 + closeTime.minutes();
7764
7803
  const duration = closeMinutes - openMinutes;
7765
- console.log(' Open:', dayHours.openTime, '->', openMinutes, '| Close:', dayHours.closeTime, '->', closeMinutes, '| Duration:', duration);
7766
7804
  if (openMinutes < closeMinutes && duration > maxDuration) {
7767
7805
  maxDuration = duration;
7768
7806
  longestDayOpen = openMinutes;
@@ -7770,7 +7808,6 @@ const TimeGrid = ({ currentDate, view, bookings, timezone, onBookingClick, onTim
7770
7808
  }
7771
7809
  }
7772
7810
  });
7773
- console.log('Longest: open =', longestDayOpen, 'close =', longestDayClose);
7774
7811
  if (maxDuration === 0) {
7775
7812
  return {
7776
7813
  displayStart: 0,
@@ -7976,7 +8013,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
7976
8013
  React.createElement("div", { className: "calendar-body" }, rows)));
7977
8014
  };
7978
8015
 
7979
- var css_248z = ".calendar-container {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n background-color: #fff;\n display: flex;\n flex-direction: column;\n height: 100%;\n /* Use 100% height of parent */\n max-height: 100vh;\n /* Ensure it doesn't exceed viewport */\n min-height: 600px;\n /* Minimum height fallback */\n /* Minimum height fallback */\n overflow: hidden;\n}\n\n/* Header */\n.calendar-header {\n padding: 16px;\n border-bottom: 1px solid #e0e0e0;\n background-color: #fff;\n}\n\n.calendar-title-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 16px;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.calendar-title {\n margin: 0;\n font-size: 1.5rem;\n color: #333;\n}\n\n.calendar-view-toggle {\n display: flex;\n background-color: #f5f5f5;\n border-radius: 6px;\n padding: 2px;\n}\n\n.calendar-btn {\n padding: 8px 16px;\n border: 1px solid #e0e0e0;\n background-color: #fff;\n cursor: pointer;\n border-radius: 4px;\n font-size: 14px;\n transition: all 0.2s;\n}\n\n.calendar-btn:hover {\n background-color: #f5f5f5;\n}\n\n.calendar-btn-view {\n border: none;\n background: transparent;\n border-radius: 4px;\n padding: 6px 12px;\n}\n\n.calendar-btn-view.active {\n background-color: #fff;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n font-weight: 600;\n}\n\n.calendar-btn-create {\n background-color: #0078d4;\n color: white;\n border: none;\n}\n\n.calendar-btn-create:hover {\n background-color: #106ebe;\n}\n\n.calendar-navigation {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.calendar-current-month {\n font-size: 1.1rem;\n font-weight: 600;\n margin-left: 16px;\n color: #333;\n}\n\n/* Content Area */\n.calendar-content {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n}\n\n/* Month View */\n.month-view-container {\n flex: 1;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n /* Prevent container scrolling, let body scroll */\n}\n\n.calendar-days-row {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n /* Ensure equal columns */\n border-bottom: 1px solid #e0e0e0;\n background-color: #f9f9f9;\n}\n\n.calendar-day-header {\n padding: 10px;\n text-align: center;\n font-weight: 600;\n color: #666;\n font-size: 0.9rem;\n overflow: hidden;\n /* Prevent overflow */\n text-overflow: ellipsis;\n}\n\n.calendar-body {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow-y: auto;\n /* Scrollable body */\n}\n\n.calendar-row {\n display: grid;\n grid-template-columns: repeat(7, 1fr);\n /* Ensure equal columns */\n flex: 1;\n min-height: 100px;\n /* Minimum row height */\n border-bottom: 1px solid #e0e0e0;\n}\n\n.calendar-cell {\n border-right: 1px solid #e0e0e0;\n padding: 8px;\n position: relative;\n cursor: pointer;\n transition: background-color 0.2s;\n overflow: hidden;\n /* Prevent cell expansion */\n min-width: 0;\n /* Allow shrinking below content size */\n}\n\n.calendar-cell:hover {\n background-color: #fcfcfc;\n}\n\n.calendar-cell-disabled {\n background-color: #f9f9f9;\n color: #999;\n}\n\n.calendar-cell-today {\n background-color: #e6f2ff;\n}\n\n.calendar-cell-closed {\n background-color: #f5f5f5;\n cursor: not-allowed;\n}\n\n.calendar-cell-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 4px;\n}\n\n.calendar-cell-number {\n font-weight: 600;\n font-size: 0.9rem;\n}\n\n.calendar-closed-label-small {\n font-size: 0.7rem;\n color: #d13438;\n background: #fde7e9;\n padding: 2px 4px;\n border-radius: 3px;\n}\n\n.calendar-cell-bookings {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.calendar-booking {\n background-color: #e1dfdd;\n /* Default neutral color */\n border-left: 3px solid #0078d4;\n padding: 4px 6px;\n border-radius: 2px;\n font-size: 0.8rem;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n cursor: pointer;\n position: relative;\n /* For tooltip positioning */\n}\n\n.calendar-booking:hover {\n background-color: #d0d0d0;\n}\n\n.calendar-booking-time {\n font-weight: 600;\n margin-right: 4px;\n}\n\n.calendar-booking-more {\n font-size: 0.8rem;\n color: #666;\n padding: 2px 4px;\n}\n\n/* Time Grid (Day/Week/WorkWeek) */\n.time-grid-container {\n display: flex;\n flex-direction: column;\n flex: 1;\n overflow: hidden;\n}\n\n.time-grid-header {\n display: flex;\n border-bottom: 1px solid #e0e0e0;\n padding-right: 17px;\n /* Adjust for scrollbar */\n}\n\n.time-column-header {\n width: 60px;\n /* Width of time labels column */\n flex-shrink: 0;\n border-right: 1px solid #e0e0e0;\n}\n\n.day-column-header {\n flex: 1;\n text-align: center;\n padding: 8px;\n border-right: 1px solid #e0e0e0;\n background-color: #f9f9f9;\n min-width: 0;\n /* Prevent expansion */\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\n.day-column-header.today {\n background-color: #e6f2ff;\n color: #0078d4;\n}\n\n.day-column-header.closed {\n background-color: #f0f0f0;\n color: #999;\n}\n\n.day-name {\n font-size: 0.8rem;\n text-transform: uppercase;\n color: #666;\n}\n\n.day-number {\n font-size: 1.2rem;\n font-weight: 600;\n}\n\n.time-grid-body {\n display: flex;\n flex: 1;\n overflow-y: auto;\n position: relative;\n}\n\n.time-labels-column {\n width: 60px;\n flex-shrink: 0;\n border-right: 1px solid #e0e0e0;\n background-color: #fff;\n}\n\n.time-label {\n height: 60px;\n /* 1 hour height */\n text-align: right;\n padding-right: 8px;\n font-size: 0.75rem;\n color: #666;\n justify-content: center;\n}\n\n.days-grid {\n flex: 1;\n display: flex;\n position: relative;\n /* 24 hours * 60px/hour = 1440px total height */\n height: 1440px;\n}\n\n.grid-lines {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n z-index: 0;\n}\n\n.grid-hour-row {\n height: 60px;\n border-bottom: 1px solid #e0e0e0;\n box-sizing: border-box;\n}\n\n.grid-hour-row:last-child {\n border-bottom: none;\n}\n\n.day-column {\n flex: 1;\n border-right: 1px solid #e0e0e0;\n position: relative;\n height: 100%;\n min-width: 0;\n /* Critical for flex containers to not expand based on content */\n}\n\n.day-column.closed-column {\n background-color: repeating-linear-gradient(45deg,\n #fbfbfb,\n #fbfbfb 10px,\n #f5f5f5 10px,\n #f5f5f5 20px);\n}\n\n.calendar-event {\n background-color: #e1dfdd;\n border-left: 4px solid #0078d4;\n border-radius: 3px;\n padding: 2px 4px;\n font-size: 0.75rem;\n overflow: hidden;\n cursor: pointer;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n z-index: 1;\n transition: transform 0.1s, z-index 0.1s;\n}\n\n.calendar-event:hover {\n z-index: 10;\n /* Bring to front on hover */\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\n}\n\n.event-content {\n height: 100%;\n overflow: hidden;\n}\n\n.event-title {\n font-weight: 600;\n margin-bottom: 2px;\n}\n\n.event-time {\n font-size: 0.7rem;\n color: #555;\n}\n\n/* Tooltip Styles */\n.event-tooltip {\n display: none;\n position: absolute;\n left: 100%;\n top: 0;\n background: white;\n border: 1px solid #ccc;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n padding: 10px;\n border-radius: 4px;\n width: 200px;\n z-index: 100;\n pointer-events: none;\n}\n\n/* Show tooltip on hover */\n.calendar-booking:hover .event-tooltip,\n.calendar-event:hover .event-tooltip {\n display: block;\n}\n\n/* Adjust tooltip position if it goes offscreen (simple right-side check) */\n/* Note: A real production app would use a library like Popper.js */\n.day-column:last-child .event-tooltip,\n.day-column:nth-last-child(2) .event-tooltip {\n left: auto;\n right: 100%;\n}\n\n.tooltip-title {\n font-weight: bold;\n margin-bottom: 8px;\n border-bottom: 1px solid #eee;\n padding-bottom: 4px;\n}\n\n.tooltip-row {\n display: flex;\n justify-content: space-between;\n margin-bottom: 4px;\n font-size: 0.85rem;\n}\n\n.tooltip-label {\n color: #666;\n margin-right: 8px;\n}\n\n.tooltip-value {\n font-weight: 500;\n text-align: right;\n}\n\n/* Loading & Error */\n.calendar-loading,\n.calendar-error {\n padding: 20px;\n text-align: center;\n color: #666;\n}\n\n.calendar-error {\n color: #d13438;\n}\n\n/* Closed Block Styles */\n.calendar-closed-block {\n position: absolute;\n left: 0;\n right: 0;\n background-color: #f0f0f0;\n background-image: repeating-linear-gradient(45deg,\n #f0f0f0,\n #f0f0f0 10px,\n #e8e8e8 10px,\n #e8e8e8 20px);\n display: flex;\n justify-content: center;\n align-items: center;\n z-index: 5;\n /* Below events but above grid lines */\n pointer-events: none;\n /* Allow clicks to pass through if needed, though we block clicks in JS */\n border-bottom: 1px solid #ddd;\n border-top: 1px solid #ddd;\n}\n\n.closed-block-label {\n background-color: rgba(255, 255, 255, 0.8);\n padding: 4px 8px;\n border-radius: 4px;\n font-size: 0.8rem;\n color: #888;\n font-weight: 500;\n}";
8016
+ var css_248z = ".calendar-container {\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 8px;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n /* Use 100% height of parent */\r\n max-height: 100vh;\r\n overflow: hidden;\r\n}\r\n\r\n/* Header */\r\n.calendar-header {\r\n padding: 16px;\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.calendar-title-section {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 16px;\r\n flex-wrap: wrap;\r\n gap: 10px;\r\n}\r\n\r\n.calendar-title {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n color: #333;\r\n}\r\n\r\n.calendar-view-toggle {\r\n display: flex;\r\n background-color: #f5f5f5;\r\n border-radius: 6px;\r\n padding: 2px;\r\n}\r\n\r\n.calendar-btn {\r\n padding: 8px 16px;\r\n border: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n cursor: pointer;\r\n border-radius: 4px;\r\n font-size: 14px;\r\n transition: all 0.2s;\r\n}\r\n\r\n.calendar-btn:hover {\r\n background-color: #f5f5f5;\r\n}\r\n\r\n.calendar-btn-view {\r\n border: none;\r\n background: transparent;\r\n border-radius: 4px;\r\n padding: 6px 12px;\r\n}\r\n\r\n.calendar-btn-view.active {\r\n background-color: #fff;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n font-weight: 600;\r\n}\r\n\r\n.calendar-btn-create {\r\n background-color: #0078d4;\r\n color: white;\r\n border: none;\r\n}\r\n\r\n.calendar-btn-create:hover {\r\n background-color: #106ebe;\r\n}\r\n\r\n.calendar-navigation {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n}\r\n\r\n.calendar-current-month {\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n margin-left: 16px;\r\n color: #333;\r\n}\r\n\r\n/* Content Area */\r\n.calendar-content {\r\n flex: 1;\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n/* Month View */\r\n.month-view-container {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n overflow: hidden;\r\n /* Prevent container scrolling, let body scroll */\r\n}\r\n\r\n.calendar-days-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n border-bottom: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n}\r\n\r\n.calendar-day-header {\r\n padding: 10px;\r\n text-align: center;\r\n font-weight: 600;\r\n color: #666;\r\n font-size: 0.9rem;\r\n overflow: hidden;\r\n /* Prevent overflow */\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.calendar-body {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow-y: auto;\r\n /* Scrollable body */\r\n}\r\n\r\n.calendar-row {\r\n display: grid;\r\n grid-template-columns: repeat(7, 1fr);\r\n /* Ensure equal columns */\r\n flex: 1;\r\n min-height: 100px;\r\n /* Minimum row height */\r\n border-bottom: 1px solid #e0e0e0;\r\n}\r\n\r\n.calendar-cell {\r\n border-right: 1px solid #e0e0e0;\r\n padding: 8px;\r\n position: relative;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n overflow: hidden;\r\n /* Prevent cell expansion */\r\n min-width: 0;\r\n /* Allow shrinking below content size */\r\n}\r\n\r\n.calendar-cell:hover {\r\n background-color: #fcfcfc;\r\n}\r\n\r\n.calendar-cell-disabled {\r\n background-color: #f9f9f9;\r\n color: #999;\r\n}\r\n\r\n.calendar-cell-today {\r\n background-color: #e6f2ff;\r\n}\r\n\r\n.calendar-cell-closed {\r\n background-color: #f5f5f5;\r\n cursor: not-allowed;\r\n}\r\n\r\n.calendar-cell-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n margin-bottom: 4px;\r\n}\r\n\r\n.calendar-cell-number {\r\n font-weight: 600;\r\n font-size: 0.9rem;\r\n}\r\n\r\n.calendar-closed-label-small {\r\n font-size: 0.7rem;\r\n color: #d13438;\r\n background: #fde7e9;\r\n padding: 2px 4px;\r\n border-radius: 3px;\r\n}\r\n\r\n.calendar-cell-bookings {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 4px;\r\n}\r\n\r\n.calendar-booking {\r\n background-color: #e1dfdd;\r\n /* Default neutral color */\r\n border-left: 3px solid #0078d4;\r\n padding: 4px 6px;\r\n border-radius: 2px;\r\n font-size: 0.8rem;\r\n white-space: nowrap;\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n cursor: pointer;\r\n position: relative;\r\n /* For tooltip positioning */\r\n}\r\n\r\n.calendar-booking:hover {\r\n background-color: #d0d0d0;\r\n}\r\n\r\n.calendar-booking-time {\r\n font-weight: 600;\r\n margin-right: 4px;\r\n}\r\n\r\n.calendar-booking-more {\r\n font-size: 0.8rem;\r\n color: #666;\r\n padding: 2px 4px;\r\n}\r\n\r\n/* Time Grid (Day/Week/WorkWeek) */\r\n.time-grid-container {\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n overflow: hidden;\r\n}\r\n\r\n.time-grid-header {\r\n display: flex;\r\n border-bottom: 1px solid #e0e0e0;\r\n padding-right: 17px;\r\n /* Adjust for scrollbar */\r\n}\r\n\r\n.time-column-header {\r\n width: 60px;\r\n /* Width of time labels column */\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n}\r\n\r\n.day-column-header {\r\n flex: 1;\r\n text-align: center;\r\n padding: 8px;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #f9f9f9;\r\n min-width: 0;\r\n /* Prevent expansion */\r\n overflow: hidden;\r\n text-overflow: ellipsis;\r\n}\r\n\r\n.day-column-header.today {\r\n background-color: #e6f2ff;\r\n color: #0078d4;\r\n}\r\n\r\n.day-column-header.closed {\r\n background-color: #f0f0f0;\r\n color: #999;\r\n}\r\n\r\n.day-name {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n color: #666;\r\n}\r\n\r\n.day-number {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n}\r\n\r\n.time-grid-body {\r\n display: flex;\r\n flex: 1;\r\n overflow-y: auto;\r\n position: relative;\r\n}\r\n\r\n.time-labels-column {\r\n width: 60px;\r\n flex-shrink: 0;\r\n border-right: 1px solid #e0e0e0;\r\n background-color: #fff;\r\n}\r\n\r\n.time-label {\r\n height: 60px;\r\n /* 1 hour height */\r\n text-align: right;\r\n padding-right: 8px;\r\n font-size: 0.75rem;\r\n color: #666;\r\n justify-content: center;\r\n}\r\n\r\n.days-grid {\r\n flex: 1;\r\n display: flex;\r\n position: relative;\r\n /* 24 hours * 60px/hour = 1440px total height */\r\n height: 1440px;\r\n}\r\n\r\n.grid-lines {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n.grid-hour-row {\r\n height: 60px;\r\n border-bottom: 1px solid #e0e0e0;\r\n box-sizing: border-box;\r\n}\r\n\r\n.grid-hour-row:last-child {\r\n border-bottom: none;\r\n}\r\n\r\n.day-column {\r\n flex: 1;\r\n border-right: 1px solid #e0e0e0;\r\n position: relative;\r\n height: 100%;\r\n min-width: 0;\r\n /* Critical for flex containers to not expand based on content */\r\n}\r\n\r\n.day-column.closed-column {\r\n background-color: repeating-linear-gradient(45deg,\r\n #fbfbfb,\r\n #fbfbfb 10px,\r\n #f5f5f5 10px,\r\n #f5f5f5 20px);\r\n}\r\n\r\n.calendar-event {\r\n background-color: #e1dfdd;\r\n border-left: 4px solid #0078d4;\r\n border-radius: 3px;\r\n padding: 2px 4px;\r\n font-size: 0.75rem;\r\n overflow: hidden;\r\n cursor: pointer;\r\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\r\n z-index: 1;\r\n transition: transform 0.1s, z-index 0.1s;\r\n}\r\n\r\n.calendar-event:hover {\r\n z-index: 10;\r\n /* Bring to front on hover */\r\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.event-content {\r\n height: 100%;\r\n overflow: hidden;\r\n}\r\n\r\n.event-title {\r\n font-weight: 600;\r\n margin-bottom: 2px;\r\n}\r\n\r\n.event-time {\r\n font-size: 0.7rem;\r\n color: #555;\r\n}\r\n\r\n/* Tooltip Styles */\r\n.event-tooltip {\r\n display: none;\r\n position: absolute;\r\n left: 100%;\r\n top: 0;\r\n background: white;\r\n border: 1px solid #ccc;\r\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\r\n padding: 10px;\r\n border-radius: 4px;\r\n width: 200px;\r\n z-index: 100;\r\n pointer-events: none;\r\n}\r\n\r\n/* Show tooltip on hover */\r\n.calendar-booking:hover .event-tooltip,\r\n.calendar-event:hover .event-tooltip {\r\n display: block;\r\n}\r\n\r\n/* Adjust tooltip position if it goes offscreen (simple right-side check) */\r\n/* Note: A real production app would use a library like Popper.js */\r\n.day-column:last-child .event-tooltip,\r\n.day-column:nth-last-child(2) .event-tooltip {\r\n left: auto;\r\n right: 100%;\r\n}\r\n\r\n.tooltip-title {\r\n font-weight: bold;\r\n margin-bottom: 8px;\r\n border-bottom: 1px solid #eee;\r\n padding-bottom: 4px;\r\n}\r\n\r\n.tooltip-row {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-bottom: 4px;\r\n font-size: 0.85rem;\r\n}\r\n\r\n.tooltip-label {\r\n color: #666;\r\n margin-right: 8px;\r\n}\r\n\r\n.tooltip-value {\r\n font-weight: 500;\r\n text-align: right;\r\n}\r\n\r\n/* Loading & Error */\r\n.calendar-loading,\r\n.calendar-error {\r\n padding: 20px;\r\n text-align: center;\r\n color: #666;\r\n}\r\n\r\n.calendar-error {\r\n color: #d13438;\r\n}\r\n\r\n/* Closed Block Styles */\r\n.calendar-closed-block {\r\n position: absolute;\r\n left: 0;\r\n right: 0;\r\n background-color: #f0f0f0;\r\n background-image: repeating-linear-gradient(45deg,\r\n #f0f0f0,\r\n #f0f0f0 10px,\r\n #e8e8e8 10px,\r\n #e8e8e8 20px);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n z-index: 5;\r\n /* Below events but above grid lines */\r\n pointer-events: none;\r\n /* Allow clicks to pass through if needed, though we block clicks in JS */\r\n border-bottom: 1px solid #ddd;\r\n border-top: 1px solid #ddd;\r\n}\r\n\r\n.closed-block-label {\r\n background-color: rgba(255, 255, 255, 0.8);\r\n padding: 4px 8px;\r\n border-radius: 4px;\r\n font-size: 0.8rem;\r\n color: #888;\r\n font-weight: 500;\r\n}";
7980
8017
  styleInject(css_248z);
7981
8018
 
7982
8019
  const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, }) => {
@@ -8031,10 +8068,10 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
8031
8068
  }
8032
8069
  let fetchedBookings;
8033
8070
  if (resourceId) {
8034
- fetchedBookings = yield getResourceSchedule(businessId, resourceId, startDate.toISOString(), endDate.toISOString(), apiBaseUrl);
8071
+ fetchedBookings = yield getResourceSchedule(businessId, resourceId, startDate.toISOString(), endDate.toISOString(), timezone, apiBaseUrl);
8035
8072
  }
8036
8073
  else {
8037
- fetchedBookings = yield getAllBookings(businessId, startDate.toISOString(), endDate.toISOString(), apiBaseUrl);
8074
+ fetchedBookings = yield getAllBookings(businessId, startDate.toISOString(), endDate.toISOString(), timezone, apiBaseUrl);
8038
8075
  }
8039
8076
  setBookings(fetchedBookings);
8040
8077
  }
@@ -8111,15 +8148,15 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
8111
8148
  }
8112
8149
  };
8113
8150
  return (React.createElement("div", { className: "calendar-container" },
8114
- React.createElement(CalendarHeader, { title: title, currentView: currentView, onViewChange: setCurrentView, onNext: handleNext, onPrevious: handlePrevious, onToday: handleToday, onCreateClick: () => {
8115
- setSelectedDate(moment$1().tz(timezone).toDate());
8116
- setShowCreateModal(true);
8117
- }, dateRangeText: getHeaderDateFormat() }),
8151
+ React.createElement(CalendarHeader, { title: title, currentView: currentView, onViewChange: setCurrentView, onNext: handleNext, onPrevious: handlePrevious, onToday: handleToday, dateRangeText: getHeaderDateFormat() }),
8118
8152
  error && React.createElement("div", { className: "calendar-error" }, error),
8119
8153
  loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
8120
8154
  React.createElement("div", { className: "calendar-content" }, currentView === 'month' ? (React.createElement(MonthView, { currentDate: currentDate, bookings: bookings, timezone: timezone, onBookingClick: handleInternalBookingClick, onDateClick: handleDateClick, businessHours: businessHours })) : (React.createElement(TimeGrid, { currentDate: currentDate, view: currentView, bookings: bookings, timezone: timezone, onBookingClick: handleInternalBookingClick, onTimeSlotClick: handleDateClick, businessHours: businessHours }))),
8121
8155
  showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours })),
8122
- selectedBooking && (React.createElement(BookingDetailsModal, { booking: selectedBooking, timezone: timezone, onClose: () => setSelectedBooking(null) }))));
8156
+ selectedBooking && (React.createElement(BookingDetailsModal, { booking: selectedBooking, timezone: timezone, businessId: businessId, apiBaseUrl: apiBaseUrl, onClose: () => setSelectedBooking(null), onBookingDeleted: () => __awaiter(void 0, void 0, void 0, function* () {
8157
+ setSelectedBooking(null);
8158
+ yield fetchBookings();
8159
+ }) }))));
8123
8160
  };
8124
8161
 
8125
8162
  export { Calendar, createBooking, getAllBookings, getMeetingDetails, getResourceSchedule };