@oneuptime/common 9.3.20 → 9.4.0

package/Types/Phone.ts

@@ -13,7 +13,7 @@ export default class Phone extends DatabaseProperty {
   public static pickPhoneNumberToSendSMSOrCallFrom(data: {
     to: Phone | string;
     primaryPhoneNumberToPickFrom: Phone | string;
-    seocndaryPhoneNumbersToPickFrom: Phone[] | string[];
+    secondaryPhoneNumbersToPickFrom: Phone[] | string[];
   }): Phone {
     /*
      * convert all to string, so that we can compare them
@@ -28,8 +28,8 @@ export default class Phone extends DatabaseProperty {
         ? data.primaryPhoneNumberToPickFrom
         : data.primaryPhoneNumberToPickFrom.toString();
 
-    const seocndaryPhoneNumbersToPickFrom: string[] =
-      data.seocndaryPhoneNumbersToPickFrom.map((phone: Phone | string) => {
+    const secondaryPhoneNumbersToPickFrom: string[] =
+      data.secondaryPhoneNumbersToPickFrom.map((phone: Phone | string) => {
         return typeof phone === "string" ? phone : phone.toString();
       });
 
@@ -51,7 +51,7 @@ export default class Phone extends DatabaseProperty {
       return new Phone(primaryPhoneNumberToPickFrom);
     }
 
-    for (const secondaryPhoneNumber of seocndaryPhoneNumbersToPickFrom) {
+    for (const secondaryPhoneNumber of secondaryPhoneNumbersToPickFrom) {
       const secondaryPhoneNumberCountryCode: string = normalizePhoneNumber(
         secondaryPhoneNumber,
       ).substring(0, 2);
@@ -148,4 +148,53 @@ export default class Phone extends DatabaseProperty {
       example: { _type: ObjectType.Phone, value: "+1-555-123-4567" },
     });
   }
+
+  // Map of calling code prefixes to ISO country codes
+  private static readonly CALLING_CODE_TO_COUNTRY_MAP: Record<string, string> =
+    {
+      "+1": "US", // US and Canada
+      "+44": "GB", // United Kingdom
+      "+61": "AU", // Australia
+      "+49": "DE", // Germany
+      "+33": "FR", // France
+      "+91": "IN", // India
+      "+81": "JP", // Japan
+      "+86": "CN", // China
+      "+55": "BR", // Brazil
+      "+52": "MX", // Mexico
+    };
+
+  /**
+   * Extract ISO country code from a phone number
+   * @param phoneNumber - The phone number (e.g., "+15551234567")
+   * @returns ISO country code (e.g., "US") or "US" as default
+   */
+  public static getCountryCodeFromPhoneNumber(phoneNumber: string): string {
+    for (const [prefix, countryCode] of Object.entries(
+      Phone.CALLING_CODE_TO_COUNTRY_MAP,
+    )) {
+      if (phoneNumber.startsWith(prefix)) {
+        return countryCode;
+      }
+    }
+    return "US"; // Default to US if unknown
+  }
+
+  /**
+   * Extract area code from a phone number
+   * Currently only supports US/Canada (+1) numbers
+   * @param phoneNumber - The phone number (e.g., "+15551234567")
+   * @returns Area code (e.g., "555") or empty string for non-US/CA numbers
+   */
+  public static getAreaCodeFromPhoneNumber(phoneNumber: string): string {
+    // For US/Canada numbers (+1), extract the next 3 digits
+    if (phoneNumber.startsWith("+1")) {
+      const number: string = phoneNumber.substring(2);
+      if (number.length >= 3) {
+        return number.substring(0, 3);
+      }
+    }
+    // For other countries, area code extraction is more complex
+    return "";
+  }
 }

package/Types/SCIM/SCIMLogStatus.ts

@@ -0,0 +1,7 @@
+enum SCIMLogStatus {
+  Success = "Success",
+  Error = "Error",
+  Warning = "Warning",
+}
+
+export default SCIMLogStatus;

package/UI/Components/Date/StartAndEndDate.tsx

@@ -158,6 +158,9 @@ const StartAndEndDate: DateFilterFunction = (
                 value={startDateTime || ""}
                 placeholder={`Start Date`}
                 type={inputType}
+                showSecondsForDateTime={
+                  props.type === StartAndEndDateType.DateTime
+                }
               />
             </div>
           </div>
@@ -192,6 +195,9 @@ const StartAndEndDate: DateFilterFunction = (
                 value={endDateTime || ""}
                 placeholder={`End Date`}
                 type={inputType}
+                showSecondsForDateTime={
+                  props.type === StartAndEndDateType.DateTime
+                }
               />
             </div>
           </div>
@@ -207,7 +213,10 @@ const StartAndEndDate: DateFilterFunction = (
                 buttonSize={ButtonSize.Small}
                 onClick={() => {
                   // set it to past 1 hour
-                  const endDate: Date = OneUptimeDate.getCurrentDate();
+                  const endDate: Date =
+                    OneUptimeDate.resetSecondsAndMilliseconds(
+                      OneUptimeDate.getCurrentDate(),
+                    );
                   const startDate: Date = OneUptimeDate.addRemoveHours(
                     endDate,
                     -1,
@@ -229,7 +238,10 @@ const StartAndEndDate: DateFilterFunction = (
                 buttonSize={ButtonSize.Small}
                 onClick={() => {
                   // set it to past 3 hour
-                  const endDate: Date = OneUptimeDate.getCurrentDate();
+                  const endDate: Date =
+                    OneUptimeDate.resetSecondsAndMilliseconds(
+                      OneUptimeDate.getCurrentDate(),
+                    );
                   const startDate: Date = OneUptimeDate.addRemoveHours(
                     endDate,
                     -3,
@@ -251,7 +263,9 @@ const StartAndEndDate: DateFilterFunction = (
               buttonSize={ButtonSize.Small}
               onClick={() => {
                 // set it to past 1 day
-                const endDate: Date = OneUptimeDate.getCurrentDate();
+                const endDate: Date = OneUptimeDate.resetSecondsAndMilliseconds(
+                  OneUptimeDate.getCurrentDate(),
+                );
                 const startDate: Date = OneUptimeDate.addRemoveDays(
                   endDate,
                   -1,
@@ -269,7 +283,9 @@ const StartAndEndDate: DateFilterFunction = (
               buttonSize={ButtonSize.Small}
               onClick={() => {
                 // set it to past 1 week
-                const endDate: Date = OneUptimeDate.getCurrentDate();
+                const endDate: Date = OneUptimeDate.resetSecondsAndMilliseconds(
+                  OneUptimeDate.getCurrentDate(),
+                );
                 const startDate: Date = OneUptimeDate.addRemoveDays(
                   endDate,
                   -7,
@@ -286,8 +302,10 @@ const StartAndEndDate: DateFilterFunction = (
               }
               buttonSize={ButtonSize.Small}
               onClick={() => {
-                // set it to past 1 week
-                const endDate: Date = OneUptimeDate.getCurrentDate();
+                // set it to past 2 weeks
+                const endDate: Date = OneUptimeDate.resetSecondsAndMilliseconds(
+                  OneUptimeDate.getCurrentDate(),
+                );
                 const startDate: Date = OneUptimeDate.addRemoveDays(
                   endDate,
                   -14,
@@ -305,8 +323,10 @@ const StartAndEndDate: DateFilterFunction = (
               }
               buttonSize={ButtonSize.Small}
               onClick={() => {
-                // set it to past 1 week
-                const endDate: Date = OneUptimeDate.getCurrentDate();
+                // set it to past 3 weeks
+                const endDate: Date = OneUptimeDate.resetSecondsAndMilliseconds(
+                  OneUptimeDate.getCurrentDate(),
+                );
                 const startDate: Date = OneUptimeDate.addRemoveDays(
                   endDate,
                   -21,
@@ -325,7 +345,9 @@ const StartAndEndDate: DateFilterFunction = (
               buttonSize={ButtonSize.Small}
               onClick={() => {
                 // set it to past 1 month
-                const endDate: Date = OneUptimeDate.getCurrentDate();
+                const endDate: Date = OneUptimeDate.resetSecondsAndMilliseconds(
+                  OneUptimeDate.getCurrentDate(),
+                );
                 const startDate: Date = OneUptimeDate.addRemoveMonths(
                   endDate,
                   -1,
@@ -343,8 +365,10 @@ const StartAndEndDate: DateFilterFunction = (
               }
               buttonSize={ButtonSize.Small}
               onClick={() => {
-                // set it to past 1 month
-                const endDate: Date = OneUptimeDate.getCurrentDate();
+                // set it to past 3 months
+                const endDate: Date = OneUptimeDate.resetSecondsAndMilliseconds(
+                  OneUptimeDate.getCurrentDate(),
+                );
                 const startDate: Date = OneUptimeDate.addRemoveMonths(
                   endDate,
                   -3,

package/UI/Components/Diagram/ConceptCards.tsx

@@ -0,0 +1,74 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import Color from "../../../Types/Color";
+
+export interface ConceptCard {
+  title: string;
+  description: string;
+  icon: IconProp;
+  iconColor: Color;
+}
+
+export interface ComponentProps {
+  cards: ConceptCard[];
+  /** Number of columns in the grid (1-4). Default is 2. */
+  columns?: 1 | 2 | 3 | 4 | undefined;
+}
+
+const ConceptCards: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const columns: number = props.columns || 2;
+
+  const getGridClasses: () => string = (): string => {
+    switch (columns) {
+      case 1:
+        return "grid-cols-1";
+      case 2:
+        return "grid-cols-1 md:grid-cols-2";
+      case 3:
+        return "grid-cols-1 md:grid-cols-2 lg:grid-cols-3";
+      case 4:
+        return "grid-cols-1 md:grid-cols-2 lg:grid-cols-4";
+      default:
+        return "grid-cols-1 md:grid-cols-2";
+    }
+  };
+
+  return (
+    <div className={`grid ${getGridClasses()} gap-3`}>
+      {props.cards.map((card: ConceptCard, index: number) => {
+        return (
+          <div
+            key={index}
+            className="border border-gray-200 rounded-md p-3 bg-white hover:border-gray-300 transition-colors"
+          >
+            <div className="flex items-start space-x-3">
+              <div
+                className="flex-shrink-0 w-8 h-8 rounded flex items-center justify-center"
+                style={{ backgroundColor: `${card.iconColor.toString()}15` }}
+              >
+                <Icon
+                  icon={card.icon}
+                  className="h-4 w-4"
+                  style={{ color: card.iconColor.toString() }}
+                />
+              </div>
+              <div className="flex-1 min-w-0">
+                <h4 className="text-sm font-medium text-gray-900">
+                  {card.title}
+                </h4>
+                <p className="text-sm text-gray-500 mt-1 leading-relaxed">
+                  {card.description}
+                </p>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ConceptCards;

package/UI/Components/Diagram/HorizontalStepChain.tsx

@@ -0,0 +1,92 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import Color from "../../../Types/Color";
+
+export interface ChainStep {
+  stepNumber: number;
+  title: string;
+  description: string;
+  color: Color;
+  /** Optional label shown below the step number. Default is "Step" */
+  stepLabel?: string | undefined;
+}
+
+export interface ChainEndStep {
+  title: string;
+  description: string;
+  icon: IconProp;
+  color: Color;
+}
+
+export interface ComponentProps {
+  steps: ChainStep[];
+  endStep?: ChainEndStep | undefined;
+  /** Default label for steps. Default is "Step" */
+  defaultStepLabel?: string | undefined;
+}
+
+const HorizontalStepChain: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const defaultLabel: string = props.defaultStepLabel || "Step";
+
+  return (
+    <div className="flex items-center flex-wrap gap-3">
+      {props.steps.map((step: ChainStep, index: number) => {
+        return (
+          <React.Fragment key={index}>
+            {/* Step */}
+            <div className="flex items-center space-x-3">
+              <div
+                className="w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-medium"
+                style={{ backgroundColor: step.color.toString() }}
+              >
+                {step.stepNumber}
+              </div>
+              <div>
+                <p className="text-sm font-medium text-gray-900">
+                  {step.title}
+                </p>
+                <p className="text-xs text-gray-500">
+                  {step.stepLabel || defaultLabel} {step.stepNumber} ·{" "}
+                  {step.description}
+                </p>
+              </div>
+            </div>
+
+            {/* Arrow */}
+            <Icon
+              icon={IconProp.ChevronRight}
+              className="h-4 w-4 text-gray-300 hidden sm:block"
+            />
+          </React.Fragment>
+        );
+      })}
+
+      {/* End Step */}
+      {props.endStep && (
+        <div className="flex items-center space-x-3">
+          <div
+            className="w-10 h-10 rounded-full flex items-center justify-center"
+            style={{ backgroundColor: `${props.endStep.color.toString()}15` }}
+          >
+            <Icon
+              icon={props.endStep.icon}
+              className="h-4 w-4"
+              style={{ color: props.endStep.color.toString() }}
+            />
+          </div>
+          <div>
+            <p className="text-sm font-medium text-gray-900">
+              {props.endStep.title}
+            </p>
+            <p className="text-xs text-gray-500">{props.endStep.description}</p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default HorizontalStepChain;

package/UI/Components/Diagram/Index.ts

@@ -0,0 +1,11 @@
+export { default as VerticalFlowSteps } from "./VerticalFlowSteps";
+export type { FlowStep } from "./VerticalFlowSteps";
+
+export { default as HorizontalStepChain } from "./HorizontalStepChain";
+export type { ChainStep, ChainEndStep } from "./HorizontalStepChain";
+
+export { default as NumberedSteps } from "./NumberedSteps";
+export type { NumberedStep } from "./NumberedSteps";
+
+export { default as ConceptCards } from "./ConceptCards";
+export type { ConceptCard } from "./ConceptCards";

package/UI/Components/Diagram/NumberedSteps.tsx

@@ -0,0 +1,77 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import Color from "../../../Types/Color";
+
+export interface NumberedStep {
+  title: string;
+  description: string;
+  /** If provided, shows an icon instead of number */
+  icon?: IconProp | undefined;
+  /** Color for the step indicator */
+  color?: Color | undefined;
+}
+
+export interface ComponentProps {
+  steps: NumberedStep[];
+  /** Default color for steps */
+  defaultColor?: Color | undefined;
+}
+
+const NumberedSteps: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  const defaultColor: Color = props.defaultColor || new Color("#6b7280"); // gray-500
+
+  return (
+    <div className="relative">
+      {props.steps.map((step: NumberedStep, index: number) => {
+        const color: Color = step.color || defaultColor;
+        const isLast: boolean = index === props.steps.length - 1;
+
+        return (
+          <div key={index} className="relative flex items-start pb-5 last:pb-0">
+            {/* Vertical line connecting steps */}
+            {!isLast && (
+              <div
+                className="absolute left-4 top-10 w-px bg-gray-200"
+                style={{ height: "calc(100% - 1.5rem)" }}
+              />
+            )}
+
+            {/* Number/Icon indicator */}
+            <div
+              className="relative flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center border-2 bg-white"
+              style={{ borderColor: color.toString() }}
+            >
+              {step.icon ? (
+                <Icon
+                  icon={step.icon}
+                  className="h-4 w-4"
+                  style={{ color: color.toString() }}
+                />
+              ) : (
+                <span
+                  className="text-sm font-medium"
+                  style={{ color: color.toString() }}
+                >
+                  {index + 1}
+                </span>
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="ml-4 flex-1 pt-0.5">
+              <h4 className="text-sm font-medium text-gray-900">
+                {step.title}
+              </h4>
+              <p className="text-sm text-gray-500 mt-0.5">{step.description}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default NumberedSteps;

package/UI/Components/Diagram/VerticalFlowSteps.tsx

@@ -0,0 +1,59 @@
+import React, { FunctionComponent, ReactElement } from "react";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
+import Color from "../../../Types/Color";
+
+export interface FlowStep {
+  title: string;
+  description: string;
+  icon: IconProp;
+  iconColor: Color;
+}
+
+export interface ComponentProps {
+  steps: FlowStep[];
+}
+
+const VerticalFlowSteps: FunctionComponent<ComponentProps> = (
+  props: ComponentProps,
+): ReactElement => {
+  return (
+    <div className="relative">
+      {props.steps.map((step: FlowStep, index: number) => {
+        const isLast: boolean = index === props.steps.length - 1;
+
+        return (
+          <div key={index} className="relative flex items-start pb-6 last:pb-0">
+            {/* Vertical line connecting steps */}
+            {!isLast && (
+              <div
+                className="absolute left-4 top-10 w-px bg-gray-200"
+                style={{ height: "calc(100% - 1rem)" }}
+              />
+            )}
+
+            {/* Icon */}
+            <div
+              className="relative flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center border border-gray-200 bg-white"
+              style={{ borderColor: `${step.iconColor.toString()}40` }}
+            >
+              <Icon
+                icon={step.icon}
+                className="h-4 w-4"
+                style={{ color: step.iconColor.toString() }}
+              />
+            </div>
+
+            {/* Content */}
+            <div className="ml-4 flex-1">
+              <p className="text-sm font-medium text-gray-900">{step.title}</p>
+              <p className="text-sm text-gray-500 mt-0.5">{step.description}</p>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default VerticalFlowSteps;

package/UI/Components/Filters/FilterViewer.tsx

@@ -209,15 +209,19 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
       ] as InBetween<Date>;
 
       const shouldOnlyShowDate: boolean = data.filter.type === FieldType.Date;
+      const shouldShowSeconds: boolean =
+        data.filter.type === FieldType.DateTime;
 
       if (
         OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
           startAndEndDates.startValue as Date,
           shouldOnlyShowDate,
+          shouldShowSeconds,
         ) ===
         OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
           startAndEndDates.endValue as Date,
           shouldOnlyShowDate,
+          shouldShowSeconds,
         )
       ) {
         return (
@@ -228,6 +232,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
               {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
                 startAndEndDates.startValue as Date,
                 data.filter.type === FieldType.Date,
+                shouldShowSeconds,
               )}
             </span>{" "}
           </div>
@@ -241,6 +246,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
             {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
               startAndEndDates.startValue as Date,
               shouldOnlyShowDate,
+              shouldShowSeconds,
             )}
           </span>{" "}
           and{" "}
@@ -248,6 +254,7 @@ const FilterComponent: FilterComponentFunction = <T extends GenericObject>(
             {OneUptimeDate.getDateAsUserFriendlyLocalFormattedString(
               startAndEndDates.endValue as Date,
               shouldOnlyShowDate,
+              shouldShowSeconds,
             )}
           </span>{" "}
         </div>

package/UI/Components/Icon/Icon.tsx

@@ -978,6 +978,16 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"
       />,
     );
+  } else if (icon === IconProp.IncomingCall) {
+    return getSvgWrapper(
+      <>
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M14.25 9.75v-4.5m0 4.5h4.5m-4.5 0l6-6m-3 18c-8.284 0-15-6.716-15-15V4.5A2.25 2.25 0 014.5 2.25h1.372c.516 0 .966.351 1.091.852l1.106 4.423c.11.44-.054.902-.417 1.173l-1.293.97a1.062 1.062 0 00-.38 1.21 12.035 12.035 0 007.143 7.143c.441.162.928-.004 1.21-.38l.97-1.293a1.125 1.125 0 011.173-.417l4.423 1.106c.5.125.852.575.852 1.091V19.5a2.25 2.25 0 01-2.25 2.25h-2.25z"
+        />
+      </>,
+    );
   } else if (icon === IconProp.More) {
     return getSvgWrapper(
       <path

package/UI/Components/Input/Input.tsx

@@ -39,6 +39,7 @@ export interface ComponentProps {
   outerDivClassName?: string | undefined;
   autoFocus?: boolean | undefined;
   disableSpellCheck?: boolean | undefined;
+  showSecondsForDateTime?: boolean | undefined;
 }
 
 const Input: FunctionComponent<ComponentProps> = (
@@ -188,6 +189,12 @@ const Input: FunctionComponent<ComponentProps> = (
           }
           readOnly={props.readOnly || props.disabled || false}
           type={props.type || "text"}
+          step={
+            props.type === InputType.DATETIME_LOCAL &&
+            props.showSecondsForDateTime
+              ? "1"
+              : undefined
+          }
           placeholder={props.placeholder}
           className={className}
           onBlur={() => {