refactor: app crm example (#4871)

* chore: delete unused component * chore: add `index.ts` to export route components * refactor: create a custom avatar component to handle all avatars * refactor: calender components * fix: move quotes components under the components/quotes * fix: move company components under the components/company * refactor: seperate contact components * fix: add missing type * fix: add debounce to compony search * fix: calender page style issues * fix: calander show drawer issue * fix: datepicker bg color * fix: padding issues on event timeline * fix: compony create logic * fix: add "see calendar" button * fix: color picker input * fix: add delete button to card * fix: update contact page style issues * fix: contact modal drawer style issues * chore: fix build errorr * feat(app-crm): randomly select user email (#4877) * feat(app-crm) company detail page (#4873) * feat(app-crm): add company detail page * fix(app-crm): typo * feat(app-crm): add company notes * feat(app-crm): add missing fields and filters * feat(app-crm): add resource to useTable * fix(app-crm): disable company list query on create page * feat(app-crm): persist table filters * feat(app-crm): memoize avatar * feat(app-crm): use drag overlay --------- Co-authored-by: Alican Erdurmaz <[email protected]>
refinedev · Aug 30, 2023 · c9e4ab6 · c9e4ab6
1 parent ba7c974
commit c9e4ab6
Show file tree

Hide file tree

Showing 78 changed files with 3,359 additions and 1,213 deletions.
diff --git a/examples/app-crm/src/App.tsx b/examples/app-crm/src/App.tsx
@@ -1,7 +1,6 @@
 import { Refine, Authenticated } from "@refinedev/core";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { notificationProvider, ErrorComponent } from "@refinedev/antd";
-
 import routerProvider, {
     NavigateToResource,
     CatchAllNavigate,
@@ -16,23 +15,33 @@ import "@refinedev/antd/dist/reset.css";
 import { authProvider } from "./providers/auth";
 import { dataProvider, liveProvider } from "./providers/data";
 import { resources } from "./providers/resources";
+import { themeConfig } from "./providers/antd";
+
+import { Layout } from "./components/layout";
 
 import { LoginPage } from "./routes/login";
 import { RegisterPage } from "./routes/register";
 import { ForgotPasswordPage } from "./routes/forgot-password";
 import { UpdatePasswordPage } from "./routes/update-password";
-
-import { DashboardPage } from "./routes/dashboard/index";
-
-import { CalendarPageWrapper } from "./routes/calendar/wrapper";
+import { DashboardPage } from "./routes/dashboard";
+import {
+    CalendarPageWrapper,
+    CalendarShowPage,
+    CalendarEditPage,
+    CalendarCreatePage,
+} from "./routes/calendar";
 import {
     KanbanPage,
     KanbanCreatePage,
     KanbanEditPage,
     KanbanCreateStage,
     KanbanEditStage,
 } from "./routes/scrumboard/kanban";
-import { CompanyListPage, CompanyShowPage } from "./routes/companies";
+import {
+    CompanyEditPage,
+    CompanyListPage,
+    CompanyCreatePage,
+} from "./routes/companies";
 import {
     SalesPage,
     SalesCreatePage,
@@ -41,10 +50,12 @@ import {
     SalesEditStage,
     SalesCreateDetails,
 } from "./routes/scrumboard/sales";
-import { ContactsPageWrapper } from "./routes/contacts/wrapper";
-import { ContactCreatePage } from "./routes/contacts/create";
-import { ContactEditPage } from "./routes/contacts/edit";
-import { ContactShowPage } from "./routes/contacts/show";
+import {
+    ContactsPageWrapper,
+    ContactCreatePage,
+    ContactEditPage,
+    ContactShowPage,
+} from "./routes/contacts";
 import {
     QuotesListPage,
     QuotesCreatePage,
@@ -53,12 +64,6 @@ import {
 } from "./routes/quotes";
 import { SettingsPage } from "./routes/administration/settings";
 import { AuditLogPage } from "./routes/administration/audit-log";
-import { Layout } from "./components/layout";
-import { themeConfig } from "./providers/antd";
-import { CalendarShowPage } from "./routes/calendar/show";
-import { CalendarEditPage } from "./routes/calendar/edit";
-import { CalendarCreatePage } from "./routes/calendar/create";
-import { CompanyCreatePage } from "./routes/companies/create";
 
 import "./utilities/init-dayjs";
 
@@ -186,15 +191,23 @@ const App: React.FC = () => {
                                     />
                                 </Route>
                             </Route>
-
-                            <Route path="/companies">
-                                <Route index element={<CompanyListPage />} />
+                            <Route
+                                path="/companies"
+                                element={
+                                    <CompanyListPage>
+                                        <Outlet />
+                                    </CompanyListPage>
+                                }
+                            >
                                 <Route
-                                    path=":id"
-                                    element={<CompanyShowPage />}
+                                    path="create"
+                                    element={<CompanyCreatePage />}
                                 />
                             </Route>
-
+                            <Route
+                                path="/companies/edit/:id"
+                                element={<CompanyEditPage />}
+                            />
                             <Route
                                 path="/contacts"
                                 element={
@@ -203,7 +216,7 @@ const App: React.FC = () => {
                                     </ContactsPageWrapper>
                                 }
                             >
-                                <Route index />
+                                <Route index element={null} />
                                 <Route
                                     path="show/:id"
                                     element={<ContactShowPage />}
@@ -238,13 +251,34 @@ const App: React.FC = () => {
                             >
                                 <Route
                                     path="create"
-                                    element={<QuotesCreatePage />}
-                                />
-
+                                    element={
+                                        <QuotesCreatePage>
+                                            <Outlet />
+                                        </QuotesCreatePage>
+                                    }
+                                >
+                                    <Route
+                                        path="company-create"
+                                        element={
+                                            <CompanyCreatePage isOverModal />
+                                        }
+                                    />
+                                </Route>
                                 <Route
                                     path="edit/:id"
-                                    element={<QuotesEditPage />}
-                                />
+                                    element={
+                                        <QuotesEditPage>
+                                            <Outlet />
+                                        </QuotesEditPage>
+                                    }
+                                >
+                                    <Route
+                                        path="company-create"
+                                        element={
+                                            <CompanyCreatePage isOverModal />
+                                        }
+                                    />
+                                </Route>
                             </Route>
                             <Route
                                 path="/quotes/show/:id"

diff --git a/examples/app-crm/src/components/calendar/calendar-cell.tsx b/examples/app-crm/src/components/calendar/calendar-cell.tsx
@@ -0,0 +1,47 @@
+import { Badge } from "antd";
+import dayjs, { Dayjs } from "dayjs";
+
+import { Text } from "../text";
+import { Event } from "../../interfaces/graphql";
+
+type CalendarCellProps = {
+    value: Dayjs;
+    events: Event[];
+    onClickEvent?: (event: Event) => void;
+};
+
+export const CalendarCell: React.FC<CalendarCellProps> = ({
+    events,
+    value,
+    onClickEvent,
+}) => {
+    const todayEvents = events.filter((event) => {
+        const startDate = dayjs(event.startDate);
+        const endDate = dayjs(event.endDate);
+
+        return (
+            startDate.isSame(value, "day") ||
+            endDate.isSame(value, "day") ||
+            (startDate.isBefore(value, "day") && endDate.isAfter(value, "day"))
+        );
+    });
+
+    return (
+        <div>
+            {todayEvents.slice(0, 3).map((item) => (
+                <div onClick={() => onClickEvent?.(item)} key={item.id}>
+                    <Text ellipsis={{ tooltip: true }}>
+                        <Badge
+                            style={{ marginRight: "0.5rem" }}
+                            color={item.color}
+                        />
+                        {item.title}
+                    </Text>
+                </div>
+            ))}
+            {todayEvents.length > 3 && (
+                <Text strong>{todayEvents.length - 3} more</Text>
+            )}
+        </div>
+    );
+};
diff --git a/...onents/calender/calendar/index.module.css → ...onents/calendar/calendar/index.module.css b/...onents/calender/calendar/index.module.css → ...onents/calendar/calendar/index.module.css
diff --git a/...rc/components/calender/calendar/index.tsx → ...rc/components/calendar/calendar/index.tsx b/...rc/components/calender/calendar/index.tsx → ...rc/components/calendar/calendar/index.tsx
@@ -1,63 +1,20 @@
 import React from "react";
 import { useList } from "@refinedev/core";
-import { Calendar as AntdCalendar, Card, Button, Badge } from "antd";
+import { Calendar as AntdCalendar, Card, Button } from "antd";
 import { LeftOutlined, RightOutlined } from "@ant-design/icons";
 import dayjs, { Dayjs } from "dayjs";
 
 import { Text } from "../../text";
+import { CalendarCell } from "../calendar-cell";
 import { Event } from "../../../interfaces/graphql";
+
 import styles from "./index.module.css";
 
 type CalendarProps = {
     categoryId?: string[];
     onClickEvent?: (event: Event) => void;
 };
 
-type CalendarCellProps = {
-    value: Dayjs;
-    events: Event[];
-} & CalendarProps;
-
-const CalendarCell: React.FC<CalendarCellProps> = ({
-    events,
-    value,
-    onClickEvent,
-}) => {
-    const todayEvents = events.filter((event) => {
-        const startDate = dayjs(event.startDate);
-        const endDate = dayjs(event.endDate);
-
-        return (
-            startDate.isSame(value, "day") ||
-            endDate.isSame(value, "day") ||
-            (startDate.isBefore(value, "day") && endDate.isAfter(value, "day"))
-        );
-    });
-
-    return (
-        <div>
-            {todayEvents.slice(0, 3).map((item) => (
-                <div onClick={() => onClickEvent?.(item)} key={item.id}>
-                    <Text
-                        ellipsis={{
-                            tooltip: true,
-                        }}
-                    >
-                        <Badge
-                            style={{ marginRight: "0.5rem" }}
-                            color={item.color}
-                        />
-                        {item.title}
-                    </Text>
-                </div>
-            ))}
-            {todayEvents.length > 3 && (
-                <Text strong>{todayEvents.length - 3} more</Text>
-            )}
-        </div>
-    );
-};
-
 export const Calendar: React.FC<CalendarProps> = ({
     categoryId,
     onClickEvent,
@@ -68,7 +25,7 @@ export const Calendar: React.FC<CalendarProps> = ({
 
     const { data } = useList<Event>({
         pagination: {
-            pageSize: 9999,
+            mode: "off",
         },
         filters: [
             {

diff --git a/...ents/calender/categories/index.module.css → ...ents/calendar/categories/index.module.css b/...ents/calender/categories/index.module.css → ...ents/calendar/categories/index.module.css
diff --git a/.../components/calender/categories/index.tsx → .../components/calendar/categories/index.tsx b/.../components/calender/categories/index.tsx → .../components/calendar/categories/index.tsx
@@ -1,18 +1,19 @@
 import React from "react";
-import { Button, Card, theme, CardProps, Checkbox, Skeleton } from "antd";
+import { Button, Card, theme, Checkbox, Skeleton } from "antd";
 import { useList } from "@refinedev/core";
+import { useModal } from "@refinedev/antd";
 import { SettingOutlined, FlagOutlined } from "@ant-design/icons";
+import { CheckboxChangeEvent } from "antd/es/checkbox";
 
 import { Text } from "../../text";
 import { CalendarManageCategories } from "../manage-categories";
-
 import { EventCategory } from "../../../interfaces/graphql";
+
 import styles from "./index.module.css";
-import { useModal } from "@refinedev/antd";
 
 type CalendarCategoriesProps = {
-    onChange?: (e: any) => void;
-} & CardProps;
+    onChange?: (e: CheckboxChangeEvent) => void;
+};
 
 export const CalendarCategories: React.FC<CalendarCategoriesProps> = ({
     onChange,

diff --git a/...rm/src/components/calender/form/index.tsx → ...rm/src/components/calendar/form/index.tsx b/...rm/src/components/calender/form/index.tsx → ...rm/src/components/calendar/form/index.tsx
@@ -100,7 +100,7 @@ export const CalendarForm: React.FC<CalendarFormProps> = ({
                         noStyle
                     >
                         <RangePicker
-                            style={{ width: "100%" }}
+                            style={{ width: "100%", backgroundColor: "#fff" }}
                             showTime={!isAllDayEvent}
                             format={
                                 isAllDayEvent
@@ -134,12 +134,33 @@ export const CalendarForm: React.FC<CalendarFormProps> = ({
                                 required: true,
                             },
                         ]}
-                        initialValue={"#000000"}
+                        initialValue={"#1677FF"}
                     >
                         <Input hidden />
                         <Form.Item noStyle>
                             <ColorPicker
-                                defaultValue="#000000"
+                                defaultValue="#1677FF"
+                                panelRender={(
+                                    _,
+                                    { components: { Presets } },
+                                ) => <Presets />}
+                                presets={[
+                                    {
+                                        label: "Recommended",
+                                        colors: [
+                                            "#F5222D",
+                                            "#FA8C16",
+                                            "#FADB14",
+                                            "#8BBB11",
+                                            "#52C41A",
+                                            "#13A8A8",
+                                            "#1677FF",
+                                            "#2F54EB",
+                                            "#722ED1",
+                                            "#EB2F96",
+                                        ],
+                                    },
+                                ]}
                                 onChangeComplete={(value) => {
                                     return form?.setFieldValue(
                                         "color",

diff --git a/examples/app-crm/src/components/calendar/index.ts b/examples/app-crm/src/components/calendar/index.ts
@@ -0,0 +1,4 @@
+export * from "./calendar";
+export * from "./upcoming-events";
+export * from "./categories";
+export * from "./calendar-cell";
diff --git a/...lender/manage-categories/index.module.css → ...lendar/manage-categories/index.module.css b/...lender/manage-categories/index.module.css → ...lendar/manage-categories/index.module.css
diff --git a/...ents/calender/manage-categories/index.tsx → ...ents/calendar/manage-categories/index.tsx b/...ents/calender/manage-categories/index.tsx → ...ents/calendar/manage-categories/index.tsx
diff --git a/.../calender/upcoming-events/event/index.tsx → .../calendar/upcoming-events/event/index.tsx b/.../calender/upcoming-events/event/index.tsx → .../calendar/upcoming-events/event/index.tsx
@@ -69,16 +69,9 @@ export const CalendarUpcomingEvent: React.FC<CalendarUpcomingEventProps> = ({
         >
             <div className={styles.date}>
                 <Badge color={color} className={styles.badge} />
-
                 <Text size="xs">{`${renderDate()}, ${renderTime()}`}</Text>
             </div>
-            <Text
-                ellipsis={{
-                    tooltip: true,
-                }}
-                strong
-                className={styles.title}
-            >
+            <Text ellipsis={{ tooltip: true }} strong className={styles.title}>
                 {title}
             </Text>
         </div>

diff --git a/...calender/upcoming-events/index.module.css → ...calendar/upcoming-events/index.module.css b/...calender/upcoming-events/index.module.css → ...calendar/upcoming-events/index.module.css
@@ -8,11 +8,11 @@
     }
 
     .badge {
-        margin-right: 0.7rem;
+        margin-right: 1.1rem;
     }
 
     .title {
-        padding-left: 1rem;
+        padding-left: 1.5rem;
     }
 }