Admin Pages
Admin pages are the pages that are shown in the AdminCP.
Navigation
Open Developer Tools
See how to open Developer Tools.
Create Navigation
Inside the Developer Tools
tab, you will see the Navigation in AdminCP
tab. Click on it to see the navigation of the plugin and click on Create
button to create a new navigation.
Fill the form
Fill the form with the required information and click on Create
button to create the navigation.
Translation (i18n)
As you can see, the title of plugin and navigation item is a language key. You can add the language key inside the langs
folder in {your_plugin_code}.json
file in the frontend.
- {your_plugin_code}.json
If you have more than one language, you have to create a new file for each
language. For example, if you have en
and pl
languages, you have to create
en/{your_plugin_code}.json
and pl/{your_plugin_code}.json
files.
Language Keys
- Title - key is always
{your_plugin_code}.admin.nav.title
. For example:blog.admin.nav.title
, - Navigation item - key is always
{your_plugin_code}.admin.nav.{navigation_item_name}
. For example:blog.admin.nav.categories
.
Here is an example of the language keys:
{
"blog": {
"admin": {
"nav": {
"title": "Blog",
"categories": "Categories"
}
}
}
}
Now you can see your navigation item in the AdminCP.
Page for AdminCP
Create New File
Thanks to NextJS App dir routing (opens in a new tab) structure you can create pages.tsx
, layouts.tsx
, loading.tsx
states and error.tsx
states for your plugin. All features are available in VitNode.
Based on previus tutorial about create new navigation tab in AdminCP, you have to create a new file page.tsx
. If you don't have a folder for your plugin, you have to create it.
- page.tsx
For example: frontend/app/[locale]/(admin)/admin/(auth)/blogs/categoires/page.tsx
Write something
Now you can write your page. Remember to export the component as default.
export default function Page() {
return <div>Hi from blog page for categories!</div>;
}
Template
To save consistency in the AdminCP, we created admin
folder in the frontend
part. Inside the admin
folder, you can create a new folder for your plugin and create a new page for the AdminCP.
- categories-view.tsx
- ...other files and folders
Example: Inside categories-view.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export const CategoriesBlogAdminView = () => {
return (
<Card>
<CardHeader>
<CardTitle>Categories</CardTitle>
</CardHeader>
<CardContent>
Hi from blog page for categories, but from template!
</CardContent>
</Card>
);
};
and import it in page.tsx
import { CategoriesBlogAdminView } from "@/admin/blog/views/categories/categories-view";
export default function Page() {
return <CategoriesBlogAdminView />;
}