feat(admin): Add widgets in dashboard in AdminCP

AGENTS.md

@@ -1,89 +1,62 @@
 # Overview
 
-You are VitNode, highly skilled AI-powered assistant that always follows best practices.
+You are VitNode, an expert AI coding assistant. Follow repository conventions and best practices for performance, security, accessibility, UX, and SEO.
 
-# React Coding
+# React / Next.js
 
-- Don't use `React.FC` for defining React components. Instead, use the arrow function syntax.
-- Don't use `any` type in TypeScript and use `unknown` as less as possible.
-- Use `AutoForm` for forms instead of manually creating form components.
-- Use `React.lazy` and `Suspense` for code splitting and lazy loading for content-heavy dialogs like dialogs in forms.
-- After create/edit/delete operations, always refresh the data in the table to reflect the changes with notification using toast `sonner` with description.
-- `<Activity>` lets you hide and restore the UI and internal state of its children.
+- Arrow functions for components — never `React.FC`.
+- No `any`; use `unknown` as rarely as possible.
+- Use `AutoForm` for forms instead of hand-built form components.
+- `React.lazy` + `Suspense` for content-heavy dialogs (e.g. dialogs in forms).
+- After create/edit/delete: refresh the table data and show a `sonner` toast with a description.
+- `<Activity>` hides and restores children's UI and internal state:
 
 ```typescriptreact
 import { Activity } from "react";
+
 <Activity mode={isShowingSidebar ? "visible" : "hidden"}>
   <Sidebar />
 </Activity>;
 ```
 
-- Always add breadcrumbs using `@breadcrumb` in the page component (Parallel Routes).
-- Name `x.server.ts` files if inside is 'use server' code in Next.js.
-- Always add staff permissions when it's new admin api.
-
-### Improved Caching APIs
+- Add breadcrumbs via `@breadcrumb` (Parallel Routes) in the page component.
+- Name files `x.server.ts` when they contain `'use server'` code.
+- New admin APIs always require staff permissions.
 
-- revalidateTag() now requires a cacheLife profile as the second argument to enable stale-while-revalidate (SWR) behavior:
+### Caching APIs
 
-```js
-// ✅ Use built-in cacheLife profile (we recommend 'max' for most cases)
-revalidateTag("blog-posts", "max"); // or 'days', 'hours'
-
-// Or use an inline object with a custom revalidation time
-revalidateTag("products", { revalidate: 3600 });
-```
-
-- updateTag() (new): updateTag() is a new Server Actions-only API that provides read-your-writes semantics: `updateTag(`user-$userId`)`;
-- refresh() (new): refresh() is a new Server Actions-only API for refreshing uncached data only. It doesn't touch the cache at all
+- `revalidateTag(tag, profile)` — profile is required for SWR: `revalidateTag("blog-posts", "max")` (prefer `'max'`; also `'days'`, `'hours'`) or inline `{ revalidate: 3600 }`.
+- `updateTag(\`user-${userId}\`)` — Server Actions only, read-your-writes semantics.
+- `refresh()` — Server Actions only, refreshes uncached data, never touches the cache.
 
 # Coding Guidelines
 
-- You always implement the best practices with regards to performance, security, and accessibility.
-- Use semantic HTML elements when appropriate, like `main` and `header`.
-  - Make sure to use the correct ARIA roles and attributes.
-  - Remember to use the "sr-only" Tailwind class for screen reader only text.
-  - Add alt text for all images, unless they are decorative or it would be repetitive for screen readers.
-  - Add emit an event for important actions like create, update, delete, etc. to allow other components to react to the changes and add to docs (apps/docs/content/docs/dev/events/built-in-events.mdx)
-  - Use events to communicate between components instead of prop drilling or using context.
-  - Use Vercel AI SDK for AI features instead of other AI SDKs. Use the `c.get("ai")` model registry to resolve models and call the native Vercel AI SDK functions.
+- Always implement best practices for performance, security, and accessibility.
+- Semantic HTML (`main`, `header`) with correct ARIA roles/attributes, `sr-only` for screen-reader-only text, and alt text on all images unless decorative or repetitive.
+- Emit events for important actions (create, update, delete) so other components can react; use events instead of prop drilling or context. Document them in `apps/docs/content/docs/dev/events/built-in-events.mdx`.
+- AI features use the Vercel AI SDK only — resolve models via the `c.get("ai")` registry and call native SDK functions.
 
 # Design
 
-- All new pages and components should have good UX and modern and clean UI design.
-- Be sure to update the layout.tsx metadata (title, description, etc.) and viewport (theme-color, userScalable, etc.) based on the user's request for optimal SEO.
-- ALWAYS use exactly 3-5 colors total.
-- NEVER use purple or violet prominently.
-- If you override a components background color, you MUST override its text color to ensure proper contrast.
-- Be sure to override text colors if you change a background color.
-- ALWAYS design mobile-first, then enhance for larger screens.
-- NEVER use floats or absolute positioning unless absolutely necessary
-- Use line-height between 1.4-1.6 for body text (use 'leading-relaxed' or 'leading-6')
-- NEVER use decorative fonts for body text or fonts smaller than 14px.
-- Prefer the Tailwind spacing scale instead of arbitrary values: YES `p-4`, `mx-2`, `py-6`, NO `p-[16px]`, `mx-[8px]`, `py-[24px]`.
-- Prefer gap classes for spacing: `gap-4`, `gap-x-2`, `gap-y-6`
-- Use semantic Tailwind classes: `items-center`, `justify-between`, `text-center`
-- Use responsive prefixes: `md:grid-cols-2`, `lg:text-xl`
-- Use semantic design tokens when possible (bg-background, text-foreground, etc.)
-- Wrap titles and other important copy in `text-balance` or `text-pretty` to ensure optimal line breaks
-- NEVER mix margin/padding with gap classes on the same element
-- NEVER use space-* classes for spacing
+- New pages and components need good UX and a modern, clean UI. Design mobile-first, then enhance for larger screens.
+- Update `layout.tsx` metadata (title, description) and viewport (theme-color, userScalable) for SEO.
+- Exactly 3–5 colors total. Never use purple or violet prominently.
+- If you override a background color, you MUST override its text color for contrast.
+- Prefer semantic design tokens (`bg-background`, `text-foreground`).
+- Use the Tailwind spacing scale (`p-4`, `mx-2`) — never arbitrary values (`p-[16px]`).
+- Use `gap-*` classes for spacing. Never use `space-*`, and never mix margin/padding with gap on the same element.
+- Use semantic (`items-center`, `justify-between`) and responsive (`md:grid-cols-2`) classes.
+- No floats or absolute positioning unless absolutely necessary.
+- Body text: `leading-relaxed` (1.4–1.6), never below 14px, never decorative fonts.
+- Wrap titles and important copy in `text-balance` or `text-pretty`.
 
 # Documentation
 
-- Don't write big comments. Remember that code is self-documenting.
-- Add as needed image via comment:
-
-```markdown
-// Image prompt: {here_prompt_to_generate_image}
-```
-
-- Always write documentation for all new features.
-- Keep docs simple and easy to understand.
-- Use funny and friendly tone in docs, but don't overdo it.
-- Docs should be written in a way that is easy to understand for developers of all skill levels.
-- Keep docs to be SEO friendly and optimized for search engines.
-- All example usage commands npm, pnpm, bun etc. should be in code block with the correct syntax highlighting.
+- Document every new feature. Keep it simple, SEO-friendly, and understandable at any skill level.
+- Friendly and lightly funny tone — don't overdo it.
+- Skip big comments; code is self-documenting.
+- Request images with a comment: `// Image prompt: {here_prompt_to_generate_image}`
+- Put install commands in tabbed code blocks with correct syntax highlighting:
 
 ````markdown
 import { Tab, Tabs } from "fumadocs-ui/components/tabs";
@@ -93,7 +66,6 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 ```bash tab="bun"
 bun i x
 ```
-````
 
 ```bash tab="pnpm"
 pnpm i x
@@ -104,13 +76,10 @@ npm i x
 ```
 
 </Tabs>
-```
+````
 
 # Testing
 
-- Login to app as admin is: test@test.com/Test123!
-
-## Unit Testing
-
-- Always write and run unit tests in vitest for all new features and bug fixes.
-- Don't write unit tests if app doesn't have configured vitest.
+- Admin login: `test@test.com` / `Test123!`
+- Write and run vitest unit tests for all new features and bug fixes — skip only if vitest isn't configured.
+- Don't write tests for trivial code unless they have complex logic or edge cases.

apps/docs/content/docs/dev/plugins/admin-page.mdx

@@ -216,4 +216,9 @@ VitNode automatically uses the `id` as translation key for the navigation item.
     description="Create custom layouts and pages"
     href="/docs/plugins/layouts-and-pages"
   />
+  <Card
+    title="Dashboard Widgets"
+    description="Put your plugin's cards on the AdminCP dashboard"
+    href="/docs/dev/plugins/dashboard-widgets"
+  />
 </Cards>