Build a dashboard app with the full page module

1
2
modules:
  confluence:fullPage:
    - key: my-full-page-module
      resource: main
      render: native
      resolver:
        function: resolver
      routePrefix: ui-kit
      title: My full page module # Optional
  function:
    - key: resolver
      handler: index.handler
resources:
  - key: main
    path: src/frontend/index.jsx
app:
  id: "<your app id>"
  runtime:
    name: nodejs22.x
permissions:
  scopes:
    - read:confluence-user

Place this code inside the file src/frontend/index.jsx.

1
2
import React, { useState, useEffect } from "react";
import ForgeReconciler, { Box, Stack, Heading, Text, BarChart, Button, Inline, Image, xcss } from "@forge/react";
import { requestConfluence } from "@forge/bridge";

const chartContainerStyle = xcss({
  maxWidth: "600px",
});

const App = () => {
  const [selectedPeriod, setSelectedPeriod] = useState("Q1");
  const [userInfo, setUserInfo] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // Dashboard usage data for different periods
  const q1Data = [
    { month: 'Jan', usage: 45 },
    { month: 'Feb', usage: 52 },
    { month: 'Mar', usage: 48 },
  ];

  const q2Data = [
    { month: 'Apr', usage: 61 },
    { month: 'May', usage: 55 },
    { month: 'Jun', usage: 67 },
  ];

  const chartData = selectedPeriod === "Q1" ? q1Data : q2Data;

  // Fetch current user information from Confluence API
  const fetchUserInfo = async () => {
    setLoading(true);
    setError(null);
    try {
      const response = await requestConfluence('/wiki/rest/api/user/current');
      if (!response.ok) {
        const errorText = await response.text();
        throw new Error(`API error: ${response.status} - ${errorText}`);
      }
      const data = await response.json();
      setUserInfo(data);
    } catch (err) {
      setError(`Failed to fetch user info: ${err.message}`);
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchUserInfo();
  }, []);

  return (
    <Box padding="space.400">
      <Stack space="space.400">
        <Stack space="space.200">
          <Heading size="xlarge">Dashboard</Heading>
          <Text>Monthly usage overview</Text>
        </Stack>

        <Inline space="space.200">
          <Button 
            appearance={selectedPeriod === "Q1" ? "primary" : "default"}
            onClick={() => setSelectedPeriod("Q1")}
          >
            Q1
          </Button>
          <Button 
            appearance={selectedPeriod === "Q2" ? "primary" : "default"}
            onClick={() => setSelectedPeriod("Q2")}
          >
            Q2
          </Button>
        </Inline>

        <Stack space="space.300">
          <Box xcss={chartContainerStyle}>
            <BarChart
              data={chartData}
              xAccessor="month"
              yAccessor="usage"
            />
          </Box>

          <Box padding="space.200">
            <Stack space="space.100">
              <Text>Current period: {selectedPeriod}</Text>
              <Text>Total usage: {chartData.reduce((sum, item) => sum + item.usage, 0)}</Text>
            </Stack>
          </Box>
        </Stack>

        <Box padding="space.400">
          <Stack space="space.300">
            <Heading size="medium">Current User Information</Heading>
            {loading && <Text>Loading user info...</Text>}
            {error && <Text>{error}</Text>}
            {!loading && !error && userInfo && (
              <Box padding="space.300" xcss={xcss({
                borderWidth: "border.width",
                borderStyle: "solid",
                borderColor: "color.border",
                borderRadius: "border.radius.300",
              })}>
                <Stack space="space.200">
                  <Text>
                    <Text weight="bold">Name:</Text> {userInfo.displayName}
                  </Text>
                  {userInfo.email && (
                    <Text>
                      <Text weight="bold">Email:</Text> {userInfo.email}
                    </Text>
                  )}
                  {userInfo.accountId && (
                    <Text>
                      <Text weight="bold">Account ID:</Text> {userInfo.accountId}
                    </Text>
                  )}
                  {userInfo.profilePicture && (
                    <Box padding="space.200">
                      <Image 
                        src={userInfo.profilePicture.path} 
                        alt="Profile" 
                        width="48px"
                        height="48px"
                      />
                    </Box>
                  )}
                </Stack>
              </Box>
            )}
          </Stack>
        </Box>
      </Stack>
    </Box>
  );
};

ForgeReconciler.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);