Admin Pages

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.

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.

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.

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.

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 />;
}