@addsign/moje-agenda-shared-lib 1.0.61 → 2.0.1

package/lib/components/form/SelectField.tsx

@@ -0,0 +1,267 @@
+import * as React from "react";
+import { IFormFieldGlobalProps, IOptionItem } from "../../types";
+import { MdCheck, MdClose, MdExpandLess, MdExpandMore } from "react-icons/md";
+import { useClickAway } from "react-use";
+import { SpinnerIcon, useFederationContext } from "../../main";
+import { FaSpinner } from "react-icons/fa";
+
+export interface ISelectFieldProps extends IFormFieldGlobalProps {
+  options?: IOptionItem[];
+  valueKey?: string;
+  labelKey?: string | ((item: any) => string);
+  fetchUrl?: string;
+  loading?: boolean;
+}
+
+export default function SelectField({
+  label,
+  name,
+  value,
+  description,
+  onInputChange,
+  options,
+  placeholder,
+  className,
+  errors = {},
+  clearable,
+  required,
+  disabled,
+  rounded = true,
+  fetchUrl,
+  valueKey,
+  labelKey,
+  loading,
+}: ISelectFieldProps) {
+  const [isFocused, setIsFocused] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
+  const apiClient = useFederationContext()?.apiClient;
+  const [localOptions, setLocalOptions] = React.useState(options);
+
+  const ref = React.useRef(null);
+  const handleClear = (e: any) => {
+    // value;
+    e.stopPropagation(); // Add this line
+
+    setIsFocused(false);
+    onInputChange({
+      ...e,
+      target: {
+        value: "",
+        name: name,
+      },
+    });
+  };
+
+  React.useEffect(() => {
+    const fetchOptions = async (fetchUrl: string) => {
+      setIsLoading(true);
+      const { data } = await apiClient.get(fetchUrl);
+
+      // Check if the first item in the data array is a number to determine the data type
+      const isArrayOfNumbers = typeof data[0] === "number";
+      const isInPageable = data && data.hasOwnProperty("content");
+
+      // Transform data based on its type
+      const transformedOptions = (isInPageable ? data.content : data).map(
+        (item: any) => {
+          if (isArrayOfNumbers) {
+            // If it's a number, use the number for both value and label
+            return { value: item, label: item.toString() };
+          } else {
+            // Otherwise, extract using predefined keys or defaults
+            return {
+              value: item[valueKey || "id"],
+              label:
+                labelKey instanceof Function && labelKey !== undefined
+                  ? labelKey(item)
+                  : item[labelKey as string],
+            };
+          }
+        }
+      );
+
+      setLocalOptions([
+        { value: null, label: " " }, // Add an empty option as the first item
+        ...transformedOptions,
+      ]);
+      setIsLoading(false);
+    };
+
+    if (fetchUrl) fetchOptions(fetchUrl);
+    if (options) setLocalOptions(options);
+  }, [fetchUrl, options, apiClient, valueKey, labelKey]); // ensure valueKey and labelKey are also in the dependency array if they are dynamic
+
+  const handleToggleFocus = () => {
+    setIsFocused((prev) => !prev);
+  };
+
+  useClickAway(ref, () => {
+    setIsFocused(false);
+  });
+
+  const hangleChange = (option: IOptionItem) => {
+    const tmp: any = {
+      target: {
+        value: option.value,
+        name: name,
+      },
+    };
+
+    onInputChange(tmp);
+    setIsFocused(false);
+  };
+  const currentlySelectedOption = React.useMemo(() => {
+    if (value === undefined || value === "") return null;
+    return localOptions?.find((option) => option.value == value);
+  }, [localOptions, value, options]);
+
+  const listOfOptions = () => {
+    if (!localOptions) return [];
+    return (
+      <div
+        id="list"
+        className="max-h-[390px] min-w-20  w-auto whitespace-nowrap absolute  z-[100000] -top-[1px] mt-[4px] bg-white rounded-lg shadow-xl border
+         border-gray-200 justify-start items-start inline-flex  overflow-auto cursor-default"
+      >
+        <div className="grow shrink basis-0 py-1 flex-col justify-start items-start inline-flex">
+          {localOptions.map((option, index) => {
+            return (
+              <div
+                className="group self-stretch px-1.5 py-px justify-start items-center inline-flex hover:bg-gray-50 "
+                onClick={() => hangleChange(option)}
+                key={index}
+              >
+                <div className="grow shrink basis-0 px-1  py-2 rounded-md flex-col justify-start items-start gap-2 inline-flex">
+                  <div className="self-stretch justify-start items-center gap-2 inline-flex">
+                    <div className="text-gray-900 text-sm font-normal  leading-normal">
+                      {option.label}
+                    </div>
+                    {option.description && (
+                      <div className="text-slate-600 sm-base font-normal leading-normal">
+                        {option.description}
+                      </div>
+                    )}
+                  </div>
+                </div>
+                <div className="w-5 h-5 relative">
+                  {option.value === value && value !== "" && (
+                    <MdCheck size={22} className="text-primary" />
+                  )}{" "}
+                  {option.value !== value && (
+                    <MdCheck
+                      size={22}
+                      className="text-transparent group-hover:text-gray-300"
+                    />
+                  )}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <div
+        className={
+          "w-full min-h-30   flex-col justify-start items-start gap-0inline-flex " +
+          className
+        }
+        id="selectField"
+        ref={ref}
+      >
+        <div className="self-stretch flex-col justify-start items-start gap-1.5 flex">
+          {label && (
+            <label
+              className="text-slate-700 text-sm font-medium  leading-tight"
+              htmlFor={name}
+            >
+              {label} {required ? "*" : ""}
+            </label>
+          )}
+          <div
+            className={`self-stretch w-full px-3  py-1 bg-white border justify-start items-center gap-0 inline-flex outline-none 
+               ${isFocused ? "outline-4 outline-indigo-200 outline-offset-0 border-indigo-300 " : ""}
+                  ${
+                    isFocused && errors[name]?.message
+                      ? "outline-4 outline-red-200 outline-offset-0 border-none"
+                      : ""
+                  }  
+                    ${rounded ? " rounded-lg " : " rounded-none "}
+                     ${!isFocused && errors[name]?.message ? "border-red-200" : ""}   
+                   ${disabled || isLoading ? "opacity-80 cursor-not-allowed  " : ""}
+                  `}
+            onClick={() =>
+              !disabled && !isLoading ? handleToggleFocus() : null
+            }
+          >
+            <div className="grow shrink basis-0 min-h-[32px] justify-start items-center gap-0 flex whitespace-nowrap w-[calc(100%-40px)] ">
+              <div
+                className="text-gray-900 text-sm font-normal leading-normal text-ellipsis overflow-hidden w-full"
+                id={name}
+              >
+                {currentlySelectedOption?.label}
+                {!currentlySelectedOption?.label && placeholder && (
+                  <span className="text-slate-400 font-normal">
+                    {" "}
+                    {placeholder}
+                  </span>
+                )}
+              </div>
+              <div className="text-slate-600 text-base font-normal leading-normal">
+                {currentlySelectedOption?.description}
+              </div>
+            </div>
+            {clearable &&
+              value !== "" &&
+              value !== null &&
+              value !== undefined &&
+              !disabled && (
+                <div
+                  className="w-6 h-6 relative  cursor-pointer  "
+                  id={name + ":clear"}
+                  onClick={handleClear}
+                >
+                  <div className="absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg">
+                    <MdClose />
+                  </div>{" "}
+                </div>
+              )}
+            {isLoading === true ||
+              (loading && (
+                <div className="w-6 h-6 relative flex  items-center justify-center align-middle">
+                  <SpinnerIcon icon={<FaSpinner />} />
+                </div>
+              ))}
+
+            <div className="w-6 h-6 relative  cursor-pointer ">
+              <div className="absolute inset-0 flex items-center justify-center hover:bg-gray-100 w-6 rounded-full text-lg">
+                {isFocused && !disabled && <MdExpandLess />}
+                {!isFocused && !disabled && <MdExpandMore />}
+              </div>
+            </div>
+          </div>
+        </div>{" "}
+        <div className="w-full relative">{isFocused && listOfOptions()}</div>
+        {description && !isFocused && (
+          <div
+            className="self-stretch text-slate-600 text-sm font-normal leading-tight"
+            id={name + ":description"}
+          >
+            {description}
+          </div>
+        )}
+        {errors[name] && (
+          <div
+            className="HintText self-stretch text-red-600 text-sm font-normal leading-tight"
+            id={name + ":error"}
+          >
+            {errors[name]?.message}
+          </div>
+        )}
+      </div>
+    </>
+  );
+}

package/lib/components/layout/IconInCircle.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { MdCheck, MdOutlinePending } from "react-icons/md";
+
+interface IconInCircleProps {
+  isComplete: boolean;
+  isPending?: boolean;
+  size?: number;
+  title?: string;
+}
+
+const IconInCircle: React.FC<IconInCircleProps> = ({
+  isComplete,
+  size = 20,
+  title,
+  isPending,
+}) => {
+  if (!isComplete && !isPending) return "";
+  return (
+    <div
+      className="p-2 rounded-full border text-success flex items-center justify-center text-2xl "
+      style={{ width: 2 * size, height: 2 * size }}
+      title={title || ""}
+    >
+      {isPending ? <MdOutlinePending size={size} /> : <MdCheck size={size} />}
+    </div>
+  );
+};
+
+export default IconInCircle;

package/lib/components/layout/PageTitle.tsx

@@ -0,0 +1,19 @@
+interface IPageTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  textSize?: string;
+  children?: React.ReactNode;
+}
+
+export default function PageTitle({
+  children,
+  textSize = "text-2xl",
+  ...props
+}: IPageTitleProps) {
+  // Combine textSize with the other fixed class names
+  const className = ` text-gray-900 ${textSize} font-medium font-['Inter'] leading-7 mb-5`;
+
+  return (
+    <h1 {...props} className={className}>
+      {children}
+    </h1>
+  );
+}

package/lib/components/layout/SectionTitle.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+interface ISectionTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  textSize?: string;
+  children?: React.ReactNode;
+}
+export default function SectionTitle({
+  children,
+  textSize = "text-lg",
+  ...props
+}: ISectionTitleProps) {
+  // Combine textSize with the other fixed class names
+  const className = ` text-gray-900 ${textSize} font-semibold font-['Inter'] leading-7 mb-3`;
+
+  return (
+    <div className="border-b border-gray-300 pt-2 mb-5  ">
+      <h2 {...props} className={className}>
+        {children}
+      </h2>
+    </div>
+  );
+}

package/lib/components/profiles/ProfileOverview.tsx

@@ -0,0 +1,212 @@
+import { useEffect, useMemo, useState } from "react";
+import SectionTitle from "../layout/SectionTitle";
+import {
+  EApproverRoles,
+  IProfileApprover,
+  IStep,
+  getFullName,
+  handleErrors,
+  useFederationContext,
+} from "../../main";
+import { AxiosResponse } from "axios";
+import IconInCircle from "../layout/IconInCircle";
+
+interface ProfileOverviewProps {
+  employeeId?: number;
+  onProfileApproversChange?: (data: IProfileApprover[]) => void;
+  steps: IStep[];
+}
+
+interface IApproverRoleGroup {
+  name: string;
+  roles: EApproverRoles[];
+  all: boolean;
+  parallel: boolean;
+  stepType: number;
+}
+
+const approverRoleGroups: IApproverRoleGroup[] = [
+  {
+    name: "Předschvalovatelé",
+    roles: [EApproverRoles.predschvalovatel],
+    all: true,
+    parallel: true,
+    stepType: 1,
+  },
+  {
+    name: "Schvalovatelé",
+    roles: [
+      EApproverRoles.vedouci,
+      EApproverRoles.zastupce,
+      EApproverRoles.zastupce9,
+      EApproverRoles.vyssiSchvalovatel,
+      EApproverRoles.vyssiSchvalovatelZastupce,
+      EApproverRoles.vyssiSchvalovatelZastupce9,
+    ],
+    all: false,
+    parallel: true,
+    stepType: 2,
+  },
+  {
+    name: "Docházkový vedoucí",
+    roles: [EApproverRoles.dochazkovyVedouci],
+    all: true,
+    parallel: false,
+    stepType: 3,
+  },
+];
+
+export default function ProfileOverview({
+  employeeId,
+  onProfileApproversChange,
+  steps,
+}: ProfileOverviewProps) {
+  const [profileApprovers, setProfileApprovers] = useState<
+    Array<IProfileApprover>
+  >([]);
+  const context = useFederationContext();
+
+  const currentApprovers = useMemo(() => {
+    return approverRoleGroups.map((group) => {
+      const groupApprovers = profileApprovers.filter((approver) =>
+        group.roles.includes(approver.role)
+      );
+
+      const groupApprovedSteps = steps.filter(
+        (step) =>
+          step.type == group.stepType &&
+          groupApprovers.some(
+            (approver) =>
+              step.employee.employeeId == approver?.approver?.employeeId
+          )
+      );
+
+      return {
+        ...group,
+        numberOfApprovers: groupApprovers.length,
+        numberOfApprovedSteps: groupApprovedSteps.length,
+        isComplete:
+          (group.all && groupApprovers.length == groupApprovedSteps.length) ||
+          (!group.all && groupApprovedSteps.length > 0),
+      };
+    });
+  }, [profileApprovers, steps]);
+
+  useEffect(() => {
+    context.apiClient
+      .get<IProfileApprover[]>(
+        "/timeoff/approve-profile" + (employeeId ? "/" + employeeId : "")
+      )
+      .then((response: AxiosResponse) => {
+        setProfileApprovers(response.data);
+      })
+      .catch((error) => {
+        handleErrors(
+          error,
+          context.emitter,
+          "Nepodařilo se dohledat schvalovací profil pro uživatele " +
+            employeeId
+        );
+        console.error("Error submitting form:", error);
+      });
+  }, [employeeId, context.emitter, context.apiClient]);
+
+  const decisionsTranslations = (decision: string): string | null => {
+    const translations: { [key: string]: string } = {
+      approved: "Schváleno",
+      rejected: "Zamítnuto",
+      cancelled: "Stornováno",
+      evided: "Zaevidováno",
+    };
+
+    return translations[decision] || null;
+  };
+  // pri nacteni profileApprovers se muze dat vedet parent componente inbfo o aktualnich schvalovatelich
+  useEffect(() => {
+    if (onProfileApproversChange) onProfileApproversChange(profileApprovers);
+  }, [profileApprovers, onProfileApproversChange]);
+
+  const findStep = (
+    steps: IStep[],
+    group: IApproverRoleGroup,
+    row: IProfileApprover
+  ) => {
+    return steps.find(
+      (step) =>
+        step.type == group.stepType &&
+        step.employee.employeeId == row.position?.employee?.employeeId
+    );
+  };
+
+  return (
+    <>
+      <SectionTitle>Postup schvalování</SectionTitle>
+      <div className="flex gap-4">
+        {currentApprovers.map((group, index) => (
+          <div
+            key={group.name}
+            className={
+              "w-full lg:w-1/3 rounded-lg shadow-xl p-5 border  gap-4 flex flex-col "
+            }
+          >
+            <div className="flex justify-between">
+              <h3 className="text-xl font-bold">
+                {group.name} - {index}
+              </h3>
+
+              <IconInCircle
+                isComplete={group.isComplete}
+                title={
+                  group.numberOfApprovedSteps + " / " + group.numberOfApprovers
+                }
+                isPending={!group.isComplete}
+              ></IconInCircle>
+            </div>
+            {profileApprovers
+              .filter((it) => group.roles.includes(it.role))
+              .map((row, index) => (
+                <div
+                  key={index}
+                  className=" border rounded-lg p-4 flex justify-between gap-5"
+                >
+                  <div>
+                    <h3 className="">
+                      {getFullName(row.position?.employee, true)}
+                    </h3>
+                    <p className="text-sm ">{row.roleTxt}</p>
+                    {findStep(steps, group, row) && (
+                      <>
+                        <p className="text-sm "></p>{" "}
+                        {findStep(steps, group, row)?.decision && (
+                          <p className="text-sm ">
+                            {decisionsTranslations(
+                              findStep(steps, group, row)?.decision || ""
+                            )}{" "}
+                            (
+                            {new Date(
+                              findStep(steps, group, row)?.date || 0
+                            ).toLocaleString()}
+                            )
+                          </p>
+                        )}
+                        {findStep(steps, group, row)?.comment && (
+                          <p className="text-sm ">
+                            <b>Komentář</b>:{" "}
+                            {findStep(steps, group, row)?.comment}{" "}
+                          </p>
+                        )}
+                      </>
+                    )}
+                  </div>
+                  <IconInCircle
+                    isComplete={findStep(steps, group, row) != null}
+                    isPending={!group.isComplete}
+                  />
+                </div>
+              ))}
+          </div>
+        ))}
+      </div>
+    </>
+  );
+}

package/lib/components/ui/Calendar.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cs } from "date-fns/locale";
+import { cn } from "../../utils/utils";
+import { buttonVariants } from "./button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      locale={cs}
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        IconLeft: () => <ChevronLeft className="h-4 w-4" />,
+        IconRight: () => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };