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
kapa.ai2mo 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
kapa.ai2mo ago
<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below
foreign-sapphire
foreign-sapphire2mo 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
kapa.ai2mo 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
kapa.ai2mo ago
<@1072217596058939412> kapa.ai is still learning and improving, please let us know how it did by reacting below