Writing Portfolio Dashboard

VERSION

@@ -1 +1 @@
-0.1.0+2025.08.15T13.29.30.819Z.f61cb8b1.master
+0.1.0+2026.01.05T18.09.47.3NZ.b995bb5.dami.portfolio

modules/portfolio_diff/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

modules/portfolio_diff/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

modules/portfolio_diff/build_and_add_to_module.sh

@@ -0,0 +1,5 @@
+rm -rf out/
+npm run build
+rm -rf ../wo_portfolio_diff/wo_portfolio_diff/portfolio_diff/
+mkdir ../wo_portfolio_diff/wo_portfolio_diff/portfolio_diff/
+cp -r out/ ../wo_portfolio_diff/wo_portfolio_diff/portfolio_diff/

modules/portfolio_diff/eslint.config.mjs

@@ -0,0 +1,14 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [...compat.extends("next/core-web-vitals")];
+
+export default eslintConfig;

modules/portfolio_diff/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

modules/portfolio_diff/lo_event.sh

@@ -0,0 +1,14 @@
+# `lo_event` is the Learning Observer event library (and also `lo_assess` within it is the Learning Observer activity library, which should be factored out eventually).
+
+# * It's a library, and there's no practical stand-alone way to do more extensive development without some use-cases. This is a good set of use cases.
+# * As we develop those, we often make changes to `lo_event` and `lo_assess`. Quite a lot, actually.
+
+# This script packages `lo_event` into a node package, wipes the `next.js` cache (which often contains relics before changes), and installs it.
+
+# Without this, development of `lo_event` is painful. Even with this, in an ideal case, we would rerun this whenever there were changes to `lo_event` automatically with some kind of watch daemon.
+rm -Rf .next/cache/
+pushd ../lo_event/
+npm run prebuild
+npm pack
+popd
+npm install ../lo_event/lo_event-0.0.3.tgz  --no-save

modules/portfolio_diff/next.config.mjs

@@ -0,0 +1,21 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  basePath: "/_next/wo_portfolio_diff/portfolio_diff",
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+  transpilePackages: ["lo_event", "lo_dash_react_components"],
+  webpack: (
+    config,
+    { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
+  ) => {
+    config.resolve.fallback = {
+      ...config.resolve.fallback,
+      fs: false, // tells Webpack to ignore fs in client bundle
+    };
+    return config;
+  },
+  output: "export",
+};
+
+export default nextConfig;

modules/portfolio_diff/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "portfolio_diff",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "babel-loader": "^10.0.0",
+    "echarts": "^6.0.0",
+    "echarts-for-react": "^3.0.5",
+    "framer-motion": "^12.23.6",
+    "lo_dash_react_components": "file:../lo_dash_react_components",
+    "lo_event": "file:../lo_event",
+    "lucide-react": "^0.525.0",
+    "next": "15.3.5",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-redux": "^9.2.0",
+    "recharts": "^3.1.2",
+    "redux": "^5.0.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "eslint": "^9",
+    "eslint-config-next": "15.3.5",
+    "tailwindcss": "^4"
+  }
+}

modules/portfolio_diff/postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

modules/portfolio_diff/src/app/components/Breadcrumb.js

@@ -0,0 +1,70 @@
+"use client";
+
+import Link from "next/link";
+import { Home } from "lucide-react";
+import PropTypes from "prop-types";
+
+export default function Breadcrumb({
+  items = [],
+  homeHref = "/",
+  homeLabel = "Dashboard",
+  className = "",
+}) {
+  const wrapCls = `mb-4 ${className}`.trim();
+
+  return (
+    <nav className={wrapCls} aria-label="Breadcrumb">
+      <ol className="flex items-center text-sm text-gray-600">
+        {/* Home */}
+        <li className="flex items-center">
+          <Link
+            href={homeHref}
+            className="flex items-center gap-1 text-gray-900 hover:text-blue-600"
+          >
+            <Home className="h-4 w-4" />
+            {homeLabel}
+          </Link>
+        </li>
+
+        {/* Trail */}
+        {items.map((item, idx) => {
+          const isLast = idx === items.length - 1;
+          return (
+            <li key={`${item.label}-${idx}`} className="flex items-center">
+              <span className="mx-2 text-gray-400">/</span>
+              {item.href && !isLast ? (
+                <Link
+                  href={item.href}
+                  className="hover:text-gray-900 max-w-[200px] truncate"
+                >
+                  {item.label}
+                </Link>
+              ) : (
+                <span
+                  className={`max-w-[240px] truncate ${
+                    isLast ? "text-gray-900 font-medium" : "text-gray-700"
+                  }`}
+                  {...(isLast ? { "aria-current": "page" } : {})}
+                >
+                  {item.label}
+                </span>
+              )}
+            </li>
+          );
+        })}
+      </ol>
+    </nav>
+  );
+}
+
+Breadcrumb.propTypes = {
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string,
+    })
+  ),
+  homeHref: PropTypes.string,
+  homeLabel: PropTypes.string,
+  className: PropTypes.string,
+};