realtimex-crm 0.1.2

package/src/components/atomic-crm/misc/ImageEditorField.tsx

@@ -0,0 +1,206 @@
+import { useFieldValue } from "ra-core";
+import { createRef, useCallback, useState } from "react";
+import type { ReactCropperElement } from "react-cropper";
+import { Cropper } from "react-cropper";
+import { useDropzone } from "react-dropzone";
+import { useFormContext } from "react-hook-form";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+import "cropperjs/dist/cropper.css";
+
+const ImageEditorField = (props: ImageEditorFieldProps) => {
+  const { getValues } = useFormContext();
+  const source = getValues(props.source);
+  const imageUrl = source?.src;
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const { type = "image", emptyText, linkPosition = "none" } = props;
+
+  const commonProps = {
+    src: imageUrl,
+    onClick: () => setIsDialogOpen(true),
+    style: { cursor: "pointer" },
+    className: `${props.className || ""}`,
+  };
+
+  const width = props.width || (type === "avatar" ? 50 : 200);
+  const height = props.height || (type === "avatar" ? 50 : 200);
+
+  return (
+    <>
+      <div
+        className={`flex ${
+          linkPosition === "right" ? "flex-row" : "flex-col"
+        } items-center ${
+          linkPosition === "right" ? "gap-2" : "gap-1"
+        } rounded p-${props.backgroundImageColor ? "4" : "0"}`}
+        style={{
+          backgroundColor: props.backgroundImageColor || "transparent",
+        }}
+      >
+        {props.type === "avatar" ? (
+          <Avatar
+            {...commonProps}
+            className={`cursor-pointer`}
+            style={{ width, height }}
+          >
+            <AvatarImage src={imageUrl} />
+            <AvatarFallback>{emptyText}</AvatarFallback>
+          </Avatar>
+        ) : (
+          <img
+            {...commonProps}
+            className="cursor-pointer object-cover"
+            style={{ width, height }}
+            alt="Editable content"
+          />
+        )}
+        {linkPosition !== "none" && (
+          <button
+            type="button"
+            onClick={() => setIsDialogOpen(true)}
+            className="text-xs underline hover:no-underline cursor-pointer text-center"
+          >
+            Change
+          </button>
+        )}
+      </div>
+      <ImageEditorDialog
+        open={isDialogOpen}
+        onClose={() => setIsDialogOpen(false)}
+        {...props}
+      />
+    </>
+  );
+};
+
+const ImageEditorDialog = (props: ImageEditorDialogProps) => {
+  const { setValue, handleSubmit } = useFormContext();
+  const cropperRef = createRef<ReactCropperElement>();
+  const initialValue = useFieldValue({ source: props.source });
+  const [file, setFile] = useState<File | undefined>();
+  const [imageSrc, setImageSrc] = useState<string | undefined>(
+    initialValue?.src,
+  );
+  const onDrop = useCallback((files: File[]) => {
+    const preview = URL.createObjectURL(files[0]);
+    setFile(files[0]);
+    setImageSrc(preview);
+  }, []);
+
+  const updateImage = () => {
+    const cropper = cropperRef.current?.cropper;
+    const croppedImage = cropper?.getCroppedCanvas().toDataURL();
+    if (croppedImage) {
+      setImageSrc(croppedImage);
+
+      const newFile = file ?? new File([], initialValue?.src);
+      setValue(
+        props.source,
+        {
+          src: croppedImage,
+          title: newFile.name,
+          rawFile: newFile,
+        },
+        { shouldDirty: true },
+      );
+      props.onClose();
+
+      if (props.onSave) {
+        handleSubmit(props.onSave)();
+      }
+    }
+  };
+
+  const deleteImage = () => {
+    setValue(props.source, null, { shouldDirty: true });
+    if (props.onSave) {
+      handleSubmit(props.onSave)();
+    }
+    setImageSrc(undefined);
+    props.onClose();
+  };
+
+  const { getRootProps, getInputProps } = useDropzone({
+    accept: { "image/jpeg": [".jpeg", ".png"] },
+    onDrop,
+    maxFiles: 1,
+  });
+
+  return (
+    <Dialog open={props.open} onOpenChange={props.onClose}>
+      {props.type === "avatar" && (
+        <style>
+          {`
+                        .cropper-crop-box,
+                        .cropper-view-box {
+                            border-radius: 50%;
+                        }
+                    `}
+        </style>
+      )}
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Upload and resize image</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-2 justify-center">
+          <div
+            className="flex flex-row justify-center bg-gray-50 cursor-pointer p-4 border-2 border-dashed border-gray-300 rounded-lg hover:bg-gray-100 transition-colors"
+            {...getRootProps()}
+          >
+            <input {...getInputProps()} />
+            <p className="text-gray-600">
+              Drop a file to upload, or click to select it.
+            </p>
+          </div>
+
+          {imageSrc && (
+            <Cropper
+              ref={cropperRef}
+              src={imageSrc}
+              aspectRatio={1}
+              guides={false}
+              cropBoxResizable={false}
+            />
+          )}
+        </div>
+
+        <DialogFooter className="flex justify-between w-full">
+          <Button type="button" onClick={updateImage}>
+            Update Image
+          </Button>
+          <Button type="button" variant="destructive" onClick={deleteImage}>
+            Delete
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default ImageEditorField;
+
+export interface ImageEditorFieldProps {
+  source: string;
+  width?: number;
+  height?: number;
+  type?: "avatar" | "image";
+  onSave?: any;
+  linkPosition?: "right" | "bottom" | "none";
+  backgroundImageColor?: string;
+  className?: string;
+  emptyText?: string;
+}
+
+export interface ImageEditorDialogProps extends ImageEditorFieldProps {
+  open: boolean;
+  onClose: () => void;
+}

package/src/components/atomic-crm/misc/RelativeDate.tsx

@@ -0,0 +1,5 @@
+import { formatRelative } from "date-fns";
+
+export function RelativeDate({ date }: { date: string }) {
+  return formatRelative(new Date(date), new Date());
+}

package/src/components/atomic-crm/misc/Status.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils";
+
+import { useConfigurationContext } from "../root/ConfigurationContext";
+
+export const Status = ({
+  status,
+  className,
+}: {
+  status: string;
+  className?: string;
+}) => {
+  const { noteStatuses } = useConfigurationContext();
+  if (!status || !noteStatuses) return null;
+  const statusObject = noteStatuses.find((s: any) => s.value === status);
+
+  if (!statusObject) return null;
+  return (
+    <div className={cn("group relative inline-block mr-2", className)}>
+      <span
+        className="inline-block w-2.5 h-2.5 rounded-full"
+        style={{ backgroundColor: statusObject.color }}
+      />
+      <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 px-2 py-1 text-xs text-white bg-gray-800 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap z-10">
+        {statusObject.label}
+      </div>
+    </div>
+  );
+};

package/src/components/atomic-crm/misc/fetchWithTimeout.ts

@@ -0,0 +1,19 @@
+type FetchParams = Parameters<typeof fetch>;
+
+export async function fetchWithTimeout(
+  resource: string,
+  options: FetchParams[1] & { timeout?: number } = {},
+) {
+  const { timeout = 2000 } = options;
+
+  const controller = new AbortController();
+  const id = setTimeout(() => controller.abort(), timeout);
+
+  const response = await fetch(resource, {
+    ...options,
+    signal: controller.signal,
+  });
+  clearTimeout(id);
+
+  return response;
+}

package/src/components/atomic-crm/misc/isLinkedInUrl.ts

@@ -0,0 +1,15 @@
+const LINKEDIN_URL_REGEX = /^http(?:s)?:\/\/(?:www\.)?linkedin.com\//;
+
+export const isLinkedinUrl = (url: string) => {
+  if (!url) return;
+  try {
+    // Parse the URL to ensure it is valid
+    const parsedUrl = new URL(url);
+    if (!parsedUrl.href.match(LINKEDIN_URL_REGEX)) {
+      return "URL must be from linkedin.com";
+    }
+  } catch {
+    // If URL parsing fails, return false
+    return "Must be a valid URL";
+  }
+};

package/src/components/atomic-crm/misc/unsupportedDomains.const.ts

@@ -0,0 +1,105 @@
+// If you want to add more domains to the list, you can do so by adding them to the DOMAINS_NOT_SUPPORTING_FAVICON array.
+export const DOMAINS_NOT_SUPPORTING_FAVICON = [
+  "gmail.com",
+  "yahoo.com",
+  "hotmail.com",
+  "aol.com",
+  "hotmail.co.uk",
+  "hotmail.fr",
+  "msn.com",
+  "yahoo.fr",
+  "wanadoo.fr",
+  "orange.fr",
+  "comcast.net",
+  "yahoo.co.uk",
+  "yahoo.com.br",
+  "yahoo.co.in",
+  "live.com",
+  "rediffmail.com",
+  "free.fr",
+  "gmx.de",
+  "web.de",
+  "yandex.ru",
+  "ymail.com",
+  "libero.it",
+  "outlook.com",
+  "uol.com.br",
+  "bol.com.br",
+  "mail.ru",
+  "cox.net",
+  "hotmail.it",
+  "sbcglobal.net",
+  "sfr.fr",
+  "live.fr",
+  "verizon.net",
+  "live.co.uk",
+  "googlemail.com",
+  "yahoo.es",
+  "ig.com.br",
+  "live.nl",
+  "bigpond.com",
+  "terra.com.br",
+  "yahoo.it",
+  "neuf.fr",
+  "yahoo.de",
+  "alice.it",
+  "rocketmail.com",
+  "att.net",
+  "laposte.net",
+  "facebook.com",
+  "bellsouth.net",
+  "yahoo.in",
+  "hotmail.es",
+  "charter.net",
+  "yahoo.ca",
+  "yahoo.com.au",
+  "rambler.ru",
+  "hotmail.de",
+  "tiscali.it",
+  "shaw.ca",
+  "yahoo.co.jp",
+  "sky.com",
+  "earthlink.net",
+  "optonline.net",
+  "freenet.de",
+  "t-online.de",
+  "aliceadsl.fr",
+  "virgilio.it",
+  "home.nl",
+  "qq.com",
+  "telenet.be",
+  "me.com",
+  "yahoo.com.ar",
+  "tiscali.co.uk",
+  "yahoo.com.mx",
+  "voila.fr",
+  "gmx.net",
+  "mail.com",
+  "planet.nl",
+  "tin.it",
+  "live.it",
+  "ntlworld.com",
+  "arcor.de",
+  "yahoo.co.id",
+  "frontiernet.net",
+  "hetnet.nl",
+  "live.com.au",
+  "yahoo.com.sg",
+  "zonnet.nl",
+  "club-internet.fr",
+  "juno.com",
+  "optusnet.com.au",
+  "blueyonder.co.uk",
+  "bluewin.ch",
+  "skynet.be",
+  "sympatico.ca",
+  "windstream.net",
+  "mac.com",
+  "centurytel.net",
+  "chello.nl",
+  "live.ca",
+  "aim.com",
+  "bigpond.net.au",
+  "online.de",
+  "apple.com",
+];

package/src/components/atomic-crm/misc/useAppBarHeight.ts

@@ -0,0 +1,9 @@
+import { useIsMobile } from "@/hooks/use-mobile";
+
+const DENSE_NAVBAR_HEIGHT = 48;
+const DENSE_NAVBAR_HEIGHT_MOBILE = 64;
+
+export default function useAppBarHeight(): number {
+  const isMobile = useIsMobile();
+  return isMobile ? DENSE_NAVBAR_HEIGHT_MOBILE : DENSE_NAVBAR_HEIGHT;
+}

package/src/components/atomic-crm/misc/usePapaParse.tsx

@@ -0,0 +1,144 @@
+import * as Papa from "papaparse";
+import { useCallback, useMemo, useRef, useState } from "react";
+
+type Import =
+  | {
+      state: "idle";
+    }
+  | {
+      state: "parsing";
+    }
+  | {
+      state: "running" | "complete";
+
+      rowCount: number;
+      importCount: number;
+      errorCount: number;
+
+      // The remaining time in milliseconds
+      remainingTime: number | null;
+    }
+  | {
+      state: "error";
+
+      error: Error;
+    };
+
+type usePapaParseProps<T> = {
+  // The import batch size
+  batchSize?: number;
+
+  // processBatch returns the number of imported items
+  processBatch(batch: T[]): Promise<void>;
+};
+
+export function usePapaParse<T>({
+  batchSize = 10,
+  processBatch,
+}: usePapaParseProps<T>) {
+  const importIdRef = useRef<number>(0);
+
+  const [importer, setImporter] = useState<Import>({
+    state: "idle",
+  });
+
+  const reset = useCallback(() => {
+    setImporter({
+      state: "idle",
+    });
+    importIdRef.current += 1;
+  }, []);
+
+  const parseCsv = useCallback(
+    (file: File) => {
+      setImporter({
+        state: "parsing",
+      });
+
+      const importId = importIdRef.current;
+      Papa.parse<T>(file, {
+        header: true,
+        skipEmptyLines: true,
+        async complete(results) {
+          if (importIdRef.current !== importId) {
+            return;
+          }
+
+          setImporter({
+            state: "running",
+            rowCount: results.data.length,
+            errorCount: results.errors.length,
+            importCount: 0,
+            remainingTime: null,
+          });
+
+          let totalTime = 0;
+          for (let i = 0; i < results.data.length; i += batchSize) {
+            if (importIdRef.current !== importId) {
+              return;
+            }
+
+            const batch = results.data.slice(i, i + batchSize);
+            try {
+              const start = Date.now();
+              await processBatch(batch);
+              totalTime += Date.now() - start;
+
+              const meanTime = totalTime / (i + batch.length);
+              setImporter((previous) => {
+                if (previous.state === "running") {
+                  const importCount = previous.importCount + batch.length;
+                  return {
+                    ...previous,
+                    importCount,
+                    remainingTime:
+                      meanTime * (results.data.length - importCount),
+                  };
+                }
+                return previous;
+              });
+            } catch (error) {
+              console.error("Failed to import batch", error);
+              setImporter((previous) =>
+                previous.state === "running"
+                  ? {
+                      ...previous,
+                      errorCount: previous.errorCount + batch.length,
+                    }
+                  : previous,
+              );
+            }
+          }
+
+          setImporter((previous) =>
+            previous.state === "running"
+              ? {
+                  ...previous,
+                  state: "complete",
+                  remainingTime: null,
+                }
+              : previous,
+          );
+        },
+        error(error) {
+          console.error(error);
+          setImporter({
+            state: "error",
+            error,
+          });
+        },
+        dynamicTyping: true,
+      });
+    },
+    [batchSize, processBatch],
+  );
+
+  return useMemo(
+    () => ({
+      importer,
+      parseCsv,
+      reset,
+    }),
+    [importer, parseCsv, reset],
+  );
+}