@getmicdrop/svelte-components 5.10.3 → 5.12.0

package/dist/utils/utils.js

@@ -1,693 +1,693 @@
-import { twMerge } from "tailwind-merge";
-import clsx from "clsx";
-import EventIcon from "../assets/svg/role/event.svg";
-import BookingIcon from "../assets/svg/role/booking.svg";
-import EmailIcon from "../assets/svg/role/emails.svg";
-import VenueIcon from "../assets/svg/role/venue.svg";
-import PayoutIcon from "../assets/svg/role/payout.svg";
-import MarketingIcon from "../assets/svg/role/marketing.svg";
-import OrdersIcon from "../assets/svg/role/orders.svg";
-import OrganisationIcon from "../assets/svg/role/organisation.svg";
-import ReportingIcon from "../assets/svg/role/reporting.svg";
-import microphonePlaceholder from "../assets/images/microphone.png";
-
-export function classNames(...classes) {
-  return classes.filter(Boolean).join(" ");
-}
-
-export function truncateTitle(title, maxLength) {
-  if (title.length > maxLength) {
-    return title.slice(0, maxLength) + "...";
-  }
-  return title;
-}
-
-export function convertToCustomDateFormat(isoString) {
-  const date = new Date(isoString);
-
-  const year = date.getUTCFullYear();
-  const month = date.getUTCMonth();
-  const day = date.getUTCDate();
-
-  const customDate = new Date(year, month, day);
-
-  return customDate;
-}
-
-export function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-
-export function getDays(params) {
-  if (params === "weeks") {
-    return [
-      { value: "monday", label: "Monday" },
-      { value: "tuesday", label: "Tuesday" },
-      { value: "wednesday", label: "Wednesday" },
-      { value: "thursday", label: "Thursday" },
-      { value: "friday", label: "Friday" },
-    ];
-  } else {
-    return Array.from({ length: 31 }, (_, i) => {
-      const day = i + 1;
-      const suffix =
-        day % 10 === 1 && day !== 11
-          ? "st"
-          : day % 10 === 2 && day !== 12
-            ? "nd"
-            : day % 10 === 3 && day !== 13
-              ? "rd"
-              : "th";
-      return {
-        value: day.toString(),
-        label: day + suffix,
-      };
-    });
-  }
-}
-
-// Function to get days number options based on selected time unit
-export function getDaysNumberOptions(timeUnit) {
-  if (timeUnit === "months") {
-    return Array.from({ length: 12 }, (_, i) => ({
-      value: (i + 1).toString(),
-      label: (i + 1).toString(),
-    }));
-  } else if (timeUnit === "weeks") {
-    return Array.from({ length: 10 }, (_, i) => ({
-      value: (i + 1).toString(),
-      label: (i + 1).toString(),
-    }));
-  } else {
-    return Array.from({ length: 31 }, (_, i) => ({
-      value: (i + 1).toString(),
-      label: (i + 1).toString(),
-    }));
-  }
-}
-
-export const ROLE_PERMISSION_LIST = [
-  {
-    icon: EventIcon,
-    title: "Event creation",
-    description:
-      "Allow users to enter event info, create tickets & customize order forms",
-    checkbox: [
-      "Create Events",
-      "Edit Event Details",
-      "Manage event status",
-      "Manage tickets",
-      "Manage Collections",
-    ],
-  },
-  {
-    icon: BookingIcon,
-    title: "Booking",
-    description:
-      "Allow users to manage performers, their invitations and statuses",
-    checkbox: [
-      "Access the roster page and view performer profiles",
-      "Edit performer profiles",
-      "Send booking invitations",
-      "Manually confirm/decline performers to spots",
-      "Send avails requests",
-    ],
-  },
-  {
-    icon: VenueIcon,
-    title: "Venue creation",
-    description: "Allow users to create new venues",
-    checkbox: ["Add/edit/delete venues"],
-  },
-  {
-    icon: MarketingIcon,
-    title: "Marketing",
-    description:
-      "Sell more tickets by creating campaigns, tracking engagements, etc.",
-    checkbox: [
-      "Access social media posts",
-      "Manage tracking links",
-      "Manage promo codes",
-    ],
-  },
-  {
-    icon: OrdersIcon,
-    title: "Orders & attendees",
-    description:
-      "Allow users to view, update & refund orders, manage attendee guest or waitlists & release tickets",
-    checkbox: [
-      "Add attendees",
-      "Manage orders, refunds, transfers and attendees",
-      "View list of attendees",
-      "Check in attendees",
-      "Resend confirmation emails",
-      "Override ticket restrictions",
-      "Sell tickets at the door",
-      "Revoke and reissue barcodes",
-    ],
-  },
-  {
-    icon: OrganisationIcon,
-    title: "Organization",
-    description:
-      "Keep your users organized with assigned permissions per user, enable access to APIs & extensions",
-    checkbox: [
-      "Manage organization members & permissions",
-      "Edit organization infomation",
-    ],
-  },
-  {
-    icon: EmailIcon,
-    title: "Contacts",
-    description:
-      "Keep our users in the loop, select which emails you would like them to receive",
-    checkbox: ["Email attendees", "Email/SMS performers"],
-  },
-  {
-    icon: ReportingIcon,
-    title: "Reporting",
-    description:
-      "Allow users to access, filter & export data across your organization",
-    checkbox: ["Access reports pages"],
-  },
-  {
-    icon: PayoutIcon,
-    title: "Payouts & billing",
-    description:
-      "Users can configure payout methods, manage event payment options & track financials with reporting",
-    checkbox: ["Manage financial accounts (Stripe)"],
-  },
-];
-
-/**
- * Parse a location string into street address and city/state/zip components
- * @param {string} locationString - Full location string (e.g., "3400 Warner Blvd, Burbank, CA 91505")
- * @returns {{street: string, cityStateZip: string}} Parsed location object
- */
-export function parseLocation(locationString) {
-  if (!locationString) return { street: '', cityStateZip: '' };
-
-  // Split by comma to separate components
-  const parts = locationString.split(',').map(part => part.trim());
-
-  if (parts.length >= 3) {
-    // Format: "3400 Warner Blvd, Burbank, CA 91505"
-    const street = parts[0];
-    const cityStateZip = parts.slice(1).join(', ');
-    return { street, cityStateZip };
-  } else if (parts.length === 2) {
-    // Format: "Street, City State Zip"
-    return { street: parts[0], cityStateZip: parts[1] };
-  } else {
-    // Single part or unexpected format
-    return { street: locationString, cityStateZip: '' };
-  }
-}
-
-/**
- * Set authentication cookies with proper domain and security settings
- * @param {string} token - Authentication token
- * @param {Object} userDetails - User details object
- * @param {boolean} rememberMe - Whether to persist cookies (default true)
- * @param {string} refreshToken - Refresh token for token renewal
- */
-export function setAuthCookies(token, userDetails, rememberMe = true, refreshToken = null) {
-  const isProd = window.location.hostname.includes("get-micdrop.com");
-  const domainAttr = isProd ? "domain=.get-micdrop.com;" : "";
-  const secureAttr = window.location.protocol === "https:" ? "secure;" : "";
-  const maxAge = rememberMe ? "max-age=2592000;" : ""; // 30 days or session
-
-  document.cookie = `performer_token=${token}; path=/; ${maxAge} ${domainAttr} ${secureAttr} samesite=lax`;
-  document.cookie = `userDetails=${encodeURIComponent(
-    JSON.stringify(userDetails),
-  )}; path=/; ${maxAge} ${domainAttr} ${secureAttr} samesite=lax`;
-
-  // Set refresh token if provided
-  if (refreshToken) {
-    document.cookie = `performer_refresh_token=${refreshToken}; path=/; ${maxAge} ${domainAttr} ${secureAttr} samesite=lax`;
-  }
-}
-
-/**
- * Clear authentication cookies
- */
-export function clearAuthCookies() {
-  const isProd = window.location.hostname.includes("get-micdrop.com");
-  const domainAttr = isProd ? "domain=.get-micdrop.com;" : "";
-
-  document.cookie = `userDetails=; path=/; max-age=0; ${domainAttr}`;
-  document.cookie = `performer_token=; path=/; max-age=0; ${domainAttr}`;
-  document.cookie = `performer_refresh_token=; path=/; max-age=0; ${domainAttr}`;
-}
-
-// Export microphone placeholder for universal event image fallback
-export { microphonePlaceholder };
-
-// ============================================
-// COOKIE UTILITIES
-// ============================================
-
-/**
- * Parse all cookies into an object
- * @returns {Record<string, string>} Cookie key-value pairs
- */
-export function parseCookies() {
-  if (typeof document === "undefined") return {};
-  return document.cookie.split("; ").reduce((acc, cookie) => {
-    if (!cookie) return acc;
-    const [name, ...valueParts] = cookie.split("=");
-    acc[name] = decodeURIComponent(valueParts.join("="));
-    return acc;
-  }, {});
-}
-
-/**
- * Get a specific cookie value
- * @param {string} name - Cookie name
- * @returns {string|null} Cookie value or null
- */
-export function getCookie(name) {
-  const cookies = parseCookies();
-  return cookies[name] || null;
-}
-
-/**
- * Set a cookie with options
- * @param {string} name - Cookie name
- * @param {string} value - Cookie value
- * @param {Object} options - Cookie options
- */
-export function setCookie(name, value, options = {}) {
-  const isProd = typeof window !== "undefined" && window.location.hostname.includes("get-micdrop.com");
-  const domainAttr = isProd ? "domain=.get-micdrop.com;" : "";
-  const secureAttr = typeof window !== "undefined" && window.location.protocol === "https:" ? "secure;" : "";
-  const maxAge = options.maxAge ? `max-age=${options.maxAge};` : "";
-  const path = options.path || "/";
-
-  document.cookie = `${name}=${encodeURIComponent(value)}; path=${path}; ${maxAge} ${domainAttr} ${secureAttr} samesite=lax`;
-}
-
-/**
- * Get the performer token from cookies
- * @returns {string|null} Token or null
- */
-export function getPerformerToken() {
-  return getCookie("performer_token");
-}
-
-/**
- * Get user details from cookies
- * @returns {Object|null} User details or null
- */
-export function getUserDetails() {
-  const details = getCookie("userDetails");
-  if (!details) return null;
-  try {
-    return JSON.parse(details);
-  } catch {
-    return null;
-  }
-}
-
-/**
- * Get suppressed alerts from cookies
- * @returns {string[]} Array of suppressed alert IDs
- */
-export function getSuppressedAlerts() {
-  const alerts = getCookie("suppressedAlerts");
-  if (!alerts) return [];
-  try {
-    return JSON.parse(alerts);
-  } catch {
-    return [];
-  }
-}
-
-/**
- * Save suppressed alerts to cookies
- * @param {string[]} alertIds - Array of alert IDs to suppress
- */
-export function saveSuppressedAlerts(alertIds) {
-  setCookie("suppressedAlerts", JSON.stringify(alertIds), { maxAge: 31536000 }); // 1 year
-}
-
-// ============================================
-// DATA FETCHING UTILITIES
-// ============================================
-
-/**
- * Fetch data from an API endpoint with error handling
- * @param {string} endpoint - API endpoint
- * @param {Object} options - Fetch options
- * @returns {Promise<{data: any, error: string|null}>}
- */
-export async function fetchData(endpoint, options = {}) {
-  try {
-    const res = await fetch(endpoint, {
-      headers: { "Content-Type": "application/json", ...options.headers },
-      ...options,
-    });
-
-    if (!res.ok) {
-      const errorText = await res.text().catch(() => "Unknown error");
-      throw new Error(errorText || `Request failed with status ${res.status}`);
-    }
-
-    const data = await res.json();
-    return { data, error: null };
-  } catch (err) {
-    return { data: null, error: err.message };
-  }
-}
-
-/**
- * Post data to an API endpoint
- * @param {string} endpoint - API endpoint
- * @param {Object} data - Data to post
- * @returns {Promise<{data: any, error: string|null, ok: boolean}>}
- */
-export async function postData(endpoint, data) {
-  try {
-    const res = await fetch(endpoint, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(data),
-    });
-
-    const responseData = await res.json().catch(() => ({}));
-
-    return {
-      data: responseData,
-      error: res.ok ? null : (responseData.message || "Request failed"),
-      ok: res.ok
-    };
-  } catch (err) {
-    return { data: null, error: err.message, ok: false };
-  }
-}
-
-// ============================================
-// DATE/TIME FORMATTING UTILITIES
-// (Merged from utils/utils/utils.js)
-// ============================================
-
-export function convertToDate(value) {
-  return value ? new Date(value).toDateString() : null;
-}
-
-export function convertToCustomDateTimeFormat(isoDateString) {
-  const date = new Date(isoDateString);
-  return new Date(
-    Date.UTC(
-      date.getUTCFullYear(),
-      date.getUTCMonth(),
-      date.getUTCDate(),
-      date.getUTCHours(),
-      date.getUTCMinutes()
-    )
-  );
-}
-
-export function formatHour(dateString) {
-  const date = new Date(dateString);
-  const hour = date.getUTCHours();
-  const minutes = date.getUTCMinutes();
-  const suffix = hour >= 12 ? "PM" : "AM";
-  const displayHour = hour % 12 || 12;
-
-  // Ensure minutes are always two digits
-  const displayMinutes = minutes < 10 ? "0" + minutes : minutes;
-
-  return `${displayHour}:${displayMinutes} ${suffix}`;
-}
-
-export function formattedDate(date) {
-  const options = {
-    weekday: "short", // 'Thu'
-    month: "short", // 'Oct'
-    day: "2-digit", // '24'
-  };
-
-  return new Date(date).toLocaleDateString("en-US", options);
-}
-
-// Helper function to get the ordinal suffix (st, nd, rd, th)
-function getOrdinalSuffix(day) {
-  if (day >= 11 && day <= 13) return "th"; // Special case for 11th, 12th, and 13th
-  switch (day % 10) {
-    case 1:
-      return "st";
-    case 2:
-      return "nd";
-    case 3:
-      return "rd";
-    default:
-      return "th";
-  }
-}
-
-export function formattedFullDate(date) {
-  const options = {
-    weekday: "long", // 'Thursday'
-    month: "long", // 'October'
-    day: "numeric", // '24'
-    year: "numeric", // '2024'
-  };
-
-  const formattedDate = new Date(date).toLocaleDateString("en-US", options);
-
-  // Get the day of the month to append the ordinal suffix
-  const day = new Date(date).getDate();
-  const ordinalSuffix = getOrdinalSuffix(day);
-
-  // Replace the day number with the day + ordinal suffix
-  const fullDate = formattedDate.replace(/\d+/, day + ordinalSuffix);
-  return fullDate;
-}
-
-export const formatDateTime = (dateTimeString, timeZone = "UTC") => {
-  const options = {
-    weekday: "short", // Mon, Tue, etc.
-    year: "numeric", // 2024
-    month: "short", // Dec
-    day: "numeric", // 12
-    hour: "numeric", // 11
-    minute: "numeric", // 00
-    hour12: true, // 11:00 PM format
-    timeZone: timeZone, // Account for the timezone, defaults to 'UTC'
-  };
-
-  const date = new Date(dateTimeString);
-
-  return new Intl.DateTimeFormat("en-US", options).format(date);
-};
-
-export const formatTimeline = (startDateTime) => {
-  const formatHourInternal = (date) => {
-    let hours = date.getUTCHours();
-    const minutes = date.getUTCMinutes();
-    const suffix = hours >= 12 ? "PM" : "AM";
-    hours = hours % 12 || 12;
-
-    return `${hours}:${minutes < 10 ? "0" + minutes : minutes} ${suffix}`;
-  };
-
-  const start = formatHourInternal(new Date(startDateTime));
-  return `${start}`;
-};
-
-export function formatTimeRange(startDate, endDate) {
-  const start = new Date(startDate);
-  const end = new Date(endDate);
-
-  function formatTime(date) {
-    let hours = date.getUTCHours();
-    const minutes = date.getUTCMinutes();
-    const ampm = hours >= 12 ? "PM" : "AM";
-    hours = hours % 12;
-    hours = hours ? hours : 12;
-    const minutesStr = minutes < 10 ? "0" + minutes : minutes;
-    return hours + ":" + minutesStr + " " + ampm;
-  }
-  const startTime = formatTime(start);
-  const endTime = formatTime(end);
-  return `${startTime} - ${endTime}`;
-}
-
-export function getDateRange(startDate, endDate) {
-  const start = new Date(startDate);
-  const end = new Date(endDate);
-
-  const dateArray = [];
-  const currentDate = new Date(start);
-
-  while (currentDate <= end) {
-    dateArray.push(
-      `${currentDate.getUTCFullYear()}-${currentDate.getUTCMonth() + 1
-      }-${currentDate.getUTCDate()}`
-    );
-    currentDate.setUTCDate(currentDate.getUTCDate() + 1); // Move to the next day
-  }
-
-  return dateArray;
-}
-
-export const getDay = (dateString) => {
-  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
-  const date = new Date(dateString);
-  return days[date.getUTCDay()];
-};
-
-export const getMonth = (dateString) => {
-  const months = [
-    "Jan",
-    "Feb",
-    "Mar",
-    "Apr",
-    "May",
-    "Jun",
-    "Jul",
-    "Aug",
-    "Sep",
-    "Oct",
-    "Nov",
-    "Dec",
-  ];
-  const date = new Date(dateString);
-  return months[date.getUTCMonth()];
-};
-
-export const getDateOfMonth = (dateString) => {
-  const date = new Date(dateString);
-  return date.getUTCDate();
-};
-
-// ============================================
-// EVENT FORMATTING UTILITIES
-// ============================================
-
-// Map roleOnStage numeric value to role name string
-// These correspond to the lineup position roles in the operator panel
-const ROLE_ON_STAGE_MAP = {
-  0: "Performer",
-  1: "Host",
-  2: "Headliner",
-  3: "Feature",
-  4: "Special Guest",
-  5: "Opener",
-  6: "Guest",
-  7: "Teacher",
-  8: "Assistant",
-};
-
-export const getRoleFromRoleOnStage = (roleOnStage) => {
-  return ROLE_ON_STAGE_MAP[roleOnStage] || "Performer";
-};
-
-// Format Event as Show for Listing data
-export const formatEvent = (event) => {
-  // Get venue stage name (the physical stage at the venue, e.g., "Main Room", "Showroom")
-  // Not to be confused with performer's stage name (their performance alias)
-  const venueStageName = event.Event.stage?.name || event.Event.stage?.googleName || event.Event.googleName || "";
-
-  // Handle potentially undefined venue address
-  const venueAddress = event.Event.venue.address || "";
-
-  // Map roleOnStage number to role name string
-  const role = getRoleFromRoleOnStage(event.roleOnStage);
-
-  // Get custom booking notification message from venue (set in venue edit page)
-  const bookingMessage = event.Event.venue.booking_notification || "No additional details available.";
-
-  return {
-    eventId: event.Event.ID,
-    venueId: event.Event.venue.ID,
-    title: event.Event.title,
-    role: role,
-    startDateTime: event.Event.startDateTime,
-    acceptedState: event.acceptedState,
-    doorsOpenTime: event.Event.doorsOpenTime,
-    spotDuration: `${event.setLength} min spot`,
-    venueName: event.Event.venue.name,
-    location: venueAddress,
-    id: event.invitationId,
-    image: event.Event.image,
-    details: {
-      venue: event.Event.venue.name,
-      stageName: venueStageName,
-      address: venueAddress,
-      setLength: `${event.setLength} min`,
-      eventDetails: bookingMessage,
-    },
-    lastUpdated: event.UpdatedAt,
-  };
-};
-
-export const formatRosterEventPerformerInvite = (event) => {
-  return {
-    venueId: event.venueId,
-    role: event.role || "Performer",
-    acceptedState: event.acceptedState,
-    name: event.Venue.name,
-    shortVenue: `${event.Venue.firstName} ${event.Venue.lastName} - ${event.Venue.role}`,
-    location: `${event.Venue.address}`,
-    id: event.invitationId,
-    lastUpdated: event.UpdatedAt,
-    image: event.Venue.image,
-    hasAvailability: true,
-    invitationAccepted: event.acceptedState === 2,
-  };
-};
-
-export const formatVenue = (event) => {
-  return {
-    venueId: event.Event.venueId,
-    name: event.Event.venue.name,
-    image: event.Event.venue.squareImageUrl || event.Event.venue.image,
-    location: `${event.Event.venue.address}`,
-    start: event.Event.startDateTime,
-    end: event.Event.endDateTime,
-    doorOpen: event.Event.doorsOpenTime,
-    email: event.Event.venue.email,
-    phone: event.Event.venue.phone,
-    description: event.Event.venue.description,
-    instagram: event.Event.venue.instagram,
-    facebook: event.Event.venue.facebook,
-    twitter: event.Event.venue.twitter,
-    lastUpdated: event.UpdatedAt,
-    timeRange: formatTimeRange(event.Event.startDateTime, event.Event.endDateTime),
-    dateRange: getDateRange(event.Event.startDateTime, event.Event.endDateTime),
-  };
-};
-
-// ============================================
-// STRING UTILITIES
-// ============================================
-
-export function capitalize(word) {
-  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
-}
-
-export function timeAgo(date) {
-  const now = new Date();
-  const seconds = Math.floor((now - new Date(date)) / 1000);
-  const minutes = Math.floor(seconds / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-  const months = Math.floor(days / 30);
-  const years = Math.floor(months / 12);
-
-  if (seconds < 60) {
-    return `${seconds} second${seconds !== 1 ? "s" : ""} ago`;
-  } else if (minutes < 60) {
-    return `${minutes} minute${minutes !== 1 ? "s" : ""} ago`;
-  } else if (hours < 24) {
-    return `${hours} hour${hours !== 1 ? "s" : ""} ago`;
-  } else if (days < 30) {
-    return `${days} day${days !== 1 ? "s" : ""} ago`;
-  } else if (months < 12) {
-    return `${months} month${months !== 1 ? "s" : ""} ago`;
-  } else {
-    return `${years} year${years !== 1 ? "s" : ""} ago`;
-  }
-}
+import { twMerge } from "tailwind-merge";
+import clsx from "clsx";
+import EventIcon from "../assets/svg/role/event.svg";
+import BookingIcon from "../assets/svg/role/booking.svg";
+import EmailIcon from "../assets/svg/role/emails.svg";
+import VenueIcon from "../assets/svg/role/venue.svg";
+import PayoutIcon from "../assets/svg/role/payout.svg";
+import MarketingIcon from "../assets/svg/role/marketing.svg";
+import OrdersIcon from "../assets/svg/role/orders.svg";
+import OrganisationIcon from "../assets/svg/role/organisation.svg";
+import ReportingIcon from "../assets/svg/role/reporting.svg";
+import microphonePlaceholder from "../assets/images/microphone.png";
+
+export function classNames(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+
+export function truncateTitle(title, maxLength) {
+  if (title.length > maxLength) {
+    return title.slice(0, maxLength) + "...";
+  }
+  return title;
+}
+
+export function convertToCustomDateFormat(isoString) {
+  const date = new Date(isoString);
+
+  const year = date.getUTCFullYear();
+  const month = date.getUTCMonth();
+  const day = date.getUTCDate();
+
+  const customDate = new Date(year, month, day);
+
+  return customDate;
+}
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+export function getDays(params) {
+  if (params === "weeks") {
+    return [
+      { value: "monday", label: "Monday" },
+      { value: "tuesday", label: "Tuesday" },
+      { value: "wednesday", label: "Wednesday" },
+      { value: "thursday", label: "Thursday" },
+      { value: "friday", label: "Friday" },
+    ];
+  } else {
+    return Array.from({ length: 31 }, (_, i) => {
+      const day = i + 1;
+      const suffix =
+        day % 10 === 1 && day !== 11
+          ? "st"
+          : day % 10 === 2 && day !== 12
+            ? "nd"
+            : day % 10 === 3 && day !== 13
+              ? "rd"
+              : "th";
+      return {
+        value: day.toString(),
+        label: day + suffix,
+      };
+    });
+  }
+}
+
+// Function to get days number options based on selected time unit
+export function getDaysNumberOptions(timeUnit) {
+  if (timeUnit === "months") {
+    return Array.from({ length: 12 }, (_, i) => ({
+      value: (i + 1).toString(),
+      label: (i + 1).toString(),
+    }));
+  } else if (timeUnit === "weeks") {
+    return Array.from({ length: 10 }, (_, i) => ({
+      value: (i + 1).toString(),
+      label: (i + 1).toString(),
+    }));
+  } else {
+    return Array.from({ length: 31 }, (_, i) => ({
+      value: (i + 1).toString(),
+      label: (i + 1).toString(),
+    }));
+  }
+}
+
+export const ROLE_PERMISSION_LIST = [
+  {
+    icon: EventIcon,
+    title: "Event creation",
+    description:
+      "Allow users to enter event info, create tickets & customize order forms",
+    checkbox: [
+      "Create Events",
+      "Edit Event Details",
+      "Manage event status",
+      "Manage tickets",
+      "Manage Collections",
+    ],
+  },
+  {
+    icon: BookingIcon,
+    title: "Booking",
+    description:
+      "Allow users to manage performers, their invitations and statuses",
+    checkbox: [
+      "Access the roster page and view performer profiles",
+      "Edit performer profiles",
+      "Send booking invitations",
+      "Manually confirm/decline performers to spots",
+      "Send avails requests",
+    ],
+  },
+  {
+    icon: VenueIcon,
+    title: "Venue creation",
+    description: "Allow users to create new venues",
+    checkbox: ["Add/edit/delete venues"],
+  },
+  {
+    icon: MarketingIcon,
+    title: "Marketing",
+    description:
+      "Sell more tickets by creating campaigns, tracking engagements, etc.",
+    checkbox: [
+      "Access social media posts",
+      "Manage tracking links",
+      "Manage promo codes",
+    ],
+  },
+  {
+    icon: OrdersIcon,
+    title: "Orders & attendees",
+    description:
+      "Allow users to view, update & refund orders, manage attendee guest or waitlists & release tickets",
+    checkbox: [
+      "Add attendees",
+      "Manage orders, refunds, transfers and attendees",
+      "View list of attendees",
+      "Check in attendees",
+      "Resend confirmation emails",
+      "Override ticket restrictions",
+      "Sell tickets at the door",
+      "Revoke and reissue barcodes",
+    ],
+  },
+  {
+    icon: OrganisationIcon,
+    title: "Organization",
+    description:
+      "Keep your users organized with assigned permissions per user, enable access to APIs & extensions",
+    checkbox: [
+      "Manage organization members & permissions",
+      "Edit organization infomation",
+    ],
+  },
+  {
+    icon: EmailIcon,
+    title: "Contacts",
+    description:
+      "Keep our users in the loop, select which emails you would like them to receive",
+    checkbox: ["Email attendees", "Email/SMS performers"],
+  },
+  {
+    icon: ReportingIcon,
+    title: "Reporting",
+    description:
+      "Allow users to access, filter & export data across your organization",
+    checkbox: ["Access reports pages"],
+  },
+  {
+    icon: PayoutIcon,
+    title: "Payouts & billing",
+    description:
+      "Users can configure payout methods, manage event payment options & track financials with reporting",
+    checkbox: ["Manage financial accounts (Stripe)"],
+  },
+];
+
+/**
+ * Parse a location string into street address and city/state/zip components
+ * @param {string} locationString - Full location string (e.g., "3400 Warner Blvd, Burbank, CA 91505")
+ * @returns {{street: string, cityStateZip: string}} Parsed location object
+ */
+export function parseLocation(locationString) {
+  if (!locationString) return { street: '', cityStateZip: '' };
+
+  // Split by comma to separate components
+  const parts = locationString.split(',').map(part => part.trim());
+
+  if (parts.length >= 3) {
+    // Format: "3400 Warner Blvd, Burbank, CA 91505"
+    const street = parts[0];
+    const cityStateZip = parts.slice(1).join(', ');
+    return { street, cityStateZip };
+  } else if (parts.length === 2) {
+    // Format: "Street, City State Zip"
+    return { street: parts[0], cityStateZip: parts[1] };
+  } else {
+    // Single part or unexpected format
+    return { street: locationString, cityStateZip: '' };
+  }
+}
+
+/**
+ * Set authentication cookies with proper domain and security settings
+ * @param {string} token - Authentication token
+ * @param {Object} userDetails - User details object
+ * @param {boolean} rememberMe - Whether to persist cookies (default true)
+ * @param {string} refreshToken - Refresh token for token renewal
+ */
+export function setAuthCookies(token, userDetails, rememberMe = true, refreshToken = null) {
+  const isProd = window.location.hostname.includes("get-micdrop.com");
+  const domainAttr = isProd ? "domain=.get-micdrop.com;" : "";
+  const secureAttr = window.location.protocol === "https:" ? "secure;" : "";
+  const maxAge = rememberMe ? "max-age=2592000;" : ""; // 30 days or session
+
+  document.cookie = `performer_token=${token}; path=/; ${maxAge} ${domainAttr} ${secureAttr} samesite=lax`;
+  document.cookie = `userDetails=${encodeURIComponent(
+    JSON.stringify(userDetails),
+  )}; path=/; ${maxAge} ${domainAttr} ${secureAttr} samesite=lax`;
+
+  // Set refresh token if provided
+  if (refreshToken) {
+    document.cookie = `performer_refresh_token=${refreshToken}; path=/; ${maxAge} ${domainAttr} ${secureAttr} samesite=lax`;
+  }
+}
+
+/**
+ * Clear authentication cookies
+ */
+export function clearAuthCookies() {
+  const isProd = window.location.hostname.includes("get-micdrop.com");
+  const domainAttr = isProd ? "domain=.get-micdrop.com;" : "";
+
+  document.cookie = `userDetails=; path=/; max-age=0; ${domainAttr}`;
+  document.cookie = `performer_token=; path=/; max-age=0; ${domainAttr}`;
+  document.cookie = `performer_refresh_token=; path=/; max-age=0; ${domainAttr}`;
+}
+
+// Export microphone placeholder for universal event image fallback
+export { microphonePlaceholder };
+
+// ============================================
+// COOKIE UTILITIES
+// ============================================
+
+/**
+ * Parse all cookies into an object
+ * @returns {Record<string, string>} Cookie key-value pairs
+ */
+export function parseCookies() {
+  if (typeof document === "undefined") return {};
+  return document.cookie.split("; ").reduce((acc, cookie) => {
+    if (!cookie) return acc;
+    const [name, ...valueParts] = cookie.split("=");
+    acc[name] = decodeURIComponent(valueParts.join("="));
+    return acc;
+  }, {});
+}
+
+/**
+ * Get a specific cookie value
+ * @param {string} name - Cookie name
+ * @returns {string|null} Cookie value or null
+ */
+export function getCookie(name) {
+  const cookies = parseCookies();
+  return cookies[name] || null;
+}
+
+/**
+ * Set a cookie with options
+ * @param {string} name - Cookie name
+ * @param {string} value - Cookie value
+ * @param {Object} options - Cookie options
+ */
+export function setCookie(name, value, options = {}) {
+  const isProd = typeof window !== "undefined" && window.location.hostname.includes("get-micdrop.com");
+  const domainAttr = isProd ? "domain=.get-micdrop.com;" : "";
+  const secureAttr = typeof window !== "undefined" && window.location.protocol === "https:" ? "secure;" : "";
+  const maxAge = options.maxAge ? `max-age=${options.maxAge};` : "";
+  const path = options.path || "/";
+
+  document.cookie = `${name}=${encodeURIComponent(value)}; path=${path}; ${maxAge} ${domainAttr} ${secureAttr} samesite=lax`;
+}
+
+/**
+ * Get the performer token from cookies
+ * @returns {string|null} Token or null
+ */
+export function getPerformerToken() {
+  return getCookie("performer_token");
+}
+
+/**
+ * Get user details from cookies
+ * @returns {Object|null} User details or null
+ */
+export function getUserDetails() {
+  const details = getCookie("userDetails");
+  if (!details) return null;
+  try {
+    return JSON.parse(details);
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Get suppressed alerts from cookies
+ * @returns {string[]} Array of suppressed alert IDs
+ */
+export function getSuppressedAlerts() {
+  const alerts = getCookie("suppressedAlerts");
+  if (!alerts) return [];
+  try {
+    return JSON.parse(alerts);
+  } catch {
+    return [];
+  }
+}
+
+/**
+ * Save suppressed alerts to cookies
+ * @param {string[]} alertIds - Array of alert IDs to suppress
+ */
+export function saveSuppressedAlerts(alertIds) {
+  setCookie("suppressedAlerts", JSON.stringify(alertIds), { maxAge: 31536000 }); // 1 year
+}
+
+// ============================================
+// DATA FETCHING UTILITIES
+// ============================================
+
+/**
+ * Fetch data from an API endpoint with error handling
+ * @param {string} endpoint - API endpoint
+ * @param {Object} options - Fetch options
+ * @returns {Promise<{data: any, error: string|null}>}
+ */
+export async function fetchData(endpoint, options = {}) {
+  try {
+    const res = await fetch(endpoint, {
+      headers: { "Content-Type": "application/json", ...options.headers },
+      ...options,
+    });
+
+    if (!res.ok) {
+      const errorText = await res.text().catch(() => "Unknown error");
+      throw new Error(errorText || `Request failed with status ${res.status}`);
+    }
+
+    const data = await res.json();
+    return { data, error: null };
+  } catch (err) {
+    return { data: null, error: err.message };
+  }
+}
+
+/**
+ * Post data to an API endpoint
+ * @param {string} endpoint - API endpoint
+ * @param {Object} data - Data to post
+ * @returns {Promise<{data: any, error: string|null, ok: boolean}>}
+ */
+export async function postData(endpoint, data) {
+  try {
+    const res = await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(data),
+    });
+
+    const responseData = await res.json().catch(() => ({}));
+
+    return {
+      data: responseData,
+      error: res.ok ? null : (responseData.message || "Request failed"),
+      ok: res.ok
+    };
+  } catch (err) {
+    return { data: null, error: err.message, ok: false };
+  }
+}
+
+// ============================================
+// DATE/TIME FORMATTING UTILITIES
+// (Merged from utils/utils/utils.js)
+// ============================================
+
+export function convertToDate(value) {
+  return value ? new Date(value).toDateString() : null;
+}
+
+export function convertToCustomDateTimeFormat(isoDateString) {
+  const date = new Date(isoDateString);
+  return new Date(
+    Date.UTC(
+      date.getUTCFullYear(),
+      date.getUTCMonth(),
+      date.getUTCDate(),
+      date.getUTCHours(),
+      date.getUTCMinutes()
+    )
+  );
+}
+
+export function formatHour(dateString) {
+  const date = new Date(dateString);
+  const hour = date.getUTCHours();
+  const minutes = date.getUTCMinutes();
+  const suffix = hour >= 12 ? "PM" : "AM";
+  const displayHour = hour % 12 || 12;
+
+  // Ensure minutes are always two digits
+  const displayMinutes = minutes < 10 ? "0" + minutes : minutes;
+
+  return `${displayHour}:${displayMinutes} ${suffix}`;
+}
+
+export function formattedDate(date) {
+  const options = {
+    weekday: "short", // 'Thu'
+    month: "short", // 'Oct'
+    day: "2-digit", // '24'
+  };
+
+  return new Date(date).toLocaleDateString("en-US", options);
+}
+
+// Helper function to get the ordinal suffix (st, nd, rd, th)
+function getOrdinalSuffix(day) {
+  if (day >= 11 && day <= 13) return "th"; // Special case for 11th, 12th, and 13th
+  switch (day % 10) {
+    case 1:
+      return "st";
+    case 2:
+      return "nd";
+    case 3:
+      return "rd";
+    default:
+      return "th";
+  }
+}
+
+export function formattedFullDate(date) {
+  const options = {
+    weekday: "long", // 'Thursday'
+    month: "long", // 'October'
+    day: "numeric", // '24'
+    year: "numeric", // '2024'
+  };
+
+  const formattedDate = new Date(date).toLocaleDateString("en-US", options);
+
+  // Get the day of the month to append the ordinal suffix
+  const day = new Date(date).getDate();
+  const ordinalSuffix = getOrdinalSuffix(day);
+
+  // Replace the day number with the day + ordinal suffix
+  const fullDate = formattedDate.replace(/\d+/, day + ordinalSuffix);
+  return fullDate;
+}
+
+export const formatDateTime = (dateTimeString, timeZone = "UTC") => {
+  const options = {
+    weekday: "short", // Mon, Tue, etc.
+    year: "numeric", // 2024
+    month: "short", // Dec
+    day: "numeric", // 12
+    hour: "numeric", // 11
+    minute: "numeric", // 00
+    hour12: true, // 11:00 PM format
+    timeZone: timeZone, // Account for the timezone, defaults to 'UTC'
+  };
+
+  const date = new Date(dateTimeString);
+
+  return new Intl.DateTimeFormat("en-US", options).format(date);
+};
+
+export const formatTimeline = (startDateTime) => {
+  const formatHourInternal = (date) => {
+    let hours = date.getUTCHours();
+    const minutes = date.getUTCMinutes();
+    const suffix = hours >= 12 ? "PM" : "AM";
+    hours = hours % 12 || 12;
+
+    return `${hours}:${minutes < 10 ? "0" + minutes : minutes} ${suffix}`;
+  };
+
+  const start = formatHourInternal(new Date(startDateTime));
+  return `${start}`;
+};
+
+export function formatTimeRange(startDate, endDate) {
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  function formatTime(date) {
+    let hours = date.getUTCHours();
+    const minutes = date.getUTCMinutes();
+    const ampm = hours >= 12 ? "PM" : "AM";
+    hours = hours % 12;
+    hours = hours ? hours : 12;
+    const minutesStr = minutes < 10 ? "0" + minutes : minutes;
+    return hours + ":" + minutesStr + " " + ampm;
+  }
+  const startTime = formatTime(start);
+  const endTime = formatTime(end);
+  return `${startTime} - ${endTime}`;
+}
+
+export function getDateRange(startDate, endDate) {
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+
+  const dateArray = [];
+  const currentDate = new Date(start);
+
+  while (currentDate <= end) {
+    dateArray.push(
+      `${currentDate.getUTCFullYear()}-${currentDate.getUTCMonth() + 1
+      }-${currentDate.getUTCDate()}`
+    );
+    currentDate.setUTCDate(currentDate.getUTCDate() + 1); // Move to the next day
+  }
+
+  return dateArray;
+}
+
+export const getDay = (dateString) => {
+  const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+  const date = new Date(dateString);
+  return days[date.getUTCDay()];
+};
+
+export const getMonth = (dateString) => {
+  const months = [
+    "Jan",
+    "Feb",
+    "Mar",
+    "Apr",
+    "May",
+    "Jun",
+    "Jul",
+    "Aug",
+    "Sep",
+    "Oct",
+    "Nov",
+    "Dec",
+  ];
+  const date = new Date(dateString);
+  return months[date.getUTCMonth()];
+};
+
+export const getDateOfMonth = (dateString) => {
+  const date = new Date(dateString);
+  return date.getUTCDate();
+};
+
+// ============================================
+// EVENT FORMATTING UTILITIES
+// ============================================
+
+// Map roleOnStage numeric value to role name string
+// These correspond to the lineup position roles in the operator panel
+const ROLE_ON_STAGE_MAP = {
+  0: "Performer",
+  1: "Host",
+  2: "Headliner",
+  3: "Feature",
+  4: "Special Guest",
+  5: "Opener",
+  6: "Guest",
+  7: "Teacher",
+  8: "Assistant",
+};
+
+export const getRoleFromRoleOnStage = (roleOnStage) => {
+  return ROLE_ON_STAGE_MAP[roleOnStage] || "Performer";
+};
+
+// Format Event as Show for Listing data
+export const formatEvent = (event) => {
+  // Get venue stage name (the physical stage at the venue, e.g., "Main Room", "Showroom")
+  // Not to be confused with performer's stage name (their performance alias)
+  const venueStageName = event.Event.stage?.name || event.Event.stage?.googleName || event.Event.googleName || "";
+
+  // Handle potentially undefined venue address
+  const venueAddress = event.Event.venue.address || "";
+
+  // Map roleOnStage number to role name string
+  const role = getRoleFromRoleOnStage(event.roleOnStage);
+
+  // Get custom booking notification message from venue (set in venue edit page)
+  const bookingMessage = event.Event.venue.booking_notification || "No additional details available.";
+
+  return {
+    eventId: event.Event.ID,
+    venueId: event.Event.venue.ID,
+    title: event.Event.title,
+    role: role,
+    startDateTime: event.Event.startDateTime,
+    acceptedState: event.acceptedState,
+    doorsOpenTime: event.Event.doorsOpenTime,
+    spotDuration: `${event.setLength} min spot`,
+    venueName: event.Event.venue.name,
+    location: venueAddress,
+    id: event.invitationId,
+    image: event.Event.image,
+    details: {
+      venue: event.Event.venue.name,
+      stageName: venueStageName,
+      address: venueAddress,
+      setLength: `${event.setLength} min`,
+      eventDetails: bookingMessage,
+    },
+    lastUpdated: event.UpdatedAt,
+  };
+};
+
+export const formatRosterEventPerformerInvite = (event) => {
+  return {
+    venueId: event.venueId,
+    role: event.role || "Performer",
+    acceptedState: event.acceptedState,
+    name: event.Venue.name,
+    shortVenue: `${event.Venue.firstName} ${event.Venue.lastName} - ${event.Venue.role}`,
+    location: `${event.Venue.address}`,
+    id: event.invitationId,
+    lastUpdated: event.UpdatedAt,
+    image: event.Venue.image,
+    hasAvailability: true,
+    invitationAccepted: event.acceptedState === 2,
+  };
+};
+
+export const formatVenue = (event) => {
+  return {
+    venueId: event.Event.venueId,
+    name: event.Event.venue.name,
+    image: event.Event.venue.squareImageUrl || event.Event.venue.image,
+    location: `${event.Event.venue.address}`,
+    start: event.Event.startDateTime,
+    end: event.Event.endDateTime,
+    doorOpen: event.Event.doorsOpenTime,
+    email: event.Event.venue.email,
+    phone: event.Event.venue.phone,
+    description: event.Event.venue.description,
+    instagram: event.Event.venue.instagram,
+    facebook: event.Event.venue.facebook,
+    twitter: event.Event.venue.twitter,
+    lastUpdated: event.UpdatedAt,
+    timeRange: formatTimeRange(event.Event.startDateTime, event.Event.endDateTime),
+    dateRange: getDateRange(event.Event.startDateTime, event.Event.endDateTime),
+  };
+};
+
+// ============================================
+// STRING UTILITIES
+// ============================================
+
+export function capitalize(word) {
+  return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+}
+
+export function timeAgo(date) {
+  const now = new Date();
+  const seconds = Math.floor((now - new Date(date)) / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(months / 12);
+
+  if (seconds < 60) {
+    return `${seconds} second${seconds !== 1 ? "s" : ""} ago`;
+  } else if (minutes < 60) {
+    return `${minutes} minute${minutes !== 1 ? "s" : ""} ago`;
+  } else if (hours < 24) {
+    return `${hours} hour${hours !== 1 ? "s" : ""} ago`;
+  } else if (days < 30) {
+    return `${days} day${days !== 1 ? "s" : ""} ago`;
+  } else if (months < 12) {
+    return `${months} month${months !== 1 ? "s" : ""} ago`;
+  } else {
+    return `${years} year${years !== 1 ? "s" : ""} ago`;
+  }
+}