feat: landing page app

.github/workflows/deploy-project-portal-landingpage-ci.yml

@@ -0,0 +1,44 @@
+name: Deploy project-portal-landingpage CI
+
+on:
+  push:
+    branches: ["feat/landing-page-app"]
+    paths:
+      - "client/apps/project-portal-landingpage/**"
+
+permissions:
+  actions: read
+  checks: write
+  contents: read
+  deployments: write
+  id-token: write
+
+jobs:
+  build:
+    environment: non-prod
+    name: Deploy
+    timeout-minutes: 15
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v4
+
+      - name: Get fusion token
+        id: "get-fusion-token"
+        uses: ./.github/actions/get-fusion-token
+        with:
+          client-id: ${{secrets.AZURE_SP_FUSION}}
+          tenant-id: ${{secrets.AZURE_TENANT_ID}}
+          resource-id: ${{secrets.AZURE_FUSION_SCOPE}}
+
+      - name: Install
+        run: |
+          cd client/apps/project-portal-landingpage
+          yarn install
+          npm i -g @equinor/fusion-framework-cli
+
+      - name: Deploy
+        run: |
+          cd client/apps/project-portal-landingpage
+          fusion-framework-cli app build-publish -e ci

client/apps/portal-administration/tsconfig.json

@@ -26,6 +26,7 @@
     },
     "include": [
         "./src",
+        "src/custom.d.ts"
       ],
       "exclude": [
         "node_modules",

client/apps/project-portal-landingpage/app.config.ts

@@ -0,0 +1,7 @@
+import { defineAppConfig } from '@equinor/fusion-framework-cli';
+
+export default defineAppConfig(() => ({
+	environment: {
+		// some env data
+	},
+}));

client/apps/project-portal-landingpage/app.manifest.config.ts

@@ -0,0 +1,5 @@
+import { defineAppManifest } from '@equinor/fusion-framework-cli';
+
+export default defineAppManifest(async (_env) => ({
+	displayName: 'Project Portal Landingpage',
+}));

client/apps/project-portal-landingpage/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "project-portal-landingpage",
+  "version": "0.0.9",
+  "description": "",
+  "private": true,
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "build:ppl": "fusion-framework-cli app build",
+    "dev:ppl": "fusion-framework-cli app dev",
+    "docker": "cd .. && sh docker-script.sh app-react"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@equinor/fusion-framework-cli": "10.0.1",
+    "@types/react": "^18.2.50",
+    "@types/react-dom": "^18.2.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "~5.6.2"
+  },
+  "dependencies": {
+    "@equinor/eds-core-react": "^0.42.2",
+    "@equinor/eds-tokens": "^0.9.2",
+    "@equinor/fusion-framework-module-context": "^5.0.12",
+    "@equinor/fusion-framework-module-event": "^4.2.4",
+    "@equinor/fusion-framework-module-feature-flag": "^1.1.9",
+    "@equinor/fusion-framework-module-http": "^6.2.0",
+    "@equinor/fusion-framework-react-app": "5.2.10",
+    "@equinor/fusion-framework-react-module-context": "^6.2.13",
+    "@equinor/fusion-react-context-selector": "^0.6.6",
+    "@equinor/fusion-react-person": "^0.9.2",
+    "@equinor/fusion-react-skeleton": "^0.3.0",
+    "@tanstack/react-query": "^5.59.16",
+    "react-router-dom": "^6.27.0",
+    "styled-components": "^6.1.13"
+  }
+}

client/apps/project-portal-landingpage/src/App.tsx

@@ -0,0 +1,12 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ProjectPortalPage } from './components/ProjectPortalPage';
+
+const queryClient = new QueryClient();
+
+export const App = () => (
+	<QueryClientProvider client={queryClient}>
+		<ProjectPortalPage />;
+	</QueryClientProvider>
+);
+
+export default App;

client/apps/project-portal-landingpage/src/components/FusionIcon.tsx

@@ -0,0 +1,56 @@
+export function FusionIcon() {
+  return (
+    <svg
+      width="97"
+      height="68"
+      viewBox="0 0 97 68"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M94.456 31.0661L67.5177 3.89885e-06L67.5177 20.6957L79.0543 34L67.5177 47.3044L67.5177 68L94.456 36.9339C95.861 35.3135 95.861 32.6865 94.456 31.0661Z"
+        fill="url(#paint0_linear_224_86967)"
+      />
+      <path
+        d="M2.54403 36.9339L29.4823 68L29.4823 47.3043L17.9457 34L29.4823 20.6957L29.4823 1.63414e-06L2.54403 31.0661C1.139 32.6865 1.139 35.3135 2.54403 36.9339Z"
+        fill="url(#paint1_linear_224_86967)"
+      />
+      <path
+        d="M31.3011 0.0296845L31.3011 20.6219L39.7701 32.2649L47.3244 22.0097L31.3011 0.0296845Z"
+        fill="#990025"
+      />
+      <path
+        d="M65.7441 47.2769L65.7441 67.9734L49.7074 45.9265L57.2301 35.5978L65.7441 47.2769Z"
+        fill="#990025"
+      />
+      <path
+        d="M65.7441 0.030365L31.3011 47.0683L31.3011 67.9741L65.7441 20.6225L65.7441 0.030365Z"
+        fill="#FF1243"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_224_86967"
+          x1="82.2589"
+          y1="51"
+          x2="83.1119"
+          y2="17.7688"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.508287" stopColor="#DC002E" />
+          <stop offset="0.508387" stopColor="#FF1243" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_224_86967"
+          x1="14.7411"
+          y1="17"
+          x2="13.8881"
+          y2="50.2312"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.508287" stopColor="#DC002E" />
+          <stop offset="0.508387" stopColor="#FF1243" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

client/apps/project-portal-landingpage/src/components/InfoBox/InfoBox.tsx

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { tokens } from '@equinor/eds-tokens';
+import { Card, Typography } from '@equinor/eds-core-react';
+
+export const Styled = {
+	FusionInfo: styled(Card).withConfig({ displayName: 'info-box' })`
+		background: ${tokens.colors.infographic.primary__moss_green_21.hex};
+		position: relative;
+		padding: ${tokens.spacings.comfortable.medium};
+	`,
+	InfoTitle: styled(Typography).withConfig({ displayName: 'info-box' })`
+		margin-bottom: ${tokens.spacings.comfortable.small};
+	`,
+	Ul: styled.ul`
+		margin: 0;
+		padding-left: ${tokens.spacings.comfortable.medium};
+	`,
+	CloseButton: styled.div`
+		position: absolute;
+		top: ${tokens.spacings.comfortable.small};
+		right: ${tokens.spacings.comfortable.small};
+	`,
+};
+
+export const InfoBox = (): JSX.Element => {
+	return (
+		<Styled.FusionInfo elevation="raised">
+			<Styled.InfoTitle group="paragraph" variant="body_long_bold">
+				Project Portal gives you quick access to
+			</Styled.InfoTitle>
+			<Styled.Ul>
+				<li>
+					<Typography group="paragraph" variant="body_long">
+						Verified data from multiple sources
+					</Typography>
+				</li>
+				<li>
+					<Typography group="paragraph" variant="body_long">
+						Information customized to your position
+					</Typography>
+				</li>
+				<li>
+					<Typography group="paragraph" variant="body_long">
+						Application scoped to your project or facility
+					</Typography>
+				</li>
+			</Styled.Ul>
+		</Styled.FusionInfo>
+	);
+};
+
+export default InfoBox;

client/apps/project-portal-landingpage/src/components/PageHeader.tsx

@@ -0,0 +1,63 @@
+import { Typography } from '@equinor/eds-core-react';
+
+// import { useCurrentUser } from '@portal/core';
+import styled from 'styled-components';
+import background from './assets/background.svg';
+import { PropsWithChildren } from 'react';
+import { useCurrentUser } from '@equinor/fusion-framework-react/hooks';
+
+export const StyledBackgroundWrapper = styled.section`
+	background-image: url(${background});
+	width: 100%;
+	height: calc(100vh - var(--header-height, 48px));
+	background-size: cover;
+	background-repeat: no-repeat;
+	background-position: bottom;
+	background-color: #dee5e7;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+`;
+
+export const StyledHeader = styled.div`
+	padding-top: 5%;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	> :not(:first-child) {
+		margin-left: 0px;
+	}
+	margin: 2rem;
+`;
+export const StyledWrapper = styled.div`
+	position: relative;
+`;
+
+export const getGreeting = () => {
+	const currTime = new Date();
+	const currHours = currTime.getHours();
+
+	if (currHours >= 5 && currHours < 12) {
+		return 'Good morning';
+	} else if (currHours >= 12 && currHours < 17) {
+		return 'Good afternoon';
+	} else {
+		return 'Good evening';
+	}
+};
+
+export const ProjectHeader = ({ children }: PropsWithChildren) => {
+	const user = useCurrentUser();
+
+	return (
+		<StyledBackgroundWrapper>
+			<StyledHeader>
+				<Typography variant="h1">Welcome to Project Portal</Typography>
+				<Typography variant="h6">
+					{getGreeting()} {user?.name}
+				</Typography>
+			</StyledHeader>
+			<StyledWrapper>{children}</StyledWrapper>
+		</StyledBackgroundWrapper>
+	);
+};

client/apps/project-portal-landingpage/src/components/ProfileCardHeader.tsx

@@ -0,0 +1,55 @@
+import styled from 'styled-components';
+import { Typography } from '@equinor/eds-core-react';
+
+import { PersonAvatar } from '@equinor/fusion-react-person';
+import { PersonDetails } from '../types/person-details';
+import { Skeleton } from './skeleton/Skeleton';
+import { getDepartment, getJobTitle } from '../hooks/user';
+
+const Style = {
+	InfoWrapper: styled.div<{ paddingNone?: boolean }>`
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+		padding: ${({ paddingNone }) => (paddingNone ? '0px' : '1rem')};
+	`,
+};
+
+export const ProfileCardHeader = ({
+	user,
+	trigger = 'none',
+	paddingNone,
+}: {
+	user?: PersonDetails;
+	trigger?: 'click' | 'hover' | 'none';
+	paddingNone?: boolean;
+}) => {
+	if (!user) {
+		return (
+			<Style.InfoWrapper paddingNone={paddingNone}>
+				<Skeleton variant="circle" size="medium" />
+
+				<div>
+					<Skeleton width="200px" />
+					<div style={{ paddingTop: '0.5rem', gap: '0.2rem', display: 'flex', flexDirection: 'column' }}>
+						<Skeleton width={60} />
+						<Skeleton width={60} />
+					</div>
+				</div>
+			</Style.InfoWrapper>
+		);
+	}
+
+	return (
+		<Style.InfoWrapper paddingNone={paddingNone}>
+			<PersonAvatar azureId={user.azureUniqueId} trigger={trigger} />
+			<div>
+				<Typography variant="h6">{user?.name}</Typography>
+				<div>
+					<Typography>{getDepartment(user)}</Typography>
+					<Typography>{getJobTitle(user)}</Typography>
+				</div>
+			</div>
+		</Style.InfoWrapper>
+	);
+};