{findDealLabel(dealStages, stage)}
diff --git a/src/components/atomic-crm/deals/DealCreate.tsx b/src/components/atomic-crm/deals/DealCreate.tsx
index 323b6033..31f0edd9 100644
--- a/src/components/atomic-crm/deals/DealCreate.tsx
+++ b/src/components/atomic-crm/deals/DealCreate.tsx
@@ -7,7 +7,7 @@ import {
useRedirect,
type GetListResult,
} from "ra-core";
-import { Create } from "@/components/admin/create";
+import { Create, type CreateProps } from "@/components/admin/create";
import { SaveButton } from "@/components/admin/form";
import { FormToolbar } from "@/components/admin/simple-form";
import { Dialog, DialogContent } from "@/components/ui/dialog";
@@ -16,14 +16,9 @@ import type { Deal } from "../types";
import { DealInputs } from "./DealInputs";
export const DealCreate = ({ open }: { open: boolean }) => {
- const redirect = useRedirect();
const dataProvider = useDataProvider();
+ const redirect = useRedirect();
const { data: allDeals } = useListContext();
-
- const handleClose = () => {
- redirect("/deals");
- };
-
const queryClient = useQueryClient();
const onSuccess = async (deal: Deal) => {
@@ -70,26 +65,39 @@ export const DealCreate = ({ open }: { open: boolean }) => {
redirect("/deals");
};
- const { identity } = useGetIdentity();
+ const handleClose = () => {
+ redirect("/deals");
+ };
return (
);
};
+
+export const DealCreatePage = (props: Partial) => {
+ const { identity } = useGetIdentity();
+ return (
+
+ );
+};
diff --git a/src/components/atomic-crm/deals/DealEdit.tsx b/src/components/atomic-crm/deals/DealEdit.tsx
index f61beb63..6daf058d 100644
--- a/src/components/atomic-crm/deals/DealEdit.tsx
+++ b/src/components/atomic-crm/deals/DealEdit.tsx
@@ -16,6 +16,16 @@ import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { CompanyAvatar } from "../companies/CompanyAvatar";
import type { Deal } from "../types";
import { DealInputs } from "./DealInputs";
+import { ArchiveButton } from "./ArchiveButton";
+import { UnarchiveButton } from "./UnarchiveButton";
+import { useIsMobile } from "@/hooks/use-mobile";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { MoreVertical } from "lucide-react";
export const DealEdit = ({ open, id }: { open: boolean; id?: string }) => {
const redirect = useRedirect();
@@ -55,37 +65,99 @@ export const DealEdit = ({ open, id }: { open: boolean; id?: string }) => {
);
};
-function EditHeader() {
+export const DealEditPage = () => {
+ const redirect = useRedirect();
+ const notify = useNotify();
+ return (
+ {
+ notify("Deal updated");
+ redirect(`show`, undefined, undefined, undefined, {
+ _scrollToTop: false,
+ });
+ },
+ }}
+ >
+
+
+
+ );
+};
+
+function EditTitle() {
const deal = useRecordContext();
+ const isMobile = useIsMobile();
+
if (!deal) {
return null;
}
return (
-
-
-
-
-
-
-
Edit {deal.name} deal
-
-
-
-
+
+
+
+
+
+
Edit {deal.name} deal
+ {isMobile ? (
+
+
+
+
+
+
+
+
+ {deal.archived_at ? (
+
+
+
+ ) : (
+
+
+
+ )}
+
+
+ ) : null}
+
+
+
+
+ );
+}
+
+function EditHeader() {
+ return (
+
+
);
}
function EditToolbar() {
+ const record = useRecordContext
();
+ const isMobile = useIsMobile();
+ if (!record) return null;
+
return (
-
-
-
+
+ {isMobile ? null :
}
+
+
+
);
diff --git a/src/components/atomic-crm/deals/DealList.tsx b/src/components/atomic-crm/deals/DealList.tsx
index 51f6c257..85a2e021 100644
--- a/src/components/atomic-crm/deals/DealList.tsx
+++ b/src/components/atomic-crm/deals/DealList.tsx
@@ -1,5 +1,5 @@
import { useGetIdentity, useListContext } from "ra-core";
-import { matchPath, useLocation } from "react-router";
+import { Link, matchPath, useLocation } from "react-router";
import { AutocompleteInput } from "@/components/admin/autocomplete-input";
import { CreateButton } from "@/components/admin/create-button";
import { ExportButton } from "@/components/admin/export-button";
@@ -18,25 +18,32 @@ import { DealEmpty } from "./DealEmpty";
import { DealListContent } from "./DealListContent";
import { DealShow } from "./DealShow";
import { OnlyMineInput } from "./OnlyMineInput";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
const DealList = () => {
const { identity } = useGetIdentity();
const { dealCategories } = useConfigurationContext();
+ const isMobile = useIsMobile();
if (!identity) return null;
- const dealFilters = [
-
,
-
-
- ,
-
({ id: type, name: type }))}
- />,
- ,
- ];
+ const dealFilters = [];
+
+ if (!isMobile) {
+ dealFilters.push(
+
+
+ ,
+ ({ id: type, name: type }))}
+ />,
+ ,
+ );
+ }
return (
{
title={false}
sort={{ field: "index", order: "DESC" }}
filters={dealFilters}
- actions={}
+ actions={isMobile ? false : }
pagination={null}
>
+
);
};
const DealLayout = () => {
const location = useLocation();
- const matchCreate = matchPath("/deals/create", location.pathname);
- const matchShow = matchPath("/deals/:id/show", location.pathname);
- const matchEdit = matchPath("/deals/:id", location.pathname);
+ const isMobile = useIsMobile();
+ const matchCreate =
+ !isMobile && matchPath("/deals/create", location.pathname);
+ const matchShow =
+ !isMobile && matchPath("/deals/:id/show", location.pathname);
+ const matchEdit = !isMobile && matchPath("/deals/:id", location.pathname);
const { data, isPending, filterValues } = useListContext();
const hasFilters = filterValues && Object.keys(filterValues).length > 0;
@@ -67,19 +88,28 @@ const DealLayout = () => {
return (
<>
-
+
);
return (
-
+
-
-
+
+
);
};
diff --git a/src/components/atomic-crm/deals/DealShow.tsx b/src/components/atomic-crm/deals/DealShow.tsx
index 7c0f02fc..abb49a61 100644
--- a/src/components/atomic-crm/deals/DealShow.tsx
+++ b/src/components/atomic-crm/deals/DealShow.tsx
@@ -1,15 +1,9 @@
-import { useMutation } from "@tanstack/react-query";
import { format, isValid } from "date-fns";
-import { Archive, ArchiveRestore } from "lucide-react";
-import {
- ShowBase,
- useDataProvider,
- useNotify,
- useRecordContext,
- useRedirect,
- useRefresh,
- useUpdate,
-} from "ra-core";
+import { ShowBase, useRecordContext, useRedirect } from "ra-core";
+import { Edit } from "lucide-react";
+import { Link } from "react-router";
+
+import { useIsMobile } from "@/hooks/use-mobile";
import { DeleteButton } from "@/components/admin/delete-button";
import { EditButton } from "@/components/admin/edit-button";
import { ReferenceArrayField } from "@/components/admin/reference-array-field";
@@ -19,6 +13,7 @@ import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent } from "@/components/ui/dialog";
import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { CompanyAvatar } from "../companies/CompanyAvatar";
import { NoteCreate } from "../notes/NoteCreate";
@@ -27,6 +22,9 @@ import { useConfigurationContext } from "../root/ConfigurationContext";
import type { Deal } from "../types";
import { ContactList } from "./ContactList";
import { findDealLabel } from "./deal";
+import { ReferenceManyCount } from "../misc/ReferenceManyCount";
+import { UnarchiveButton } from "./UnarchiveButton";
+import { ArchiveButton } from "./ArchiveButton";
export const DealShow = ({ open, id }: { open: boolean; id?: string }) => {
const redirect = useRedirect();
@@ -37,18 +35,20 @@ export const DealShow = ({ open, id }: { open: boolean; id?: string }) => {
return (
);
};
+export const DealShowPage = ({ id }: { id?: string }) => (
+
+
+
+);
+
const DealShowContent = () => {
- const { dealStages } = useConfigurationContext();
+ const isMobile = useIsMobile();
const record = useRecordContext
();
if (!record) return null;
@@ -67,194 +67,195 @@ const DealShowContent = () => {
{record.name}
+
- {record.archived_at ? (
- <>
-
-
-
- ) : (
- <>
-
-
-
- )}
-
-
-
- Expected closing date
-
-
-
- {isValid(new Date(record.expected_closing_date))
- ? format(new Date(record.expected_closing_date), "PP")
- : "Invalid date"}
-
- {new Date(record.expected_closing_date) < new Date() ? (
- Past
- ) : null}
-
-
-
-
-
- Budget
-
-
- {record.amount.toLocaleString("en-US", {
- notation: "compact",
- style: "currency",
- currency: "USD",
- currencyDisplay: "narrowSymbol",
- minimumSignificantDigits: 3,
- })}
-
-
-
- {record.category && (
-
-
- Category
-
-
{record.category}
+ {isMobile ? null : (
+
+ {record.archived_at ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
)}
-
-
-
- Stage
-
-
- {findDealLabel(dealStages, record.stage)}
-
-
- {!!record.contact_ids?.length && (
-
-
-
- Contacts
-
+ {isMobile ? (
+
+
+
+ (
+ <>
+ {total?.toString()} {total === 1 ? "note" : "notes"}
+
+ )}
+ />
+
+
+ (
+ <>
+ {total?.toString()}{" "}
+ {total === 1 ? "contact" : "contacts"}
+
+ )}
+ />
+
+ About
+
+
+ }
+ >
+
+
+
+
-
-
- )}
+
+
+
+
+
+ ) : (
+ <>
+
+ {!!record.contact_ids?.length && (
+
+
+
+ Contacts
+
+
+
+
+
+
+ )}
- {record.description && (
-
-
- Description
-
-
{record.description}
-
- )}
+ {record.description && (
+
+
+ Description
+
+
{record.description}
+
+ )}
-
-
- }
- >
-
-
-
+
+
+ }
+ >
+
+
+
+
+ )}
-
Archived Deal
-
-);
-
-const ArchiveButton = ({ record }: { record: Deal }) => {
- const [update] = useUpdate();
- const redirect = useRedirect();
- const notify = useNotify();
- const refresh = useRefresh();
- const handleClick = () => {
- update(
- "deals",
- {
- id: record.id,
- data: { archived_at: new Date().toISOString() },
- previousData: record,
- },
- {
- onSuccess: () => {
- redirect("list", "deals");
- notify("Deal archived", { type: "info", undoable: false });
- refresh();
- },
- onError: () => {
- notify("Error: deal not archived", { type: "error" });
- },
- },
- );
- };
+const DealDetails = () => {
+ const { dealStages } = useConfigurationContext();
+ const record = useRecordContext();
+ if (!record) return null;
return (
-
- );
-};
-
-const UnarchiveButton = ({ record }: { record: Deal }) => {
- const dataProvider = useDataProvider();
- const redirect = useRedirect();
- const notify = useNotify();
- const refresh = useRefresh();
+
+
+
+ Expected closing date
+
+
+
+ {isValid(new Date(record.expected_closing_date))
+ ? format(new Date(record.expected_closing_date), "PP")
+ : "Invalid date"}
+
+ {new Date(record.expected_closing_date) < new Date() ? (
+ Past
+ ) : null}
+
+
- const { mutate } = useMutation({
- mutationFn: () => dataProvider.unarchiveDeal(record),
- onSuccess: () => {
- redirect("list", "deals");
- notify("Deal unarchived", {
- type: "info",
- undoable: false,
- });
- refresh();
- },
- onError: () => {
- notify("Error: deal not unarchived", { type: "error" });
- },
- });
+
+
+ Budget
+
+
+ {record.amount.toLocaleString("en-US", {
+ notation: "compact",
+ style: "currency",
+ currency: "USD",
+ currencyDisplay: "narrowSymbol",
+ minimumSignificantDigits: 3,
+ })}
+
+
- const handleClick = () => {
- mutate();
- };
+ {record.category && (
+
+
+ Category
+
+ {record.category}
+
+ )}
- return (
-
+
+
+ Stage
+
+
+ {findDealLabel(dealStages, record.stage)}
+
+
+
+
Archived Deal
+
+);
diff --git a/src/components/atomic-crm/deals/UnarchiveButton.tsx b/src/components/atomic-crm/deals/UnarchiveButton.tsx
new file mode 100644
index 00000000..963f0a95
--- /dev/null
+++ b/src/components/atomic-crm/deals/UnarchiveButton.tsx
@@ -0,0 +1,60 @@
+import type { ComponentProps, MouseEvent } from "react";
+import { ArchiveRestore } from "lucide-react";
+import { useMutation } from "@tanstack/react-query";
+import {
+ useDataProvider,
+ useNotify,
+ useRecordContext,
+ useRedirect,
+ useRefresh,
+} from "ra-core";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { Deal } from "../types";
+
+export const UnarchiveButton = ({
+ record: _recordProp,
+ className,
+ onClick,
+ ...props
+}: { record?: Deal } & ComponentProps) => {
+ const dataProvider = useDataProvider();
+ const redirect = useRedirect();
+ const notify = useNotify();
+ const refresh = useRefresh();
+ const record = useRecordContext(props);
+
+ const { mutate } = useMutation({
+ mutationFn: () => dataProvider.unarchiveDeal(record),
+ onSuccess: () => {
+ redirect("list", "deals");
+ notify("Deal unarchived", {
+ type: "info",
+ undoable: false,
+ });
+ refresh();
+ },
+ onError: () => {
+ notify("Error: deal not unarchived", { type: "error" });
+ },
+ });
+
+ const handleClick = (event: MouseEvent) => {
+ mutate();
+ if (onClick) onClick(event);
+ };
+
+ return (
+
+ );
+};
diff --git a/src/components/atomic-crm/deals/index.ts b/src/components/atomic-crm/deals/index.ts
index 82086f28..35cf4b55 100644
--- a/src/components/atomic-crm/deals/index.ts
+++ b/src/components/atomic-crm/deals/index.ts
@@ -1,6 +1,21 @@
import * as React from "react";
+
const DealList = React.lazy(() => import("./DealList"));
+const DealEdit = React.lazy(() =>
+ import("./DealEdit").then(({ DealEditPage }) => ({ default: DealEditPage })),
+);
+const DealShow = React.lazy(() =>
+ import("./DealShow").then(({ DealShowPage }) => ({ default: DealShowPage })),
+);
+const DealCreate = React.lazy(() =>
+ import("./DealCreate").then(({ DealCreatePage }) => ({
+ default: DealCreatePage,
+ })),
+);
export default {
list: DealList,
+ edit: DealEdit,
+ show: DealShow,
+ create: DealCreate,
};
diff --git a/src/components/atomic-crm/filters/FilterCategory.tsx b/src/components/atomic-crm/filters/FilterCategory.tsx
index 64d6e54f..e958fc24 100644
--- a/src/components/atomic-crm/filters/FilterCategory.tsx
+++ b/src/components/atomic-crm/filters/FilterCategory.tsx
@@ -15,6 +15,8 @@ export const FilterCategory = ({
{icon}
-
{children}
+
+ {children}
+
);
diff --git a/src/components/atomic-crm/layout/Header.tsx b/src/components/atomic-crm/layout/Header.tsx
index 71720d85..59c6f959 100644
--- a/src/components/atomic-crm/layout/Header.tsx
+++ b/src/components/atomic-crm/layout/Header.tsx
@@ -1,17 +1,34 @@
import { DropdownMenuItem } from "@/components/ui/dropdown-menu";
-import { Settings, User } from "lucide-react";
+import { Menu, Settings, User } from "lucide-react";
import { CanAccess } from "ra-core";
-import { Link, matchPath, useLocation } from "react-router";
+import { Link, type LinkProps, 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";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { Button } from "@/components/ui/button";
+import {
+ Drawer,
+ DrawerContent,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer";
+import { cn } from "@/lib/utils";
+import { type RefAttributes, useState } from "react";
+import {
+ NavigationMenu,
+ NavigationMenuLink,
+ NavigationMenuList,
+ navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
const Header = () => {
- const { darkModeLogo, lightModeLogo, title } = useConfigurationContext();
const location = useLocation();
+ const isMobile = useIsMobile();
let currentPath: string | boolean = "/";
if (matchPath("/", location.pathname)) {
@@ -29,85 +46,189 @@ const Header = () => {
return (
);
};
-const NavigationTab = ({
+const MobileHeader = ({ currentPath }: { currentPath: string | boolean }) => {
+ const { title } = useConfigurationContext();
+ const [open, setOpen] = useState(false);
+ return (
+
+
+
+
+
+
+
+ Menu
+
+
+
+
+
+ setOpen(false)}
+ ref={(element) => element?.focus()}
+ />
+
+
+ setOpen(false)}
+ />
+
+
+ setOpen(false)}
+ />
+
+
+ setOpen(false)}
+ />
+
+
+
+
+
+
+
{title}
+
+
+
+
+
+
+
+ );
+};
+
+const DesktopHeader = ({ currentPath }: { currentPath: string | boolean }) => {
+ const { darkModeLogo, lightModeLogo, title } = useConfigurationContext();
+ return (
+
+
+
+
+
+
{title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const NavigationLink = ({
label,
to,
isActive,
+ className,
+ ...props
}: {
label: string;
to: string;
isActive: boolean;
-}) => (
-
- {label}
-
-);
+} & LinkProps &
+ RefAttributes
) => {
+ return (
+
+ {label}
+
+ );
+};
const UsersMenu = () => {
const { onClose } = useUserMenu() ?? {};
diff --git a/src/components/atomic-crm/layout/Layout.tsx b/src/components/atomic-crm/layout/Layout.tsx
index ef6ad33f..5393de7e 100644
--- a/src/components/atomic-crm/layout/Layout.tsx
+++ b/src/components/atomic-crm/layout/Layout.tsx
@@ -9,7 +9,10 @@ import Header from "./Header";
export const Layout = ({ children }: { children: ReactNode }) => (
<>
-
+
}>
{children}
diff --git a/src/components/atomic-crm/misc/InfinitePagination.tsx b/src/components/atomic-crm/misc/InfinitePagination.tsx
new file mode 100644
index 00000000..0fff5a37
--- /dev/null
+++ b/src/components/atomic-crm/misc/InfinitePagination.tsx
@@ -0,0 +1,114 @@
+import * as React from "react";
+import { useEffect, useRef } from "react";
+import {
+ useInfinitePaginationContext,
+ useListContext,
+ useEvent,
+} from "ra-core";
+import { Item, ItemContent, ItemMedia, ItemTitle } from "@/components/ui/item";
+import { Spinner } from "@/components/admin/spinner";
+
+/**
+ * A pagination component that loads more results when the user scrolls to the bottom of the list.
+ *
+ * Used as the default pagination component in the component.
+ *
+ * @example
+ * import { InfiniteList, InfinitePagination, Datagrid, TextField } from 'react-admin';
+ *
+ * const PostList = () => (
+ * }>
+ *
+ *
+ *
+ *
+ *
+ * );
+ */
+export const InfinitePagination = ({
+ offline = null,
+ options = defaultOptions,
+}: InfinitePaginationProps) => {
+ const { isPaused, isPending } = useListContext();
+ const { fetchNextPage, hasNextPage, isFetchingNextPage } =
+ useInfinitePaginationContext();
+
+ if (!fetchNextPage) {
+ throw new Error(
+ "InfinitePagination must be used inside an InfinitePaginationContext, usually created by . You cannot use it as child of a component.",
+ );
+ }
+
+ const [hasRequestedNextPage, setHasRequestedNextPage] = React.useState(false);
+ const observerElem = useRef(null);
+ const handleObserver = useEvent<[IntersectionObserverEntry[]], void>(
+ (entries) => {
+ const [target] = entries;
+ if (target.isIntersecting && hasNextPage && !isFetchingNextPage) {
+ setHasRequestedNextPage(true);
+ fetchNextPage();
+ }
+ },
+ );
+
+ useEffect(() => {
+ // Whenever the query is unpaused, reset the requested next page state
+ if (!isPaused) {
+ setHasRequestedNextPage(false);
+ }
+ }, [isPaused]);
+
+ useEffect(() => {
+ const element = observerElem.current;
+ if (!element) return;
+ const observer = new IntersectionObserver(handleObserver, options);
+ observer.observe(element);
+ return () => observer.unobserve(element);
+ }, [
+ fetchNextPage,
+ hasNextPage,
+ handleObserver,
+ options,
+ isPending,
+ isFetchingNextPage,
+ ]);
+
+ if (isPending) return null;
+
+ const showOffline =
+ isPaused &&
+ hasNextPage &&
+ hasRequestedNextPage &&
+ offline !== false &&
+ offline !== undefined;
+
+ return (
+
+ {showOffline ? (
+ offline
+ ) : isFetchingNextPage && hasNextPage ? (
+ -
+
+
+
+
+ Loading...
+
+
+ ) : (
+ -
+
+
+
+
+ )}
+
+ );
+};
+
+const defaultOptions = { threshold: 0 };
+
+export interface InfinitePaginationProps {
+ offline?: React.ReactNode;
+ options?: IntersectionObserverInit;
+}
diff --git a/src/components/atomic-crm/misc/ReferenceManyCount.tsx b/src/components/atomic-crm/misc/ReferenceManyCount.tsx
new file mode 100644
index 00000000..07cfd5d2
--- /dev/null
+++ b/src/components/atomic-crm/misc/ReferenceManyCount.tsx
@@ -0,0 +1,45 @@
+import {
+ ReferenceManyCountBaseProps,
+ useTimeout,
+ useReferenceManyFieldController,
+} from "ra-core";
+
+export const ReferenceManyCount = (
+ props: ReferenceManyCountBaseProps & {
+ render: (total: number | undefined) => React.ReactNode;
+ },
+) => {
+ const { loading, error, offline, render, timeout = 1000, ...rest } = props;
+ const oneSecondHasPassed = useTimeout(timeout);
+
+ const {
+ isPaused,
+ isPending,
+ error: fetchError,
+ total,
+ } = useReferenceManyFieldController({
+ ...rest,
+ page: 1,
+ perPage: 1,
+ });
+ const shouldRenderLoading =
+ isPending && !isPaused && loading !== undefined && loading !== false;
+ const shouldRenderOffline =
+ isPending && isPaused && offline !== undefined && offline !== false;
+ const shouldRenderError =
+ !isPending && fetchError && error !== undefined && error !== false;
+
+ return (
+ <>
+ {shouldRenderLoading
+ ? oneSecondHasPassed
+ ? loading
+ : null
+ : shouldRenderOffline
+ ? offline
+ : shouldRenderError
+ ? error
+ : render(total)}
+
+ );
+};
diff --git a/src/components/atomic-crm/misc/ResponsiveFilters.tsx b/src/components/atomic-crm/misc/ResponsiveFilters.tsx
new file mode 100644
index 00000000..55725cea
--- /dev/null
+++ b/src/components/atomic-crm/misc/ResponsiveFilters.tsx
@@ -0,0 +1,88 @@
+import { useRef, useState } from "react";
+import { FilterLiveForm } from "ra-core";
+import { SearchInput, type SearchInputProps } from "@/components/admin";
+import {
+ Drawer,
+ DrawerClose,
+ DrawerContent,
+ DrawerFooter,
+ DrawerHeader,
+ DrawerTitle,
+ DrawerTrigger,
+} from "@/components/ui/drawer";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+const TIMEOUT_DURATION_IN_SECONDS = 0.5;
+
+export const ResponsiveFilters = ({
+ children,
+ searchInput,
+}: {
+ children: React.ReactNode;
+ searchInput: Partial;
+}) => {
+ const [open, setOpen] = useState(false);
+ const { source = "q", className, ...otherSearchInputProps } = searchInput;
+ const isMobile = useIsMobile();
+ const dialogContentRef = useRef(null);
+
+ if (isMobile) {
+ return (
+ setOpen(false)} modal={false}>
+
+
+ {
+ setOpen(true);
+ setTimeout(() => {
+ if (!dialogContentRef.current) return;
+ const input = event.target as HTMLInputElement;
+ dialogContentRef.current.style.top =
+ input.getBoundingClientRect().bottom +
+ input.clientTop +
+ 7 +
+ "px";
+ }, TIMEOUT_DURATION_IN_SECONDS);
+ }}
+ onKeyDown={() => setOpen(false)}
+ className={cn("pb-2", className)}
+ {...otherSearchInputProps}
+ />
+
+
+
+
+ Filters
+
+ {children}
+
+
+
+
+
+
+
+ );
+ }
+
+ return (
+
+
+ setOpen(false)}
+ {...otherSearchInputProps}
+ />
+
+
+ {children}
+
+ );
+};
diff --git a/src/components/atomic-crm/misc/SearchForm.tsx b/src/components/atomic-crm/misc/SearchForm.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/atomic-crm/notes/Note.tsx b/src/components/atomic-crm/notes/Note.tsx
index 7005aa1b..c2bdacf6 100644
--- a/src/components/atomic-crm/notes/Note.tsx
+++ b/src/components/atomic-crm/notes/Note.tsx
@@ -1,4 +1,4 @@
-import { CircleX, Edit, Save, Trash2 } from "lucide-react";
+import { CircleX, Edit, MoreVertical, Save, Trash2 } from "lucide-react";
import {
Form,
useDelete,
@@ -17,6 +17,7 @@ import {
TooltipProvider,
TooltipTrigger,
} from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
import { CompanyAvatar } from "../companies/CompanyAvatar";
import { Avatar } from "../contacts/Avatar";
@@ -26,6 +27,12 @@ import { SaleName } from "../sales/SaleName";
import type { ContactNote, DealNote } from "../types";
import { NoteAttachments } from "./NoteAttachments";
import { NoteInputs } from "./NoteInputs";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
export const Note = ({
showStatus,
@@ -39,6 +46,7 @@ export const Note = ({
const [isEditing, setEditing] = useState(false);
const resource = useResourceContext();
const notify = useNotify();
+ const isMobile = useIsMobile();
const [update, { isPending }] = useUpdate();
@@ -84,67 +92,108 @@ export const Note = ({
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
-
- {resource === "contactNote" ? (
-
- ) : (
-
-
-
- )}
-
-
- } />
- {" "}
- added a note{" "}
- {showStatus && note.status && (
-
+
+
+
+ {resource === "contactNote" ? (
+
+ ) : (
+
+
+
+ )}
+
+
+ } />
+ {" "}
+ added a note{" "}
+ {showStatus && note.status && (
+
+ )}
+
+
+ {isMobile ? (
+
+
+ Actions
+
+
+
+
+
+
+
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+ Edit note
+
+
+
+
+
+
+
+
+
+ Delete note
+
+
+
+
)}
-
-
-
-
-
-
-
- Edit note
-
-
-
-
-
-
-
-
-
- Delete note
-
-
-
-
-
+
diff --git a/src/components/atomic-crm/root/CRM.tsx b/src/components/atomic-crm/root/CRM.tsx
index 6a87ee16..ef70a318 100644
--- a/src/components/atomic-crm/root/CRM.tsx
+++ b/src/components/atomic-crm/root/CRM.tsx
@@ -39,6 +39,7 @@ import {
} from "./defaultConfiguration";
import { i18nProvider } from "./i18nProvider";
import { StartPage } from "../login/StartPage.tsx";
+import { useIsMobile } from "@/hooks/use-mobile.ts";
export type CRMProps = {
dataProvider?: DataProvider;
@@ -102,6 +103,7 @@ export const CRM = ({
disableTelemetry,
...rest
}: CRMProps) => {
+ const isMobile = useIsMobile();
useEffect(() => {
if (
disableTelemetry ||
@@ -153,7 +155,13 @@ export const CRM = ({
} />
-
+
diff --git a/src/components/atomic-crm/tasks/AddTask.tsx b/src/components/atomic-crm/tasks/AddTask.tsx
index d5f4e04e..9f0748ec 100644
--- a/src/components/atomic-crm/tasks/AddTask.tsx
+++ b/src/components/atomic-crm/tasks/AddTask.tsx
@@ -34,6 +34,8 @@ import {
import { contactOptionText } from "../misc/ContactOption";
import { useConfigurationContext } from "../root/ConfigurationContext";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
export const AddTask = ({
selectContact,
@@ -49,6 +51,7 @@ export const AddTask = ({
const { taskTypes } = useConfigurationContext();
const contact = useRecordContext();
const [open, setOpen] = useState(false);
+ const isMobile = useIsMobile();
const handleOpen = () => {
setOpen(true);
};
@@ -93,9 +96,12 @@ export const AddTask = ({