18 |
43 | )
44 | }
45 |
46 | export default KanbanItem
--------------------------------------------------------------------------------
/src/components/tasks/kanban/board.tsx:
--------------------------------------------------------------------------------
1 | import { DndContext, DragEndEvent, MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core'
2 | import React from 'react'
3 |
4 | export const KanbanBoardContainer = ({ children }: React.PropsWithChildren) => {
5 | return (
6 |
29 | {active?.id === id && (
30 |
31 |
39 | )}
40 | {children}
41 |
42 |
36 | {children}
37 |
38 |
15 |
27 | )
28 | }
29 |
30 | type Props = {
31 | onDragEnd: (event: DragEndEvent) => void
32 | }
33 |
34 | export const KanbanBoard = ({ children, onDragEnd }: React.PropsWithChildren
24 | {children}
25 |
26 |
13 |
59 | );
60 | };
61 |
62 | export default KanbanColumnSkeleton;
--------------------------------------------------------------------------------
/src/components/accordion.tsx:
--------------------------------------------------------------------------------
1 | import { AccordionHeaderSkeleton } from "@/components";
2 | import { Text } from "./text";
3 |
4 | type Props = React.PropsWithChildren<{
5 | accordionKey: string;
6 | activeKey?: string;
7 | setActive: (key?: string) => void;
8 | fallback: string | React.ReactNode;
9 | isLoading?: boolean;
10 | icon: React.ReactNode;
11 | label: string;
12 | }>;
13 |
14 | /**
15 | * when activeKey is equal to accordionKey, the children will be rendered. Otherwise, the fallback will be rendered
16 | * when isLoading is true, the
18 |
24 |
39 |
40 |
47 |
58 |
55 | {children}
56 |
57 |
51 |
72 | );
73 | };
74 |
--------------------------------------------------------------------------------
/src/components/layout/current-user.tsx:
--------------------------------------------------------------------------------
1 | import { Popover, Button } from 'antd'
2 | import CustomAvatar from '../custom-avatar'
3 | import { useGetIdentity } from '@refinedev/core'
4 |
5 | import type { User } from '@/graphql/schema.types'
6 | import { Text } from '../text'
7 | import { SettingOutlined } from '@ant-design/icons'
8 | import { useState } from 'react'
9 | import { AccountSettings } from './account-settings'
10 |
11 | const CurrentUser = () => {
12 | const [isOpen, setIsOpen] = useState(false)
13 | const { data: user } = useGetIdentity{icon}
52 | {isActive ? (
53 |
61 |
62 | {label}
63 |
64 | {children}
65 |
66 | ) : (
67 |
68 | {fallback}
69 |
70 | )}
71 |
20 |
24 | {user?.name}
25 |
26 |
46 | )
47 |
48 | return (
49 | <>
50 |
35 | }
38 | type="text"
39 | block
40 | onClick={() => setIsOpen(true)}
41 | >
42 | Account Settings
43 |
44 |
45 |
18 |
19 |
41 |
42 |
48 |
69 |
70 |
76 |
80 |
81 | )
82 | }
--------------------------------------------------------------------------------
/src/components/home/deals-chart.tsx:
--------------------------------------------------------------------------------
1 | import { DollarOutlined } from '@ant-design/icons'
2 | import { Card } from 'antd'
3 | import React from 'react'
4 | import { Text } from '../text'
5 | import { Area, AreaConfig } from '@ant-design/plots'
6 | import { useList } from '@refinedev/core'
7 | import { DASHBOARD_DEALS_CHART_QUERY } from '@/graphql/queries'
8 | import { mapDealsData } from '@/utilities/helpers'
9 | import { GetFieldsFromList } from '@refinedev/nestjs-query'
10 | import { DashboardDealsChartQuery } from '@/graphql/types'
11 |
12 | const DealsChart = () => {
13 | const { data } = useList
39 |
84 | )
85 | }
86 |
87 | export default KanbanColumn
--------------------------------------------------------------------------------
/src/graphql/mutations.ts:
--------------------------------------------------------------------------------
1 | import gql from "graphql-tag";
2 |
3 | // Mutation to update user
4 | export const UPDATE_USER_MUTATION = gql`
5 | # The ! after the type means that it is required
6 | mutation UpdateUser($input: UpdateOneUserInput!) {
7 | # call the updateOneUser mutation with the input and pass the $input argument
8 | # $variableName is a convention for GraphQL variables
9 | updateOneUser(input: $input) {
10 | id
11 | name
12 | avatarUrl
13 | email
14 | phone
15 | jobTitle
16 | }
17 | }
18 | `;
19 |
20 | // Mutation to create company
21 | export const CREATE_COMPANY_MUTATION = gql`
22 | mutation CreateCompany($input: CreateOneCompanyInput!) {
23 | createOneCompany(input: $input) {
24 | id
25 | salesOwner {
26 | id
27 | }
28 | }
29 | }
30 | `;
31 |
32 | // Mutation to update company details
33 | export const UPDATE_COMPANY_MUTATION = gql`
34 | mutation UpdateCompany($input: UpdateOneCompanyInput!) {
35 | updateOneCompany(input: $input) {
36 | id
37 | name
38 | totalRevenue
39 | industry
40 | companySize
41 | businessType
42 | country
43 | website
44 | avatarUrl
45 | salesOwner {
46 | id
47 | name
48 | avatarUrl
49 | }
50 | }
51 | }
52 | `;
53 |
54 | // Mutation to update task stage of a task
55 | export const UPDATE_TASK_STAGE_MUTATION = gql`
56 | mutation UpdateTaskStage($input: UpdateOneTaskInput!) {
57 | updateOneTask(input: $input) {
58 | id
59 | }
60 | }
61 | `;
62 |
63 | // Mutation to create a new task
64 | export const CREATE_TASK_MUTATION = gql`
65 | mutation CreateTask($input: CreateOneTaskInput!) {
66 | createOneTask(input: $input) {
67 | id
68 | title
69 | stage {
70 | id
71 | title
72 | }
73 | }
74 | }
75 | `;
76 |
77 | // Mutation to update a task details
78 | export const UPDATE_TASK_MUTATION = gql`
79 | mutation UpdateTask($input: UpdateOneTaskInput!) {
80 | updateOneTask(input: $input) {
81 | id
82 | title
83 | completed
84 | description
85 | dueDate
86 | stage {
87 | id
88 | title
89 | }
90 | users {
91 | id
92 | name
93 | avatarUrl
94 | }
95 | checklist {
96 | title
97 | checked
98 | }
99 | }
100 | }
101 | `;
102 |
--------------------------------------------------------------------------------
/src/utilities/helpers.ts:
--------------------------------------------------------------------------------
1 | import dayjs from "dayjs";
2 | import { GetFieldsFromList } from "@refinedev/nestjs-query";
3 |
4 | import { DashboardDealsChartQuery } from "@/graphql/types";
5 |
6 | type DealStage = GetFieldsFromList
40 |
41 |
42 |
51 | {title}
52 |
53 | {!!count &&
55 | }
58 | onClick={onAddClickHandler}
59 | />
60 |
61 | {description}
62 |
63 |
72 |
83 |
80 | {children}
81 |
82 |
70 |
71 |
74 |
77 |
78 |
79 |
80 | );
81 | };
82 |
--------------------------------------------------------------------------------
/src/components/home/total-count-card.tsx:
--------------------------------------------------------------------------------
1 | import { totalCountVariants } from "@/constants"
2 | import { Card, Skeleton } from "antd"
3 | import { Text } from "../text"
4 | import { Area, AreaConfig } from "@ant-design/plots"
5 |
6 | type Props = {
7 | resource: "companies" | "contacts" | "deals",
8 | isLoading: boolean,
9 | totalCount?: number
10 | }
11 |
12 | const DashboardTotalCountCard = ({
13 | resource,
14 | isLoading,
15 | totalCount
16 | }: Props) => {
17 | const { primaryColor, secondaryColor, icon, title } = totalCountVariants[resource];
18 |
19 | const config: AreaConfig = {
20 | data: totalCountVariants[resource].data,
21 | xField: 'index',
22 | yField: 'value',
23 | appendPadding: [1, 0, 0, 0],
24 | padding: 0,
25 | syncViewPadding: true,
26 | autoFit: true,
27 | tooltip: false,
28 | animation: false,
29 | xAxis: false,
30 | yAxis: {
31 | tickCount: 12,
32 | label: {
33 | style: {
34 | stroke: 'transparent'
35 | }
36 | },
37 | grid: {
38 | line: {
39 | style: {
40 | stroke: 'transparent'
41 | }
42 | }
43 | }
44 | },
45 | smooth: true,
46 | line: {
47 | color: primaryColor,
48 | },
49 | areaStyle: () => {
50 | return {
51 | fill: `l(270) 0:#fff 0.2${secondaryColor} 1:${primaryColor}`
52 | }
53 | }
54 | }
55 |
56 | return (
57 |
70 | {icon}
71 |
72 | {title}
73 |
74 |
75 |
78 |
90 | {isLoading ? (
91 |
101 |
102 |
103 | - ({
54 | id: index,
55 | }))}
56 | renderItem={() =>
- {
63 | const renderDate = getDate(item.startDate, item.endDate)
64 |
65 | return (
66 |
63 |
82 |
83 |
86 |
89 |
90 |
91 | );
92 | };
93 |
--------------------------------------------------------------------------------
/graphql.config.ts:
--------------------------------------------------------------------------------
1 | import type { IGraphQLConfig } from "graphql-config";
2 |
3 | const config: IGraphQLConfig = {
4 | // define graphQL schema provided by Refine
5 | schema: "https://api.crm.refine.dev/graphql",
6 | extensions: {
7 | // codegen is a plugin that generates typescript types from GraphQL schema
8 | // https://the-guild.dev/graphql/codegen
9 | codegen: {
10 | // hooks are commands that are executed after a certain event
11 | hooks: {
12 | afterOneFileWrite: ["eslint --fix", "prettier --write"],
13 | },
14 | // generates typescript types from GraphQL schema
15 | generates: {
16 | // specify the output path of the generated types
17 | "src/graphql/schema.types.ts": {
18 | // use typescript plugin
19 | plugins: ["typescript"],
20 | // set the config of the typescript plugin
21 | // this defines how the generated types will look like
22 | config: {
23 | skipTypename: true, // skipTypename is used to remove __typename from the generated types
24 | enumsAsTypes: true, // enumsAsTypes is used to generate enums as types instead of enums.
25 | // scalars is used to define how the scalars i.e. DateTime, JSON, etc. will be generated
26 | // scalar is a type that is not a list and does not have fields. Meaning it is a primitive type.
27 | scalars: {
28 | // DateTime is a scalar type that is used to represent date and time
29 | DateTime: {
30 | input: "string",
31 | output: "string",
32 | format: "date-time",
33 | },
34 | },
35 | },
36 | },
37 | // generates typescript types from GraphQL operations
38 | // graphql operations are queries, mutations, and subscriptions we write in our code to communicate with the GraphQL API
39 | "src/graphql/types.ts": {
40 | // preset is a plugin that is used to generate typescript types from GraphQL operations
41 | // import-types suggests to import types from schema.types.ts or other files
42 | // this is used to avoid duplication of types
43 | // https://the-guild.dev/graphql/codegen/plugins/presets/import-types-preset
44 | preset: "import-types",
45 | // documents is used to define the path of the files that contain GraphQL operations
46 | documents: ["src/**/*.{ts,tsx}"],
47 | // plugins is used to define the plugins that will be used to generate typescript types from GraphQL operations
48 | plugins: ["typescript-operations"],
49 | config: {
50 | skipTypename: true,
51 | enumsAsTypes: true,
52 | // determine whether the generated types should be resolved ahead of time or not.
53 | // When preResolveTypes is set to false, the code generator will not try to resolve the types ahead of time.
54 | // Instead, it will generate more generic types, and the actual types will be resolved at runtime.
55 | preResolveTypes: false,
56 | // useTypeImports is used to import types using import type instead of import.
57 | useTypeImports: true,
58 | },
59 | // presetConfig is used to define the config of the preset
60 | presetConfig: {
61 | typesPath: "./schema.types",
62 | },
63 | },
64 | },
65 | },
66 | },
67 | };
68 |
69 | export default config;
--------------------------------------------------------------------------------
/src/components/tasks/form/users.tsx:
--------------------------------------------------------------------------------
1 | import { useForm, useSelect } from "@refinedev/antd";
2 | import { HttpError } from "@refinedev/core";
3 | import {
4 | GetFields,
5 | GetFieldsFromList,
6 | GetVariables,
7 | } from "@refinedev/nestjs-query";
8 |
9 | import { Button, Form, Select, Space } from "antd";
10 |
11 | import {
12 | UpdateTaskMutation,
13 | UpdateTaskMutationVariables,
14 | UsersSelectQuery,
15 | } from "@/graphql/types";
16 |
17 | import { USERS_SELECT_QUERY } from "@/graphql/queries";
18 | import { UPDATE_TASK_MUTATION } from "@/graphql/mutations";
19 |
20 | type Props = {
21 | initialValues: {
22 | userIds?: { label: string; value: string }[];
23 | };
24 | cancelForm: () => void;
25 | };
26 |
27 | export const UsersForm = ({ initialValues, cancelForm }: Props) => {
28 | // use the useForm hook to manage the form to add users to a task (assign task to users)
29 | const { formProps, saveButtonProps } = useForm<
30 | GetFields
78 |
93 |
94 |
97 |
100 |
101 |
102 | );
103 | };
104 |
--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { Authenticated, GitHubBanner, Refine, WelcomePage } from "@refinedev/core";
2 | import { DevtoolsPanel, DevtoolsProvider } from "@refinedev/devtools";
3 | import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
4 |
5 | import { useNotificationProvider } from "@refinedev/antd";
6 | import "@refinedev/antd/dist/reset.css";
7 |
8 | import { authProvider, dataProvider, liveProvider } from "./providers";
9 | import { Home, ForgotPassword, Login, Register, CompanyList } from "./pages";
10 |
11 | import routerBindings, {
12 | CatchAllNavigate,
13 | DocumentTitleHandler,
14 | UnsavedChangesNotifier,
15 | } from "@refinedev/react-router-v6";
16 | import { App as AntdApp } from "antd";
17 | import { BrowserRouter, Outlet, Route, Routes } from "react-router-dom";
18 | import Layout from "./components/layout";
19 | import { resources } from "./config/resources";
20 | import Create from "./pages/company/create";
21 | import Edit from "./pages/company/edit";
22 | import List from "./pages/tasks/list";
23 | import EditTask from "./pages/tasks/edit";
24 | import CreateTask from "./pages/tasks/create";
25 |
26 | function App() {
27 | return (
28 |
36 |
37 |
43 |
90 |
91 |
92 |
96 |
97 | )
98 | }
99 |
100 | export default EditPage
--------------------------------------------------------------------------------
/src/components/home/latest-activities.tsx:
--------------------------------------------------------------------------------
1 | import { UnorderedListOutlined } from '@ant-design/icons'
2 | import { Card, List, Space } from 'antd'
3 | import React from 'react'
4 | import { Text } from '../text'
5 | import LatestActivitiesSkeleton from '../skeleton/latest-activities'
6 | import { useList } from '@refinedev/core'
7 | import { DASHBOARD_LATEST_ACTIVITIES_AUDITS_QUERY, DASHBOARD_LATEST_ACTIVITIES_DEALS_QUERY } from '@/graphql/queries'
8 | import dayjs from 'dayjs'
9 | import CustomAvatar from '../custom-avatar'
10 |
11 | const LatestActivities = () => {
12 | const { data: audit, isLoading: isLoadingAudit, isError, error } = useList({
13 | resource: 'audits',
14 | meta: {
15 | gqlQuery: DASHBOARD_LATEST_ACTIVITIES_AUDITS_QUERY
16 | }
17 | })
18 |
19 | const dealIds = audit?.data?.map((audit) => audit?.targetId);
20 |
21 | const { data: deals, isLoading: isLoadingDeals } = useList({
22 | resource: 'deals',
23 | queryOptions: { enabled: !!dealIds?.length },
24 | pagination: {
25 | mode: 'off'
26 | },
27 | filters: [{ field: 'id', operator: 'in', value: dealIds }],
28 | meta: {
29 | gqlQuery: DASHBOARD_LATEST_ACTIVITIES_DEALS_QUERY
30 | }
31 | })
32 |
33 | if(isError) {
34 | console.log(error);
35 | return null;
36 | }
37 |
38 | const isLoading = isLoadingAudit || isLoadingDeals;
39 |
40 | return (
41 | - ({ id: i}))}
58 | renderItem={(_, index) => (
59 |
- {
67 | const deal = deals?.data.find(
68 | (deal) => deal.id === String(item.targetId)
69 | ) || undefined;
70 |
71 | return (
72 |
57 |
125 | )
126 | }
127 |
--------------------------------------------------------------------------------
/src/components/tasks/form/title.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | import { useForm } from "@refinedev/antd";
4 | import { HttpError, useInvalidate } from "@refinedev/core";
5 | import { GetFields, GetVariables } from "@refinedev/nestjs-query";
6 |
7 | import { Form, Skeleton } from "antd";
8 |
9 | import { Text } from "@/components";
10 | import { Task } from "@/graphql/schema.types";
11 | import {
12 | UpdateTaskMutation,
13 | UpdateTaskMutationVariables,
14 | } from "@/graphql/types";
15 |
16 | import { UPDATE_TASK_MUTATION } from "@/graphql/mutations";
17 |
18 | const TitleInput = ({
19 | value,
20 | onChange,
21 | }: {
22 | value?: string;
23 | onChange?: (value: string) => void;
24 | }) => {
25 | const onTitleChange = (newTitle: string) => {
26 | onChange?.(newTitle);
27 | };
28 |
29 | return (
30 | - (
60 |
95 |
133 |
134 | );
135 | };
136 |
--------------------------------------------------------------------------------
/src/components/tasks/kanban/card.tsx:
--------------------------------------------------------------------------------
1 | import CustomAvatar from '@/components/custom-avatar'
2 | import { Text } from '@/components/text'
3 | import { TextIcon } from '@/components/text-icon'
4 | import { User } from '@/graphql/schema.types'
5 | import { getDateColor } from '@/utilities'
6 | import { ClockCircleOutlined, DeleteOutlined, EyeOutlined, MoreOutlined } from '@ant-design/icons'
7 | import { useDelete, useNavigation } from '@refinedev/core'
8 | import { Button, Card, ConfigProvider, Dropdown, MenuProps, Space, Tag, Tooltip, theme } from 'antd'
9 | import dayjs from 'dayjs'
10 | import React, { memo, useMemo } from 'react'
11 |
12 | type ProjectCardProps = {
13 | id: string,
14 | title: string,
15 | updatedAt: string,
16 | dueDate?: string,
17 | users?: {
18 | id: string,
19 | name: string,
20 | avatarUrl?: User['avatarUrl']
21 | }[]
22 | }
23 |
24 | const ProjectCard = ({ id, title, dueDate, users }: ProjectCardProps) => {
25 | const { token } = theme.useToken();
26 |
27 | const { edit } = useNavigation();
28 | const { mutate } = useDelete();
29 |
30 | const dropdownItems = useMemo(() => {
31 | const dropdownItems: MenuProps['items'] = [
32 | {
33 | label: 'View card',
34 | key: '1',
35 | icon:
131 |
161 | {users.map((user) => (
162 |
163 |
165 | ))}
166 |
167 | )}
168 |
169 |
124 | Account Settings
125 | }
128 | onClick={() => closeModal()}
129 | />
130 |
131 |
136 |
137 |
161 |
169 |
170 |
19 | {children}
20 |
21 | );
22 | };
23 |
24 | import {
25 | BusinessType,
26 | CompanySize,
27 | Contact,
28 | Industry,
29 | } from "@/graphql/schema.types";
30 |
31 | export type TotalCountType = "companies" | "contacts" | "deals";
32 |
33 | export const totalCountVariants: {
34 | [key in TotalCountType]: {
35 | primaryColor: string;
36 | secondaryColor?: string;
37 | icon: React.ReactNode;
38 | title: string;
39 | data: { index: string; value: number }[];
40 | };
41 | } = {
42 | companies: {
43 | primaryColor: "#1677FF",
44 | secondaryColor: "#BAE0FF",
45 | icon: (
46 |
2 |
3 | 4 |
5 |
6 |
7 | 8 |
20 |
21 | ## 📋 Table of Contents
22 |
23 | 1. 🤖 [Introduction](#introduction)
24 | 2. ⚙️ [Tech Stack](#tech-stack)
25 | 3. 🔋 [Features](#features)
26 | 4. 🤸 [Quick Start](#quick-start)
27 | 5. 🕸️ [Snippets](#snippets)
28 | 6. 🔗 [Links](#links)
29 | 7. 🚀 [More](#more)
30 |
31 | ## 🚨 Tutorial
32 |
33 | This repository contains the code corresponding to an in-depth tutorial available on our YouTube channel, JavaScript Mastery.
34 |
35 | If you prefer visual learning, this is the perfect resource for you. Follow our tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!
36 |
37 | 3 | 4 |
7 | 8 |
9 | 
10 | 
11 | 
12 |
13 |
14 |
10 |
11 |
12 | A CRM Dashboard
15 | 16 |
17 | Build this project step by step with our detailed tutorial on JavaScript Mastery YouTube. Join the JSM family!
18 |
19 |
116 |
117 |
118 | ```typescript
119 | import { AuthBindings } from "@refinedev/core";
120 |
121 | import { API_URL, dataProvider } from "./data";
122 |
123 | // For demo purposes and to make it easier to test the app, you can use the following credentials
124 | export const authCredentials = {
125 | email: "michael.scott@dundermifflin.com",
126 | password: "demodemo",
127 | };
128 |
129 | export const authProvider: AuthBindings = {
130 | login: async ({ email }) => {
131 | try {
132 | // call the login mutation
133 | // dataProvider.custom is used to make a custom request to the GraphQL API
134 | // this will call dataProvider which will go through the fetchWrapper function
135 | const { data } = await dataProvider.custom({
136 | url: API_URL,
137 | method: "post",
138 | headers: {},
139 | meta: {
140 | variables: { email },
141 | // pass the email to see if the user exists and if so, return the accessToken
142 | rawQuery: `
143 | mutation Login($email: String!) {
144 | login(loginInput: { email: $email }) {
145 | accessToken
146 | }
147 | }
148 | `,
149 | },
150 | });
151 |
152 | // save the accessToken in localStorage
153 | localStorage.setItem("access_token", data.login.accessToken);
154 |
155 | return {
156 | success: true,
157 | redirectTo: "/",
158 | };
159 | } catch (e) {
160 | const error = e as Error;
161 |
162 | return {
163 | success: false,
164 | error: {
165 | message: "message" in error ? error.message : "Login failed",
166 | name: "name" in error ? error.name : "Invalid email or password",
167 | },
168 | };
169 | }
170 | },
171 |
172 | // simply remove the accessToken from localStorage for the logout
173 | logout: async () => {
174 | localStorage.removeItem("access_token");
175 |
176 | return {
177 | success: true,
178 | redirectTo: "/login",
179 | };
180 | },
181 |
182 | onError: async (error) => {
183 | // a check to see if the error is an authentication error
184 | // if so, set logout to true
185 | if (error.statusCode === "UNAUTHENTICATED") {
186 | return {
187 | logout: true,
188 | ...error,
189 | };
190 | }
191 |
192 | return { error };
193 | },
194 |
195 | check: async () => {
196 | try {
197 | // get the identity of the user
198 | // this is to know if the user is authenticated or not
199 | await dataProvider.custom({
200 | url: API_URL,
201 | method: "post",
202 | headers: {},
203 | meta: {
204 | rawQuery: `
205 | query Me {
206 | me {
207 | name
208 | }
209 | }
210 | `,
211 | },
212 | });
213 |
214 | // if the user is authenticated, redirect to the home page
215 | return {
216 | authenticated: true,
217 | redirectTo: "/",
218 | };
219 | } catch (error) {
220 | // for any other error, redirect to the login page
221 | return {
222 | authenticated: false,
223 | redirectTo: "/login",
224 | };
225 | }
226 | },
227 |
228 | // get the user information
229 | getIdentity: async () => {
230 | const accessToken = localStorage.getItem("access_token");
231 |
232 | try {
233 | // call the GraphQL API to get the user information
234 | // we're using me:any because the GraphQL API doesn't have a type for the me query yet.
235 | // we'll add some queries and mutations later and change this to User which will be generated by codegen.
236 | const { data } = await dataProvider.custom<{ me: any }>({
237 | url: API_URL,
238 | method: "post",
239 | headers: accessToken
240 | ? {
241 | // send the accessToken in the Authorization header
242 | Authorization: `Bearer ${accessToken}`,
243 | }
244 | : {},
245 | meta: {
246 | // get the user information such as name, email, etc.
247 | rawQuery: `
248 | query Me {
249 | me {
250 | id
251 | name
252 | email
253 | phone
254 | jobTitle
255 | timezone
256 | avatarUrl
257 | }
258 | }
259 | `,
260 | },
261 | });
262 |
263 | return data.me;
264 | } catch (error) {
265 | return undefined;
266 | }
267 | },
268 | };
269 | ```
270 |
271 |
272 |
273 | providers/auth.ts
117 |
118 | ```typescript
119 | import { AuthBindings } from "@refinedev/core";
120 |
121 | import { API_URL, dataProvider } from "./data";
122 |
123 | // For demo purposes and to make it easier to test the app, you can use the following credentials
124 | export const authCredentials = {
125 | email: "michael.scott@dundermifflin.com",
126 | password: "demodemo",
127 | };
128 |
129 | export const authProvider: AuthBindings = {
130 | login: async ({ email }) => {
131 | try {
132 | // call the login mutation
133 | // dataProvider.custom is used to make a custom request to the GraphQL API
134 | // this will call dataProvider which will go through the fetchWrapper function
135 | const { data } = await dataProvider.custom({
136 | url: API_URL,
137 | method: "post",
138 | headers: {},
139 | meta: {
140 | variables: { email },
141 | // pass the email to see if the user exists and if so, return the accessToken
142 | rawQuery: `
143 | mutation Login($email: String!) {
144 | login(loginInput: { email: $email }) {
145 | accessToken
146 | }
147 | }
148 | `,
149 | },
150 | });
151 |
152 | // save the accessToken in localStorage
153 | localStorage.setItem("access_token", data.login.accessToken);
154 |
155 | return {
156 | success: true,
157 | redirectTo: "/",
158 | };
159 | } catch (e) {
160 | const error = e as Error;
161 |
162 | return {
163 | success: false,
164 | error: {
165 | message: "message" in error ? error.message : "Login failed",
166 | name: "name" in error ? error.name : "Invalid email or password",
167 | },
168 | };
169 | }
170 | },
171 |
172 | // simply remove the accessToken from localStorage for the logout
173 | logout: async () => {
174 | localStorage.removeItem("access_token");
175 |
176 | return {
177 | success: true,
178 | redirectTo: "/login",
179 | };
180 | },
181 |
182 | onError: async (error) => {
183 | // a check to see if the error is an authentication error
184 | // if so, set logout to true
185 | if (error.statusCode === "UNAUTHENTICATED") {
186 | return {
187 | logout: true,
188 | ...error,
189 | };
190 | }
191 |
192 | return { error };
193 | },
194 |
195 | check: async () => {
196 | try {
197 | // get the identity of the user
198 | // this is to know if the user is authenticated or not
199 | await dataProvider.custom({
200 | url: API_URL,
201 | method: "post",
202 | headers: {},
203 | meta: {
204 | rawQuery: `
205 | query Me {
206 | me {
207 | name
208 | }
209 | }
210 | `,
211 | },
212 | });
213 |
214 | // if the user is authenticated, redirect to the home page
215 | return {
216 | authenticated: true,
217 | redirectTo: "/",
218 | };
219 | } catch (error) {
220 | // for any other error, redirect to the login page
221 | return {
222 | authenticated: false,
223 | redirectTo: "/login",
224 | };
225 | }
226 | },
227 |
228 | // get the user information
229 | getIdentity: async () => {
230 | const accessToken = localStorage.getItem("access_token");
231 |
232 | try {
233 | // call the GraphQL API to get the user information
234 | // we're using me:any because the GraphQL API doesn't have a type for the me query yet.
235 | // we'll add some queries and mutations later and change this to User which will be generated by codegen.
236 | const { data } = await dataProvider.custom<{ me: any }>({
237 | url: API_URL,
238 | method: "post",
239 | headers: accessToken
240 | ? {
241 | // send the accessToken in the Authorization header
242 | Authorization: `Bearer ${accessToken}`,
243 | }
244 | : {},
245 | meta: {
246 | // get the user information such as name, email, etc.
247 | rawQuery: `
248 | query Me {
249 | me {
250 | id
251 | name
252 | email
253 | phone
254 | jobTitle
255 | timezone
256 | avatarUrl
257 | }
258 | }
259 | `,
260 | },
261 | });
262 |
263 | return data.me;
264 | } catch (error) {
265 | return undefined;
266 | }
267 | },
268 | };
269 | ```
270 |
271 |
274 |
281 |
282 | GraphQl and Codegen Setup
275 | 276 | ```bash 277 | npm i -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-operations @graphql-codegen/import-types-preset prettier vite-tsconfig-paths 278 | ``` 279 | 280 |
283 |
284 |
285 | ```typescript
286 | import type { IGraphQLConfig } from "graphql-config";
287 |
288 | const config: IGraphQLConfig = {
289 | // define graphQL schema provided by Refine
290 | schema: "https://api.crm.refine.dev/graphql",
291 | extensions: {
292 | // codegen is a plugin that generates typescript types from GraphQL schema
293 | // https://the-guild.dev/graphql/codegen
294 | codegen: {
295 | // hooks are commands that are executed after a certain event
296 | hooks: {
297 | afterOneFileWrite: ["eslint --fix", "prettier --write"],
298 | },
299 | // generates typescript types from GraphQL schema
300 | generates: {
301 | // specify the output path of the generated types
302 | "src/graphql/schema.types.ts": {
303 | // use typescript plugin
304 | plugins: ["typescript"],
305 | // set the config of the typescript plugin
306 | // this defines how the generated types will look like
307 | config: {
308 | skipTypename: true, // skipTypename is used to remove __typename from the generated types
309 | enumsAsTypes: true, // enumsAsTypes is used to generate enums as types instead of enums.
310 | // scalars is used to define how the scalars i.e. DateTime, JSON, etc. will be generated
311 | // scalar is a type that is not a list and does not have fields. Meaning it is a primitive type.
312 | scalars: {
313 | // DateTime is a scalar type that is used to represent date and time
314 | DateTime: {
315 | input: "string",
316 | output: "string",
317 | format: "date-time",
318 | },
319 | },
320 | },
321 | },
322 | // generates typescript types from GraphQL operations
323 | // graphql operations are queries, mutations, and subscriptions we write in our code to communicate with the GraphQL API
324 | "src/graphql/types.ts": {
325 | // preset is a plugin that is used to generate typescript types from GraphQL operations
326 | // import-types suggests to import types from schema.types.ts or other files
327 | // this is used to avoid duplication of types
328 | // https://the-guild.dev/graphql/codegen/plugins/presets/import-types-preset
329 | preset: "import-types",
330 | // documents is used to define the path of the files that contain GraphQL operations
331 | documents: ["src/**/*.{ts,tsx}"],
332 | // plugins is used to define the plugins that will be used to generate typescript types from GraphQL operations
333 | plugins: ["typescript-operations"],
334 | config: {
335 | skipTypename: true,
336 | enumsAsTypes: true,
337 | // determine whether the generated types should be resolved ahead of time or not.
338 | // When preResolveTypes is set to false, the code generator will not try to resolve the types ahead of time.
339 | // Instead, it will generate more generic types, and the actual types will be resolved at runtime.
340 | preResolveTypes: false,
341 | // useTypeImports is used to import types using import type instead of import.
342 | useTypeImports: true,
343 | },
344 | // presetConfig is used to define the config of the preset
345 | presetConfig: {
346 | typesPath: "./schema.types",
347 | },
348 | },
349 | },
350 | },
351 | },
352 | };
353 |
354 | export default config;
355 | ```
356 |
357 |
358 |
359 | graphql.config.ts
284 |
285 | ```typescript
286 | import type { IGraphQLConfig } from "graphql-config";
287 |
288 | const config: IGraphQLConfig = {
289 | // define graphQL schema provided by Refine
290 | schema: "https://api.crm.refine.dev/graphql",
291 | extensions: {
292 | // codegen is a plugin that generates typescript types from GraphQL schema
293 | // https://the-guild.dev/graphql/codegen
294 | codegen: {
295 | // hooks are commands that are executed after a certain event
296 | hooks: {
297 | afterOneFileWrite: ["eslint --fix", "prettier --write"],
298 | },
299 | // generates typescript types from GraphQL schema
300 | generates: {
301 | // specify the output path of the generated types
302 | "src/graphql/schema.types.ts": {
303 | // use typescript plugin
304 | plugins: ["typescript"],
305 | // set the config of the typescript plugin
306 | // this defines how the generated types will look like
307 | config: {
308 | skipTypename: true, // skipTypename is used to remove __typename from the generated types
309 | enumsAsTypes: true, // enumsAsTypes is used to generate enums as types instead of enums.
310 | // scalars is used to define how the scalars i.e. DateTime, JSON, etc. will be generated
311 | // scalar is a type that is not a list and does not have fields. Meaning it is a primitive type.
312 | scalars: {
313 | // DateTime is a scalar type that is used to represent date and time
314 | DateTime: {
315 | input: "string",
316 | output: "string",
317 | format: "date-time",
318 | },
319 | },
320 | },
321 | },
322 | // generates typescript types from GraphQL operations
323 | // graphql operations are queries, mutations, and subscriptions we write in our code to communicate with the GraphQL API
324 | "src/graphql/types.ts": {
325 | // preset is a plugin that is used to generate typescript types from GraphQL operations
326 | // import-types suggests to import types from schema.types.ts or other files
327 | // this is used to avoid duplication of types
328 | // https://the-guild.dev/graphql/codegen/plugins/presets/import-types-preset
329 | preset: "import-types",
330 | // documents is used to define the path of the files that contain GraphQL operations
331 | documents: ["src/**/*.{ts,tsx}"],
332 | // plugins is used to define the plugins that will be used to generate typescript types from GraphQL operations
333 | plugins: ["typescript-operations"],
334 | config: {
335 | skipTypename: true,
336 | enumsAsTypes: true,
337 | // determine whether the generated types should be resolved ahead of time or not.
338 | // When preResolveTypes is set to false, the code generator will not try to resolve the types ahead of time.
339 | // Instead, it will generate more generic types, and the actual types will be resolved at runtime.
340 | preResolveTypes: false,
341 | // useTypeImports is used to import types using import type instead of import.
342 | useTypeImports: true,
343 | },
344 | // presetConfig is used to define the config of the preset
345 | presetConfig: {
346 | typesPath: "./schema.types",
347 | },
348 | },
349 | },
350 | },
351 | },
352 | };
353 |
354 | export default config;
355 | ```
356 |
357 |
360 |
361 |
362 | ```typescript
363 | import gql from "graphql-tag";
364 |
365 | // Mutation to update user
366 | export const UPDATE_USER_MUTATION = gql`
367 | # The ! after the type means that it is required
368 | mutation UpdateUser($input: UpdateOneUserInput!) {
369 | # call the updateOneUser mutation with the input and pass the $input argument
370 | # $variableName is a convention for GraphQL variables
371 | updateOneUser(input: $input) {
372 | id
373 | name
374 | avatarUrl
375 | email
376 | phone
377 | jobTitle
378 | }
379 | }
380 | `;
381 |
382 | // Mutation to create company
383 | export const CREATE_COMPANY_MUTATION = gql`
384 | mutation CreateCompany($input: CreateOneCompanyInput!) {
385 | createOneCompany(input: $input) {
386 | id
387 | salesOwner {
388 | id
389 | }
390 | }
391 | }
392 | `;
393 |
394 | // Mutation to update company details
395 | export const UPDATE_COMPANY_MUTATION = gql`
396 | mutation UpdateCompany($input: UpdateOneCompanyInput!) {
397 | updateOneCompany(input: $input) {
398 | id
399 | name
400 | totalRevenue
401 | industry
402 | companySize
403 | businessType
404 | country
405 | website
406 | avatarUrl
407 | salesOwner {
408 | id
409 | name
410 | avatarUrl
411 | }
412 | }
413 | }
414 | `;
415 |
416 | // Mutation to update task stage of a task
417 | export const UPDATE_TASK_STAGE_MUTATION = gql`
418 | mutation UpdateTaskStage($input: UpdateOneTaskInput!) {
419 | updateOneTask(input: $input) {
420 | id
421 | }
422 | }
423 | `;
424 |
425 | // Mutation to create a new task
426 | export const CREATE_TASK_MUTATION = gql`
427 | mutation CreateTask($input: CreateOneTaskInput!) {
428 | createOneTask(input: $input) {
429 | id
430 | title
431 | stage {
432 | id
433 | title
434 | }
435 | }
436 | }
437 | `;
438 |
439 | // Mutation to update a task details
440 | export const UPDATE_TASK_MUTATION = gql`
441 | mutation UpdateTask($input: UpdateOneTaskInput!) {
442 | updateOneTask(input: $input) {
443 | id
444 | title
445 | completed
446 | description
447 | dueDate
448 | stage {
449 | id
450 | title
451 | }
452 | users {
453 | id
454 | name
455 | avatarUrl
456 | }
457 | checklist {
458 | title
459 | checked
460 | }
461 | }
462 | }
463 | `;
464 | ```
465 |
466 |
467 |
468 | graphql/mutations.ts
361 |
362 | ```typescript
363 | import gql from "graphql-tag";
364 |
365 | // Mutation to update user
366 | export const UPDATE_USER_MUTATION = gql`
367 | # The ! after the type means that it is required
368 | mutation UpdateUser($input: UpdateOneUserInput!) {
369 | # call the updateOneUser mutation with the input and pass the $input argument
370 | # $variableName is a convention for GraphQL variables
371 | updateOneUser(input: $input) {
372 | id
373 | name
374 | avatarUrl
375 | email
376 | phone
377 | jobTitle
378 | }
379 | }
380 | `;
381 |
382 | // Mutation to create company
383 | export const CREATE_COMPANY_MUTATION = gql`
384 | mutation CreateCompany($input: CreateOneCompanyInput!) {
385 | createOneCompany(input: $input) {
386 | id
387 | salesOwner {
388 | id
389 | }
390 | }
391 | }
392 | `;
393 |
394 | // Mutation to update company details
395 | export const UPDATE_COMPANY_MUTATION = gql`
396 | mutation UpdateCompany($input: UpdateOneCompanyInput!) {
397 | updateOneCompany(input: $input) {
398 | id
399 | name
400 | totalRevenue
401 | industry
402 | companySize
403 | businessType
404 | country
405 | website
406 | avatarUrl
407 | salesOwner {
408 | id
409 | name
410 | avatarUrl
411 | }
412 | }
413 | }
414 | `;
415 |
416 | // Mutation to update task stage of a task
417 | export const UPDATE_TASK_STAGE_MUTATION = gql`
418 | mutation UpdateTaskStage($input: UpdateOneTaskInput!) {
419 | updateOneTask(input: $input) {
420 | id
421 | }
422 | }
423 | `;
424 |
425 | // Mutation to create a new task
426 | export const CREATE_TASK_MUTATION = gql`
427 | mutation CreateTask($input: CreateOneTaskInput!) {
428 | createOneTask(input: $input) {
429 | id
430 | title
431 | stage {
432 | id
433 | title
434 | }
435 | }
436 | }
437 | `;
438 |
439 | // Mutation to update a task details
440 | export const UPDATE_TASK_MUTATION = gql`
441 | mutation UpdateTask($input: UpdateOneTaskInput!) {
442 | updateOneTask(input: $input) {
443 | id
444 | title
445 | completed
446 | description
447 | dueDate
448 | stage {
449 | id
450 | title
451 | }
452 | users {
453 | id
454 | name
455 | avatarUrl
456 | }
457 | checklist {
458 | title
459 | checked
460 | }
461 | }
462 | }
463 | `;
464 | ```
465 |
466 |
469 |
470 |
471 | ```typescript
472 | import gql from "graphql-tag";
473 |
474 | // Query to get Total Company, Contact and Deal Counts
475 | export const DASHBOARD_TOTAL_COUNTS_QUERY = gql`
476 | query DashboardTotalCounts {
477 | companies {
478 | totalCount
479 | }
480 | contacts {
481 | totalCount
482 | }
483 | deals {
484 | totalCount
485 | }
486 | }
487 | `;
488 |
489 | // Query to get upcoming events
490 | export const DASHBORAD_CALENDAR_UPCOMING_EVENTS_QUERY = gql`
491 | query DashboardCalendarUpcomingEvents(
492 | $filter: EventFilter!
493 | $sorting: [EventSort!]
494 | $paging: OffsetPaging!
495 | ) {
496 | events(filter: $filter, sorting: $sorting, paging: $paging) {
497 | totalCount
498 | nodes {
499 | id
500 | title
501 | color
502 | startDate
503 | endDate
504 | }
505 | }
506 | }
507 | `;
508 |
509 | // Query to get deals chart
510 | export const DASHBOARD_DEALS_CHART_QUERY = gql`
511 | query DashboardDealsChart(
512 | $filter: DealStageFilter!
513 | $sorting: [DealStageSort!]
514 | $paging: OffsetPaging
515 | ) {
516 | dealStages(filter: $filter, sorting: $sorting, paging: $paging) {
517 | # Get all deal stages
518 | nodes {
519 | id
520 | title
521 | # Get the sum of all deals in this stage and group by closeDateMonth and closeDateYear
522 | dealsAggregate {
523 | groupBy {
524 | closeDateMonth
525 | closeDateYear
526 | }
527 | sum {
528 | value
529 | }
530 | }
531 | }
532 | # Get the total count of all deals in this stage
533 | totalCount
534 | }
535 | }
536 | `;
537 |
538 | // Query to get latest activities deals
539 | export const DASHBOARD_LATEST_ACTIVITIES_DEALS_QUERY = gql`
540 | query DashboardLatestActivitiesDeals(
541 | $filter: DealFilter!
542 | $sorting: [DealSort!]
543 | $paging: OffsetPaging
544 | ) {
545 | deals(filter: $filter, sorting: $sorting, paging: $paging) {
546 | totalCount
547 | nodes {
548 | id
549 | title
550 | stage {
551 | id
552 | title
553 | }
554 | company {
555 | id
556 | name
557 | avatarUrl
558 | }
559 | createdAt
560 | }
561 | }
562 | }
563 | `;
564 |
565 | // Query to get latest activities audits
566 | export const DASHBOARD_LATEST_ACTIVITIES_AUDITS_QUERY = gql`
567 | query DashboardLatestActivitiesAudits(
568 | $filter: AuditFilter!
569 | $sorting: [AuditSort!]
570 | $paging: OffsetPaging
571 | ) {
572 | audits(filter: $filter, sorting: $sorting, paging: $paging) {
573 | totalCount
574 | nodes {
575 | id
576 | action
577 | targetEntity
578 | targetId
579 | changes {
580 | field
581 | from
582 | to
583 | }
584 | createdAt
585 | user {
586 | id
587 | name
588 | avatarUrl
589 | }
590 | }
591 | }
592 | }
593 | `;
594 |
595 | // Query to get companies list
596 | export const COMPANIES_LIST_QUERY = gql`
597 | query CompaniesList(
598 | $filter: CompanyFilter!
599 | $sorting: [CompanySort!]
600 | $paging: OffsetPaging!
601 | ) {
602 | companies(filter: $filter, sorting: $sorting, paging: $paging) {
603 | totalCount
604 | nodes {
605 | id
606 | name
607 | avatarUrl
608 | # Get the sum of all deals in this company
609 | dealsAggregate {
610 | sum {
611 | value
612 | }
613 | }
614 | }
615 | }
616 | }
617 | `;
618 |
619 | // Query to get users list
620 | export const USERS_SELECT_QUERY = gql`
621 | query UsersSelect(
622 | $filter: UserFilter!
623 | $sorting: [UserSort!]
624 | $paging: OffsetPaging!
625 | ) {
626 | # Get all users
627 | users(filter: $filter, sorting: $sorting, paging: $paging) {
628 | totalCount # Get the total count of users
629 | # Get specific fields for each user
630 | nodes {
631 | id
632 | name
633 | avatarUrl
634 | }
635 | }
636 | }
637 | `;
638 |
639 | // Query to get contacts associated with a company
640 | export const COMPANY_CONTACTS_TABLE_QUERY = gql`
641 | query CompanyContactsTable(
642 | $filter: ContactFilter!
643 | $sorting: [ContactSort!]
644 | $paging: OffsetPaging!
645 | ) {
646 | contacts(filter: $filter, sorting: $sorting, paging: $paging) {
647 | totalCount
648 | nodes {
649 | id
650 | name
651 | avatarUrl
652 | jobTitle
653 | email
654 | phone
655 | status
656 | }
657 | }
658 | }
659 | `;
660 |
661 | // Query to get task stages list
662 | export const TASK_STAGES_QUERY = gql`
663 | query TaskStages(
664 | $filter: TaskStageFilter!
665 | $sorting: [TaskStageSort!]
666 | $paging: OffsetPaging!
667 | ) {
668 | taskStages(filter: $filter, sorting: $sorting, paging: $paging) {
669 | totalCount # Get the total count of task stages
670 | nodes {
671 | id
672 | title
673 | }
674 | }
675 | }
676 | `;
677 |
678 | // Query to get tasks list
679 | export const TASKS_QUERY = gql`
680 | query Tasks(
681 | $filter: TaskFilter!
682 | $sorting: [TaskSort!]
683 | $paging: OffsetPaging!
684 | ) {
685 | tasks(filter: $filter, sorting: $sorting, paging: $paging) {
686 | totalCount # Get the total count of tasks
687 | nodes {
688 | id
689 | title
690 | description
691 | dueDate
692 | completed
693 | stageId
694 | # Get user details associated with this task
695 | users {
696 | id
697 | name
698 | avatarUrl
699 | }
700 | createdAt
701 | updatedAt
702 | }
703 | }
704 | }
705 | `;
706 |
707 | // Query to get task stages for select
708 | export const TASK_STAGES_SELECT_QUERY = gql`
709 | query TaskStagesSelect(
710 | $filter: TaskStageFilter!
711 | $sorting: [TaskStageSort!]
712 | $paging: OffsetPaging!
713 | ) {
714 | taskStages(filter: $filter, sorting: $sorting, paging: $paging) {
715 | totalCount
716 | nodes {
717 | id
718 | title
719 | }
720 | }
721 | }
722 | `;
723 | ```
724 |
725 |
726 |
727 | graphql/queries.ts
470 |
471 | ```typescript
472 | import gql from "graphql-tag";
473 |
474 | // Query to get Total Company, Contact and Deal Counts
475 | export const DASHBOARD_TOTAL_COUNTS_QUERY = gql`
476 | query DashboardTotalCounts {
477 | companies {
478 | totalCount
479 | }
480 | contacts {
481 | totalCount
482 | }
483 | deals {
484 | totalCount
485 | }
486 | }
487 | `;
488 |
489 | // Query to get upcoming events
490 | export const DASHBORAD_CALENDAR_UPCOMING_EVENTS_QUERY = gql`
491 | query DashboardCalendarUpcomingEvents(
492 | $filter: EventFilter!
493 | $sorting: [EventSort!]
494 | $paging: OffsetPaging!
495 | ) {
496 | events(filter: $filter, sorting: $sorting, paging: $paging) {
497 | totalCount
498 | nodes {
499 | id
500 | title
501 | color
502 | startDate
503 | endDate
504 | }
505 | }
506 | }
507 | `;
508 |
509 | // Query to get deals chart
510 | export const DASHBOARD_DEALS_CHART_QUERY = gql`
511 | query DashboardDealsChart(
512 | $filter: DealStageFilter!
513 | $sorting: [DealStageSort!]
514 | $paging: OffsetPaging
515 | ) {
516 | dealStages(filter: $filter, sorting: $sorting, paging: $paging) {
517 | # Get all deal stages
518 | nodes {
519 | id
520 | title
521 | # Get the sum of all deals in this stage and group by closeDateMonth and closeDateYear
522 | dealsAggregate {
523 | groupBy {
524 | closeDateMonth
525 | closeDateYear
526 | }
527 | sum {
528 | value
529 | }
530 | }
531 | }
532 | # Get the total count of all deals in this stage
533 | totalCount
534 | }
535 | }
536 | `;
537 |
538 | // Query to get latest activities deals
539 | export const DASHBOARD_LATEST_ACTIVITIES_DEALS_QUERY = gql`
540 | query DashboardLatestActivitiesDeals(
541 | $filter: DealFilter!
542 | $sorting: [DealSort!]
543 | $paging: OffsetPaging
544 | ) {
545 | deals(filter: $filter, sorting: $sorting, paging: $paging) {
546 | totalCount
547 | nodes {
548 | id
549 | title
550 | stage {
551 | id
552 | title
553 | }
554 | company {
555 | id
556 | name
557 | avatarUrl
558 | }
559 | createdAt
560 | }
561 | }
562 | }
563 | `;
564 |
565 | // Query to get latest activities audits
566 | export const DASHBOARD_LATEST_ACTIVITIES_AUDITS_QUERY = gql`
567 | query DashboardLatestActivitiesAudits(
568 | $filter: AuditFilter!
569 | $sorting: [AuditSort!]
570 | $paging: OffsetPaging
571 | ) {
572 | audits(filter: $filter, sorting: $sorting, paging: $paging) {
573 | totalCount
574 | nodes {
575 | id
576 | action
577 | targetEntity
578 | targetId
579 | changes {
580 | field
581 | from
582 | to
583 | }
584 | createdAt
585 | user {
586 | id
587 | name
588 | avatarUrl
589 | }
590 | }
591 | }
592 | }
593 | `;
594 |
595 | // Query to get companies list
596 | export const COMPANIES_LIST_QUERY = gql`
597 | query CompaniesList(
598 | $filter: CompanyFilter!
599 | $sorting: [CompanySort!]
600 | $paging: OffsetPaging!
601 | ) {
602 | companies(filter: $filter, sorting: $sorting, paging: $paging) {
603 | totalCount
604 | nodes {
605 | id
606 | name
607 | avatarUrl
608 | # Get the sum of all deals in this company
609 | dealsAggregate {
610 | sum {
611 | value
612 | }
613 | }
614 | }
615 | }
616 | }
617 | `;
618 |
619 | // Query to get users list
620 | export const USERS_SELECT_QUERY = gql`
621 | query UsersSelect(
622 | $filter: UserFilter!
623 | $sorting: [UserSort!]
624 | $paging: OffsetPaging!
625 | ) {
626 | # Get all users
627 | users(filter: $filter, sorting: $sorting, paging: $paging) {
628 | totalCount # Get the total count of users
629 | # Get specific fields for each user
630 | nodes {
631 | id
632 | name
633 | avatarUrl
634 | }
635 | }
636 | }
637 | `;
638 |
639 | // Query to get contacts associated with a company
640 | export const COMPANY_CONTACTS_TABLE_QUERY = gql`
641 | query CompanyContactsTable(
642 | $filter: ContactFilter!
643 | $sorting: [ContactSort!]
644 | $paging: OffsetPaging!
645 | ) {
646 | contacts(filter: $filter, sorting: $sorting, paging: $paging) {
647 | totalCount
648 | nodes {
649 | id
650 | name
651 | avatarUrl
652 | jobTitle
653 | email
654 | phone
655 | status
656 | }
657 | }
658 | }
659 | `;
660 |
661 | // Query to get task stages list
662 | export const TASK_STAGES_QUERY = gql`
663 | query TaskStages(
664 | $filter: TaskStageFilter!
665 | $sorting: [TaskStageSort!]
666 | $paging: OffsetPaging!
667 | ) {
668 | taskStages(filter: $filter, sorting: $sorting, paging: $paging) {
669 | totalCount # Get the total count of task stages
670 | nodes {
671 | id
672 | title
673 | }
674 | }
675 | }
676 | `;
677 |
678 | // Query to get tasks list
679 | export const TASKS_QUERY = gql`
680 | query Tasks(
681 | $filter: TaskFilter!
682 | $sorting: [TaskSort!]
683 | $paging: OffsetPaging!
684 | ) {
685 | tasks(filter: $filter, sorting: $sorting, paging: $paging) {
686 | totalCount # Get the total count of tasks
687 | nodes {
688 | id
689 | title
690 | description
691 | dueDate
692 | completed
693 | stageId
694 | # Get user details associated with this task
695 | users {
696 | id
697 | name
698 | avatarUrl
699 | }
700 | createdAt
701 | updatedAt
702 | }
703 | }
704 | }
705 | `;
706 |
707 | // Query to get task stages for select
708 | export const TASK_STAGES_SELECT_QUERY = gql`
709 | query TaskStagesSelect(
710 | $filter: TaskStageFilter!
711 | $sorting: [TaskStageSort!]
712 | $paging: OffsetPaging!
713 | ) {
714 | taskStages(filter: $filter, sorting: $sorting, paging: $paging) {
715 | totalCount
716 | nodes {
717 | id
718 | title
719 | }
720 | }
721 | }
722 | `;
723 | ```
724 |
725 |
728 |
729 |
730 | ```typescript
731 | import React from "react";
732 |
733 | import { ConfigProvider, Typography } from "antd";
734 |
735 | export type TextProps = {
736 | size?:
737 | | "xs"
738 | | "sm"
739 | | "md"
740 | | "lg"
741 | | "xl"
742 | | "xxl"
743 | | "xxxl"
744 | | "huge"
745 | | "xhuge"
746 | | "xxhuge";
747 | } & React.ComponentProps;
748 |
749 | // define the font sizes and line heights
750 | const sizes = {
751 | xs: {
752 | fontSize: 12,
753 | lineHeight: 20 / 12,
754 | },
755 | sm: {
756 | fontSize: 14,
757 | lineHeight: 22 / 14,
758 | },
759 | md: {
760 | fontSize: 16,
761 | lineHeight: 24 / 16,
762 | },
763 | lg: {
764 | fontSize: 20,
765 | lineHeight: 28 / 20,
766 | },
767 | xl: {
768 | fontSize: 24,
769 | lineHeight: 32 / 24,
770 | },
771 | xxl: {
772 | fontSize: 30,
773 | lineHeight: 38 / 30,
774 | },
775 | xxxl: {
776 | fontSize: 38,
777 | lineHeight: 46 / 38,
778 | },
779 | huge: {
780 | fontSize: 46,
781 | lineHeight: 54 / 46,
782 | },
783 | xhuge: {
784 | fontSize: 56,
785 | lineHeight: 64 / 56,
786 | },
787 | xxhuge: {
788 | fontSize: 68,
789 | lineHeight: 76 / 68,
790 | },
791 | };
792 |
793 | // a custom Text component that wraps/extends the antd Typography.Text component
794 | export const Text = ({ size = "sm", children, ...rest }: TextProps) => {
795 | return (
796 | // config provider is a top-level component that allows us to customize the global properties of antd components. For example, default antd theme
797 | // token is a term used by antd to refer to the design tokens like font size, font weight, color, etc
798 | // https://ant.design/docs/react/customize-theme#customize-design-token
799 |
806 | {/**
807 | * Typography.Text is a component from antd that allows us to render text
808 | * Typography has different components like Title, Paragraph, Text, Link, etc
809 | * https://ant.design/components/typography/#Typography.Text
810 | */}
811 | {children}
812 |
813 | );
814 | };
815 | ```
816 |
817 |
818 |
819 | text.tsx
729 |
730 | ```typescript
731 | import React from "react";
732 |
733 | import { ConfigProvider, Typography } from "antd";
734 |
735 | export type TextProps = {
736 | size?:
737 | | "xs"
738 | | "sm"
739 | | "md"
740 | | "lg"
741 | | "xl"
742 | | "xxl"
743 | | "xxxl"
744 | | "huge"
745 | | "xhuge"
746 | | "xxhuge";
747 | } & React.ComponentProps
820 |
821 |
822 | ```typescript
823 | import { SaveButton, useForm } from "@refinedev/antd";
824 | import { HttpError } from "@refinedev/core";
825 | import { GetFields, GetVariables } from "@refinedev/nestjs-query";
826 |
827 | import { CloseOutlined } from "@ant-design/icons";
828 | import { Button, Card, Drawer, Form, Input, Spin } from "antd";
829 |
830 | import { getNameInitials } from "@/utilities";
831 | import { UPDATE_USER_MUTATION } from "@/graphql/mutations";
832 |
833 | import { Text } from "../text";
834 | import CustomAvatar from "../custom-avatar";
835 |
836 | import {
837 | UpdateUserMutation,
838 | UpdateUserMutationVariables,
839 | } from "@/graphql/types";
840 |
841 | type Props = {
842 | opened: boolean;
843 | setOpened: (opened: boolean) => void;
844 | userId: string;
845 | };
846 |
847 | export const AccountSettings = ({ opened, setOpened, userId }: Props) => {
848 | /**
849 | * useForm in Refine is used to manage forms. It provides us with a lot of useful props and methods that we can use to manage forms.
850 | * https://refine.dev/docs/data/hooks/use-form/#usage
851 | */
852 |
853 | /**
854 | * saveButtonProps -> contains all the props needed by the "submit" button. For example, "loading", "disabled", "onClick", etc.
855 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#savebuttonprops
856 | *
857 | * formProps -> It's an instance of HTML form that manages form state and actions like onFinish, onValuesChange, etc.
858 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#form
859 | *
860 | * queryResult -> contains the result of the query. For example, isLoading, data, error, etc.
861 | * https://refine.dev/docs/packages/react-hook-form/use-form/#queryresult
862 | */
863 | const { saveButtonProps, formProps, queryResult } = useForm<
864 | /**
865 | * GetFields is used to get the fields of the mutation i.e., in this case, fields are name, email, jobTitle, and phone
866 | * https://refine.dev/docs/data/packages/nestjs-query/#getfields
867 | */
868 | GetFields,
869 | // a type that represents an HTTP error. Used to specify the type of error mutation can throw.
870 | HttpError,
871 | // A third type parameter used to specify the type of variables for the UpdateUserMutation. Meaning that the variables for the UpdateUserMutation should be of type UpdateUserMutationVariables
872 | GetVariables
873 | >({
874 | /**
875 | * mutationMode is used to determine how the mutation should be performed. For example, optimistic, pessimistic, undoable etc.
876 | * optimistic -> redirection and UI updates are executed immediately as if the mutation is successful.
877 | * pessimistic -> redirection and UI updates are executed after the mutation is successful.
878 | * https://refine.dev/docs/advanced-tutorials/mutation-mode/#overview
879 | */
880 | mutationMode: "optimistic",
881 | /**
882 | * specify on which resource the mutation should be performed
883 | * if not specified, Refine will determine the resource name by the current route
884 | */
885 | resource: "users",
886 | /**
887 | * specify the action that should be performed on the resource. Behind the scenes, Refine calls useOne hook to get the data of the user for edit action.
888 | * https://refine.dev/docs/data/hooks/use-form/#edit
889 | */
890 | action: "edit",
891 | id: userId,
892 | /**
893 | * used to provide any additional information to the data provider.
894 | * https://refine.dev/docs/data/hooks/use-form/#meta-
895 | */
896 | meta: {
897 | // gqlMutation is used to specify the mutation that should be performed.
898 | gqlMutation: UPDATE_USER_MUTATION,
899 | },
900 | });
901 | const { avatarUrl, name } = queryResult?.data?.data || {};
902 |
903 | const closeModal = () => {
904 | setOpened(false);
905 | };
906 |
907 | // if query is processing, show a loading indicator
908 | if (queryResult?.isLoading) {
909 | return (
910 |
922 |
924 | );
925 | }
926 |
927 | return (
928 |
937 |
993 | );
994 | };
995 | ```
996 |
997 |
998 |
999 | components/layout/account-settings.tsx
821 |
822 | ```typescript
823 | import { SaveButton, useForm } from "@refinedev/antd";
824 | import { HttpError } from "@refinedev/core";
825 | import { GetFields, GetVariables } from "@refinedev/nestjs-query";
826 |
827 | import { CloseOutlined } from "@ant-design/icons";
828 | import { Button, Card, Drawer, Form, Input, Spin } from "antd";
829 |
830 | import { getNameInitials } from "@/utilities";
831 | import { UPDATE_USER_MUTATION } from "@/graphql/mutations";
832 |
833 | import { Text } from "../text";
834 | import CustomAvatar from "../custom-avatar";
835 |
836 | import {
837 | UpdateUserMutation,
838 | UpdateUserMutationVariables,
839 | } from "@/graphql/types";
840 |
841 | type Props = {
842 | opened: boolean;
843 | setOpened: (opened: boolean) => void;
844 | userId: string;
845 | };
846 |
847 | export const AccountSettings = ({ opened, setOpened, userId }: Props) => {
848 | /**
849 | * useForm in Refine is used to manage forms. It provides us with a lot of useful props and methods that we can use to manage forms.
850 | * https://refine.dev/docs/data/hooks/use-form/#usage
851 | */
852 |
853 | /**
854 | * saveButtonProps -> contains all the props needed by the "submit" button. For example, "loading", "disabled", "onClick", etc.
855 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#savebuttonprops
856 | *
857 | * formProps -> It's an instance of HTML form that manages form state and actions like onFinish, onValuesChange, etc.
858 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-form/#form
859 | *
860 | * queryResult -> contains the result of the query. For example, isLoading, data, error, etc.
861 | * https://refine.dev/docs/packages/react-hook-form/use-form/#queryresult
862 | */
863 | const { saveButtonProps, formProps, queryResult } = useForm<
864 | /**
865 | * GetFields is used to get the fields of the mutation i.e., in this case, fields are name, email, jobTitle, and phone
866 | * https://refine.dev/docs/data/packages/nestjs-query/#getfields
867 | */
868 | GetFields
946 | Account Settings
947 | }
950 | onClick={() => closeModal()}
951 | />
952 |
953 |
958 |
959 |
983 |
991 |
992 |
1000 |
1001 |
1002 | ```typescript
1003 | import { AuditOutlined, ShopOutlined, TeamOutlined } from "@ant-design/icons";
1004 |
1005 | const IconWrapper = ({
1006 | color,
1007 | children,
1008 | }: React.PropsWithChildren<{ color: string }>) => {
1009 | return (
1010 |
1049 |
1056 | ),
1057 | title: "Number of companies",
1058 | data: [
1059 | {
1060 | index: "1",
1061 | value: 3500,
1062 | },
1063 | {
1064 | index: "2",
1065 | value: 2750,
1066 | },
1067 | {
1068 | index: "3",
1069 | value: 5000,
1070 | },
1071 | {
1072 | index: "4",
1073 | value: 4250,
1074 | },
1075 | {
1076 | index: "5",
1077 | value: 5000,
1078 | },
1079 | ],
1080 | },
1081 | contacts: {
1082 | primaryColor: "#52C41A",
1083 | secondaryColor: "#D9F7BE",
1084 | icon: (
1085 |
1086 |
1093 | ),
1094 | title: "Number of contacts",
1095 | data: [
1096 | {
1097 | index: "1",
1098 | value: 10000,
1099 | },
1100 | {
1101 | index: "2",
1102 | value: 19500,
1103 | },
1104 | {
1105 | index: "3",
1106 | value: 13000,
1107 | },
1108 | {
1109 | index: "4",
1110 | value: 17000,
1111 | },
1112 | {
1113 | index: "5",
1114 | value: 13000,
1115 | },
1116 | {
1117 | index: "6",
1118 | value: 20000,
1119 | },
1120 | ],
1121 | },
1122 | deals: {
1123 | primaryColor: "#FA541C",
1124 | secondaryColor: "#FFD8BF",
1125 | icon: (
1126 |
1127 |
1134 | ),
1135 | title: "Total deals in pipeline",
1136 | data: [
1137 | {
1138 | index: "1",
1139 | value: 1000,
1140 | },
1141 | {
1142 | index: "2",
1143 | value: 1300,
1144 | },
1145 | {
1146 | index: "3",
1147 | value: 1200,
1148 | },
1149 | {
1150 | index: "4",
1151 | value: 2000,
1152 | },
1153 | {
1154 | index: "5",
1155 | value: 800,
1156 | },
1157 | {
1158 | index: "6",
1159 | value: 1700,
1160 | },
1161 | {
1162 | index: "7",
1163 | value: 1400,
1164 | },
1165 | {
1166 | index: "8",
1167 | value: 1800,
1168 | },
1169 | ],
1170 | },
1171 | };
1172 |
1173 | export const statusOptions: {
1174 | label: string;
1175 | value: Contact["status"];
1176 | }[] = [
1177 | {
1178 | label: "New",
1179 | value: "NEW",
1180 | },
1181 | {
1182 | label: "Qualified",
1183 | value: "QUALIFIED",
1184 | },
1185 | {
1186 | label: "Unqualified",
1187 | value: "UNQUALIFIED",
1188 | },
1189 | {
1190 | label: "Won",
1191 | value: "WON",
1192 | },
1193 | {
1194 | label: "Negotiation",
1195 | value: "NEGOTIATION",
1196 | },
1197 | {
1198 | label: "Lost",
1199 | value: "LOST",
1200 | },
1201 | {
1202 | label: "Interested",
1203 | value: "INTERESTED",
1204 | },
1205 | {
1206 | label: "Contacted",
1207 | value: "CONTACTED",
1208 | },
1209 | {
1210 | label: "Churned",
1211 | value: "CHURNED",
1212 | },
1213 | ];
1214 |
1215 | export const companySizeOptions: {
1216 | label: string;
1217 | value: CompanySize;
1218 | }[] = [
1219 | {
1220 | label: "Enterprise",
1221 | value: "ENTERPRISE",
1222 | },
1223 | {
1224 | label: "Large",
1225 | value: "LARGE",
1226 | },
1227 | {
1228 | label: "Medium",
1229 | value: "MEDIUM",
1230 | },
1231 | {
1232 | label: "Small",
1233 | value: "SMALL",
1234 | },
1235 | ];
1236 |
1237 | export const industryOptions: {
1238 | label: string;
1239 | value: Industry;
1240 | }[] = [
1241 | { label: "Aerospace", value: "AEROSPACE" },
1242 | { label: "Agriculture", value: "AGRICULTURE" },
1243 | { label: "Automotive", value: "AUTOMOTIVE" },
1244 | { label: "Chemicals", value: "CHEMICALS" },
1245 | { label: "Construction", value: "CONSTRUCTION" },
1246 | { label: "Defense", value: "DEFENSE" },
1247 | { label: "Education", value: "EDUCATION" },
1248 | { label: "Energy", value: "ENERGY" },
1249 | { label: "Financial Services", value: "FINANCIAL_SERVICES" },
1250 | { label: "Food and Beverage", value: "FOOD_AND_BEVERAGE" },
1251 | { label: "Government", value: "GOVERNMENT" },
1252 | { label: "Healthcare", value: "HEALTHCARE" },
1253 | { label: "Hospitality", value: "HOSPITALITY" },
1254 | { label: "Industrial Manufacturing", value: "INDUSTRIAL_MANUFACTURING" },
1255 | { label: "Insurance", value: "INSURANCE" },
1256 | { label: "Life Sciences", value: "LIFE_SCIENCES" },
1257 | { label: "Logistics", value: "LOGISTICS" },
1258 | { label: "Media", value: "MEDIA" },
1259 | { label: "Mining", value: "MINING" },
1260 | { label: "Nonprofit", value: "NONPROFIT" },
1261 | { label: "Other", value: "OTHER" },
1262 | { label: "Pharmaceuticals", value: "PHARMACEUTICALS" },
1263 | { label: "Professional Services", value: "PROFESSIONAL_SERVICES" },
1264 | { label: "Real Estate", value: "REAL_ESTATE" },
1265 | { label: "Retail", value: "RETAIL" },
1266 | { label: "Technology", value: "TECHNOLOGY" },
1267 | { label: "Telecommunications", value: "TELECOMMUNICATIONS" },
1268 | { label: "Transportation", value: "TRANSPORTATION" },
1269 | { label: "Utilities", value: "UTILITIES" },
1270 | ];
1271 |
1272 | export const businessTypeOptions: {
1273 | label: string;
1274 | value: BusinessType;
1275 | }[] = [
1276 | {
1277 | label: "B2B",
1278 | value: "B2B",
1279 | },
1280 | {
1281 | label: "B2C",
1282 | value: "B2C",
1283 | },
1284 | {
1285 | label: "B2G",
1286 | value: "B2G",
1287 | },
1288 | ];
1289 | ```
1290 |
1291 |
1292 |
1293 | constants/index.tsx
1001 |
1002 | ```typescript
1003 | import { AuditOutlined, ShopOutlined, TeamOutlined } from "@ant-design/icons";
1004 |
1005 | const IconWrapper = ({
1006 | color,
1007 | children,
1008 | }: React.PropsWithChildren<{ color: string }>) => {
1009 | return (
1010 |
1021 | {children}
1022 |
1023 | );
1024 | };
1025 |
1026 | import {
1027 | BusinessType,
1028 | CompanySize,
1029 | Contact,
1030 | Industry,
1031 | } from "@/graphql/schema.types";
1032 |
1033 | export type TotalCountType = "companies" | "contacts" | "deals";
1034 |
1035 | export const totalCountVariants: {
1036 | [key in TotalCountType]: {
1037 | primaryColor: string;
1038 | secondaryColor?: string;
1039 | icon: React.ReactNode;
1040 | title: string;
1041 | data: { index: string; value: number }[];
1042 | };
1043 | } = {
1044 | companies: {
1045 | primaryColor: "#1677FF",
1046 | secondaryColor: "#BAE0FF",
1047 | icon: (
1048 |
1294 |
1295 |
1296 | ```typescript
1297 | import { useParams } from "react-router-dom";
1298 |
1299 | import { FilterDropdown, useTable } from "@refinedev/antd";
1300 | import { GetFieldsFromList } from "@refinedev/nestjs-query";
1301 |
1302 | import {
1303 | MailOutlined,
1304 | PhoneOutlined,
1305 | SearchOutlined,
1306 | TeamOutlined,
1307 | } from "@ant-design/icons";
1308 | import { Button, Card, Input, Select, Space, Table } from "antd";
1309 |
1310 | import { Contact } from "@/graphql/schema.types";
1311 |
1312 | import { statusOptions } from "@/constants";
1313 | import { COMPANY_CONTACTS_TABLE_QUERY } from "@/graphql/queries";
1314 |
1315 | import { CompanyContactsTableQuery } from "@/graphql/types";
1316 | import { Text } from "@/components/text";
1317 | import CustomAvatar from "@/components/custom-avatar";
1318 | import { ContactStatusTag } from "@/components/tags/contact-status-tag";
1319 |
1320 | export const CompanyContactsTable = () => {
1321 | // get params from the url
1322 | const params = useParams();
1323 |
1324 | /**
1325 | * Refine offers a TanStack Table adapter with @refinedev/react-table that allows us to use the TanStack Table library with Refine.
1326 | * All features such as sorting, filtering, and pagination come out of the box
1327 | * Under the hood it uses useList hook to fetch the data.
1328 | * https://refine.dev/docs/packages/tanstack-table/use-table/#installation
1329 | */
1330 | const { tableProps } = useTable>(
1331 | {
1332 | // specify the resource for which the table is to be used
1333 | resource: "contacts",
1334 | syncWithLocation: false,
1335 | // specify initial sorters
1336 | sorters: {
1337 | /**
1338 | * initial sets the initial value of sorters.
1339 | * it's not permanent
1340 | * it will be cleared when the user changes the sorting
1341 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#sortersinitial
1342 | */
1343 | initial: [
1344 | {
1345 | field: "createdAt",
1346 | order: "desc",
1347 | },
1348 | ],
1349 | },
1350 | // specify initial filters
1351 | filters: {
1352 | /**
1353 | * similar to initial in sorters
1354 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#filtersinitial
1355 | */
1356 | initial: [
1357 | {
1358 | field: "jobTitle",
1359 | value: "",
1360 | operator: "contains",
1361 | },
1362 | {
1363 | field: "name",
1364 | value: "",
1365 | operator: "contains",
1366 | },
1367 | {
1368 | field: "status",
1369 | value: undefined,
1370 | operator: "in",
1371 | },
1372 | ],
1373 | /**
1374 | * permanent filters are the filters that are always applied
1375 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/#filterspermanent
1376 | */
1377 | permanent: [
1378 | {
1379 | field: "company.id",
1380 | operator: "eq",
1381 | value: params?.id as string,
1382 | },
1383 | ],
1384 | },
1385 | /**
1386 | * used to provide any additional information to the data provider.
1387 | * https://refine.dev/docs/data/hooks/use-form/#meta-
1388 | */
1389 | meta: {
1390 | // gqlQuery is used to specify the GraphQL query that should be used to fetch the data.
1391 | gqlQuery: COMPANY_CONTACTS_TABLE_QUERY,
1392 | },
1393 | },
1394 | );
1395 |
1396 | return (
1397 |
1405 | Contacts
1407 |
1408 | }
1409 | // property used to render additional content in the top-right corner of the card
1410 | extra={
1411 | <>
1412 | Total contacts:
1413 |
1414 | {/* if pagination is not disabled and total is provided then show the total */}
1415 | {tableProps?.pagination !== false && tableProps.pagination?.total}
1416 |
1417 |
1418 | }
1419 | >
1420 |
1428 |
1498 |
1499 | );
1500 | };
1501 | ```
1502 |
1503 |
1504 |
1505 | pages/company/contacts-table.tsx
1295 |
1296 | ```typescript
1297 | import { useParams } from "react-router-dom";
1298 |
1299 | import { FilterDropdown, useTable } from "@refinedev/antd";
1300 | import { GetFieldsFromList } from "@refinedev/nestjs-query";
1301 |
1302 | import {
1303 | MailOutlined,
1304 | PhoneOutlined,
1305 | SearchOutlined,
1306 | TeamOutlined,
1307 | } from "@ant-design/icons";
1308 | import { Button, Card, Input, Select, Space, Table } from "antd";
1309 |
1310 | import { Contact } from "@/graphql/schema.types";
1311 |
1312 | import { statusOptions } from "@/constants";
1313 | import { COMPANY_CONTACTS_TABLE_QUERY } from "@/graphql/queries";
1314 |
1315 | import { CompanyContactsTableQuery } from "@/graphql/types";
1316 | import { Text } from "@/components/text";
1317 | import CustomAvatar from "@/components/custom-avatar";
1318 | import { ContactStatusTag } from "@/components/tags/contact-status-tag";
1319 |
1320 | export const CompanyContactsTable = () => {
1321 | // get params from the url
1322 | const params = useParams();
1323 |
1324 | /**
1325 | * Refine offers a TanStack Table adapter with @refinedev/react-table that allows us to use the TanStack Table library with Refine.
1326 | * All features such as sorting, filtering, and pagination come out of the box
1327 | * Under the hood it uses useList hook to fetch the data.
1328 | * https://refine.dev/docs/packages/tanstack-table/use-table/#installation
1329 | */
1330 | const { tableProps } = useTable
1506 |
1507 |
1508 | ```typescript
1509 | import React from "react";
1510 |
1511 | import {
1512 | CheckCircleOutlined,
1513 | MinusCircleOutlined,
1514 | PlayCircleFilled,
1515 | PlayCircleOutlined,
1516 | } from "@ant-design/icons";
1517 | import { Tag, TagProps } from "antd";
1518 |
1519 | import { ContactStatus } from "@/graphql/schema.types";
1520 |
1521 | type Props = {
1522 | status: ContactStatus;
1523 | };
1524 |
1525 | /**
1526 | * Renders a tag component representing the contact status.
1527 | * @param status - The contact status.
1528 | */
1529 | export const ContactStatusTag = ({ status }: Props) => {
1530 | let icon: React.ReactNode = null;
1531 | let color: TagProps["color"] = undefined;
1532 |
1533 | switch (status) {
1534 | case "NEW":
1535 | case "CONTACTED":
1536 | case "INTERESTED":
1537 | icon =
1573 | {icon} {status.toLowerCase()}
1574 |
1575 | );
1576 | };
1577 | ```
1578 |
1579 |
1580 |
1581 |
1582 | components/tags/contact-status-tag.tsx
1507 |
1508 | ```typescript
1509 | import React from "react";
1510 |
1511 | import {
1512 | CheckCircleOutlined,
1513 | MinusCircleOutlined,
1514 | PlayCircleFilled,
1515 | PlayCircleOutlined,
1516 | } from "@ant-design/icons";
1517 | import { Tag, TagProps } from "antd";
1518 |
1519 | import { ContactStatus } from "@/graphql/schema.types";
1520 |
1521 | type Props = {
1522 | status: ContactStatus;
1523 | };
1524 |
1525 | /**
1526 | * Renders a tag component representing the contact status.
1527 | * @param status - The contact status.
1528 | */
1529 | export const ContactStatusTag = ({ status }: Props) => {
1530 | let icon: React.ReactNode = null;
1531 | let color: TagProps["color"] = undefined;
1532 |
1533 | switch (status) {
1534 | case "NEW":
1535 | case "CONTACTED":
1536 | case "INTERESTED":
1537 | icon =
1583 |
1584 |
1585 | ```typescript
1586 | import Icon from "@ant-design/icons";
1587 | import type { CustomIconComponentProps } from "@ant-design/icons/lib/components/Icon";
1588 |
1589 | export const TextIconSvg = () => (
1590 |
1613 | );
1614 |
1615 | export const TextIcon = (props: Partial) => (
1616 |
1621 |
1622 | components/text-icon.tsx
1584 |
1585 | ```typescript
1586 | import Icon from "@ant-design/icons";
1587 | import type { CustomIconComponentProps } from "@ant-design/icons/lib/components/Icon";
1588 |
1589 | export const TextIconSvg = () => (
1590 |
1613 | );
1614 |
1615 | export const TextIcon = (props: Partial
1623 |
1624 |
1625 | ```typescript
1626 | import React from "react";
1627 |
1628 | import { PlusSquareOutlined } from "@ant-design/icons";
1629 | import { Button } from "antd";
1630 | import { Text } from "@/components/text";
1631 |
1632 | interface Props {
1633 | onClick: () => void;
1634 | }
1635 |
1636 | /** Render a button that allows you to add a new card to a column.
1637 | *
1638 | * @param onClick - a function that is called when the button is clicked.
1639 | * @returns a button that allows you to add a new card to a column.
1640 | */
1641 | export const KanbanAddCardButton = ({
1642 | children,
1643 | onClick,
1644 | }: React.PropsWithChildren) => {
1645 | return (
1646 | }
1649 | style={{
1650 | margin: "16px",
1651 | backgroundColor: "white",
1652 | }}
1653 | onClick={onClick}
1654 | >
1655 | {children ?? (
1656 |
1657 | Add new card
1658 |
1659 | )}
1660 |
1661 | );
1662 | };
1663 | ```
1664 |
1665 |
1666 |
1667 | components/tasks/kanban/add-card-button.tsx
1624 |
1625 | ```typescript
1626 | import React from "react";
1627 |
1628 | import { PlusSquareOutlined } from "@ant-design/icons";
1629 | import { Button } from "antd";
1630 | import { Text } from "@/components/text";
1631 |
1632 | interface Props {
1633 | onClick: () => void;
1634 | }
1635 |
1636 | /** Render a button that allows you to add a new card to a column.
1637 | *
1638 | * @param onClick - a function that is called when the button is clicked.
1639 | * @returns a button that allows you to add a new card to a column.
1640 | */
1641 | export const KanbanAddCardButton = ({
1642 | children,
1643 | onClick,
1644 | }: React.PropsWithChildren
1668 |
1669 |
1670 | ```typescript
1671 | import { useSearchParams } from "react-router-dom";
1672 |
1673 | import { useModalForm } from "@refinedev/antd";
1674 | import { useNavigation } from "@refinedev/core";
1675 |
1676 | import { Form, Input, Modal } from "antd";
1677 |
1678 | import { CREATE_TASK_MUTATION } from "@/graphql/mutations";
1679 |
1680 | const TasksCreatePage = () => {
1681 | // get search params from the url
1682 | const [searchParams] = useSearchParams();
1683 |
1684 | /**
1685 | * useNavigation is a hook by Refine that allows you to navigate to a page.
1686 | * https://refine.dev/docs/routing/hooks/use-navigation/
1687 | *
1688 | * list method navigates to the list page of the specified resource.
1689 | * https://refine.dev/docs/routing/hooks/use-navigation/#list
1690 | */ const { list } = useNavigation();
1691 |
1692 | /**
1693 | * useModalForm is a hook by Refine that allows you manage a form inside a modal.
1694 | * it extends the useForm hook from the @refinedev/antd package
1695 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/
1696 | *
1697 | * formProps -> It's an instance of HTML form that manages form state and actions like onFinish, onValuesChange, etc.
1698 | * Under the hood, it uses the useForm hook from the @refinedev/antd package
1699 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#formprops
1700 | *
1701 | * modalProps -> It's an instance of Modal that manages modal state and actions like onOk, onCancel, etc.
1702 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#modalprops
1703 | */
1704 | const { formProps, modalProps, close } = useModalForm({
1705 | // specify the action to perform i.e., create or edit
1706 | action: "create",
1707 | // specify whether the modal should be visible by default
1708 | defaultVisible: true,
1709 | // specify the gql mutation to be performed
1710 | meta: {
1711 | gqlMutation: CREATE_TASK_MUTATION,
1712 | },
1713 | });
1714 |
1715 | return (
1716 | {
1719 | // close the modal
1720 | close();
1721 |
1722 | // navigate to the list page of the tasks resource
1723 | list("tasks", "replace");
1724 | }}
1725 | title="Add new card"
1726 | width={512}
1727 | >
1728 |
1746 |
1747 | );
1748 | }
1749 |
1750 | export default TasksCreatePage;
1751 | ```
1752 |
1753 |
1754 |
1755 | pages/tasks/create.tsx
1669 |
1670 | ```typescript
1671 | import { useSearchParams } from "react-router-dom";
1672 |
1673 | import { useModalForm } from "@refinedev/antd";
1674 | import { useNavigation } from "@refinedev/core";
1675 |
1676 | import { Form, Input, Modal } from "antd";
1677 |
1678 | import { CREATE_TASK_MUTATION } from "@/graphql/mutations";
1679 |
1680 | const TasksCreatePage = () => {
1681 | // get search params from the url
1682 | const [searchParams] = useSearchParams();
1683 |
1684 | /**
1685 | * useNavigation is a hook by Refine that allows you to navigate to a page.
1686 | * https://refine.dev/docs/routing/hooks/use-navigation/
1687 | *
1688 | * list method navigates to the list page of the specified resource.
1689 | * https://refine.dev/docs/routing/hooks/use-navigation/#list
1690 | */ const { list } = useNavigation();
1691 |
1692 | /**
1693 | * useModalForm is a hook by Refine that allows you manage a form inside a modal.
1694 | * it extends the useForm hook from the @refinedev/antd package
1695 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/
1696 | *
1697 | * formProps -> It's an instance of HTML form that manages form state and actions like onFinish, onValuesChange, etc.
1698 | * Under the hood, it uses the useForm hook from the @refinedev/antd package
1699 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#formprops
1700 | *
1701 | * modalProps -> It's an instance of Modal that manages modal state and actions like onOk, onCancel, etc.
1702 | * https://refine.dev/docs/ui-integrations/ant-design/hooks/use-modal-form/#modalprops
1703 | */
1704 | const { formProps, modalProps, close } = useModalForm({
1705 | // specify the action to perform i.e., create or edit
1706 | action: "create",
1707 | // specify whether the modal should be visible by default
1708 | defaultVisible: true,
1709 | // specify the gql mutation to be performed
1710 | meta: {
1711 | gqlMutation: CREATE_TASK_MUTATION,
1712 | },
1713 | });
1714 |
1715 | return (
1716 |
1756 |
1757 |
1758 | ```typescript
1759 | import { useState } from "react";
1760 |
1761 | import { DeleteButton, useModalForm } from "@refinedev/antd";
1762 | import { useNavigation } from "@refinedev/core";
1763 |
1764 | import {
1765 | AlignLeftOutlined,
1766 | FieldTimeOutlined,
1767 | UsergroupAddOutlined,
1768 | } from "@ant-design/icons";
1769 | import { Modal } from "antd";
1770 |
1771 | import {
1772 | Accordion,
1773 | DescriptionForm,
1774 | DescriptionHeader,
1775 | DueDateForm,
1776 | DueDateHeader,
1777 | StageForm,
1778 | TitleForm,
1779 | UsersForm,
1780 | UsersHeader,
1781 | } from "@/components";
1782 | import { Task } from "@/graphql/schema.types";
1783 |
1784 | import { UPDATE_TASK_MUTATION } from "@/graphql/mutations";
1785 |
1786 | const TasksEditPage = () => {
1787 | const [activeKey, setActiveKey] = useState();
1788 |
1789 | // use the list method to navigate to the list page of the tasks resource from the navigation hook
1790 | const { list } = useNavigation();
1791 |
1792 | // create a modal form to edit a task using the useModalForm hook
1793 | // modalProps -> It's an instance of Modal that manages modal state and actions like onOk, onCancel, etc.
1794 | // close -> It's a function that closes the modal
1795 | // queryResult -> It's an instance of useQuery from react-query
1796 | const { modalProps, close, queryResult } = useModalForm({
1797 | // specify the action to perform i.e., create or edit
1798 | action: "edit",
1799 | // specify whether the modal should be visible by default
1800 | defaultVisible: true,
1801 | // specify the gql mutation to be performed
1802 | meta: {
1803 | gqlMutation: UPDATE_TASK_MUTATION,
1804 | },
1805 | });
1806 |
1807 | // get the data of the task from the queryResult
1808 | const { description, dueDate, users, title } = queryResult?.data?.data ?? {};
1809 |
1810 | const isLoading = queryResult?.isLoading ?? true;
1811 |
1812 | return (
1813 | {
1817 | close();
1818 | list("tasks", "replace");
1819 | }}
1820 | title={ {
1826 | list("tasks", "replace");
1827 | }}
1828 | >
1829 | Delete card
1830 |
1831 | }
1832 | >
1833 | {/* Render the stage form */}
1834 | setActiveKey(undefined)}
1849 | />
1850 |
1851 |
1852 | {/* Render the due date form inside an accordion */}
1853 | setActiveKey(undefined)}
1865 | />
1866 |
1867 |
1868 | {/* Render the users form inside an accordion */}
1869 | ({
1881 | label: user.name,
1882 | value: user.id,
1883 | })),
1884 | }}
1885 | cancelForm={() => setActiveKey(undefined)}
1886 | />
1887 |
1888 |
1889 | );
1890 | };
1891 |
1892 | export default TasksEditPage;
1893 | ```
1894 |
1895 |
1896 |
1897 | pages/tasks/edit.tsx
1757 |
1758 | ```typescript
1759 | import { useState } from "react";
1760 |
1761 | import { DeleteButton, useModalForm } from "@refinedev/antd";
1762 | import { useNavigation } from "@refinedev/core";
1763 |
1764 | import {
1765 | AlignLeftOutlined,
1766 | FieldTimeOutlined,
1767 | UsergroupAddOutlined,
1768 | } from "@ant-design/icons";
1769 | import { Modal } from "antd";
1770 |
1771 | import {
1772 | Accordion,
1773 | DescriptionForm,
1774 | DescriptionHeader,
1775 | DueDateForm,
1776 | DueDateHeader,
1777 | StageForm,
1778 | TitleForm,
1779 | UsersForm,
1780 | UsersHeader,
1781 | } from "@/components";
1782 | import { Task } from "@/graphql/schema.types";
1783 |
1784 | import { UPDATE_TASK_MUTATION } from "@/graphql/mutations";
1785 |
1786 | const TasksEditPage = () => {
1787 | const [activeKey, setActiveKey] = useState
1898 |
1899 |
1900 | ```typescript
1901 | import { AccordionHeaderSkeleton } from "@/components";
1902 | import { Text } from "./text";
1903 |
1904 | type Props = React.PropsWithChildren<{
1905 | accordionKey: string;
1906 | activeKey?: string;
1907 | setActive: (key?: string) => void;
1908 | fallback: string | React.ReactNode;
1909 | isLoading?: boolean;
1910 | icon: React.ReactNode;
1911 | label: string;
1912 | }>;
1913 |
1914 | /**
1915 | * when activeKey is equal to accordionKey, the children will be rendered. Otherwise, the fallback will be rendered
1916 | * when isLoading is true, the
1977 |
1978 | components/accordion.tsx
1899 |
1900 | ```typescript
1901 | import { AccordionHeaderSkeleton } from "@/components";
1902 | import { Text } from "./text";
1903 |
1904 | type Props = React.PropsWithChildren<{
1905 | accordionKey: string;
1906 | activeKey?: string;
1907 | setActive: (key?: string) => void;
1908 | fallback: string | React.ReactNode;
1909 | isLoading?: boolean;
1910 | icon: React.ReactNode;
1911 | label: string;
1912 | }>;
1913 |
1914 | /**
1915 | * when activeKey is equal to accordionKey, the children will be rendered. Otherwise, the fallback will be rendered
1916 | * when isLoading is true, the
1951 |
1972 | );
1973 | };
1974 | ```
1975 |
1976 | {icon}
1952 | {isActive ? (
1953 |
1961 |
1962 | {label}
1963 |
1964 | {children}
1965 |
1966 | ) : (
1967 |
1968 | {fallback}
1969 |
1970 | )}
1971 |
1979 |
1980 |
1981 | ```typescript
1982 | import { Space, Tag } from "antd";
1983 |
1984 | import { User } from "@/graphql/schema.types";
1985 | import CustomAvatar from "../custom-avatar";
1986 |
1987 | type Props = {
1988 | user: User;
1989 | };
1990 |
1991 | // display a user's avatar and name in a tag
1992 | export const UserTag = ({ user }: Props) => {
1993 | return (
1994 |
2004 |
2005 |
2012 |
2013 | );
2014 | };
2015 | ```
2016 |
2017 |
2018 |
2019 | ## 🔗 Links
2020 |
2021 | Other components (Kanban Edit Forms, Skeletons and utilities) used in the project can be found [here](https://drive.google.com/drive/folders/1oDFoI-a8qSJqHde6doUtM9NCHlYpWdNW?usp=sharing)
2022 |
2023 | ## 🚀 More
2024 |
2025 | **Advance your skills with Next.js 14 Pro Course**
2026 |
2027 | Enjoyed creating this project? Dive deeper into our PRO courses for a richer learning adventure. They're packed with detailed explanations, cool features, and exercises to boost your skills. Give it a go!
2028 |
2029 |
2030 | components/tags/user-tag.tsx
1980 |
1981 | ```typescript
1982 | import { Space, Tag } from "antd";
1983 |
1984 | import { User } from "@/graphql/schema.types";
1985 | import CustomAvatar from "../custom-avatar";
1986 |
1987 | type Props = {
1988 | user: User;
1989 | };
1990 |
1991 | // display a user's avatar and name in a tag
1992 | export const UserTag = ({ user }: Props) => {
1993 | return (
1994 | 2034 |
2035 | 2036 | **Accelerate your professional journey with the Expert Training program** 2037 | 2038 | And if you're hungry for more than just a course and want to understand how we learn and tackle tech challenges, hop into our personalized masterclass. We cover best practices, different web skills, and offer mentorship to boost your confidence. Let's learn and grow together! 2039 | 2040 | 2041 |