Dashboard Pages

import { Pages } from "#medusa/modules";

export class ItemsPage extends Pages {
    constructor(medusa) {
        super(medusa, {
            name: "items",
            label: "Items Manager",
            description: "View, inspect, and manage server stock items.",
            icon: "box",
            group: "Modules",
            order: 1,
            component: "items",
            config: {
                endpoint: "/items"
            }
        });
    }
}

async load({ client, session }) {
    try {
        const current = await session.current();
        const [items, stats] = await Promise.all([
            client.send("GET", `/api/modules/example/items?user=${encodeURIComponent(current.discordId)}`),
            client.send("GET", "/api/modules/example/stats").catch(() => ({ total: 0, active: 0 }))
        ]);
        return { available: true, data: { items, stats } };
    } catch {
        return { available: false };
    }
}

resources/dashboard/pages/items/
├── page.js      # Page metadata and load()
└── view.tsx     # React view component

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Select } from "@/components/ui/select";
import { Modal } from "@/components/ui/modal";
import { medusa } from "@/lib/medusa";
import type { ViewProps } from "@/components/pages/types";

export default function ItemsView({ data }: ViewProps) {
    const [searchQuery, setSearchQuery] = useState("");
    const [statusFilter, setStatusFilter] = useState("all");
    const [modalOpen, setModalOpen] = useState(false);

    async function create(name: string) {
        await medusa.moduleAction("example", "POST", "/items", { name });
        setModalOpen(false);
    }

    return (
        <div className="flex flex-col gap-6">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
                <Card>
                    <CardContent className="flex items-center gap-4 p-5">
                        <span className="text-2xl font-bold">150</span>
                        <span className="text-xs text-muted-foreground">Total Stock</span>
                    </CardContent>
                </Card>
            </div>

            <div className="flex items-center gap-3">
                <Input
                    value={searchQuery}
                    onChange={event => setSearchQuery(event.target.value)}
                    placeholder="Search items"
                    className="h-9"
                />
                <Select
                    value={statusFilter}
                    onValueChange={setStatusFilter}
                    options={[
                        { value: "all", label: "All Items" },
                        { value: "active", label: "Active" }
                    ]}
                    className="h-9 w-48"
                />
                <Button variant="default" size="default" onClick={() => setModalOpen(true)} className="h-9">
                    Create Item
                </Button>
            </div>

            <Modal open={modalOpen} onClose={() => setModalOpen(false)} title="Create Item">
                <div className="flex flex-col gap-3 pt-2">
                    <Input placeholder="Item Name" className="h-9" />
                    <Button variant="default" size="default" onClick={() => create("Item")} className="h-9">
                        Save
                    </Button>
                </div>
            </Modal>
        </div>
    );
}

page:<moduleName>:<pageName>

{
    "page.appeals.appeals.column.status": "Status",
    "page.appeals.appeals.empty.title": "Keine Einsprüche gefunden",
    "page.appeals.appeals.value.status.pending": "Ausstehend"
}

GET /api/modules/<moduleName>/items

import { Routes } from "#medusa/modules";

export class ItemsRoute extends Routes {
    constructor(medusa) {
        super(medusa, {
            name: "items",
            path: "/items",
            authentication: { key: "secret" }
        });
    }

    async GET(request) {
        const handler = this.medusa.modules.handlers.get(this.module, "items");
        return handler.listForGuild(this.medusa.settings.get("GUILD_ID"));
    }
}