├── .gitignore
├── app
    ├── admin.js
    ├── login.js
    ├── dashboard.js
    ├── shell.js
    ├── admin
    │   └── page.html
    ├── login
    │   ├── page.html
    │   └── page.js
    ├── loading
    │   └── page.js
    ├── error
    │   └── page.js
    ├── utils
    │   └── fetch.js
    ├── dashboard
    │   ├── page.html
    │   └── page.js
    └── app.js
├── images
    ├── app-vs-page-shell.png
    └── app-vs-page-shell.svg
├── package.json
├── README.md
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | /dist


--------------------------------------------------------------------------------
/app/admin.js:
--------------------------------------------------------------------------------
1 | import { bootstrapAsync } from "./app";
2 | bootstrapAsync("admin");
3 | 


--------------------------------------------------------------------------------
/images/app-vs-page-shell.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/webpack/webpack-pwa/HEAD/images/app-vs-page-shell.png


--------------------------------------------------------------------------------
/app/login.js:
--------------------------------------------------------------------------------
1 | import * as page from "./login/page";
2 | import { bootstrap } from "./app";
3 | bootstrap(page);
4 | 


--------------------------------------------------------------------------------
/app/dashboard.js:
--------------------------------------------------------------------------------
1 | import * as page from "./dashboard/page";
2 | import { bootstrap } from "./app";
3 | bootstrap(page);
4 | 


--------------------------------------------------------------------------------
/app/shell.js:
--------------------------------------------------------------------------------
1 | import "./loading/page";
2 | import { bootstrapAsync, getCurrentPage } from "./app";
3 | bootstrapAsync(getCurrentPage());
4 | 


--------------------------------------------------------------------------------
/app/admin/page.html:
--------------------------------------------------------------------------------
1 | <h1>Admin</h1>
2 | 
3 | <p><button class="nav-dashboard">Go to dashboard page</button></p>
4 | 
5 | <p><button class="nav-login">Go to login page</button></p>
6 | 
7 | <p>This is the admin page...</p>
8 | 


--------------------------------------------------------------------------------
/app/login/page.html:
--------------------------------------------------------------------------------
1 | <h1>Login</h1>
2 | 
3 | <p><button class="nav-dashboard">Go to dashboard page</button></p>
4 | 
5 | <p><button class="nav-admin">Go to admin page</button></p>
6 | 
7 | <p>This is the login page...</p>
8 | 


--------------------------------------------------------------------------------
/app/loading/page.js:
--------------------------------------------------------------------------------
1 | export function open(name) {
2 | 	document.body.innerHTML = "<h1></h1>";
3 | 	document.querySelector("h1").innerText = `Loading ${name}...`;
4 | 	return Promise.resolve();
5 | }
6 | 
7 | export function close() {
8 | 	return Promise.resolve();
9 | }


--------------------------------------------------------------------------------
/app/error/page.js:
--------------------------------------------------------------------------------
 1 | export function open(err) {
 2 | 	document.body.innerHTML = "<h1>Error happened: </h1>";
 3 | 	document.querySelector("h1").innerText = err.message;
 4 | 	return Promise.resolve();
 5 | }
 6 | 
 7 | export function close() {
 8 | 	return Promise.resolve();
 9 | }
10 | 


--------------------------------------------------------------------------------
/app/utils/fetch.js:
--------------------------------------------------------------------------------
 1 | export function fetchAsBase64(url) {
 2 | 	return fetch(url)
 3 | 		.then(res => res.blob())
 4 | 		.then(blob => new Promise((resolve, reject) => {
 5 | 			const reader = new FileReader();
 6 | 			reader.onload = () => {
 7 | 				resolve(reader.result.split(",")[1]);
 8 | 			};
 9 | 			reader.readAsDataURL(blob);
10 | 		}));
11 | }
12 | 


--------------------------------------------------------------------------------
/app/dashboard/page.html:
--------------------------------------------------------------------------------
 1 | <h1>Dashboard</h1>
 2 | 
 3 | <p><button class="nav-admin">Go to admin page</button></p>
 4 | 
 5 | <p><button class="nav-login">Go to login page</button></p>
 6 | 
 7 | <p><button class="nav-unknown">Go to unknown page</button></p>
 8 | 
 9 | <p>Here is some random data for you. Fetched from the internet (when you are connected):</p>
10 | 
11 | <p class="content"></p>


--------------------------------------------------------------------------------
/app/login/page.js:
--------------------------------------------------------------------------------
 1 | import html from "./page.html";
 2 | import { navigate } from "../app";
 3 | 
 4 | export function open() {
 5 | 	document.body.innerHTML = html;
 6 | 	document.querySelector(".nav-dashboard").addEventListener("click", () => {
 7 | 		navigate("dashboard");
 8 | 	});
 9 | 	document.querySelector(".nav-admin").addEventListener("click", () => {
10 | 		navigate("admin");
11 | 	});
12 | 	return Promise.resolve();
13 | }
14 | 
15 | export function close() {
16 | 	return Promise.resolve();
17 | }
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webpack-pwa",
 3 |   "private": true,
 4 |   "version": "1.0.0",
 5 |   "description": "Example for a super simple PWA with webpack.",
 6 |   "scripts": {
 7 |     "start": "webpack-dev-server -d",
 8 |     "build-page": "webpack -p",
 9 |     "build-both": "webpack -p --env.output page-shell && webpack -p --env.appShell --env.output app-shell",
10 |     "deploy": "rm -rf dist && webpack -p --env.output page-shell && webpack -p --env.appShell --env.output app-shell && gh-pages -d dist",
11 |     "build-shell": "webpack -p --env.appShell"
12 |   },
13 |   "author": "Tobias Koppers @sokra",
14 |   "license": "MIT",
15 |   "devDependencies": {
16 |     "html-loader": "^0.4.4",
17 |     "html-webpack-plugin": "^2.26.0",
18 |     "offline-plugin": "^4.5.5",
19 |     "webpack": "^2.2.0",
20 |     "webpack-dev-server": "^2.0.0"
21 |   },
22 |   "dependencies": {
23 |     "gh-pages": "^0.12.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/app/dashboard/page.js:
--------------------------------------------------------------------------------
 1 | import html from "./page.html";
 2 | import { fetchAsBase64 } from "../utils/fetch";
 3 | import { navigate } from "../app";
 4 | 
 5 | export function open() {
 6 | 	document.body.innerHTML = html;
 7 | 	document.querySelector(".nav-admin").addEventListener("click", () => {
 8 | 		navigate("admin");
 9 | 	});
10 | 	document.querySelector(".nav-login").addEventListener("click", () => {
11 | 		navigate("login");
12 | 	});
13 | 	document.querySelector(".nav-unknown").addEventListener("click", () => {
14 | 		navigate("unknown");
15 | 	});
16 | 	const lastResult = localStorage.random;
17 | 	if(lastResult)
18 | 		document.querySelector(".content").innerText = `${lastResult} (updating...)`;
19 | 	return fetchAsBase64("https://httpbin.org/bytes/10").then(res => {
20 | 		document.querySelector(".content").innerText = localStorage.random = res;
21 | 	}).catch(err => {
22 | 		if(lastResult)
23 | 			document.querySelector(".content").innerText = `${lastResult} (Sorry you are offline, this was the last result)`;
24 | 		else
25 | 			document.querySelector(".content").innerText = "Sorry you are offline.";
26 | 	});
27 | }
28 | 
29 | export function close() {
30 | 	return Promise.resolve();
31 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # webpack-pwa
 2 | 
 3 | Super simple webpack PWA(Progressive Web App) example featuring
 4 | 
 5 | * Routing with **On Demand Loading**
 6 | * Offline support
 7 | * Fetching some data from network
 8 | * Two approaches
 9 |   * App Shell
10 |   * Page Shell
11 | * By intent: No framework, only simple JavaScript and DOM
12 |   * Yes with `innerHTML` and `innerText`
13 |   * Feel free to imagine your favorite framework here.
14 | 
15 | ## Build and Run it
16 | 
17 | ``` shell
18 | npm install
19 | npm run build-shell
20 | cd dist
21 | npm install node-static -g
22 | static
23 | open http://localhost:8080/dashboard.html
24 | ```
25 | 
26 | This builds the App Shell version.
27 | 
28 | To build the Page Shell version: replace `npm run build-shell` with `npm run build-page`.
29 | 
30 | ## Architecture
31 | 
32 | ![app shell vs page shell](images/app-vs-page-shell.png)
33 | 
34 | ### App Shell
35 | 
36 | * Total size is smaller
37 | * Initial load requests three files: `login.html`, `shell-1234.js`, `3456.js`
38 | * Initial load needs to load: Shell + Router + content
39 | * The shell is visible earlier than with Page Shell approach.
40 | 
41 | ### Page Shell
42 | 
43 | * Total size is bigger (i. e. dashboard content is in `dashboard-1234.js` and `4567.js`)
44 |   * App takes longer to be offline ready.
45 | * Initial load requests only two files: `login.html`, `login-2345.js`
46 | * Initial load needs to load: Shell + content
47 | * The shell + content is visible earlier than with App Shell approach.
48 | 
49 | A hybrid approach can be used where shell and content is separated in two requests (see admin page as example). This makes sense when content is much bigger than shell and shell should be visible earlier.
50 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const OfflinePlugin = require("offline-plugin");
 3 | const HtmlWebpackPlugin = require("html-webpack-plugin");
 4 | 
 5 | module.exports = ({ appShell, output = "." } = {}) => ({
 6 | 	entry: appShell ? {
 7 | 		// App Shell has only a single entry point
 8 | 		// this entry point loads pages with import()
 9 | 		shell: "./app/shell.js"
10 | 	} : {
11 | 		// Page Shell requires an entry point per page
12 | 		dashboard: "./app/dashboard.js",
13 | 		login: "./app/login.js",
14 | 		admin: "./app/admin.js"
15 | 	},
16 | 	output: {
17 | 		path: path.resolve(__dirname, "dist", output),
18 | 		filename: "[name]-[chunkhash].js",
19 | 		chunkFilename: "[chunkhash].js"
20 | 	},
21 | 	module: {
22 | 		rules: [
23 | 			{
24 | 				test: /\.html/,
25 | 				use: "html-loader"
26 | 			}
27 | 		]
28 | 	},
29 | 	plugins: [
30 | 		// Generate a HTML page per page
31 | 		// This could be replace by some server logic or SSR
32 | 		// For the Page Shell each HTML page need to reference the correct entry point
33 | 		new HtmlWebpackPlugin({
34 | 			filename: "dashboard.html",
35 | 			chunks: !appShell && ["dashboard"]
36 | 		}),
37 | 		new HtmlWebpackPlugin({
38 | 			filename: "login.html",
39 | 			chunks: !appShell && ["login"]
40 | 		}),
41 | 		new HtmlWebpackPlugin({
42 | 			filename: "admin.html",
43 | 			chunks: !appShell && ["admin"]
44 | 		}),
45 | 		// Offline support
46 | 		new OfflinePlugin({
47 | 			caches: {
48 | 				main: [
49 | 					// These assets don't have a chunk hash.
50 | 					// SW fetch them on every SW update.
51 | 					"dashboard.html",
52 | 					"login.html",
53 | 					"admin.html"
54 | 				],
55 | 				additional: [
56 | 					// All other assets have a chunk hash.
57 | 					// SW only fetch them once.
58 | 					// They'll have another name on change.
59 | 					":rest:"
60 | 				]
61 | 			},
62 | 			// To remove a warning about additional need to have hash
63 | 			safeToUseOptionalCaches: true,
64 | 			// "additional" section is fetch only once.
65 | 			updateStrategy: "changed"
66 | 		})
67 | 	]
68 | });


--------------------------------------------------------------------------------
/app/app.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import offlineRuntime from "offline-plugin/runtime";
 4 | 
 5 | // Router state
 6 | let currentPage;
 7 | let currentAction;
 8 | 
 9 | // The application shell
10 | // Here it's only a color, but it could be your title bar with logo.
11 | document.body.style.background = "lightblue";
12 | 
13 | // Bootstraping for Page Shell.
14 | // "page" is the already available page
15 | export function bootstrap(page) {
16 | 	currentPage = page;
17 | 	currentAction = currentPage.open()
18 | 		.then(() => {
19 | 			offlineRuntime.install();
20 | 		});
21 | 	registerRouter();
22 | }
23 | 
24 | // Bootstrapping for App Shell (or hybrid Page Shell page)
25 | // "pageName" is only the name of the page.
26 | // This page will be loaded while bootstrapping
27 | export function bootstrapAsync(pageName) {
28 | 	currentAction = Promise.resolve();
29 | 	openPage({
30 | 		page: pageName
31 | 	}).then(() => {
32 | 		offlineRuntime.install();
33 | 	});
34 | 	registerRouter();
35 | }
36 | 
37 | // Bind router to events (modern browsers only)
38 | function registerRouter() {
39 | 	window.addEventListener("popstate", event => {
40 | 		openPage(event.state || {
41 | 			page: getCurrentPage()
42 | 		});
43 | 	});
44 | }
45 | 
46 | // get current page from URL
47 | export function getCurrentPage() {
48 | 	var m = /([^\/]+)\.html/.exec(location.pathname);
49 | 	return m ? m[1] : "unknown";
50 | }
51 | 
52 | // Start loading loading page
53 | //const loadingPage = import("./loading/page");
54 | 
55 | // Router logic for loading and opening a page.
56 | function openPage(state) {
57 | 	const pageName = state.page;
58 | 	currentAction = currentAction
59 | 		// Close the current page
60 | 		.then(() => currentPage && currentPage.close())
61 | 		// Start loading the next page
62 | 		.then(() => import(`./${pageName}/page`))
63 | 		// Display the loading page while loading the next page
64 | 		/*.then(() => loadingPage
65 | 			.then(loading => loading.open(pageName)
66 | 				.then(() => import(`./${pageName}/page`))
67 | 				.then(page => loading.close().then(() => page))
68 | 		))*/
69 | 		// Open the next page
70 | 		.then(newPage => {
71 | 			currentPage = newPage;
72 | 			return currentPage.open();
73 | 		})
74 | 		// Display error page
75 | 		.catch(err => {
76 | 			return import("./error/page")
77 | 				.then(newPage => {
78 | 					currentPage = newPage;
79 | 					return currentPage.open(err);
80 | 				});
81 | 		});
82 | 	return currentAction;
83 | }
84 | 
85 | // Router logic, Called by pages
86 | // Starts navigating to another page
87 | export function navigate(pageName) {
88 | 	const state = { page: pageName };
89 | 	window.history.pushState(state, pageName, `${pageName}.html`);
90 | 	openPage(state);
91 | }
92 | 


--------------------------------------------------------------------------------
/images/app-vs-page-shell.svg:
--------------------------------------------------------------------------------
   1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
   2 | <svg
   3 |    xmlns:dc="http://purl.org/dc/elements/1.1/"
   4 |    xmlns:cc="http://creativecommons.org/ns#"
   5 |    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   6 |    xmlns:svg="http://www.w3.org/2000/svg"
   7 |    xmlns="http://www.w3.org/2000/svg"
   8 |    version="1.1"
   9 |    id="svg2"
  10 |    viewBox="0 0 744.09448819 1052.3622047"
  11 |    height="297mm"
  12 |    width="210mm">
  13 |   <defs
  14 |      id="defs4">
  15 |     <marker
  16 |        orient="auto"
  17 |        refY="0"
  18 |        refX="0"
  19 |        id="marker15831"
  20 |        style="overflow:visible">
  21 |       <path
  22 |          id="path15833"
  23 |          style="fill:#12009f;fill-opacity:1;fill-rule:evenodd;stroke:#12009f;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
  24 |          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
  25 |          transform="matrix(-1.1,0,0,-1.1,-1.1,0)" />
  26 |     </marker>
  27 |     <marker
  28 |        style="overflow:visible;"
  29 |        id="marker15154"
  30 |        refX="0.0"
  31 |        refY="0.0"
  32 |        orient="auto">
  33 |       <path
  34 |          transform="scale(1.1) rotate(180) translate(1,0)"
  35 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
  36 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#9f0000;stroke-opacity:1;fill:#9f0000;fill-opacity:1"
  37 |          id="path15156" />
  38 |     </marker>
  39 |     <marker
  40 |        style="overflow:visible"
  41 |        id="marker14660"
  42 |        refX="0"
  43 |        refY="0"
  44 |        orient="auto">
  45 |       <path
  46 |          transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
  47 |          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
  48 |          style="fill:#9f0000;fill-opacity:1;fill-rule:evenodd;stroke:#9f0000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
  49 |          id="path14662" />
  50 |     </marker>
  51 |     <marker
  52 |        orient="auto"
  53 |        refY="0.0"
  54 |        refX="0.0"
  55 |        id="marker14090"
  56 |        style="overflow:visible;">
  57 |       <path
  58 |          id="path14092"
  59 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#12009f;stroke-opacity:1;fill:#12009f;fill-opacity:1"
  60 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
  61 |          transform="scale(1.1) rotate(180) translate(1,0)" />
  62 |     </marker>
  63 |     <marker
  64 |        orient="auto"
  65 |        refY="0.0"
  66 |        refX="0.0"
  67 |        id="marker13912"
  68 |        style="overflow:visible;">
  69 |       <path
  70 |          id="path13914"
  71 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#12009f;stroke-opacity:1;fill:#12009f;fill-opacity:1"
  72 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
  73 |          transform="scale(1.1) rotate(180) translate(1,0)" />
  74 |     </marker>
  75 |     <marker
  76 |        orient="auto"
  77 |        refY="0.0"
  78 |        refX="0.0"
  79 |        id="marker13716"
  80 |        style="overflow:visible;">
  81 |       <path
  82 |          id="path13718"
  83 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#12009f;stroke-opacity:1;fill:#12009f;fill-opacity:1"
  84 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
  85 |          transform="scale(1.1) rotate(180) translate(1,0)" />
  86 |     </marker>
  87 |     <marker
  88 |        orient="auto"
  89 |        refY="0"
  90 |        refX="0"
  91 |        id="marker12812"
  92 |        style="overflow:visible">
  93 |       <path
  94 |          id="path12814"
  95 |          style="fill:#9f0000;fill-opacity:1;fill-rule:evenodd;stroke:#9f0000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
  96 |          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
  97 |          transform="matrix(-1.1,0,0,-1.1,-1.1,0)" />
  98 |     </marker>
  99 |     <marker
 100 |        orient="auto"
 101 |        refY="0"
 102 |        refX="0"
 103 |        id="marker11184"
 104 |        style="overflow:visible">
 105 |       <path
 106 |          id="path11186"
 107 |          style="fill:#9f0000;fill-opacity:1;fill-rule:evenodd;stroke:#9f0000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
 108 |          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
 109 |          transform="matrix(-1.1,0,0,-1.1,-1.1,0)" />
 110 |     </marker>
 111 |     <marker
 112 |        style="overflow:visible"
 113 |        id="marker10374"
 114 |        refX="0"
 115 |        refY="0"
 116 |        orient="auto">
 117 |       <path
 118 |          transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
 119 |          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
 120 |          style="fill:#9f0000;fill-opacity:1;fill-rule:evenodd;stroke:#9f0000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
 121 |          id="path10376" />
 122 |     </marker>
 123 |     <marker
 124 |        orient="auto"
 125 |        refY="0"
 126 |        refX="0"
 127 |        id="marker10022"
 128 |        style="overflow:visible">
 129 |       <path
 130 |          id="path10024"
 131 |          style="fill:#9f0000;fill-opacity:1;fill-rule:evenodd;stroke:#9f0000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
 132 |          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
 133 |          transform="matrix(-1.1,0,0,-1.1,-1.1,0)" />
 134 |     </marker>
 135 |     <marker
 136 |        style="overflow:visible"
 137 |        id="marker9596"
 138 |        refX="0"
 139 |        refY="0"
 140 |        orient="auto">
 141 |       <path
 142 |          transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
 143 |          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
 144 |          style="fill:#9f0000;fill-opacity:1;fill-rule:evenodd;stroke:#9f0000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
 145 |          id="path9598" />
 146 |     </marker>
 147 |     <marker
 148 |        style="overflow:visible"
 149 |        id="marker9072"
 150 |        refX="0"
 151 |        refY="0"
 152 |        orient="auto">
 153 |       <path
 154 |          transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
 155 |          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
 156 |          style="fill:#9f0000;fill-opacity:1;fill-rule:evenodd;stroke:#9f0000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
 157 |          id="path9074" />
 158 |     </marker>
 159 |     <marker
 160 |        orient="auto"
 161 |        refY="0.0"
 162 |        refX="0.0"
 163 |        id="marker8287"
 164 |        style="overflow:visible;">
 165 |       <path
 166 |          id="path8289"
 167 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#12009f;stroke-opacity:1;fill:#12009f;fill-opacity:1"
 168 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 169 |          transform="scale(1.1) rotate(180) translate(1,0)" />
 170 |     </marker>
 171 |     <marker
 172 |        orient="auto"
 173 |        refY="0.0"
 174 |        refX="0.0"
 175 |        id="marker8055"
 176 |        style="overflow:visible;">
 177 |       <path
 178 |          id="path8057"
 179 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#9f0000;stroke-opacity:1;fill:#9f0000;fill-opacity:1"
 180 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 181 |          transform="scale(1.1) rotate(180) translate(1,0)" />
 182 |     </marker>
 183 |     <marker
 184 |        orient="auto"
 185 |        refY="0.0"
 186 |        refX="0.0"
 187 |        id="marker7767"
 188 |        style="overflow:visible;">
 189 |       <path
 190 |          id="path7769"
 191 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#9f0000;stroke-opacity:1;fill:#9f0000;fill-opacity:1"
 192 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 193 |          transform="scale(1.1) rotate(180) translate(1,0)" />
 194 |     </marker>
 195 |     <marker
 196 |        style="overflow:visible;"
 197 |        id="marker7665"
 198 |        refX="0.0"
 199 |        refY="0.0"
 200 |        orient="auto">
 201 |       <path
 202 |          transform="scale(1.1) rotate(180) translate(1,0)"
 203 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 204 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#9f0000;stroke-opacity:1;fill:#9f0000;fill-opacity:1"
 205 |          id="path7667" />
 206 |     </marker>
 207 |     <marker
 208 |        style="overflow:visible;"
 209 |        id="marker6575"
 210 |        refX="0.0"
 211 |        refY="0.0"
 212 |        orient="auto">
 213 |       <path
 214 |          transform="scale(1.1) rotate(180) translate(1,0)"
 215 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 216 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#12009f;stroke-opacity:1;fill:#12009f;fill-opacity:1"
 217 |          id="path6577" />
 218 |     </marker>
 219 |     <marker
 220 |        orient="auto"
 221 |        refY="0.0"
 222 |        refX="0.0"
 223 |        id="marker6065"
 224 |        style="overflow:visible;">
 225 |       <path
 226 |          id="path6067"
 227 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#12009f;stroke-opacity:1;fill:#12009f;fill-opacity:1"
 228 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 229 |          transform="scale(1.1) rotate(180) translate(1,0)" />
 230 |     </marker>
 231 |     <marker
 232 |        orient="auto"
 233 |        refY="0.0"
 234 |        refX="0.0"
 235 |        id="marker5757"
 236 |        style="overflow:visible;">
 237 |       <path
 238 |          id="path5759"
 239 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#9f0000;stroke-opacity:1;fill:#9f0000;fill-opacity:1"
 240 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 241 |          transform="scale(1.1) rotate(180) translate(1,0)" />
 242 |     </marker>
 243 |     <marker
 244 |        style="overflow:visible;"
 245 |        id="marker5499"
 246 |        refX="0.0"
 247 |        refY="0.0"
 248 |        orient="auto">
 249 |       <path
 250 |          transform="scale(1.1) rotate(180) translate(1,0)"
 251 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 252 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#9f0000;stroke-opacity:1;fill:#9f0000;fill-opacity:1"
 253 |          id="path5501" />
 254 |     </marker>
 255 |     <marker
 256 |        orient="auto"
 257 |        refY="0.0"
 258 |        refX="0.0"
 259 |        id="marker5205"
 260 |        style="overflow:visible;">
 261 |       <path
 262 |          id="path5207"
 263 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#9f0000;stroke-opacity:1;fill:#9f0000;fill-opacity:1"
 264 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 265 |          transform="scale(1.1) rotate(180) translate(1,0)" />
 266 |     </marker>
 267 |     <marker
 268 |        orient="auto"
 269 |        refY="0.0"
 270 |        refX="0.0"
 271 |        id="marker4911"
 272 |        style="overflow:visible;">
 273 |       <path
 274 |          id="path4913"
 275 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#9f0000;stroke-opacity:1;fill:#9f0000;fill-opacity:1"
 276 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 277 |          transform="scale(1.1) rotate(180) translate(1,0)" />
 278 |     </marker>
 279 |     <marker
 280 |        orient="auto"
 281 |        refY="0.0"
 282 |        refX="0.0"
 283 |        id="marker4599"
 284 |        style="overflow:visible;">
 285 |       <path
 286 |          id="path4601"
 287 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#9f0000;stroke-opacity:1;fill:#9f0000;fill-opacity:1"
 288 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 289 |          transform="scale(1.1) rotate(180) translate(1,0)" />
 290 |     </marker>
 291 |     <marker
 292 |        style="overflow:visible;"
 293 |        id="Arrow2Lend"
 294 |        refX="0.0"
 295 |        refY="0.0"
 296 |        orient="auto">
 297 |       <path
 298 |          transform="scale(1.1) rotate(180) translate(1,0)"
 299 |          d="M 8.7185878,4.0337352 L -2.2072895,0.016013256 L 8.7185884,-4.0017078 C 6.9730900,-1.6296469 6.9831476,1.6157441 8.7185878,4.0337352 z "
 300 |          style="fill-rule:evenodd;stroke-width:0.625;stroke-linejoin:round;stroke:#9f0000;stroke-opacity:1;fill:#9f0000;fill-opacity:1"
 301 |          id="path4310" />
 302 |     </marker>
 303 |     <marker
 304 |        style="overflow:visible"
 305 |        id="marker15154-7"
 306 |        refX="0"
 307 |        refY="0"
 308 |        orient="auto">
 309 |       <path
 310 |          transform="matrix(-1.1,0,0,-1.1,-1.1,0)"
 311 |          d="M 8.7185878,4.0337352 -2.2072895,0.01601326 8.7185884,-4.0017078 c -1.7454984,2.3720609 -1.7354408,5.6174519 -6e-7,8.035443 z"
 312 |          style="fill:#9f0000;fill-opacity:1;fill-rule:evenodd;stroke:#9f0000;stroke-width:0.625;stroke-linejoin:round;stroke-opacity:1"
 313 |          id="path15156-3" />
 314 |     </marker>
 315 |   </defs>
 316 |   <metadata
 317 |      id="metadata7">
 318 |     <rdf:RDF>
 319 |       <cc:Work
 320 |          rdf:about="">
 321 |         <dc:format>image/svg+xml</dc:format>
 322 |         <dc:type
 323 |            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
 324 |         <dc:title></dc:title>
 325 |       </cc:Work>
 326 |     </rdf:RDF>
 327 |   </metadata>
 328 |   <g
 329 |      id="layer1">
 330 |     <g
 331 |        transform="translate(-1.01015,0)"
 332 |        id="g6449">
 333 |       <g
 334 |          id="g4271"
 335 |          transform="translate(185.86806,182.33253)">
 336 |         <rect
 337 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 338 |            id="rect4273"
 339 |            width="205.34563"
 340 |            height="119.63749"
 341 |            x="329.57593"
 342 |            y="134.90536" />
 343 |         <text
 344 |            xml:space="preserve"
 345 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 346 |            x="531.3902"
 347 |            y="152.31015"
 348 |            id="text4275"><tspan
 349 |              x="531.3902"
 350 |              y="152.31015"
 351 |              id="tspan4277"
 352 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end">4567.js</tspan></text>
 353 |       </g>
 354 |       <g
 355 |          transform="translate(-44.063464,182.33253)"
 356 |          id="g4263">
 357 |         <rect
 358 |            y="134.90536"
 359 |            x="329.57593"
 360 |            height="119.63749"
 361 |            width="205.34563"
 362 |            id="rect4265"
 363 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 364 |         <text
 365 |            id="text4267"
 366 |            y="152.31015"
 367 |            x="531.3902"
 368 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 369 |            xml:space="preserve"><tspan
 370 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end"
 371 |              id="tspan4269"
 372 |              y="152.31015"
 373 |              x="531.3902">3456.js</tspan></text>
 374 |       </g>
 375 |       <g
 376 |          id="g4255"
 377 |          transform="translate(-268.70058,182.33253)">
 378 |         <rect
 379 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 380 |            id="rect4257"
 381 |            width="247.26695"
 382 |            height="119.63749"
 383 |            x="287.6546"
 384 |            y="134.90536" />
 385 |         <text
 386 |            xml:space="preserve"
 387 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 388 |            x="531.3902"
 389 |            y="152.31015"
 390 |            id="text4259"><tspan
 391 |              x="531.3902"
 392 |              y="152.31015"
 393 |              id="tspan4261"
 394 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end">2345.js</tspan></text>
 395 |       </g>
 396 |       <g
 397 |          id="g4250"
 398 |          transform="translate(-2.0203051,32.324881)">
 399 |         <rect
 400 |            y="134.90536"
 401 |            x="203.30685"
 402 |            height="119.63749"
 403 |            width="331.61469"
 404 |            id="rect4174-6"
 405 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 406 |         <text
 407 |            id="text4176-9"
 408 |            y="152.31015"
 409 |            x="531.3902"
 410 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 411 |            xml:space="preserve"><tspan
 412 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end"
 413 |              id="tspan4180-4"
 414 |              y="152.31015"
 415 |              x="531.3902">shell-1234.js</tspan></text>
 416 |       </g>
 417 |       <text
 418 |          xml:space="preserve"
 419 |          style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 420 |          x="17.979694"
 421 |          y="44.687084"
 422 |          id="text4279"><tspan
 423 |            id="tspan4281"
 424 |            x="17.979694"
 425 |            y="44.687084">App Shell</tspan></text>
 426 |       <g
 427 |          transform="translate(66.04316,273.75135)"
 428 |          id="g4192">
 429 |         <rect
 430 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 431 |            id="rect4194"
 432 |            width="172.51566"
 433 |            height="54.482651"
 434 |            x="233.96931"
 435 |            y="77.88765" />
 436 |         <text
 437 |            xml:space="preserve"
 438 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 439 |            x="320.63135"
 440 |            y="99.079201"
 441 |            id="text4196"><tspan
 442 |              id="tspan4198"
 443 |              x="320.63135"
 444 |              y="99.079201"
 445 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">Login Content</tspan><tspan
 446 |              x="320.63135"
 447 |              y="117.8292"
 448 |              id="tspan4200"
 449 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">(app/login/page.js)</tspan></text>
 450 |       </g>
 451 |       <g
 452 |          transform="translate(-175.26147,273.75135)"
 453 |          id="g4182">
 454 |         <rect
 455 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 456 |            id="rect4184"
 457 |            width="211.57547"
 458 |            height="54.146515"
 459 |            x="214.43941"
 460 |            y="78.055717" />
 461 |         <text
 462 |            xml:space="preserve"
 463 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 464 |            x="320.63135"
 465 |            y="99.079201"
 466 |            id="text4186"><tspan
 467 |              id="tspan4188"
 468 |              x="320.63135"
 469 |              y="99.079201"
 470 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">Dashboard Content</tspan><tspan
 471 |              x="320.63135"
 472 |              y="117.8292"
 473 |              id="tspan4190"
 474 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">(app/dashboard/page.js)</tspan></text>
 475 |       </g>
 476 |       <g
 477 |          id="g4202"
 478 |          transform="translate(296.47977,273.75135)">
 479 |         <rect
 480 |            y="77.88765"
 481 |            x="233.96931"
 482 |            height="54.482651"
 483 |            width="172.51566"
 484 |            id="rect4204"
 485 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 486 |         <text
 487 |            id="text4206"
 488 |            y="99.079201"
 489 |            x="320.63135"
 490 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 491 |            xml:space="preserve"><tspan
 492 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 493 |              y="99.079201"
 494 |              x="320.63135"
 495 |              id="tspan4208">Admin Content</tspan><tspan
 496 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 497 |              id="tspan4210"
 498 |              y="117.8292"
 499 |              x="320.63135">(app/admin/page.js)</tspan></text>
 500 |       </g>
 501 |       <path
 502 |          id="path5755"
 503 |          d="m 368.2626,258.68203 17.02286,91.51778"
 504 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker5757)" />
 505 |       <path
 506 |          id="path5203"
 507 |          d="M 292.47972,258.68203 232.0203,351.71504"
 508 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker5205)" />
 509 |       <path
 510 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker5499)"
 511 |          d="M 440.99358,258.17695 550.4454,351.20996"
 512 |          id="path5497" />
 513 |       <g
 514 |          id="g4146"
 515 |          transform="translate(47.477169,126.26907)">
 516 |         <rect
 517 |            y="77.88765"
 518 |            x="233.96931"
 519 |            height="54.482651"
 520 |            width="172.51566"
 521 |            id="rect4138"
 522 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3.23163366;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 523 |         <text
 524 |            id="text4140"
 525 |            y="99.079201"
 526 |            x="320.63135"
 527 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 528 |            xml:space="preserve"><tspan
 529 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 530 |              y="99.079201"
 531 |              x="320.63135"
 532 |              id="tspan4142">App Shell</tspan><tspan
 533 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 534 |              id="tspan4144"
 535 |              y="117.8292"
 536 |              x="320.63135">(app/shell.js)</tspan></text>
 537 |       </g>
 538 |       <path
 539 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#Arrow2Lend)"
 540 |          d="m 195,127.3622 35,40"
 541 |          id="path4283" />
 542 |       <path
 543 |          id="path4597"
 544 |          d="m 365.21071,124.83682 0.14973,41.01015"
 545 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker4599)" />
 546 |       <path
 547 |          id="path4909"
 548 |          d="m 545.01263,125.84697 -35,40"
 549 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker4911)" />
 550 |       <g
 551 |          transform="translate(273.75133,-6.0609155)"
 552 |          id="g4152">
 553 |         <rect
 554 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 555 |            id="rect4154"
 556 |            width="172.51566"
 557 |            height="54.482651"
 558 |            x="233.96931"
 559 |            y="77.88765" />
 560 |         <text
 561 |            xml:space="preserve"
 562 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 563 |            x="320.63135"
 564 |            y="99.079201"
 565 |            id="text4156"><tspan
 566 |              id="tspan4158"
 567 |              x="320.63135"
 568 |              y="99.079201"
 569 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">Admin</tspan><tspan
 570 |              x="320.63135"
 571 |              y="117.8292"
 572 |              id="tspan4160"
 573 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">(admin.html)</tspan></text>
 574 |       </g>
 575 |       <g
 576 |          id="g4162"
 577 |          transform="translate(45.456837,-6.0609155)">
 578 |         <rect
 579 |            y="77.88765"
 580 |            x="233.96931"
 581 |            height="54.482651"
 582 |            width="172.51566"
 583 |            id="rect4164"
 584 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 585 |         <text
 586 |            id="text4166"
 587 |            y="99.079201"
 588 |            x="320.63135"
 589 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 590 |            xml:space="preserve"><tspan
 591 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 592 |              y="99.079201"
 593 |              x="320.63135"
 594 |              id="tspan4168">Login</tspan><tspan
 595 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 596 |              id="tspan4170"
 597 |              y="117.8292"
 598 |              x="320.63135">(login.html)</tspan></text>
 599 |       </g>
 600 |       <g
 601 |          transform="translate(-182.83762,-6.0609155)"
 602 |          id="g4172">
 603 |         <rect
 604 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 605 |            id="rect4174"
 606 |            width="172.51566"
 607 |            height="54.482651"
 608 |            x="233.96931"
 609 |            y="77.88765" />
 610 |         <text
 611 |            xml:space="preserve"
 612 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 613 |            x="320.63135"
 614 |            y="99.079201"
 615 |            id="text4176"><tspan
 616 |              id="tspan4178"
 617 |              x="320.63135"
 618 |              y="99.079201"
 619 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">Dashboard</tspan><tspan
 620 |              x="320.63135"
 621 |              y="117.8292"
 622 |              id="tspan4180"
 623 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">(dashboard.html)</tspan></text>
 624 |       </g>
 625 |       <path
 626 |          id="path6063"
 627 |          d="m 235.40611,191.50689 45.10152,18.78679"
 628 |          style="fill:none;fill-rule:evenodd;stroke:#12009f;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker6065)" />
 629 |       <circle
 630 |          style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 631 |          id="path6055"
 632 |          cx="235"
 633 |          cy="192.3622"
 634 |          r="8.9075069" />
 635 |     </g>
 636 |     <g
 637 |        id="g6512">
 638 |       <text
 639 |          id="text6359"
 640 |          y="520.46893"
 641 |          x="16.969542"
 642 |          style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 643 |          xml:space="preserve"><tspan
 644 |            y="520.46893"
 645 |            x="16.969542"
 646 |            id="tspan6361">Page Shell</tspan></text>
 647 |       <g
 648 |          transform="translate(-277.28687,507.09658)"
 649 |          id="g6351">
 650 |         <rect
 651 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 652 |            id="rect6353"
 653 |            width="235.65018"
 654 |            height="204.99538"
 655 |            x="299.27133"
 656 |            y="134.90536" />
 657 |         <text
 658 |            xml:space="preserve"
 659 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 660 |            x="531.3902"
 661 |            y="152.31015"
 662 |            id="text6355"><tspan
 663 |              x="531.3902"
 664 |              y="152.31015"
 665 |              id="tspan6357"
 666 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end">dashboard-1234.js</tspan></text>
 667 |       </g>
 668 |       <g
 669 |          id="g6373"
 670 |          transform="translate(-177.78685,703.00272)">
 671 |         <rect
 672 |            y="78.055717"
 673 |            x="214.43941"
 674 |            height="54.146515"
 675 |            width="211.57547"
 676 |            id="rect6375"
 677 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 678 |         <text
 679 |            id="text6377"
 680 |            y="99.079201"
 681 |            x="320.63135"
 682 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 683 |            xml:space="preserve"><tspan
 684 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 685 |              y="99.079201"
 686 |              x="320.63135"
 687 |              id="tspan6379">Dashboard Content</tspan><tspan
 688 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 689 |              id="tspan6381"
 690 |              y="117.8292"
 691 |              x="320.63135">(app/dashboard/page.js)</tspan></text>
 692 |       </g>
 693 |       <path
 694 |          style="fill:none;fill-rule:evenodd;stroke:#12009f;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker8287)"
 695 |          d="m 137.94782,748.10094 -0.14973,31.91878"
 696 |          id="path6393" />
 697 |       <g
 698 |          id="g7260"
 699 |          transform="translate(-46.97209,506.5915)">
 700 |         <rect
 701 |            y="134.90536"
 702 |            x="328.06067"
 703 |            height="204.99538"
 704 |            width="206.86082"
 705 |            id="rect7262"
 706 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 707 |         <text
 708 |            id="text7264"
 709 |            y="152.31015"
 710 |            x="531.3902"
 711 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 712 |            xml:space="preserve"><tspan
 713 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end"
 714 |              id="tspan7266"
 715 |              y="152.31015"
 716 |              x="531.3902">login-2345.js</tspan></text>
 717 |       </g>
 718 |       <g
 719 |          transform="translate(67.68022,702.49764)"
 720 |          id="g7268">
 721 |         <rect
 722 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 723 |            id="rect7270"
 724 |            width="173.18967"
 725 |            height="54.146515"
 726 |            x="233.63231"
 727 |            y="78.055717" />
 728 |         <text
 729 |            xml:space="preserve"
 730 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 731 |            x="320.63135"
 732 |            y="99.079201"
 733 |            id="text7272"><tspan
 734 |              x="320.63135"
 735 |              y="99.079201"
 736 |              id="tspan7276"
 737 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">Login Content</tspan><tspan
 738 |              x="320.63135"
 739 |              y="117.8292"
 740 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 741 |              id="tspan7344">(app/login/page.js)</tspan></text>
 742 |       </g>
 743 |       <path
 744 |          id="path7278"
 745 |          d="m 383.41489,747.59586 -0.14973,31.91878"
 746 |          style="fill:none;fill-rule:evenodd;stroke:#12009f;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker14090)" />
 747 |       <path
 748 |          id="path7290"
 749 |          d="m 315.20816,662.23798 7.2208,30.40354"
 750 |          style="fill:none;fill-rule:evenodd;stroke:#12009f;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker13912)" />
 751 |       <circle
 752 |          style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 753 |          id="circle7292"
 754 |          cx="314.19293"
 755 |          cy="662.62885"
 756 |          r="8.9075069" />
 757 |       <g
 758 |          transform="translate(180.31223,506.5915)"
 759 |          id="g7352">
 760 |         <rect
 761 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 762 |            id="rect7354"
 763 |            width="206.86082"
 764 |            height="204.99538"
 765 |            x="328.06067"
 766 |            y="134.90536" />
 767 |         <text
 768 |            xml:space="preserve"
 769 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 770 |            x="531.3902"
 771 |            y="152.31015"
 772 |            id="text7356"><tspan
 773 |              x="531.3902"
 774 |              y="152.31015"
 775 |              id="tspan7358"
 776 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end">admin-3456.js</tspan></text>
 777 |       </g>
 778 |       <path
 779 |          style="fill:none;fill-rule:evenodd;stroke:#12009f;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker6575)"
 780 |          d="m 542.49248,662.23798 7.2208,30.40354"
 781 |          id="path7382" />
 782 |       <circle
 783 |          r="8.9075069"
 784 |          cy="662.62885"
 785 |          cx="541.47723"
 786 |          id="circle7384"
 787 |          style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 788 |       <g
 789 |          id="g4271-4"
 790 |          transform="translate(182.0254,744.30717)">
 791 |         <rect
 792 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 793 |            id="rect4273-4"
 794 |            width="205.34563"
 795 |            height="119.63749"
 796 |            x="329.57593"
 797 |            y="134.90536" />
 798 |         <text
 799 |            xml:space="preserve"
 800 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 801 |            x="531.3902"
 802 |            y="152.31015"
 803 |            id="text4275-0"><tspan
 804 |              x="531.3902"
 805 |              y="152.31015"
 806 |              id="tspan4277-9"
 807 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end">6789.js</tspan></text>
 808 |       </g>
 809 |       <g
 810 |          transform="translate(-47.906125,744.30717)"
 811 |          id="g4263-0">
 812 |         <rect
 813 |            y="134.90536"
 814 |            x="329.57593"
 815 |            height="119.63749"
 816 |            width="205.34563"
 817 |            id="rect4265-5"
 818 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 819 |         <text
 820 |            id="text4267-7"
 821 |            y="152.31015"
 822 |            x="531.3902"
 823 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 824 |            xml:space="preserve"><tspan
 825 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end"
 826 |              id="tspan4269-2"
 827 |              y="152.31015"
 828 |              x="531.3902">5678.js</tspan></text>
 829 |       </g>
 830 |       <g
 831 |          id="g4255-5"
 832 |          transform="translate(-272.54324,744.30717)">
 833 |         <rect
 834 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 835 |            id="rect4257-2"
 836 |            width="247.26695"
 837 |            height="119.63749"
 838 |            x="287.6546"
 839 |            y="134.90536" />
 840 |         <text
 841 |            xml:space="preserve"
 842 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 843 |            x="531.3902"
 844 |            y="152.31015"
 845 |            id="text4259-8"><tspan
 846 |              x="531.3902"
 847 |              y="152.31015"
 848 |              id="tspan4261-1"
 849 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:end;writing-mode:lr-tb;text-anchor:end">4567.js</tspan></text>
 850 |       </g>
 851 |       <g
 852 |          transform="translate(62.200501,835.72598)"
 853 |          id="g4192-1">
 854 |         <rect
 855 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 856 |            id="rect4194-9"
 857 |            width="172.51566"
 858 |            height="54.482651"
 859 |            x="233.96931"
 860 |            y="77.88765" />
 861 |         <text
 862 |            xml:space="preserve"
 863 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 864 |            x="320.63135"
 865 |            y="99.079201"
 866 |            id="text4196-6"><tspan
 867 |              id="tspan4198-2"
 868 |              x="320.63135"
 869 |              y="99.079201"
 870 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">Login Content</tspan><tspan
 871 |              x="320.63135"
 872 |              y="117.8292"
 873 |              id="tspan4200-6"
 874 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">(app/login/page.js)</tspan></text>
 875 |       </g>
 876 |       <g
 877 |          transform="translate(-179.10413,835.72598)"
 878 |          id="g4182-0">
 879 |         <rect
 880 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 881 |            id="rect4184-5"
 882 |            width="211.57547"
 883 |            height="54.146515"
 884 |            x="214.43941"
 885 |            y="78.055717" />
 886 |         <text
 887 |            xml:space="preserve"
 888 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 889 |            x="320.63135"
 890 |            y="99.079201"
 891 |            id="text4186-6"><tspan
 892 |              id="tspan4188-6"
 893 |              x="320.63135"
 894 |              y="99.079201"
 895 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">Dashboard Content</tspan><tspan
 896 |              x="320.63135"
 897 |              y="117.8292"
 898 |              id="tspan4190-1"
 899 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">(app/dashboard/page.js)</tspan></text>
 900 |       </g>
 901 |       <g
 902 |          id="g4202-9"
 903 |          transform="translate(292.63711,835.72598)">
 904 |         <rect
 905 |            y="77.88765"
 906 |            x="233.96931"
 907 |            height="54.482651"
 908 |            width="172.51566"
 909 |            id="rect4204-6"
 910 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 911 |         <text
 912 |            id="text4206-5"
 913 |            y="99.079201"
 914 |            x="320.63135"
 915 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 916 |            xml:space="preserve"><tspan
 917 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 918 |              y="99.079201"
 919 |              x="320.63135"
 920 |              id="tspan4208-9">Admin Content</tspan><tspan
 921 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 922 |              id="tspan4210-2"
 923 |              y="117.8292"
 924 |              x="320.63135">(app/admin/page.js)</tspan></text>
 925 |       </g>
 926 |       <path
 927 |          id="path7765"
 928 |          d="m 608.47473,600.61867 0.14973,41.01015"
 929 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker7767)" />
 930 |       <path
 931 |          id="path8053"
 932 |          d="m 137.74364,600.61867 0.14973,41.01015"
 933 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker8055)" />
 934 |       <path
 935 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker7665)"
 936 |          d="m 382.20056,600.61867 0.14973,41.01015"
 937 |          id="path6411" />
 938 |       <g
 939 |          transform="translate(62.446685,469.72093)"
 940 |          id="g6425">
 941 |         <rect
 942 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
 943 |            id="rect6427"
 944 |            width="172.51566"
 945 |            height="54.482651"
 946 |            x="233.96931"
 947 |            y="77.88765" />
 948 |         <text
 949 |            xml:space="preserve"
 950 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 951 |            x="320.63135"
 952 |            y="99.079201"
 953 |            id="text6429"><tspan
 954 |              id="tspan6431"
 955 |              x="320.63135"
 956 |              y="99.079201"
 957 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">Login</tspan><tspan
 958 |              x="320.63135"
 959 |              y="117.8292"
 960 |              id="tspan6433"
 961 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">(login.html)</tspan></text>
 962 |       </g>
 963 |       <g
 964 |          id="g6435"
 965 |          transform="translate(-179.84777,469.72093)">
 966 |         <rect
 967 |            y="77.88765"
 968 |            x="233.96931"
 969 |            height="54.482651"
 970 |            width="172.51566"
 971 |            id="rect6437"
 972 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 973 |         <text
 974 |            id="text6439"
 975 |            y="99.079201"
 976 |            x="320.63135"
 977 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
 978 |            xml:space="preserve"><tspan
 979 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 980 |              y="99.079201"
 981 |              x="320.63135"
 982 |              id="tspan6441">Dashboard</tspan><tspan
 983 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
 984 |              id="tspan6443"
 985 |              y="117.8292"
 986 |              x="320.63135">(dashboard.html)</tspan></text>
 987 |       </g>
 988 |       <g
 989 |          id="g6415"
 990 |          transform="translate(286.74118,469.72093)">
 991 |         <rect
 992 |            y="77.88765"
 993 |            x="233.96931"
 994 |            height="54.482651"
 995 |            width="172.51566"
 996 |            id="rect6417"
 997 |            style="fill:#c1c1c1;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
 998 |         <text
 999 |            id="text6419"
1000 |            y="99.079201"
1001 |            x="320.63135"
1002 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
1003 |            xml:space="preserve"><tspan
1004 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
1005 |              y="99.079201"
1006 |              x="320.63135"
1007 |              id="tspan6421">Admin</tspan><tspan
1008 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
1009 |              id="tspan6423"
1010 |              y="117.8292"
1011 |              x="320.63135">(admin.html)</tspan></text>
1012 |       </g>
1013 |       <path
1014 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker9072)"
1015 |          d="m 228.20163,732.64407 46.39215,29.09138 -0.54247,96.62059 215.64885,-0.68212 44.93306,54.87628"
1016 |          id="path9070" />
1017 |       <path
1018 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker9596)"
1019 |          d="m 228.70671,743.25067 40.83632,24.04062 0.46767,100.6612 31.27729,43.58756"
1020 |          id="path9592" />
1021 |       <path
1022 |          id="path10018"
1023 |          d="m 527.9134,745.77606 -29.72464,25.55584 0.0374,85.50891 -42.89404,55.20432"
1024 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker10022)" />
1025 |       <path
1026 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker10374)"
1027 |          d="m 528.41848,733.14915 -34.7754,30.10153 0.0374,89.04445 -238.88236,0.32803 -42.91276,60.9372"
1028 |          id="path10020" />
1029 |       <path
1030 |          id="path11182"
1031 |          d="m 472.65855,732.139 29.72464,29.59645 0.97275,100.6612 42.89404,49.64848"
1032 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker11184)" />
1033 |       <path
1034 |          id="path12810"
1035 |          d="m 300.06565,744.26083 -35.28047,40.20306 -0.46768,77.93276 -34.81282,49.1434"
1036 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker12812)" />
1037 |       <path
1038 |          style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker14660)"
1039 |          d="m 604.34198,748.6332 0.27586,162.69764"
1040 |          id="path14658" />
1041 |       <g
1042 |          transform="translate(293.95439,616.53569)"
1043 |          id="g7372">
1044 |         <rect
1045 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3.23163366;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
1046 |            id="rect7374"
1047 |            width="172.51566"
1048 |            height="54.482651"
1049 |            x="233.96931"
1050 |            y="77.88765" />
1051 |         <text
1052 |            xml:space="preserve"
1053 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
1054 |            x="320.63135"
1055 |            y="99.079201"
1056 |            id="text7376"><tspan
1057 |              id="tspan7378"
1058 |              x="320.63135"
1059 |              y="99.079201"
1060 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">Admin Shell</tspan><tspan
1061 |              x="320.63135"
1062 |              y="117.8292"
1063 |              id="tspan7380"
1064 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">(app/admin.js)</tspan></text>
1065 |       </g>
1066 |       <g
1067 |          id="g7280"
1068 |          transform="translate(66.67007,616.53569)">
1069 |         <rect
1070 |            y="77.88765"
1071 |            x="233.96931"
1072 |            height="54.482651"
1073 |            width="172.51566"
1074 |            id="rect7282"
1075 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3.23163366;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
1076 |         <text
1077 |            id="text7284"
1078 |            y="99.079201"
1079 |            x="320.63135"
1080 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
1081 |            xml:space="preserve"><tspan
1082 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
1083 |              y="99.079201"
1084 |              x="320.63135"
1085 |              id="tspan7286">Login Shell</tspan><tspan
1086 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle"
1087 |              id="tspan7288"
1088 |              y="117.8292"
1089 |              x="320.63135">(app/login.js)</tspan></text>
1090 |       </g>
1091 |       <g
1092 |          transform="translate(-178.797,617.04077)"
1093 |          id="g6399">
1094 |         <rect
1095 |            style="fill:#c1ffc1;fill-opacity:1;stroke:#000000;stroke-width:3.23163366;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
1096 |            id="rect6401"
1097 |            width="172.51566"
1098 |            height="54.482651"
1099 |            x="233.96931"
1100 |            y="77.88765" />
1101 |         <text
1102 |            xml:space="preserve"
1103 |            style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
1104 |            x="320.63135"
1105 |            y="99.079201"
1106 |            id="text6403"><tspan
1107 |              id="tspan6405"
1108 |              x="320.63135"
1109 |              y="99.079201"
1110 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">Dashboard Shell</tspan><tspan
1111 |              x="320.63135"
1112 |              y="117.8292"
1113 |              id="tspan6407"
1114 |              style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:15px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr-tb;text-anchor:middle">(app/dashboard.js)</tspan></text>
1115 |       </g>
1116 |       <path
1117 |          style="fill:none;fill-rule:evenodd;stroke:#12009f;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker13716)"
1118 |          d="m 69.741092,662.74306 7.2208,30.40354"
1119 |          id="path6445" />
1120 |       <circle
1121 |          r="8.9075069"
1122 |          cy="663.13391"
1123 |          cx="68.725853"
1124 |          id="circle6447"
1125 |          style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:3;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
1126 |       <text
1127 |          xml:space="preserve"
1128 |          style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
1129 |          x="608.15717"
1130 |          y="785.61487"
1131 |          id="text7376-2"><tspan
1132 |            x="608.15717"
1133 |            y="785.61487"
1134 |            id="tspan7380-2"
1135 |            style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11.25px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;writing-mode:lr;text-anchor:middle">hybird</tspan><tspan
1136 |            id="tspan15140"
1137 |            x="608.15717"
1138 |            y="804.36487"
1139 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.25px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr;text-anchor:middle">loading content async</tspan><tspan
1140 |            id="tspan15142"
1141 |            x="608.15717"
1142 |            y="823.11487"
1143 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.25px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr;text-anchor:middle">to reduce total size</tspan><tspan
1144 |            id="tspan15144"
1145 |            x="608.15717"
1146 |            y="841.86487"
1147 |            style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.25px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:center;writing-mode:lr;text-anchor:middle">(assuming admin content is big)</tspan></text>
1148 |     </g>
1149 |     <text
1150 |        xml:space="preserve"
1151 |        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.25px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
1152 |        x="520.29999"
1153 |        y="472.75775"
1154 |        id="text7376-2-2"><tspan
1155 |          id="tspan15144-8"
1156 |          x="520.29999"
1157 |          y="472.75775"
1158 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.25px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start">load async (extra request to SW)</tspan></text>
1159 |     <path
1160 |        style="fill:none;fill-rule:evenodd;stroke:#9f0000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker15154-7)"
1161 |        d="m 474.47309,469.77004 41.01015,-0.14973"
1162 |        id="path15152" />
1163 |     <text
1164 |        id="text15819"
1165 |        y="488.47205"
1166 |        x="520.29999"
1167 |        style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.25px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
1168 |        xml:space="preserve"><tspan
1169 |          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:11.25px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start"
1170 |          y="488.47205"
1171 |          x="520.29999"
1172 |          id="tspan15821">load sync (in the same bundle)</tspan></text>
1173 |     <path
1174 |        id="path15823"
1175 |        d="m 474.47309,485.48433 41.01015,-0.14973"
1176 |        style="fill:none;fill-rule:evenodd;stroke:#12009f;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;marker-end:url(#marker15831)" />
1177 |   </g>
1178 | </svg>
1179 | 


--------------------------------------------------------------------------------