genetic-orange•3mo ago

How to create dashboard

How do you create a dashboard in a next.js application that uses Refine? My app is using the 'pages' folder to handle routing and I can't find docs for how to do this.

5 Replies

kapa.ai•3mo ago

Hi @Chrystian Ferreira. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a dashboard in a Next.js application that uses Refine, you can follow these steps: 1. Create a new file for your dashboard page. This could be pages/dashboard/index.tsx. 2. In this file, define your dashboard component. This could be a simple component that renders a message, or it could be more complex depending on your needs. 3. Import the routerProvider from @refinedev/nextjs-router to set up the router bindings for Refine. 4. Define your dashboard route in the resources array in your Refine component in the src/App.tsx file. This will look something like this:

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/nextjs-router/pages";  
import { DashboardPage } from "./pages/dashboard";  

function App({ Component, pageProps }: AppProps): JSX.Element {  
 return (  
 <Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 routerProvider={routerProvider}  
 resources={[  
 {  
 name: "dashboard",  
 list: "/dashboard",  
 },  
 // other resources here
 ]}  
 >  
 // other components here
 </Refine>  
 );  
}

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/nextjs-router/pages";  
import { DashboardPage } from "./pages/dashboard";  

function App({ Component, pageProps }: AppProps): JSX.Element {  
 return (  
 <Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 routerProvider={routerProvider}  
 resources={[  
 {  
 name: "dashboard",  
 list: "/dashboard",  
 },  
 // other resources here
 ]}  
 >  
 // other components here
 </Refine>  
 );  
}

In this example, DashboardPage is the component you created in step 2, and "/dashboard" is the route where this component will be displayed. For more detailed instructions, you can refer to the Refine documentation (https://refine.dev/docs/routing/integrations/next-js#pages-directory) and this blog post (https://refine.dev/blog/next-ui-react-admin-panel#create-key-performance-indicator-card). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below

genetic-orange•3mo ago

@kapa.ai Inside ThemedSiderV2 there's an component in use called 'Dashboard'. Here's the code provided by the Refine team for this Dashboard menu item:

export const Dashboard = () => {
  const { selectedKey } = useMenu();
  const { siderCollapsed } = useThemedLayoutContext();
  const { Link: LegacyLink } = useRouterContext();
  const { hasDashboard } = useRefineContext();
  const routerType = useRouterType();
  const translate = useTranslate();
  const NewLink = useLink();
  const Link = routerType === "legacy" ? LegacyLink : NewLink;

  console.log({ hasDashboard });

  return (
    <>
      {hasDashboard && (
        <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
          <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
          {!siderCollapsed && selectedKey === "/" && (
            <div className="ant-menu-tree-arrow" />
          )}
        </Menu.Item>
      )}
    </>
  );
};

export const Dashboard = () => {
  const { selectedKey } = useMenu();
  const { siderCollapsed } = useThemedLayoutContext();
  const { Link: LegacyLink } = useRouterContext();
  const { hasDashboard } = useRefineContext();
  const routerType = useRouterType();
  const translate = useTranslate();
  const NewLink = useLink();
  const Link = routerType === "legacy" ? LegacyLink : NewLink;

  console.log({ hasDashboard });

  return (
    <>
      {hasDashboard && (
        <Menu.Item key="dashboard" icon={<DashboardOutlined />}>
          <Link to="/">{translate("dashboard.title", "Dashboard")}</Link>
          {!siderCollapsed && selectedKey === "/" && (
            <div className="ant-menu-tree-arrow" />
          )}
        </Menu.Item>
      )}
    </>
  );
};

In my application, property hasDashboardreturned by useRefineContext() is false. What changes do I need to make in order for this to be true?

kapa.ai•3mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- The hasDashboard property from useRefineContext() hook in Refine is a boolean that indicates whether a dashboard exists in your application or not. It is automatically set to true if you have defined a dashboard route in your resources array in the Refine component. To make hasDashboard return true, you need to define a dashboard route in your resources array in the Refine component. Here's an example:

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/react-router-v6";  

function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 routerProvider={routerProvider}  
 resources={[  
 {  
 name: "dashboard",  
 list: "/",  
 },  
 // other resources here
 ]}  
 >  
 // other components here
 </Refine>  
 );  
}

import { Refine } from "@refinedev/core";  
import dataProvider from "@refinedev/simple-rest";  
import routerProvider from "@refinedev/react-router-v6";  

function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider("<https://api.fake-rest.refine.dev">)}  
 routerProvider={routerProvider}  
 resources={[  
 {  
 name: "dashboard",  
 list: "/",  
 },  
 // other resources here
 ]}  
 >  
 // other components here
 </Refine>  
 );  
}

In this example, a dashboard route is defined with the name "dashboard" and the list route "/". This means that the dashboard will be accessible at the root ("/") of your application. For more detailed instructions, you can refer to the Refine documentation (https://refine.dev/docs/api-reference/core/hooks/context/useRefineContext) and this blog post (https://refine.dev/blog/daisy-ui-react-admin-panel#kpicard--component). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below