@llmnative/react 1.19.0 → 1.19.2

package/templates/admin/pages/users/UsersPage.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Grid, Badge, Input, Select, type BadgeType } from '@llmnative/react';
+
+const roleOptions = [
+    { label: 'Administrator', value: 'admin' },
+    { label: 'Editor',        value: 'editor' },
+    { label: 'Viewer',        value: 'viewer' },
+];
+
+const statusOptions = [
+    { label: 'Active',   value: 'active' },
+    { label: 'Inactive', value: 'inactive' },
+];
+
+const roleVariant: Record<string, BadgeType> = {
+    admin:  'danger',
+    editor: 'primary',
+    viewer: 'secondary',
+};
+
+export default function UsersPage() {
+    return (
+        <Grid
+            path="/users"
+            columns={[
+                { key: 'name',      label: 'Name',    sortable: true },
+                { key: 'email',     label: 'Email' },
+                { key: 'role',      label: 'Role',
+                    render: ({ value }) => (
+                        <Badge variant={roleVariant[String(value)] ?? 'secondary'}>{String(value)}</Badge>
+                    ),
+                },
+                { key: 'status',    label: 'Status',
+                    render: ({ value }) => (
+                        <Badge variant={value === 'active' ? 'success' : 'secondary'}>{String(value)}</Badge>
+                    ),
+                },
+                { key: 'createdAt', label: 'Created', render: 'date' },
+            ]}
+            actions={['add', 'edit', 'delete']}
+            view="table"
+            sortable
+            pagination={{ limit: 25 }}
+            form={
+                <>
+                    <Input  name="name"   label="Full name" required />
+                    <Input  name="email"  label="Email"     type="email" required />
+                    <Select name="role"   label="Role"      options={roleOptions} />
+                    <Select name="status" label="Status"    options={statusOptions} />
+                </>
+            }
+        />
+    );
+}

package/templates/blank/conf/menu.ts

@@ -0,0 +1,8 @@
+import type { MenuConfig } from '@llmnative/react';
+import HomePage from '../pages/home/HomePage';
+
+export const menu: MenuConfig = {
+    main: [
+        { path: '/', title: 'Home', icon: 'home', page: HomePage, end: true },
+    ],
+};

package/templates/blank/data/mockData.ts

@@ -0,0 +1,6 @@
+export const mockData = {
+    '/tasks': {
+        'task-1': { title: 'Review scaffold structure', status: 'done' },
+        'task-2': { title: 'Connect your first provider', status: 'next' },
+    },
+};

package/templates/blank/pages/home/HomePage.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Grid } from '@llmnative/react';
+
+export default function HomePage() {
+    return (
+        <div className="mx-auto max-w-5xl space-y-8 px-2 py-4">
+            <div className="space-y-1">
+                <h1 className="text-2xl font-semibold">Welcome to [projectname]</h1>
+                <p className="text-sm text-muted-foreground">
+                    Scaffolded with LLM Native. Edit this page at <code>src/pages/home/HomePage.tsx</code>.
+                </p>
+            </div>
+
+            <Grid
+                path="/tasks"
+                columns={[
+                    { key: 'title', label: 'Task' },
+                    { key: 'status', label: 'Status' },
+                ]}
+                actions={['add', 'edit', 'delete']}
+                view="table"
+            />
+        </div>
+    );
+}

package/templates/crm/conf/menu.ts

@@ -0,0 +1,14 @@
+import type { MenuConfig } from '@llmnative/react';
+import HomePage from '../pages/home/HomePage';
+import ContactsPage from '../pages/contacts/ContactsPage';
+import CompaniesPage from '../pages/companies/CompaniesPage';
+import DealsPage from '../pages/deals/DealsPage';
+
+export const menu: MenuConfig = {
+    main: [
+        { path: '/',          title: 'Dashboard', icon: 'layout-dashboard', page: HomePage, end: true },
+        { path: '/contacts',  title: 'Contacts',  icon: 'users',            page: ContactsPage, group: 'Sales' },
+        { path: '/companies', title: 'Companies', icon: 'building-2',       page: CompaniesPage, group: 'Sales' },
+        { path: '/deals',     title: 'Deals',     icon: 'handshake',        page: DealsPage, group: 'Sales' },
+    ],
+};

package/templates/crm/data/mockData.ts

@@ -0,0 +1,24 @@
+export const mockData = {
+    '/contacts': {
+        'c-1': { name: 'Alice Martin',   email: 'alice@acme.com',   company: 'Acme Corp',   status: 'active',   phone: '+1 555 0101' },
+        'c-2': { name: 'Bob Chen',       email: 'bob@globex.com',   company: 'Globex',      status: 'active',   phone: '+1 555 0102' },
+        'c-3': { name: 'Clara Rossi',    email: 'clara@initech.it', company: 'Initech',     status: 'inactive', phone: '+39 02 0103' },
+        'c-4': { name: 'David Park',     email: 'd.park@umbrella.co', company: 'Umbrella',  status: 'active',   phone: '+1 555 0104' },
+        'c-5': { name: 'Eva Müller',     email: 'eva@hooli.de',     company: 'Hooli',       status: 'lead',     phone: '+49 89 0105' },
+    },
+    '/companies': {
+        'co-1': { name: 'Acme Corp',  industry: 'Manufacturing', website: 'acme.com',    employees: 320 },
+        'co-2': { name: 'Globex',     industry: 'Technology',    website: 'globex.com',  employees: 85  },
+        'co-3': { name: 'Initech',    industry: 'IT Services',   website: 'initech.it',  employees: 50  },
+        'co-4': { name: 'Umbrella',   industry: 'Pharma',        website: 'umbrella.co', employees: 1200 },
+        'co-5': { name: 'Hooli',      industry: 'Technology',    website: 'hooli.de',    employees: 600 },
+    },
+    '/deals': {
+        'd-1': { title: 'Enterprise license',  contact: 'Alice Martin',  value: 12000, stage: 'qualified',  closedAt: '' },
+        'd-2': { title: 'SaaS subscription',   contact: 'Bob Chen',      value: 4800,  stage: 'prospect',   closedAt: '' },
+        'd-3': { title: 'Consulting package',  contact: 'Clara Rossi',   value: 7500,  stage: 'proposal',   closedAt: '' },
+        'd-4': { title: 'Support renewal',     contact: 'David Park',    value: 2400,  stage: 'won',        closedAt: '2025-03-15' },
+        'd-5': { title: 'Migration project',   contact: 'Eva Müller',    value: 18000, stage: 'prospect',   closedAt: '' },
+        'd-6': { title: 'Hardware bundle',     contact: 'Alice Martin',  value: 5600,  stage: 'lost',       closedAt: '2025-02-28' },
+    },
+};

package/templates/crm/pages/companies/CompaniesPage.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Grid, Input, Select } from '@llmnative/react';
+
+const industryOptions = [
+    { label: 'Technology', value: 'Technology' },
+    { label: 'Manufacturing', value: 'Manufacturing' },
+    { label: 'IT Services', value: 'IT Services' },
+    { label: 'Pharma', value: 'Pharma' },
+    { label: 'Finance', value: 'Finance' },
+    { label: 'Retail', value: 'Retail' },
+    { label: 'Other', value: 'Other' },
+];
+
+export default function CompaniesPage() {
+    return (
+        <Grid
+            path="/companies"
+            columns={[
+                { key: 'name', label: 'Company', sortable: true },
+                { key: 'industry', label: 'Industry', sortable: true },
+                { key: 'website', label: 'Website' },
+                {
+                    key: 'employees',
+                    label: 'Employees',
+                    render: ({ value }) => value ? Number(value).toLocaleString() : '-',
+                },
+            ]}
+            actions={['add', 'edit', 'delete']}
+            view="table"
+            sortable
+            pagination={{ limit: 20 }}
+            form={
+                <>
+                    <Input name="name" label="Company name" required />
+                    <Select name="industry" label="Industry" options={industryOptions} />
+                    <Input name="website" label="Website" />
+                    <Input name="employees" label="Employees" type="number" />
+                </>
+            }
+        />
+    );
+}

package/templates/crm/pages/contacts/ContactsPage.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Grid, Badge, Input, Select, type BadgeType } from '@llmnative/react';
+
+const statusOptions = [
+    { label: 'Active', value: 'active' },
+    { label: 'Inactive', value: 'inactive' },
+    { label: 'Lead', value: 'lead' },
+];
+
+const statusVariant: Record<string, BadgeType> = {
+    active: 'success',
+    inactive: 'secondary',
+    lead: 'warning',
+};
+
+export default function ContactsPage() {
+    return (
+        <Grid
+            path="/contacts"
+            columns={[
+                { key: 'name', label: 'Name', sortable: true },
+                { key: 'email', label: 'Email' },
+                { key: 'company', label: 'Company', sortable: true },
+                { key: 'phone', label: 'Phone' },
+                {
+                    key: 'status',
+                    label: 'Status',
+                    render: ({ value }) => (
+                        <Badge variant={statusVariant[String(value)] ?? 'secondary'}>{String(value)}</Badge>
+                    ),
+                },
+            ]}
+            actions={['add', 'edit', 'delete']}
+            view="table"
+            sortable
+            pagination={{ limit: 20 }}
+            form={
+                <>
+                    <Input name="name" label="Full name" required />
+                    <Input name="email" label="Email" type="email" />
+                    <Input name="phone" label="Phone" />
+                    <Input name="company" label="Company" />
+                    <Select name="status" label="Status" options={statusOptions} />
+                </>
+            }
+        />
+    );
+}

package/templates/crm/pages/deals/DealsPage.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Grid, Badge, Input, Select, type BadgeType } from '@llmnative/react';
+
+const stageOptions = [
+    { label: 'Prospect', value: 'prospect' },
+    { label: 'Qualified', value: 'qualified' },
+    { label: 'Proposal', value: 'proposal' },
+    { label: 'Won', value: 'won' },
+    { label: 'Lost', value: 'lost' },
+];
+
+const stageVariant: Record<string, BadgeType> = {
+    prospect: 'secondary',
+    qualified: 'info',
+    proposal: 'warning',
+    won: 'success',
+    lost: 'danger',
+};
+
+export default function DealsPage() {
+    return (
+        <Grid
+            path="/deals"
+            columns={[
+                { key: 'title', label: 'Deal', sortable: true },
+                { key: 'contact', label: 'Contact' },
+                {
+                    key: 'value',
+                    label: 'Value',
+                    render: ({ value }) => `$ ${Number(value).toLocaleString()}`,
+                },
+                {
+                    key: 'stage',
+                    label: 'Stage',
+                    render: ({ value }) => (
+                        <Badge variant={stageVariant[String(value)] ?? 'secondary'}>{String(value)}</Badge>
+                    ),
+                },
+                {
+                    key: 'closedAt',
+                    label: 'Closed',
+                    render: ({ value }) => (value ? String(value) : '-'),
+                },
+            ]}
+            actions={['add', 'edit', 'delete']}
+            view="table"
+            groupBy="stage"
+            sortable
+            pagination={{ limit: 25 }}
+            form={
+                <>
+                    <Input name="title" label="Deal title" required />
+                    <Input name="contact" label="Contact name" />
+                    <Input name="value" label="Value ($)" type="number" />
+                    <Select name="stage" label="Stage" options={stageOptions} />
+                    <Input name="closedAt" label="Closed date" type="date" />
+                </>
+            }
+        />
+    );
+}

package/templates/crm/pages/home/HomePage.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Card } from '@llmnative/react';
+import { mockData } from '../../data/mockData';
+
+function StatCard({ label, value, sub }: { label: string; value: number | string; sub?: string }) {
+    return (
+        <Card title={label}>
+            <p className="text-2xl font-semibold">{value}</p>
+            {sub && <p className="text-xs text-muted-foreground">{sub}</p>}
+        </Card>
+    );
+}
+
+export default function HomePage() {
+    const contacts = Object.values(mockData['/contacts']);
+    const deals = Object.values(mockData['/deals']);
+    const openDeals = deals.filter((d) => d.stage !== 'won' && d.stage !== 'lost');
+    const pipeline = openDeals.reduce((sum, d) => sum + d.value, 0);
+
+    return (
+        <div className="mx-auto max-w-5xl space-y-8 px-2 py-4">
+            <div className="space-y-1">
+                <h1 className="text-2xl font-semibold">Dashboard</h1>
+                <p className="text-sm text-muted-foreground">Overview of your CRM activity.</p>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                <StatCard label="Contacts" value={contacts.length} />
+                <StatCard label="Active" value={contacts.filter(c => c.status === 'active').length} sub="active contacts" />
+                <StatCard label="Open deals" value={openDeals.length} />
+                <StatCard label="Pipeline" value={`$ ${pipeline.toLocaleString()}`} sub="total open value" />
+            </div>
+        </div>
+    );
+}

package/templates/inventory/conf/menu.ts

@@ -0,0 +1,12 @@
+import type { MenuConfig } from '@llmnative/react';
+import HomePage from '../pages/home/HomePage';
+import ProductsPage from '../pages/products/ProductsPage';
+import CategoriesPage from '../pages/categories/CategoriesPage';
+
+export const menu: MenuConfig = {
+    main: [
+        { path: '/',           title: 'Overview',   icon: 'layout-dashboard', page: HomePage, end: true },
+        { path: '/products',   title: 'Products',   icon: 'package',          page: ProductsPage, group: 'Catalog' },
+        { path: '/categories', title: 'Categories', icon: 'tag',              page: CategoriesPage, group: 'Catalog' },
+    ],
+};

package/templates/inventory/data/mockData.ts

@@ -0,0 +1,16 @@
+export const mockData = {
+    '/categories': {
+        'cat-1': { name: 'Electronics',  slug: 'electronics' },
+        'cat-2': { name: 'Clothing',     slug: 'clothing' },
+        'cat-3': { name: 'Home & Garden',slug: 'home-garden' },
+        'cat-4': { name: 'Sports',       slug: 'sports' },
+    },
+    '/products': {
+        'p-1': { name: 'Wireless Headphones', category: 'Electronics',   price: 79.00,  stock: 42,  sku: 'EL-001', active: true },
+        'p-2': { name: 'Running Shoes',       category: 'Sports',        price: 120.00, stock: 18,  sku: 'SP-002', active: true },
+        'p-3': { name: 'Desk Lamp',           category: 'Home & Garden', price: 35.00,  stock: 0,   sku: 'HG-003', active: false },
+        'p-4': { name: 'Cotton T-Shirt',      category: 'Clothing',      price: 15.00,  stock: 130, sku: 'CL-004', active: true },
+        'p-5': { name: 'Mechanical Keyboard', category: 'Electronics',   price: 99.00,  stock: 25,  sku: 'EL-005', active: true },
+        'p-6': { name: 'Yoga Mat',            category: 'Sports',        price: 45.00,  stock: 60,  sku: 'SP-006', active: true },
+    },
+};

package/templates/inventory/pages/categories/CategoriesPage.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Grid, Input } from '@llmnative/react';
+
+export default function CategoriesPage() {
+    return (
+        <Grid
+            path="/categories"
+            columns={[
+                { key: 'name', label: 'Category', sortable: true },
+                { key: 'slug', label: 'Slug' },
+            ]}
+            actions={['add', 'edit', 'delete']}
+            view="table"
+            sortable
+            form={
+                <>
+                    <Input name="name" label="Category name" required />
+                    <Input name="slug" label="Slug (e.g. home-garden)" />
+                </>
+            }
+        />
+    );
+}

package/templates/inventory/pages/home/HomePage.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Card } from '@llmnative/react';
+import { mockData } from '../../data/mockData';
+
+function StatCard({ label, value, sub }: { label: string; value: number | string; sub?: string }) {
+    return (
+        <Card title={label}>
+            <p className="text-2xl font-semibold">{value}</p>
+            {sub && <p className="text-xs text-muted-foreground">{sub}</p>}
+        </Card>
+    );
+}
+
+export default function HomePage() {
+    const products = Object.values(mockData['/products']);
+    const totalStock = products.reduce((sum, p) => sum + p.stock, 0);
+    const outOfStock = products.filter(p => p.stock === 0).length;
+    const totalValue = products.reduce((sum, p) => sum + p.price * p.stock, 0);
+
+    return (
+        <div className="mx-auto max-w-5xl space-y-8 px-2 py-4">
+            <div className="space-y-1">
+                <h1 className="text-2xl font-semibold">Inventory</h1>
+                <p className="text-sm text-muted-foreground">Stock overview across all categories.</p>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                <StatCard label="Products"    value={products.length} />
+                <StatCard label="Total stock" value={totalStock.toLocaleString()} sub="units" />
+                <StatCard label="Out of stock" value={outOfStock} sub="products" />
+                <StatCard label="Stock value" value={`$ ${(totalValue / 100).toLocaleString()}`} />
+            </div>
+        </div>
+    );
+}

package/templates/inventory/pages/products/ProductsPage.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Grid, Badge, Input, Select } from '@llmnative/react';
+
+const categoryOptions = [
+    { label: 'Electronics', value: 'Electronics' },
+    { label: 'Clothing', value: 'Clothing' },
+    { label: 'Home & Garden', value: 'Home & Garden' },
+    { label: 'Sports', value: 'Sports' },
+];
+
+export default function ProductsPage() {
+    return (
+        <Grid
+            path="/products"
+            columns={[
+                { key: 'name', label: 'Product', sortable: true },
+                { key: 'sku', label: 'SKU' },
+                { key: 'category', label: 'Category', sortable: true },
+                {
+                    key: 'price',
+                    label: 'Price',
+                    render: ({ value }) => `$ ${Number(value).toFixed(2)}`,
+                },
+                {
+                    key: 'stock',
+                    label: 'Stock',
+                    render: ({ value }) => (
+                        <Badge variant={Number(value) === 0 ? 'danger' : Number(value) < 10 ? 'warning' : 'success'}>
+                            {String(value)}
+                        </Badge>
+                    ),
+                },
+                {
+                    key: 'active',
+                    label: 'Active',
+                    render: ({ value }) => (
+                        <Badge variant={value ? 'success' : 'secondary'}>{value ? 'Yes' : 'No'}</Badge>
+                    ),
+                },
+            ]}
+            actions={['add', 'edit', 'delete']}
+            view="table"
+            sortable
+            pagination={{ limit: 25 }}
+            form={
+                <>
+                    <Input name="name" label="Product name" required />
+                    <Input name="sku" label="SKU" />
+                    <Select name="category" label="Category" options={categoryOptions} />
+                    <Input name="price" label="Price ($)" type="number" min={0} step={0.01} />
+                    <Input name="stock" label="Stock (units)" type="number" />
+                </>
+            }
+        />
+    );
+}

package/templates/project/conf/menu.ts

@@ -0,0 +1,14 @@
+import type { MenuConfig } from '@llmnative/react';
+import HomePage from '../pages/home/HomePage';
+import ProjectsPage from '../pages/projects/ProjectsPage';
+import TasksPage from '../pages/tasks/TasksPage';
+import TeamPage from '../pages/team/TeamPage';
+
+export const menu: MenuConfig = {
+    main: [
+        { path: '/',         title: 'Overview',  icon: 'layout-dashboard', page: HomePage, end: true },
+        { path: '/projects', title: 'Projects',  icon: 'folder-open',      page: ProjectsPage, group: 'Work' },
+        { path: '/tasks',    title: 'Tasks',     icon: 'check-square',     page: TasksPage, group: 'Work' },
+        { path: '/team',     title: 'Team',      icon: 'users',            page: TeamPage, group: 'Work' },
+    ],
+};

package/templates/project/data/mockData.ts

@@ -0,0 +1,21 @@
+export const mockData = {
+    '/team': {
+        'tm-1': { name: 'Alice Martin', role: 'Lead developer',  email: 'alice@example.com' },
+        'tm-2': { name: 'Bob Chen',     role: 'Designer',        email: 'bob@example.com' },
+        'tm-3': { name: 'Clara Rossi',  role: 'Project manager', email: 'clara@example.com' },
+    },
+    '/projects': {
+        'pr-1': { name: 'Website redesign',   status: 'active',   owner: 'Alice Martin', deadline: '2025-08-31', description: 'Full UX and branding overhaul.' },
+        'pr-2': { name: 'Mobile app v2',      status: 'active',   owner: 'Bob Chen',     deadline: '2025-10-15', description: 'React Native rebuild.' },
+        'pr-3': { name: 'API migration',      status: 'done',     owner: 'Alice Martin', deadline: '2025-04-01', description: 'Move from REST to GraphQL.' },
+        'pr-4': { name: 'Analytics dashboard',status: 'planning', owner: 'Clara Rossi',  deadline: '2025-12-01', description: 'Realtime metrics for ops team.' },
+    },
+    '/tasks': {
+        't-1': { title: 'Define color palette',     project: 'Website redesign',   assignee: 'Bob Chen',     status: 'done',        priority: 'high' },
+        't-2': { title: 'Implement auth flow',      project: 'Mobile app v2',      assignee: 'Alice Martin', status: 'in-progress', priority: 'high' },
+        't-3': { title: 'Write API docs',           project: 'API migration',      assignee: 'Alice Martin', status: 'done',        priority: 'medium' },
+        't-4': { title: 'Design dashboard layout',  project: 'Analytics dashboard',assignee: 'Bob Chen',     status: 'todo',        priority: 'medium' },
+        't-5': { title: 'Homepage wireframes',      project: 'Website redesign',   assignee: 'Bob Chen',     status: 'in-progress', priority: 'medium' },
+        't-6': { title: 'Data model planning',      project: 'Analytics dashboard',assignee: 'Clara Rossi',  status: 'todo',        priority: 'low' },
+    },
+};

package/templates/project/pages/home/HomePage.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Card } from '@llmnative/react';
+import { mockData } from '../../data/mockData';
+
+function StatCard({ label, value, sub }: { label: string; value: number | string; sub?: string }) {
+    return (
+        <Card title={label}>
+            <p className="text-2xl font-semibold">{value}</p>
+            {sub && <p className="text-xs text-muted-foreground">{sub}</p>}
+        </Card>
+    );
+}
+
+export default function HomePage() {
+    const projects = Object.values(mockData['/projects']);
+    const tasks = Object.values(mockData['/tasks']);
+
+    return (
+        <div className="mx-auto max-w-5xl space-y-8 px-2 py-4">
+            <div className="space-y-1">
+                <h1 className="text-2xl font-semibold">Project overview</h1>
+                <p className="text-sm text-muted-foreground">Track projects, tasks and team progress.</p>
+            </div>
+
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                <StatCard label="Projects"    value={projects.length} />
+                <StatCard label="Active"      value={projects.filter(p => p.status === 'active').length} sub="projects" />
+                <StatCard label="Open tasks"  value={tasks.filter(t => t.status !== 'done').length} />
+                <StatCard label="Completed"   value={tasks.filter(t => t.status === 'done').length} sub="tasks" />
+            </div>
+        </div>
+    );
+}

package/templates/project/pages/projects/ProjectsPage.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Grid, Badge, Input, Select, type BadgeType } from '@llmnative/react';
+
+const statusOptions = [
+    { label: 'Planning', value: 'planning' },
+    { label: 'Active', value: 'active' },
+    { label: 'On hold', value: 'on-hold' },
+    { label: 'Done', value: 'done' },
+];
+
+const statusVariant: Record<string, BadgeType> = {
+    planning: 'secondary',
+    active: 'primary',
+    'on-hold': 'warning',
+    done: 'success',
+};
+
+export default function ProjectsPage() {
+    return (
+        <Grid
+            path="/projects"
+            columns={[
+                { key: 'name', label: 'Project', sortable: true },
+                { key: 'owner', label: 'Owner' },
+                {
+                    key: 'status',
+                    label: 'Status',
+                    render: ({ value }) => (
+                        <Badge variant={statusVariant[String(value)] ?? 'secondary'}>{String(value)}</Badge>
+                    ),
+                },
+                { key: 'deadline', label: 'Deadline' },
+                { key: 'description', label: 'Description' },
+            ]}
+            actions={['add', 'edit', 'delete']}
+            view="table"
+            sortable
+            pagination={{ limit: 20 }}
+            form={
+                <>
+                    <Input name="name" label="Project name" required />
+                    <Input name="owner" label="Owner" />
+                    <Select name="status" label="Status" options={statusOptions} />
+                    <Input name="deadline" label="Deadline" type="date" />
+                    <Input name="description" label="Description" />
+                </>
+            }
+        />
+    );
+}