realtimex-crm 0.1.2

package/src/components/atomic-crm/deals/stages.ts

@@ -0,0 +1,28 @@
+import type { ConfigurationContextValue } from "../root/ConfigurationContext";
+import type { Deal } from "../types";
+
+export type DealsByStage = Record<Deal["stage"], Deal[]>;
+
+export const getDealsByStage = (
+  unorderedDeals: Deal[],
+  dealStages: ConfigurationContextValue["dealStages"],
+) => {
+  if (!dealStages) return {};
+  const dealsByStage: Record<Deal["stage"], Deal[]> = unorderedDeals.reduce(
+    (acc, deal) => {
+      acc[deal.stage].push(deal);
+      return acc;
+    },
+    dealStages.reduce(
+      (obj, stage) => ({ ...obj, [stage.value]: [] }),
+      {} as Record<Deal["stage"], Deal[]>,
+    ),
+  );
+  // order each column by index
+  dealStages.forEach((stage) => {
+    dealsByStage[stage.value] = dealsByStage[stage.value].sort(
+      (recordA: Deal, recordB: Deal) => recordA.index - recordB.index,
+    );
+  });
+  return dealsByStage;
+};

package/src/components/atomic-crm/filters/FilterCategory.tsx

@@ -0,0 +1,20 @@
+import { Translate } from "ra-core";
+import type { ReactNode } from "react";
+
+export const FilterCategory = ({
+  icon,
+  label,
+  children,
+}: {
+  icon: ReactNode;
+  label: string;
+  children?: ReactNode;
+}) => (
+  <div className="flex flex-col gap-2">
+    <h3 className="flex flex-row items-center gap-2 font-bold text-sm">
+      {icon}
+      <Translate i18nKey={label} />
+    </h3>
+    <div className="flex flex-col items-start pl-4">{children}</div>
+  </div>
+);

package/src/components/atomic-crm/layout/FormToolbar.tsx

@@ -0,0 +1,12 @@
+import { CancelButton } from "@/components/admin/cancel-button";
+import { SaveButton } from "@/components/admin/form";
+
+export const FormToolbar = () => (
+  <div
+    role="toolbar"
+    className="sticky flex pt-4 pb-4 md:pb-0 bottom-0 bg-linear-to-b from-transparent to-card to-10% flex-row justify-end gap-2"
+  >
+    <CancelButton />
+    <SaveButton />
+  </div>
+);

package/src/components/atomic-crm/layout/Header.tsx

@@ -0,0 +1,134 @@
+import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
+import { Settings, User } from "lucide-react";
+import { CanAccess } from "ra-core";
+import { Link, matchPath, useLocation } from "react-router";
+import { RefreshButton } from "@/components/admin/refresh-button";
+import { ThemeModeToggle } from "@/components/admin/theme-mode-toggle";
+import { UserMenu } from "@/components/admin/user-menu";
+import { useUserMenu } from "@/hooks/user-menu-context";
+
+import { useConfigurationContext } from "../root/ConfigurationContext";
+
+const Header = () => {
+  const { darkModeLogo, lightModeLogo, title } = useConfigurationContext();
+  const location = useLocation();
+
+  let currentPath: string | boolean = "/";
+  if (matchPath("/", location.pathname)) {
+    currentPath = "/";
+  } else if (matchPath("/contacts/*", location.pathname)) {
+    currentPath = "/contacts";
+  } else if (matchPath("/companies/*", location.pathname)) {
+    currentPath = "/companies";
+  } else if (matchPath("/deals/*", location.pathname)) {
+    currentPath = "/deals";
+  } else {
+    currentPath = false;
+  }
+
+  return (
+    <nav className="flex-grow">
+      <header className="bg-secondary">
+        <div className="px-4">
+          <div className="flex justify-between items-center flex-1">
+            <Link
+              to="/"
+              className="flex items-center gap-2 text-secondary-foreground no-underline"
+            >
+              <img
+                className="[.light_&]:hidden h-6"
+                src={darkModeLogo}
+                alt={title}
+              />
+              <img
+                className="[.dark_&]:hidden h-6"
+                src={lightModeLogo}
+                alt={title}
+              />
+              <h1 className="text-xl font-semibold">{title}</h1>
+            </Link>
+            <div>
+              <nav className="flex">
+                <NavigationTab
+                  label="Dashboard"
+                  to="/"
+                  isActive={currentPath === "/"}
+                />
+                <NavigationTab
+                  label="Contacts"
+                  to="/contacts"
+                  isActive={currentPath === "/contacts"}
+                />
+                <NavigationTab
+                  label="Companies"
+                  to="/companies"
+                  isActive={currentPath === "/companies"}
+                />
+                <NavigationTab
+                  label="Deals"
+                  to="/deals"
+                  isActive={currentPath === "/deals"}
+                />
+              </nav>
+            </div>
+            <div className="flex items-center">
+              <ThemeModeToggle />
+              <RefreshButton />
+              <UserMenu>
+                <ConfigurationMenu />
+                <CanAccess resource="sales" action="list">
+                  <UsersMenu />
+                </CanAccess>
+              </UserMenu>
+            </div>
+          </div>
+        </div>
+      </header>
+    </nav>
+  );
+};
+
+const NavigationTab = ({
+  label,
+  to,
+  isActive,
+}: {
+  label: string;
+  to: string;
+  isActive: boolean;
+}) => (
+  <Link
+    to={to}
+    className={`px-6 py-3 text-sm font-medium transition-colors border-b-2 ${
+      isActive
+        ? "text-secondary-foreground border-secondary-foreground"
+        : "text-secondary-foreground/70 border-transparent hover:text-secondary-foreground/80"
+    }`}
+  >
+    {label}
+  </Link>
+);
+
+const UsersMenu = () => {
+  const { onClose } = useUserMenu() ?? {};
+  return (
+    <DropdownMenuItem asChild onClick={onClose}>
+      <Link to="/sales" className="flex items-center gap-2">
+        <User /> Users
+      </Link>
+    </DropdownMenuItem>
+  );
+};
+
+const ConfigurationMenu = () => {
+  const { onClose } = useUserMenu() ?? {};
+  return (
+    <DropdownMenuItem asChild onClick={onClose}>
+      <Link to="/settings" className="flex items-center gap-2">
+        <Settings />
+        My info
+      </Link>
+    </DropdownMenuItem>
+  );
+};
+export default Header;

package/src/components/atomic-crm/layout/Layout.tsx

@@ -0,0 +1,21 @@
+import { Suspense, type ReactNode } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+import { Notification } from "@/components/admin/notification";
+import { Error } from "@/components/admin/error";
+import { Skeleton } from "@/components/ui/skeleton";
+
+import Header from "./Header";
+
+export const Layout = ({ children }: { children: ReactNode }) => (
+  <>
+    <Header />
+    <main className="max-w-screen-xl mx-auto pt-4 px-4" id="main-content">
+      <ErrorBoundary FallbackComponent={Error}>
+        <Suspense fallback={<Skeleton className="h-12 w-12 rounded-full" />}>
+          {children}
+        </Suspense>
+      </ErrorBoundary>
+    </main>
+    <Notification />
+  </>
+);

package/src/components/atomic-crm/layout/TopToolbar.tsx

@@ -0,0 +1,24 @@
+import { cn } from "@/lib/utils";
+import type { HTMLAttributes, ReactNode } from "react";
+
+export interface TopToolbarProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode;
+}
+
+export const TopToolbar = (inProps: TopToolbarProps) => {
+  const { className, children, ...props } = inProps;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-auto justify-end items-end gap-2 whitespace-nowrap",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default TopToolbar;

package/src/components/atomic-crm/login/LoginSkeleton.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "@/components/ui/skeleton";
+
+export const LoginSkeleton = () => {
+  return (
+    <div className="max-w-screen-xl mx-auto h-screen pt-8">
+      <div className="h-full">
+        <div className="max-w-sm mx-auto h-full flex flex-col justify-center gap-8">
+          <Skeleton className="w-full h-[100px]" />
+          <Skeleton className="w-4/5 h-[50px]" />
+          <Skeleton className="w-full h-9" />
+          <Skeleton className="w-full h-9" />
+          <Skeleton className="w-full h-9" />
+          <Skeleton className="w-2/5 h-9" />
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/atomic-crm/login/SignupPage.tsx

@@ -0,0 +1,150 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Loader2 } from "lucide-react";
+import { useDataProvider, useLogin, useNotify } from "ra-core";
+import { useForm, type SubmitHandler } from "react-hook-form";
+import { Navigate } from "react-router";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+import type { CrmDataProvider } from "../providers/types";
+import { useConfigurationContext } from "../root/ConfigurationContext";
+import type { SignUpData } from "../types";
+import { LoginSkeleton } from "./LoginSkeleton";
+
+export const SignupPage = () => {
+  const queryClient = useQueryClient();
+  const dataProvider = useDataProvider<CrmDataProvider>();
+  const { darkModeLogo: logo, title } = useConfigurationContext();
+  const { data: isInitialized, isPending } = useQuery({
+    queryKey: ["init"],
+    queryFn: async () => {
+      return dataProvider.isInitialized();
+    },
+  });
+
+  const { isPending: isSignUpPending, mutate } = useMutation({
+    mutationKey: ["signup"],
+    mutationFn: async (data: SignUpData) => {
+      return dataProvider.signUp(data);
+    },
+    onSuccess: (data) => {
+      login({
+        email: data.email,
+        password: data.password,
+        redirectTo: "/contacts",
+      }).then(() => {
+        notify("Initial user successfully created");
+        // FIXME: We should probably provide a hook for that in the ra-core package
+        queryClient.invalidateQueries({
+          queryKey: ["auth", "canAccess"],
+        });
+      });
+    },
+    onError: () => {
+      notify("An error occurred. Please try again.");
+    },
+  });
+
+  const login = useLogin();
+  const notify = useNotify();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { isValid },
+  } = useForm<SignUpData>({
+    mode: "onChange",
+  });
+
+  if (isPending) {
+    return <LoginSkeleton />;
+  }
+
+  // For the moment, we only allow one user to sign up. Other users must be created by the administrator.
+  if (isInitialized) {
+    return <Navigate to="/login" />;
+  }
+
+  const onSubmit: SubmitHandler<SignUpData> = async (data) => {
+    mutate(data);
+  };
+
+  return (
+    <div className="h-screen p-8">
+      <div className="flex items-center gap-4">
+        <img
+          src={logo}
+          alt={title}
+          width={24}
+          className="filter brightness-0 invert"
+        />
+        <h1 className="text-xl font-semibold">{title}</h1>
+      </div>
+      <div className="h-full">
+        <div className="max-w-sm mx-auto h-full flex flex-col justify-center gap-4">
+          <h1 className="text-2xl font-bold mb-4">Welcome to Atomic CRM</h1>
+          <p className="text-base mb-4">
+            Create the first user account to complete the setup.
+          </p>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="first_name">First name</Label>
+              <Input
+                {...register("first_name", { required: true })}
+                id="first_name"
+                type="text"
+                required
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="last_name">Last name</Label>
+              <Input
+                {...register("last_name", { required: true })}
+                id="last_name"
+                type="text"
+                required
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="email">Email</Label>
+              <Input
+                {...register("email", { required: true })}
+                id="email"
+                type="email"
+                required
+              />
+            </div>
+            <div className="flex flex-col gap-2">
+              <Label htmlFor="password">Password</Label>
+              <Input
+                {...register("password", { required: true })}
+                id="password"
+                type="password"
+                required
+              />
+            </div>
+            <div className="flex justify-between items-center mt-8">
+              <Button
+                type="submit"
+                disabled={!isValid || isSignUpPending}
+                className="w-full"
+              >
+                {isSignUpPending ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin mr-2" />
+                    Creating...
+                  </>
+                ) : (
+                  "Create account"
+                )}
+              </Button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+SignupPage.path = "/sign-up";

package/src/components/atomic-crm/login/StartPage.tsx

@@ -0,0 +1,27 @@
+import { useQuery } from "@tanstack/react-query";
+import { useDataProvider } from "ra-core";
+import { Navigate } from "react-router-dom";
+import { LoginPage } from "@/components/admin/login-page";
+
+import type { CrmDataProvider } from "../providers/types";
+import { LoginSkeleton } from "./LoginSkeleton";
+
+export const StartPage = () => {
+  const dataProvider = useDataProvider<CrmDataProvider>();
+  const {
+    data: isInitialized,
+    error,
+    isPending,
+  } = useQuery({
+    queryKey: ["init"],
+    queryFn: async () => {
+      return dataProvider.isInitialized();
+    },
+  });
+
+  if (isPending) return <LoginSkeleton />;
+  if (error) return <LoginPage />;
+  if (isInitialized) return <LoginPage />;
+
+  return <Navigate to="/sign-up" />;
+};

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+
+export type AsideSectionProps = {
+  title: string;
+  children?: ReactNode;
+  noGap?: boolean;
+};
+
+export function AsideSection({ title, children, noGap }: AsideSectionProps) {
+  return (
+    <div className="mb-6 text-sm">
+      <h3 className="font-medium pb-1">{title}</h3>
+      <Separator />
+      <div className={cn("pt-2 flex flex-col", { "gap-1": !noGap })}>
+        {children}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { useRecordContext } from "ra-core";
+
+import { Avatar } from "../contacts/Avatar";
+import type { Contact } from "../types";
+
+// eslint-disable-next-line react-refresh/only-export-components
+const ContactOptionRender = () => {
+  const record: Contact | undefined = useRecordContext();
+  if (!record) return null;
+  return (
+    <div className="flex flex-row gap-4 items-center justify-start">
+      <Avatar height={40} width={40} record={record} />
+      <div className="flex flex-col items-start gap-1">
+        <span>
+          {record.first_name} {record.last_name}
+        </span>
+        <span className="text-xs text-muted-foreground">
+          {record.title}
+          {record.title && record.company_name && " at "}
+          {record.company_name}
+        </span>
+      </div>
+    </div>
+  );
+};
+export const contactOptionText = <ContactOptionRender />;