@dialiq/calendar-component 1.1.2 → 1.1.4

package/dist/BookingDetailsModal.d.ts

@@ -4,7 +4,10 @@ import './BookingDetailsModal.css';
 interface BookingDetailsModalProps {
     booking: Booking;
     timezone: string;
+    businessId: string;
+    apiBaseUrl?: string;
     onClose: () => void;
+    onBookingDeleted: () => void;
 }
 declare const BookingDetailsModal: React.FC<BookingDetailsModalProps>;
 export default BookingDetailsModal;

package/dist/BookingDetailsModal.d.ts.map

@@ -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,CAyF3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"BookingDetailsModal.d.ts","sourceRoot":"","sources":["../src/BookingDetailsModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,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,CA4J3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/Calendar.d.ts.map

@@ -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,CA+NrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"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,CAyOrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/CreateBookingModal.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Booking, WeeklyBusinessHours } from './types';
+import { Booking, WeeklyBusinessHours, Employee, Room } from './types';
 import './CreateBookingModal.css';
 interface CreateBookingModalProps {
     businessId: string;
@@ -10,6 +10,8 @@ interface CreateBookingModalProps {
     onBookingCreated: (booking: Booking) => void;
     timezone?: string;
     businessHours?: WeeklyBusinessHours;
+    employees?: Employee[];
+    rooms?: Room[];
 }
 declare const CreateBookingModal: React.FC<CreateBookingModalProps>;
 export default CreateBookingModal;

package/dist/CreateBookingModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateBookingModal.d.ts","sourceRoot":"","sources":["../src/CreateBookingModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACvD,OAAO,0BAA0B,CAAC;AAElC,UAAU,uBAAuB;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,mBAAmB,CAAC;CACrC;AAED,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAoNzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"CreateBookingModal.d.ts","sourceRoot":"","sources":["../src/CreateBookingModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAGnD,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AACvE,OAAO,0BAA0B,CAAC;AAElC,UAAU,uBAAuB;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,IAAI,CAAC;IAClB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,mBAAmB,CAAC;IACpC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;CAChB;AAMD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqSzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/api.d.ts

@@ -3,4 +3,7 @@ export declare const createBooking: (businessId: string, booking: CreateBookingR
 export declare const getResourceSchedule: (businessId: string, resourceId: string, startDate: string, endDate: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking[]>;
 export declare const getAllBookings: (businessId: string, startDate: string, endDate: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking[]>;
 export declare const getMeetingDetails: (businessId: string, meetingId: string, timezone?: string, apiBaseUrl?: string) => Promise<Booking>;
+export declare const deleteMeeting: (businessId: string, meetingId: string, apiBaseUrl?: string) => Promise<{
+    success: boolean;
+}>;
 //# sourceMappingURL=api.d.ts.map

package/dist/api.d.ts.map

@@ -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,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"}
+{"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"}

package/dist/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Calendar } from './Calendar';
-export type { CalendarProps, Booking, CreateBookingRequest } from './types';
+export type { CalendarProps, Booking, CreateBookingRequest, Employee, Room } from './types';
 export { createBooking, getResourceSchedule, getAllBookings, getMeetingDetails } from './api';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,YAAY,EAAE,aAAa,EAAE,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC5F,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC"}

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect, useCallback } from 'react';
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -7398,6 +7398,17 @@ const getMeetingDetails = (businessId, meetingId, timezone, apiBaseUrl) => __awa
     }
     return response.json();
 });
+const deleteMeeting = (businessId, meetingId, apiBaseUrl) => __awaiter(void 0, void 0, void 0, function* () {
+    const baseUrl = apiBaseUrl || getBaseUrl();
+    const response = yield fetch(`${baseUrl}/businesses/${businessId}/meetings/${meetingId}`, {
+        method: 'DELETE',
+    });
+    if (!response.ok) {
+        const error = yield response.json();
+        throw new Error(error.error || 'Failed to delete meeting');
+    }
+    return response.json();
+});
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -7426,19 +7437,45 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$2 = ".modal-overlay {\r\n  position: fixed;\r\n  top: 0;\r\n  left: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  background: rgba(0, 0, 0, 0.5);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  z-index: 1000;\r\n  padding: 20px;\r\n}\r\n\r\n.modal-content {\r\n  background: #ffffff;\r\n  border-radius: 8px;\r\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\r\n  width: 100%;\r\n  max-width: 500px;\r\n  max-height: 90vh;\r\n  overflow-y: auto;\r\n}\r\n\r\n.modal-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 20px;\r\n  border-bottom: 1px solid #e9ecef;\r\n}\r\n\r\n.modal-header h3 {\r\n  margin: 0;\r\n  font-size: 20px;\r\n  font-weight: 600;\r\n  color: #212529;\r\n}\r\n\r\n.modal-close-btn {\r\n  background: none;\r\n  border: none;\r\n  font-size: 32px;\r\n  line-height: 1;\r\n  color: #6c757d;\r\n  cursor: pointer;\r\n  padding: 0;\r\n  width: 32px;\r\n  height: 32px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 4px;\r\n  transition: background-color 0.2s;\r\n}\r\n\r\n.modal-close-btn:hover {\r\n  background: #e9ecef;\r\n  color: #212529;\r\n}\r\n\r\n.modal-body {\r\n  padding: 20px;\r\n}\r\n\r\n.modal-footer {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  gap: 12px;\r\n  padding: 20px;\r\n  border-top: 1px solid #e9ecef;\r\n}\r\n\r\n.modal-error {\r\n  background: #f8d7da;\r\n  color: #842029;\r\n  padding: 12px;\r\n  border-radius: 4px;\r\n  margin-bottom: 16px;\r\n  font-size: 14px;\r\n}\r\n\r\n.form-group {\r\n  margin-bottom: 16px;\r\n}\r\n\r\n.form-group label {\r\n  display: block;\r\n  font-weight: 500;\r\n  font-size: 14px;\r\n  color: #212529;\r\n  margin-bottom: 6px;\r\n}\r\n\r\n.form-group input,\r\n.form-group textarea {\r\n  width: 100%;\r\n  padding: 10px 12px;\r\n  border: 1px solid #ced4da;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  font-family: inherit;\r\n  color: #212529;\r\n  transition: border-color 0.2s;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.form-group input:focus,\r\n.form-group textarea:focus {\r\n  outline: none;\r\n  border-color: #0d6efd;\r\n  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);\r\n}\r\n\r\n.form-group textarea {\r\n  resize: vertical;\r\n}\r\n\r\n.form-group small {\r\n  display: block;\r\n  margin-top: 4px;\r\n  font-size: 12px;\r\n  color: #6c757d;\r\n}\r\n\r\n.form-row {\r\n  display: grid;\r\n  grid-template-columns: 1fr 1fr;\r\n  gap: 12px;\r\n}\r\n\r\n.modal-btn {\r\n  padding: 10px 20px;\r\n  border: none;\r\n  border-radius: 4px;\r\n  font-size: 14px;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: all 0.2s;\r\n}\r\n\r\n.modal-btn:disabled {\r\n  opacity: 0.6;\r\n  cursor: not-allowed;\r\n}\r\n\r\n.modal-btn-primary {\r\n  background: #0d6efd;\r\n  color: #ffffff;\r\n}\r\n\r\n.modal-btn-primary:hover:not(:disabled) {\r\n  background: #0b5ed7;\r\n}\r\n\r\n.modal-btn-secondary {\r\n  background: #6c757d;\r\n  color: #ffffff;\r\n}\r\n\r\n.modal-btn-secondary:hover:not(:disabled) {\r\n  background: #5c636a;\r\n}\r\n\r\n@media (max-width: 576px) {\r\n  .modal-content {\r\n    max-width: 100%;\r\n  }\r\n\r\n  .form-row {\r\n    grid-template-columns: 1fr;\r\n  }\r\n}\r\n";
+var css_248z$2 = ".modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1000;\n  padding: 20px;\n}\n\n.modal-content {\n  background: #ffffff;\n  border-radius: 8px;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n  width: 100%;\n  max-width: 500px;\n  max-height: 90vh;\n  overflow-y: auto;\n}\n\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 20px;\n  border-bottom: 1px solid #e9ecef;\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 20px;\n  font-weight: 600;\n  color: #212529;\n}\n\n.modal-close-btn {\n  background: none;\n  border: none;\n  font-size: 32px;\n  line-height: 1;\n  color: #6c757d;\n  cursor: pointer;\n  padding: 0;\n  width: 32px;\n  height: 32px;\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-close-btn:hover {\n  background: #e9ecef;\n  color: #212529;\n}\n\n.modal-body {\n  padding: 20px;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 12px;\n  padding: 20px;\n  border-top: 1px solid #e9ecef;\n}\n\n.modal-error {\n  background: #f8d7da;\n  color: #842029;\n  padding: 12px;\n  border-radius: 4px;\n  margin-bottom: 16px;\n  font-size: 14px;\n}\n\n.form-group {\n  margin-bottom: 16px;\n}\n\n.form-group label {\n  display: block;\n  font-weight: 500;\n  font-size: 14px;\n  color: #212529;\n  margin-bottom: 6px;\n}\n\n.form-group input,\n.form-group textarea {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  font-size: 14px;\n  font-family: inherit;\n  color: #212529;\n  transition: border-color 0.2s;\n  box-sizing: border-box;\n}\n\n.form-group input:focus,\n.form-group textarea:focus {\n  outline: none;\n  border-color: #0d6efd;\n  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);\n}\n\n.form-group textarea {\n  resize: vertical;\n}\n\n.form-group small {\n  display: block;\n  margin-top: 4px;\n  font-size: 12px;\n  color: #6c757d;\n}\n\n.form-group select {\n  width: 100%;\n  padding: 10px 12px;\n  border: 1px solid #ced4da;\n  border-radius: 4px;\n  font-size: 14px;\n  font-family: inherit;\n  color: #212529;\n  background: #ffffff;\n  cursor: pointer;\n  transition: border-color 0.2s;\n  box-sizing: border-box;\n}\n\n.form-group select:focus {\n  outline: none;\n  border-color: #0d6efd;\n  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);\n}\n\n.selected-items {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 8px;\n}\n\n.selected-item {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 8px;\n  background: #e7f1ff;\n  border: 1px solid #b6d4fe;\n  border-radius: 4px;\n  font-size: 13px;\n  color: #0d6efd;\n}\n\n.remove-item-btn {\n  background: none;\n  border: none;\n  padding: 0;\n  width: 18px;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  color: #0d6efd;\n  cursor: pointer;\n  border-radius: 50%;\n  transition: background-color 0.2s;\n}\n\n.remove-item-btn:hover {\n  background: #b6d4fe;\n  color: #084298;\n}\n\n.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n\n.modal-btn {\n  padding: 10px 20px;\n  border: none;\n  border-radius: 4px;\n  font-size: 14px;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n}\n\n.modal-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.modal-btn-primary {\n  background: #0d6efd;\n  color: #ffffff;\n}\n\n.modal-btn-primary:hover:not(:disabled) {\n  background: #0b5ed7;\n}\n\n.modal-btn-secondary {\n  background: #6c757d;\n  color: #ffffff;\n}\n\n.modal-btn-secondary:hover:not(:disabled) {\n  background: #5c636a;\n}\n\n@media (max-width: 576px) {\n  .modal-content {\n    max-width: 100%;\n  }\n\n  .form-row {\n    grid-template-columns: 1fr;\n  }\n}\n";
 styleInject(css_248z$2);
 
-const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants: defaultParticipants, onClose, onBookingCreated, timezone = moment$1.tz.guess(), businessHours, }) => {
+const generateConfirmationNumber = () => {
+    return Math.floor(100000 + Math.random() * 900000).toString();
+};
+const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants: defaultParticipants, onClose, onBookingCreated, timezone = moment$1.tz.guess(), businessHours, employees = [], rooms = [], }) => {
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [onClose]);
     const [title, setTitle] = useState('');
-    const [description, setDescription] = useState('');
-    // Initialize date/time using the target timezone
+    const [meetingPurpose, setMeetingPurpose] = useState('');
     const [startDate, setStartDate] = useState(moment$1(initialDate).tz(timezone).format("YYYY-MM-DD"));
     const [startTime, setStartTime] = useState('09:00');
     const [endTime, setEndTime] = useState('10:00');
-    const [participants, setParticipants] = useState(defaultParticipants.join(', '));
+    const [selectedEmployees, setSelectedEmployees] = useState([]);
+    const [selectedRoom, setSelectedRoom] = useState(null);
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState(null);
+    const handleAddEmployee = (employeeId) => {
+        const employee = employees.find(e => e.id === employeeId);
+        if (employee && !selectedEmployees.find(e => e.id === employeeId)) {
+            setSelectedEmployees([...selectedEmployees, employee]);
+        }
+    };
+    const handleRemoveEmployee = (employeeId) => {
+        setSelectedEmployees(selectedEmployees.filter(e => e.id !== employeeId));
+    };
+    const handleRoomChange = (roomId) => {
+        const room = rooms.find(r => r.id === roomId);
+        setSelectedRoom(room || null);
+    };
+    const availableEmployees = employees.filter(e => !selectedEmployees.find(se => se.id === e.id));
     const validateBusinessHours = (start, end) => {
         if (!businessHours)
             return;
@@ -7465,14 +7502,16 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
         setLoading(true);
         setError(null);
         try {
-            const participantList = participants
-                .split(',')
-                .map((p) => p.trim())
-                .filter((p) => p.length > 0);
-            if (participantList.length === 0) {
-                throw new Error('At least one participant is required');
+            if (selectedEmployees.length === 0) {
+                throw new Error('At least one employee is required');
             }
-            // Construct dates in the target timezone
+            if (!selectedRoom) {
+                throw new Error('A room is required');
+            }
+            const participantList = [
+                selectedRoom.id,
+                ...selectedEmployees.map(e => e.id)
+            ];
             const startDateTime = moment$1.tz(`${startDate}T${startTime}`, "YYYY-MM-DDTHH:mm", timezone);
             const endDateTime = moment$1.tz(`${startDate}T${endTime}`, "YYYY-MM-DDTHH:mm", timezone);
             if (!startDateTime.isValid() || !endDateTime.isValid()) {
@@ -7481,15 +7520,18 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
             if (endDateTime.isSameOrBefore(startDateTime)) {
                 throw new Error('End time must be after start time');
             }
-            // Validate Business Hours
             validateBusinessHours(startDateTime, endDateTime);
+            const confirmationNumber = generateConfirmationNumber();
             const booking = yield createBooking(businessId, {
                 participants: participantList,
                 start: startDateTime.format(),
                 end: endDateTime.format(),
                 metadata: {
+                    description: meetingPurpose,
                     title: title || 'Untitled Meeting',
-                    description,
+                    staff: selectedEmployees.map(e => e.name).join(', '),
+                    room: selectedRoom.name,
+                    confirmation: confirmationNumber,
                 },
             }, apiBaseUrl);
             onBookingCreated(booking);
@@ -7513,12 +7555,27 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
                         React.createElement("label", { htmlFor: "title" }, "Title"),
                         React.createElement("input", { id: "title", type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: "Meeting title", required: true })),
                     React.createElement("div", { className: "form-group" },
-                        React.createElement("label", { htmlFor: "description" }, "Description"),
-                        React.createElement("textarea", { id: "description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Meeting description (optional)", rows: 3 })),
+                        React.createElement("label", { htmlFor: "meetingPurpose" }, "What is this meeting for?"),
+                        React.createElement("textarea", { id: "meetingPurpose", value: meetingPurpose, onChange: (e) => setMeetingPurpose(e.target.value), placeholder: "Enter the purpose of this meeting", rows: 3 })),
+                    React.createElement("div", { className: "form-group" },
+                        React.createElement("label", { htmlFor: "room" }, "Room *"),
+                        React.createElement("select", { id: "room", value: (selectedRoom === null || selectedRoom === void 0 ? void 0 : selectedRoom.id) || '', onChange: (e) => handleRoomChange(e.target.value), required: true },
+                            React.createElement("option", { value: "" }, "Select a room"),
+                            rooms.map((room) => (React.createElement("option", { key: room.id, value: room.id }, room.name))))),
                     React.createElement("div", { className: "form-group" },
-                        React.createElement("label", { htmlFor: "participants" }, "Participants"),
-                        React.createElement("input", { id: "participants", type: "text", value: participants, onChange: (e) => setParticipants(e.target.value), placeholder: "user_A, room_101 (comma-separated)", required: true }),
-                        React.createElement("small", null, "Enter participant IDs separated by commas")),
+                        React.createElement("label", { htmlFor: "employees" }, "Employees *"),
+                        React.createElement("select", { id: "employees", value: "", onChange: (e) => {
+                                if (e.target.value) {
+                                    handleAddEmployee(e.target.value);
+                                    e.target.value = '';
+                                }
+                            } },
+                            React.createElement("option", { value: "" }, "Add an employee"),
+                            availableEmployees.map((employee) => (React.createElement("option", { key: employee.id, value: employee.id }, employee.name)))),
+                        selectedEmployees.length > 0 && (React.createElement("div", { className: "selected-items" }, selectedEmployees.map((employee) => (React.createElement("span", { key: employee.id, className: "selected-item" },
+                            employee.name,
+                            React.createElement("button", { type: "button", className: "remove-item-btn", onClick: () => handleRemoveEmployee(employee.id) }, "\u00D7")))))),
+                        React.createElement("small", null, "At least one employee is required")),
                     React.createElement("div", { className: "form-row" },
                         React.createElement("div", { className: "form-group" },
                             React.createElement("label", { htmlFor: "date" }, "Date"),
@@ -7539,20 +7596,57 @@ const CreateBookingModal = ({ businessId, apiBaseUrl, initialDate, participants:
                     React.createElement("button", { type: "submit", className: "modal-btn modal-btn-primary", disabled: loading }, loading ? 'Creating...' : 'Create Booking'))))));
 };
 
-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";
+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";
 styleInject(css_248z$1);
 
-const BookingDetailsModal = ({ booking, timezone, onClose, }) => {
+const BookingDetailsModal = ({ booking, timezone, businessId, apiBaseUrl, onClose, onBookingDeleted, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
+    useEffect(() => {
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [onClose]);
+    const [showConfirm, setShowConfirm] = useState(false);
+    const [deleting, setDeleting] = useState(false);
+    const [error, setError] = useState(null);
     const startMoment = moment$1(booking.start).tz(timezone);
     const endMoment = moment$1(booking.end).tz(timezone);
     const durationMinutes = endMoment.diff(startMoment, 'minutes');
+    const handleDelete = () => __awaiter(void 0, void 0, void 0, function* () {
+        setDeleting(true);
+        setError(null);
+        try {
+            yield deleteMeeting(businessId, booking.meeting_id, apiBaseUrl);
+            onBookingDeleted();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to delete meeting');
+            setDeleting(false);
+        }
+    });
     return (React.createElement("div", { className: "modal-overlay", onClick: onClose },
         React.createElement("div", { className: "modal-content booking-details-modal", onClick: (e) => e.stopPropagation() },
             React.createElement("div", { className: "modal-header" },
                 React.createElement("h3", null, ((_a = booking.metadata) === null || _a === void 0 ? void 0 : _a.title) || 'Untitled Booking'),
-                React.createElement("button", { className: "modal-close-btn", onClick: onClose }, "\u00D7")),
+                React.createElement("div", { className: "modal-header-actions" },
+                    React.createElement("button", { className: "modal-delete-btn", onClick: () => setShowConfirm(true), title: "Delete meeting", disabled: deleting },
+                        React.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
+                            React.createElement("polyline", { points: "3 6 5 6 21 6" }),
+                            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" }),
+                            React.createElement("line", { x1: "10", y1: "11", x2: "10", y2: "17" }),
+                            React.createElement("line", { x1: "14", y1: "11", x2: "14", y2: "17" }))),
+                    React.createElement("button", { className: "modal-close-btn", onClick: onClose }, "\u00D7"))),
             React.createElement("div", { className: "modal-body" },
+                error && React.createElement("div", { className: "modal-error" }, error),
+                showConfirm && (React.createElement("div", { className: "delete-confirm-box" },
+                    React.createElement("p", null, "Are you sure you want to delete this meeting?"),
+                    React.createElement("div", { className: "delete-confirm-actions" },
+                        React.createElement("button", { className: "modal-btn modal-btn-secondary", onClick: () => setShowConfirm(false), disabled: deleting }, "Cancel"),
+                        React.createElement("button", { className: "modal-btn modal-btn-danger", onClick: handleDelete, disabled: deleting }, deleting ? 'Deleting...' : 'Delete')))),
                 React.createElement("div", { className: "detail-section" },
                     React.createElement("div", { className: "detail-row" },
                         React.createElement("span", { className: "detail-label" }, "Date:"),
@@ -7977,7 +8071,7 @@ const MonthView = ({ currentDate, bookings, timezone, onBookingClick, onDateClic
 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}";
 styleInject(css_248z);
 
-const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, }) => {
+const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defaultView = 'month', onBookingCreate, onBookingClick, participants = [], timezone = moment$1.tz.guess(), businessHours, employees = [], rooms = [], }) => {
     const [currentDate, setCurrentDate] = useState(moment$1().tz(timezone));
     const [currentView, setCurrentView] = useState(defaultView);
     const [bookings, setBookings] = useState([]);
@@ -8113,8 +8207,11 @@ const Calendar = ({ businessId, resourceId, title = 'Calendar', apiBaseUrl, defa
         error && React.createElement("div", { className: "calendar-error" }, error),
         loading && React.createElement("div", { className: "calendar-loading" }, "Loading..."),
         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 }))),
-        showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours })),
-        selectedBooking && (React.createElement(BookingDetailsModal, { booking: selectedBooking, timezone: timezone, onClose: () => setSelectedBooking(null) }))));
+        showCreateModal && selectedDate && (React.createElement(CreateBookingModal, { businessId: businessId, apiBaseUrl: apiBaseUrl, initialDate: selectedDate, participants: participants, onClose: () => setShowCreateModal(false), onBookingCreated: handleBookingCreated, timezone: timezone, businessHours: businessHours, employees: employees, rooms: rooms })),
+        selectedBooking && (React.createElement(BookingDetailsModal, { booking: selectedBooking, timezone: timezone, businessId: businessId, apiBaseUrl: apiBaseUrl, onClose: () => setSelectedBooking(null), onBookingDeleted: () => __awaiter(void 0, void 0, void 0, function* () {
+                setSelectedBooking(null);
+                yield fetchBookings();
+            }) }))));
 };
 
 export { Calendar, createBooking, getAllBookings, getMeetingDetails, getResourceSchedule };