@jtl-software/cloud-app-template-frontend-react 0.0.7 → 0.0.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @jtl/cloud-app-template-frontend-react
 
+## 0.0.8
+
+### Patch Changes
+
+- [#20](https://github.com/jtl-software/cloud-apps-cli/pull/20) [`ab20518`](https://github.com/jtl-software/cloud-apps-cli/commit/ab20518f077cb18d8aca24944ca182e3142d16a6) Thanks [@tobilen](https://github.com/tobilen)! - Add GraphQL example implementation
+
 ## 0.0.7
 
 ### Patch Changes

package/manifest.json

@@ -44,6 +44,11 @@
           "id": "{{APP_NAME}}-menu",
           "name": "{{APP_NAME}}",
           "url": "http://localhost:3004/erp"
+        },
+        {
+          "id": "{{APP_NAME}}-graphql-demo",
+          "name": "GraphQL Demo",
+          "url": "http://localhost:3004/graphql-demo"
         }
       ],
       "pane": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jtl-software/cloud-app-template-frontend-react",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -21,6 +21,8 @@
   "dependencies": {
     "@jtl-software/cloud-apps-core": "latest",
     "@jtl-software/platform-ui-react": "latest",
+    "graphql": "^16.13.2",
+    "graphql-request": "^7.4.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },

package/src/App.tsx

@@ -1,9 +1,9 @@
 import { AppBridge } from '@jtl-software/cloud-apps-core';
 import './App.css';
-import { ErpPage, HubPage, PanePage, SetupPage, WelcomePage } from './pages';
+import { ErpPage, GraphqlDemoPage, HubPage, PanePage, SetupPage, WelcomePage } from './pages';
 import { useEffect } from 'react';
 
-type AppMode = 'setup' | 'erp' | 'pane' | 'hub';
+type AppMode = 'setup' | 'erp' | 'pane' | 'hub' | 'graphql-demo';
 
 const App: React.FC<{ appBridge: AppBridge | null }> = ({ appBridge }) => {
   const mode: AppMode = location.pathname.substring(1) as AppMode;
@@ -30,6 +30,8 @@ const App: React.FC<{ appBridge: AppBridge | null }> = ({ appBridge }) => {
       return <ErpPage appBridge={appBridge} />;
     case 'pane':
       return <PanePage appBridge={appBridge} />;
+    case 'graphql-demo':
+      return <GraphqlDemoPage appBridge={appBridge} />;
     default:
       return <WelcomePage connected />;
   }

package/src/pages/graphql-demo-page/GraphqlDemoPage.tsx

@@ -0,0 +1,202 @@
+import { useCallback, useState } from 'react';
+import IGraphqlDemoPageProps from './IGraphqlDemoPageProps';
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  Text,
+  Stack,
+  Separator,
+  Box,
+  Button,
+} from '@jtl-software/platform-ui-react';
+import { Database, Package, ShoppingCart, BarChart3 } from 'lucide-react';
+import { GraphQLClient, gql } from 'graphql-request';
+import { apiUrl } from '../../common/constants';
+
+function createClient(sessionToken: string) {
+  return new GraphQLClient(`${apiUrl}/graphql`, {
+    headers: { 'X-Session-Token': sessionToken },
+  });
+}
+
+const QUERIES = {
+  topItems: gql`query TopItems {
+    QueryItems(first: 5, order: [{ stockInOrders: DESC }]) {
+      totalCount
+      nodes {
+        sku
+        name
+        stockInOrders
+        salesPriceGross
+      }
+    }
+  }`,
+  recentOrders: gql`query RecentOrders {
+    QuerySalesOrders(first: 5, order: [{ salesOrderDate: DESC }]) {
+      totalCount
+      nodes {
+        salesOrderNumber
+        salesOrderDate
+        totalGrossAmount
+        currencyIso
+        companyName
+      }
+    }
+  }`,
+  stockOverview: gql`query StockOverview {
+    QueryItems(first: 5, order: [{ stockTotal: DESC }]) {
+      totalCount
+      nodes {
+        sku
+        name
+        stockTotal
+        stockAvailable
+        stockInOrders
+      }
+    }
+  }`,
+};
+
+type QueryKey = keyof typeof QUERIES;
+
+const QUERY_META: Record<QueryKey, { label: string; icon: React.FC<{ size?: number; color?: string; strokeWidth?: number; className?: string }> }> = {
+  topItems: { label: 'Top Items by Orders', icon: ShoppingCart },
+  recentOrders: { label: 'Recent Sales Orders', icon: BarChart3 },
+  stockOverview: { label: 'Stock Overview', icon: Package },
+};
+
+const GraphqlDemoPage: React.FC<IGraphqlDemoPageProps> = ({ appBridge }) => {
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState<QueryKey | null>(null);
+  const [results, setResults] = useState<Record<string, unknown>>({});
+
+  const runQuery = useCallback(
+    async (key: QueryKey) => {
+      setLoading(key);
+      setError(null);
+      try {
+        const sessionToken = await appBridge.method.call<string>('getSessionToken');
+        const client = createClient(sessionToken);
+        const data = await client.request(QUERIES[key]);
+        setResults(prev => ({ ...prev, [key]: data }));
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setLoading(null);
+      }
+    },
+    [appBridge],
+  );
+
+  const formatValue = (value: unknown): string => {
+    if (value == null) return '–';
+    if (typeof value === 'number') return value.toLocaleString('de-DE');
+    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}/.test(value)) {
+      return new Date(value).toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
+    }
+    return String(value);
+  };
+
+  const renderResult = (key: QueryKey) => {
+    const data = results[key] as Record<string, { totalCount: number; nodes: Record<string, unknown>[] }> | undefined;
+    if (!data) return null;
+
+    const queryResult = Object.values(data)[0];
+    if (!queryResult?.nodes?.length) {
+      return (
+        <Text type="small" color="muted">
+          No results found.
+        </Text>
+      );
+    }
+
+    const columns = Object.keys(queryResult.nodes[0]);
+
+    return (
+      <Stack spacing="2" direction="column">
+        <Text type="xs" color="muted">
+          {queryResult.totalCount} total results — showing first {queryResult.nodes.length}
+        </Text>
+        <Box className="w-full overflow-x-auto">
+          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: '0.8rem' }}>
+            <thead>
+              <tr>
+                {columns.map(col => (
+                  <th key={col} style={{ textAlign: 'left', padding: '6px 8px', borderBottom: '1px solid var(--base-border)', fontWeight: 600 }}>
+                    {col}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {queryResult.nodes.map((node, i) => (
+                <tr key={i}>
+                  {columns.map(col => (
+                    <td key={col} style={{ padding: '6px 8px', borderBottom: '1px solid var(--base-border)' }}>
+                      {formatValue(node[col])}
+                    </td>
+                  ))}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </Box>
+      </Stack>
+    );
+  };
+
+  return (
+    <Box className="flex justify-center p-12">
+      <Card className="max-w-[720px] w-full">
+        <CardHeader className="items-center">
+          <Database size={40} color="#1a56db" strokeWidth={1.5} />
+          <CardTitle>GraphQL API Demo</CardTitle>
+          <CardDescription className="text-center">
+            This page demonstrates querying the JTL ERP GraphQL API from a Cloud App. Requests are proxied through
+            the backend, which authenticates with client credentials and resolves the tenant from the session token.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Stack spacing="5" direction="column">
+            {error && (
+              <Box className="w-full p-3 rounded-lg bg-red-50 border border-red-200">
+                <Text type="small" color="destructive">
+                  {error}
+                </Text>
+              </Box>
+            )}
+
+            <Separator />
+
+            {(Object.keys(QUERIES) as QueryKey[]).map(key => {
+              const meta = QUERY_META[key];
+              const Icon = meta.icon;
+
+              return (
+                <Stack key={key} spacing="3" direction="column">
+                  <Stack spacing="2" direction="row" itemAlign="center">
+                    <Icon size={16} color="#1a56db" className="shrink-0" />
+                    <Text type="small" weight="semibold">
+                      {meta.label}
+                    </Text>
+                  </Stack>
+                  <Box className="w-full p-3 rounded-lg" style={{ background: 'var(--base-muted)', fontFamily: 'monospace', fontSize: '0.75rem', whiteSpace: 'pre', overflowX: 'auto' }}>
+                    {QUERIES[key].trim()}
+                  </Box>
+                  <Button onClick={() => runQuery(key)} disabled={loading !== null} label={loading === key ? 'Loading...' : 'Run Query'} />
+                  {renderResult(key)}
+                  <Separator />
+                </Stack>
+              );
+            })}
+          </Stack>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+};
+
+export default GraphqlDemoPage;

package/src/pages/graphql-demo-page/IGraphqlDemoPageProps.ts

@@ -0,0 +1,5 @@
+import { AppBridge } from '@jtl-software/cloud-apps-core';
+
+export default interface IGraphqlDemoPageProps {
+  appBridge: AppBridge;
+}

package/src/pages/graphql-demo-page/index.ts

@@ -0,0 +1 @@
+export { default as GraphqlDemoPage } from './GraphqlDemoPage';

package/src/pages/index.ts

@@ -3,3 +3,4 @@ export * from './erp-page';
 export * from './pane-page';
 export * from './hub-page';
 export * from './welcome-page';
+export * from './graphql-demo-page';