nl-d365boilerplate-vite 1.0.0

package/src/pages/Documentation.tsx

@@ -0,0 +1,850 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import {
+  ArrowLeft01Icon,
+  Copy01Icon,
+  Tick01Icon,
+  File01Icon,
+  Navigation01Icon,
+  Database01Icon,
+  PuzzleIcon,
+  Add01Icon,
+  Delete02Icon,
+  PencilEdit01Icon,
+  PlayIcon,
+  BulbIcon,
+  CodeIcon,
+  BookOpen01Icon,
+  FolderOpenIcon,
+} from "hugeicons-react";
+import { Separator } from "@/components/ui/separator";
+import { useNavigation } from "@/hooks/useNavigation";
+import { PAGES } from "@/config/pages.config";
+import { PageLayout } from "@/components/page-layout";
+
+interface CodeBlockProps {
+  code: string;
+  title?: string;
+  onCopy: (code: string, id: string) => void;
+  isCopied: boolean;
+  id: string;
+}
+
+const CodeBlock = ({ code, title, onCopy, isCopied, id }: CodeBlockProps) => (
+  <div className="relative group">
+    <div className="bg-muted/30 rounded-lg border">
+      {title && (
+        <div className="px-4 pt-3 pb-2 border-b">
+          <span className="text-sm font-medium text-muted-foreground">
+            {title}
+          </span>
+        </div>
+      )}
+      <div className="p-4 font-mono text-sm overflow-x-auto">
+        <pre className="whitespace-pre-wrap">{code}</pre>
+      </div>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity h-8 w-8"
+        onClick={() => onCopy(code, id)}
+      >
+        {isCopied ? (
+          <Tick01Icon className="w-4 h-4 text-green-500" />
+        ) : (
+          <Copy01Icon className="w-4 h-4" />
+        )}
+      </Button>
+    </div>
+  </div>
+);
+
+interface StepCardProps {
+  number: number;
+  title: string;
+  children: React.ReactNode;
+}
+
+const StepCard = ({ number, title, children }: StepCardProps) => (
+  <Card>
+    <CardHeader className="pb-3">
+      <div className="flex items-center gap-3">
+        <div className="flex items-center justify-center w-7 h-7 rounded-full bg-primary text-primary-foreground text-sm font-semibold">
+          {number}
+        </div>
+        <CardTitle className="text-base">{title}</CardTitle>
+      </div>
+    </CardHeader>
+    <CardContent>{children}</CardContent>
+  </Card>
+);
+
+const Documentation = () => {
+  const [copiedCode, setCopiedCode] = useState("");
+  const { navigateTo } = useNavigation();
+
+  const copyCode = (code: string, id: string) => {
+    navigator.clipboard.writeText(code);
+    setCopiedCode(id);
+    setTimeout(() => setCopiedCode(""), 2000);
+  };
+
+  return (
+    <PageLayout
+      title="Documentation"
+      description="Learn how to build with this boilerplate"
+      icon={BookOpen01Icon}
+      toolbar={
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            size="icon"
+            onClick={() => navigateTo(PAGES.home)}
+          >
+            <ArrowLeft01Icon className="w-4 h-4" />
+          </Button>
+          <Button onClick={() => navigateTo(PAGES.demo)} className="gap-2">
+            <PlayIcon className="w-4 h-4" />
+            Try Demo
+          </Button>
+        </div>
+      }
+    >
+      <div className="space-y-6">
+        <Tabs defaultValue="structure" className="w-full">
+          <TabsList className="grid w-full grid-cols-5">
+            <TabsTrigger value="structure" className="gap-2">
+              <FolderOpenIcon className="w-4 h-4" />
+              Structure
+            </TabsTrigger>
+            <TabsTrigger value="pages" className="gap-2">
+              <File01Icon className="w-4 h-4" />
+              Pages
+            </TabsTrigger>
+            <TabsTrigger value="navigation" className="gap-2">
+              <Navigation01Icon className="w-4 h-4" />
+              Navigation
+            </TabsTrigger>
+            <TabsTrigger value="dataverse" className="gap-2">
+              <Database01Icon className="w-4 h-4" />
+              Dataverse
+            </TabsTrigger>
+            <TabsTrigger value="components" className="gap-2">
+              <PuzzleIcon className="w-4 h-4" />
+              Components
+            </TabsTrigger>
+          </TabsList>
+
+          {/* Project Structure */}
+          <TabsContent value="structure" className="space-y-6 mt-6">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <FolderOpenIcon className="w-5 h-5 text-primary" />
+                  Project Structure
+                </CardTitle>
+                <CardDescription>
+                  Overview of the boilerplate folder organization
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <CodeBlock
+                  id="structure"
+                  code={`src/
+├── assets/
+│   └── images/              # Static images and SVGs
+├── components/
+│   ├── ui/                  # shadcn/ui components
+│   │   ├── alert.tsx
+│   │   ├── badge.tsx
+│   │   ├── button.tsx
+│   │   ├── card.tsx
+│   │   ├── dialog.tsx
+│   │   ├── input.tsx
+│   │   ├── label.tsx
+│   │   ├── separator.tsx
+│   │   ├── table.tsx
+│   │   ├── tabs.tsx
+│   │   └── theme-toggle.tsx
+│   ├── nl-header.tsx        # Application header
+│   ├── page-layout.tsx      # Reusable page layout
+│   └── page-render.tsx      # Dynamic page renderer
+├── config/
+│   └── pages.config.ts      # Page registration
+├── contexts/
+│   ├── dataverse-context.tsx
+│   └── navigation-context.tsx
+├── hooks/
+│   ├── useAccounts.ts       # Entity-specific hook example
+│   ├── useDataverse.ts      # Dataverse API hook
+│   └── useNavigation.ts     # Navigation hook
+├── lib/
+│   ├── nav-items.ts         # Navigation menu items
+│   └── utils.ts             # Utility functions (cn)
+├── pages/
+│   ├── Demo.tsx
+│   ├── Documentation.tsx
+│   ├── Home.tsx
+│   └── index.ts             # Page exports
+├── providers/
+│   ├── dataverse-provider.tsx
+│   ├── navigation-provider.tsx
+│   └── theme-provider.tsx
+├── App.tsx                  # Root component
+├── index.css                # Global styles
+└── main.tsx                 # Entry point`}
+                  onCopy={copyCode}
+                  isCopied={copiedCode === "structure"}
+                />
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Tech Stack</CardTitle>
+                <CardDescription>
+                  Technologies used in this boilerplate
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
+                  {[
+                    { name: "Vite 7", desc: "Build tool & dev server" },
+                    { name: "React 19", desc: "UI library" },
+                    { name: "TypeScript", desc: "Type safety" },
+                    { name: "Tailwind CSS 4", desc: "Utility-first CSS" },
+                    { name: "shadcn/ui", desc: "UI components" },
+                    { name: "dynamics-web-api", desc: "Dataverse integration" },
+                  ].map((tech) => (
+                    <div
+                      key={tech.name}
+                      className="p-3 rounded-lg border bg-muted/30"
+                    >
+                      <p className="font-medium text-sm">{tech.name}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {tech.desc}
+                      </p>
+                    </div>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* Pages Management */}
+          <TabsContent value="pages" className="space-y-6 mt-6">
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Add01Icon className="w-5 h-5 text-green-600" />
+                  Creating New Pages
+                </CardTitle>
+                <CardDescription>
+                  Add new pages to your application in three steps
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div className="grid gap-4">
+                  <StepCard number={1} title="Create the Page Component">
+                    <div className="space-y-3">
+                      <p className="text-sm text-muted-foreground">
+                        Create a new file in{" "}
+                        <code className="bg-muted px-1.5 py-0.5 rounded text-xs">
+                          src/pages/
+                        </code>
+                      </p>
+                      <CodeBlock
+                        id="new-page"
+                        title="src/pages/Contacts.tsx"
+                        code={`import { PageLayout } from "@/components/page-layout";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { UserIcon } from "hugeicons-react";
+
+const Contacts = () => {
+  return (
+    <PageLayout
+      title="Contacts"
+      description="Manage your contacts"
+      icon={UserIcon}
+    >
+      <Card>
+        <CardHeader>
+          <CardTitle>Contact List</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p>Your contacts content goes here...</p>
+        </CardContent>
+      </Card>
+    </PageLayout>
+  );
+};
+
+export default Contacts;`}
+                        onCopy={copyCode}
+                        isCopied={copiedCode === "new-page"}
+                      />
+                    </div>
+                  </StepCard>
+
+                  <StepCard number={2} title="Export from Index">
+                    <div className="space-y-3">
+                      <p className="text-sm text-muted-foreground">
+                        Add your page export to{" "}
+                        <code className="bg-muted px-1.5 py-0.5 rounded text-xs">
+                          src/pages/index.ts
+                        </code>
+                      </p>
+                      <CodeBlock
+                        id="export-page"
+                        title="src/pages/index.ts"
+                        code={`import Home from "./Home";
+import Documentation from "./Documentation";
+import Demo from "./Demo";
+import Contacts from "./Contacts"; // Add this
+
+export { Home, Documentation, Demo, Contacts };`}
+                        onCopy={copyCode}
+                        isCopied={copiedCode === "export-page"}
+                      />
+                    </div>
+                  </StepCard>
+
+                  <StepCard number={3} title="Register in Pages Config">
+                    <div className="space-y-3">
+                      <p className="text-sm text-muted-foreground">
+                        Add your page to{" "}
+                        <code className="bg-muted px-1.5 py-0.5 rounded text-xs">
+                          src/config/pages.config.ts
+                        </code>
+                      </p>
+                      <CodeBlock
+                        id="config-page"
+                        title="src/config/pages.config.ts"
+                        code={`import { Home, Documentation, Demo, Contacts } from "@/pages";
+import type { ComponentType } from "react";
+
+export interface PageConfig {
+  id: string;
+  title: string;
+  component: ComponentType;
+}
+
+export const PAGES: Record<string, PageConfig> = {
+  home: {
+    id: "home",
+    title: "Home",
+    component: Home,
+  },
+  documentation: {
+    id: "documentation",
+    title: "Documentation",
+    component: Documentation,
+  },
+  demo: {
+    id: "demo",
+    title: "Demo",
+    component: Demo,
+  },
+  contacts: {  // Add your new page
+    id: "contacts",
+    title: "Contacts",
+    component: Contacts,
+  },
+};
+
+export const DEFAULT_PAGE = PAGES.home;`}
+                        onCopy={copyCode}
+                        isCopied={copiedCode === "config-page"}
+                      />
+                    </div>
+                  </StepCard>
+                </div>
+
+                <Alert>
+                  <BulbIcon className="h-4 w-4" />
+                  <AlertTitle>Done!</AlertTitle>
+                  <AlertDescription>
+                    Navigate to your new page using{" "}
+                    <code className="bg-muted px-1.5 py-0.5 rounded text-xs">
+                      navigateTo(PAGES.contacts)
+                    </code>
+                  </AlertDescription>
+                </Alert>
+              </CardContent>
+            </Card>
+
+            <div className="grid md:grid-cols-2 gap-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <PencilEdit01Icon className="w-5 h-5 text-blue-600" />
+                    Updating Pages
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <ul className="space-y-2 text-sm text-muted-foreground">
+                    <li className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-primary rounded-full" />
+                      Edit the component file directly
+                    </li>
+                    <li className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-primary rounded-full" />
+                      Update title in pages.config.ts
+                    </li>
+                    <li className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-primary rounded-full" />
+                      Changes reflect with hot reload
+                    </li>
+                  </ul>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Delete02Icon className="w-5 h-5 text-red-600" />
+                    Removing Pages
+                  </CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <ul className="space-y-2 text-sm text-muted-foreground">
+                    <li className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-destructive rounded-full" />
+                      Delete the component file
+                    </li>
+                    <li className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-destructive rounded-full" />
+                      Remove from pages/index.ts
+                    </li>
+                    <li className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-destructive rounded-full" />
+                      Remove from pages.config.ts
+                    </li>
+                  </ul>
+                </CardContent>
+              </Card>
+            </div>
+          </TabsContent>
+
+          {/* Navigation System */}
+          <TabsContent value="navigation" className="space-y-6 mt-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Navigation Hook</CardTitle>
+                <CardDescription>
+                  Use the useNavigation hook to navigate between pages
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div className="space-y-4">
+                  <h4 className="font-semibold text-sm">Basic Usage</h4>
+                  <CodeBlock
+                    id="nav-basic"
+                    code={`import { useNavigation } from "@/hooks/useNavigation";
+import { PAGES } from "@/config/pages.config";
+
+const MyComponent = () => {
+  const { currentPage, navigateTo, canGoBack, goBack } = useNavigation();
+
+  return (
+    <div>
+      <p>Current: {currentPage.title}</p>
+
+      {/* Navigate using PAGES config */}
+      <Button onClick={() => navigateTo(PAGES.demo)}>
+        Go to Demo
+      </Button>
+
+      {/* Go back to previous page */}
+      {canGoBack && (
+        <Button onClick={goBack}>Go Back</Button>
+      )}
+    </div>
+  );
+};`}
+                    onCopy={copyCode}
+                    isCopied={copiedCode === "nav-basic"}
+                  />
+                </div>
+
+                <Separator />
+
+                <div className="space-y-4">
+                  <h4 className="font-semibold text-sm">Hook API</h4>
+                  <CodeBlock
+                    id="nav-api"
+                    code={`const {
+  currentPage,  // Current PageConfig object
+  navigateTo,   // Navigate to a PageConfig
+  navigate,     // Navigate by page id string
+  canGoBack,    // Boolean if history exists
+  goBack,       // Navigate to previous page
+} = useNavigation();
+
+// Examples:
+navigateTo(PAGES.home);      // Using PageConfig`}
+                    onCopy={copyCode}
+                    isCopied={copiedCode === "nav-api"}
+                  />
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>App Structure</CardTitle>
+                <CardDescription>
+                  How providers are organized in App.tsx
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <CodeBlock
+                  id="app-structure"
+                  title="src/App.tsx"
+                  code={`import { ThemeProvider } from "@/providers/theme-provider";
+import { NavigationProvider } from "./providers/navigation-provider";
+import { PageRenderer } from "./components/page-render";
+import NlHeader from "./components/nl-header";
+import { DataverseProvider } from "./providers/dataverse-provider";
+
+function App() {
+  return (
+    <ThemeProvider defaultTheme="light" storageKey="novalogica-ui-theme">
+      <DataverseProvider>
+        <NavigationProvider>
+          <div className="flex min-h-screen w-full flex-col bg-background">
+            <NlHeader />
+            <main className="flex-1 flex flex-col">
+              <PageRenderer />
+            </main>
+          </div>
+        </NavigationProvider>
+      </DataverseProvider>
+    </ThemeProvider>
+  );
+}
+
+export default App;`}
+                  onCopy={copyCode}
+                  isCopied={copiedCode === "app-structure"}
+                />
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* Dataverse API */}
+          <TabsContent value="dataverse" className="space-y-6 mt-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Using the Dataverse Hook</CardTitle>
+                <CardDescription>
+                  Connect to Dataverse and perform CRUD operations
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-6">
+                <div className="space-y-4">
+                  <h4 className="font-semibold text-sm">Basic Connection</h4>
+                  <CodeBlock
+                    id="dataverse-basic"
+                    code={`import { useDataverse } from "@/hooks/useDataverse";
+
+const MyComponent = () => {
+  const { api, isReady, error } = useDataverse();
+
+  if (!isReady) return <div>Connecting...</div>;
+  if (error) return <div>Error: {error}</div>;
+
+  return <div>Connected to Dataverse!</div>;
+};`}
+                    onCopy={copyCode}
+                    isCopied={copiedCode === "dataverse-basic"}
+                  />
+                </div>
+
+                <Separator />
+
+                <div className="space-y-4">
+                  <h4 className="font-semibold text-sm">CRUD Operations</h4>
+                  <div className="grid gap-4">
+                    <div>
+                      <Badge variant="outline" className="mb-2">
+                        READ
+                      </Badge>
+                      <CodeBlock
+                        id="dataverse-read"
+                        code={`// Multiple records
+const response = await api.retrieveMultiple({
+  collection: "accounts",
+  select: ["accountid", "name", "emailaddress1"],
+  filter: "statecode eq 0",
+  orderBy: ["name asc"],
+  maxPageSize: 10
+});
+
+// Single record
+const account = await api.retrieve({
+  collection: "accounts",
+  key: "account-guid-here",
+  select: ["accountid", "name"]
+});`}
+                        onCopy={copyCode}
+                        isCopied={copiedCode === "dataverse-read"}
+                      />
+                    </div>
+
+                    <div>
+                      <Badge variant="outline" className="mb-2">
+                        CREATE
+                      </Badge>
+                      <CodeBlock
+                        id="dataverse-create"
+                        code={`const newId = await api.create({
+  collection: "accounts",
+  data: {
+    name: "New Account",
+    emailaddress1: "email@example.com"
+  }
+});`}
+                        onCopy={copyCode}
+                        isCopied={copiedCode === "dataverse-create"}
+                      />
+                    </div>
+
+                    <div>
+                      <Badge variant="outline" className="mb-2">
+                        UPDATE
+                      </Badge>
+                      <CodeBlock
+                        id="dataverse-update"
+                        code={`await api.update({
+  collection: "accounts",
+  key: "account-guid-here",
+  data: { name: "Updated Name" }
+});`}
+                        onCopy={copyCode}
+                        isCopied={copiedCode === "dataverse-update"}
+                      />
+                    </div>
+
+                    <div>
+                      <Badge variant="outline" className="mb-2">
+                        DELETE
+                      </Badge>
+                      <CodeBlock
+                        id="dataverse-delete"
+                        code={`await api.deleteRecord({
+  collection: "accounts",
+  key: "account-guid-here"
+});`}
+                        onCopy={copyCode}
+                        isCopied={copiedCode === "dataverse-delete"}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle>Entity Hook Pattern</CardTitle>
+                <CardDescription>
+                  Create reusable hooks for specific entities (see
+                  hooks/useAccounts.ts)
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <CodeBlock
+                  id="entity-hook"
+                  title="src/hooks/useContacts.ts"
+                  code={`import { useState, useCallback } from "react";
+import { useDataverse } from "@/hooks/useDataverse";
+
+export interface Contact {
+  contactid?: string;
+  fullname?: string;
+  emailaddress1?: string;
+}
+
+export const useContacts = () => {
+  const { api, isReady } = useDataverse();
+  const [contacts, setContacts] = useState<Contact[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchContacts = useCallback(async () => {
+    if (!api || !isReady) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      const response = await api.retrieveMultiple({
+        collection: "contacts",
+        select: ["contactid", "fullname", "emailaddress1"],
+        filter: "statecode eq 0"
+      });
+      setContacts(response?.value || []);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch");
+    } finally {
+      setLoading(false);
+    }
+  }, [api, isReady]);
+
+  return { contacts, loading, error, fetchContacts, isReady };
+};`}
+                  onCopy={copyCode}
+                  isCopied={copiedCode === "entity-hook"}
+                />
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          {/* UI Components */}
+          <TabsContent value="components" className="space-y-6 mt-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Included Components</CardTitle>
+                <CardDescription>
+                  shadcn/ui components available in this boilerplate
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
+                  {[
+                    "Alert",
+                    "Badge",
+                    "Button",
+                    "Card",
+                    "Dialog",
+                    "Input",
+                    "Label",
+                    "Separator",
+                    "Table",
+                    "Tabs",
+                    "Theme Toggle",
+                  ].map((component) => (
+                    <Badge
+                      key={component}
+                      variant="secondary"
+                      className="justify-center py-2"
+                    >
+                      {component}
+                    </Badge>
+                  ))}
+                </div>
+              </CardContent>
+            </Card>
+
+            <div className="grid md:grid-cols-2 gap-6">
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Add01Icon className="w-5 h-5 text-blue-600" />
+                    Adding Components
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <p className="text-sm text-muted-foreground">
+                    Add more shadcn/ui components as needed:
+                  </p>
+                  <CodeBlock
+                    id="add-component"
+                    code={`npx shadcn@latest add select
+npx shadcn@latest add dropdown-menu
+npx shadcn@latest add form`}
+                    onCopy={copyCode}
+                    isCopied={copiedCode === "add-component"}
+                  />
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      window.open(
+                        "https://ui.shadcn.com/docs/components",
+                        "_blank",
+                      )
+                    }
+                    className="gap-2"
+                  >
+                    <CodeIcon className="w-4 h-4" />
+                    Browse Components
+                  </Button>
+                </CardContent>
+              </Card>
+
+              <Card>
+                <CardHeader>
+                  <CardTitle className="flex items-center gap-2">
+                    <Database01Icon className="w-5 h-5 text-green-600" />
+                    DynamicsWebApi
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="space-y-4">
+                  <p className="text-sm text-muted-foreground">
+                    This boilerplate uses DynamicsWebApi for Dataverse
+                    operations.
+                  </p>
+                  <ul className="space-y-1 text-sm text-muted-foreground">
+                    <li className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-green-500 rounded-full" />
+                      Full TypeScript support
+                    </li>
+                    <li className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-green-500 rounded-full" />
+                      OData query builder
+                    </li>
+                    <li className="flex items-center gap-2">
+                      <div className="w-1.5 h-1.5 bg-green-500 rounded-full" />
+                      Batch operations
+                    </li>
+                  </ul>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      window.open(
+                        "https://github.com/AleksandrRogov/DynamicsWebApi",
+                        "_blank",
+                      )
+                    }
+                    className="gap-2"
+                  >
+                    <File01Icon className="w-4 h-4" />
+                    View Docs
+                  </Button>
+                </CardContent>
+              </Card>
+            </div>
+
+            <Alert>
+              <BulbIcon className="h-4 w-4" />
+              <AlertTitle>Tips</AlertTitle>
+              <AlertDescription className="space-y-1">
+                <p>
+                  Use TypeScript interfaces for entity types to get better
+                  IntelliSense
+                </p>
+                <p>Check the Demo page for working CRUD examples</p>
+                <p>Use PageLayout component for consistent page structure</p>
+              </AlertDescription>
+            </Alert>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </PageLayout>
+  );
+};
+
+export default Documentation;