feat(bamboo-hr-app): migrate and redesign BambooHR app

[nicomiguelino]

User description

Summary

• Rewrite bamboo-hr-app in plain HTML/CSS/TypeScript, removing Vue, Pinia, and the blueprint library dependency
• Redesign UI to match Figma spec (dark background, glassmorphism top bar, three-card layout for birthdays, anniversaries, and on-leave)
• Remove bamboo-hr-app-old, blueprint directory, blueprint-checks CI workflow, and legacy blueprint docs

---

PR Type

Enhancement, Tests, Documentation

---

Description

• Rewrite app in plain TypeScript

• Fetch BambooHR employee and leave data

• Add responsive cards, summaries, and avatars

• Add unit and screenshot coverage

---

Diagram Walkthrough

flowchart LR
  A["App bootstrap and settings"]
  B["BambooHR employee and leave fetches"]
  C["Render lists, summaries, and avatars"]
  D["Responsive BambooHR dashboard"]
  E["Unit and screenshot tests"]
  F["Embedded photo fixtures"]

  A -- "loads locale and timezone" --> B
  B -- "supplies employees and leaves" --> C
  C -- "updates dashboard cards" --> D
  F -- "populate mock responses" --> E
  E -- "verifies rendered output" --> D

Loading

File Walkthrough

	Relevant files
Tests	3 files photos.ts Add embedded headshot fixtures for screenshots                      +9/-0      render.test.ts Cover render helpers with DOM unit tests                                  +299/-0  screenshots.spec.ts Mock BambooHR responses for screenshot coverage                    +154/-0
Enhancement	5 files render.ts Extract reusable card, avatar, and summary rendering          +177/-0  main.ts Bootstrap app, fetch BambooHR, and refresh UI                        +170/-7  types.ts Add leave model and simplify employee type                              +9/-1      style.css Add glassmorphic responsive dashboard styling                        +336/-0  index.html Define static dashboard shell and card layout                        +113/-3
Configuration changes	3 files .ignore Ignore local dependency directory                                                +1/-0      edge-app-checks.yml Update CI checks for migrated edge app                                      +2/-20    tsconfig.json Adjust TypeScript config for vanilla app                                  +6/-12
Dependencies	1 files package.json Replace framework dependencies with app tooling                    +23/-53
Documentation	1 files README.md Refresh BambooHR app setup and usage docs                                +35/-66
Additional files	66 files blueprint-checks.yml +0/-40    legacy-edge-apps-library.md +0/-140  reusable-components.md +0/-341  extensions.json +0/-9      tsconfig.json +0/-4      vue.spec.ts +0/-61    eslint.config.ts +0/-34    playwright.config.ts +0/-14    1080x1920.webp [link]    1280x720.webp [link]    1920x1080.webp [link]    2160x3840.webp [link]    2160x4096.webp [link]    3840x2160.webp [link]    4096x2160.webp [link]    480x800.webp [link]    720x1280.webp [link]    800x480.webp [link]    App.vue +0/-148  main.scss +0/-335  AnniversariesSection.vue +0/-113  BirthdaysSection.vue +0/-91    OnLeaveSection.vue +0/-78    App.spec.ts +0/-57    constants.ts +0/-3      anniversaries.ts +0/-124  birthdays.ts +0/-121  hr-data.ts +0/-144  leaves.ts +0/-148  settings.ts +0/-106  test-setup.ts +0/-17    avatar.ts +0/-15    bg.webp [link]    tsconfig.app.json +0/-16    tsconfig.node.json +0/-19    tsconfig.vitest.json +0/-11    vite.config.ts +0/-50    vitest.config.ts +0/-15    .prettierrc.json +0/-6      eslint.config.ts +0/-34    package.json +0/-47    base.scss +0/-403  BrandLogoCard.vue +0/-14    InfoCard.vue +0/-21    CoordinatesIcon.vue +0/-23    HardwareIcon.vue +0/-23    NameIcon.vue +0/-19    VersionIcon.vue +0/-19    index.ts +0/-4      index.ts +0/-3      index.ts +0/-1      playwright.ts +0/-109  env.d.ts +0/-8      base-settings-store.ts +0/-170  index.ts +0/-4      metadata-store.ts +0/-37    index.ts +0/-2      lz-ts-mock.ts +0/-13    screenly-mock.ts +0/-20    types.ts +0/-25    index.ts +0/-2      locale.ts +0/-29    sentry.ts +0/-15    index.ts +0/-2      test-server.ts +0/-109  watch-mock-data.ts +0/-16

---

[github-actions]

PR Reviewer Guide 🔍

(Review updated until commit 546fd94)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 PR contains tests

🔒 Security concerns Sensitive credential exposure: src/main.ts now sends the BambooHR API key from client-side code in a Basic Auth header. Because this runs in the browser, anyone with access to the app's network traffic or browser devtools can recover the key, and the proxy endpoint also receives it. If this key grants broad BambooHR access, that is a significant secret-handling risk.

⚡ Recommended focus areas for review Credential exposure The BambooHR API key is used directly in browser-side fetch requests via the Authorization header. Any user who can inspect network traffic from the running app, or any intermediary that handles the CORS proxy request, can recover the key and reuse it against BambooHR. const response = await fetch( `${getBambooApiBase(subdomain)}/datasets/employee`, { method: 'POST', headers: { Authorization: `Basic ${btoa(apiKey + ':')}`, Accept: 'application/json', 'Content-Type': 'application/json', }, Date shift start and end are date-only values, but converting them with .tz(currentTimezone) treats them as instants in the browser's local timezone first. When the device timezone differs from the configured app timezone, leave ranges can shift by a day, causing employees to appear away too early or disappear too early. const today = dayjs().tz(currentTimezone).startOf('day') return data.filter((item) => { const start = dayjs(item.start).tz(currentTimezone).startOf('day') const end = dayjs(item.end).tz(currentTimezone).startOf('day') return today.isSameOrAfter(start) && today.isSameOrBefore(end) Truncated count The summary count is derived after slicing to MAX_ITEMS, so it reports only the number of rendered rows instead of the true number of matching employees. If more than five birthdays or anniversaries fall in the window, the card will underreport how many people actually match. const upcoming = employees .filter((e) => { if (!e[dateField]) return false const d = dayjs(e[dateField]).year(today.year()) return d.isSame(today, 'day') || d.isSame(tomorrow, 'day') }) .sort((a, b) => { const aD = dayjs(a[dateField]).year(today.year()) const bD = dayjs(b[dateField]).year(today.year()) const rank = (d: dayjs.Dayjs) => (d.isSame(today, 'day') ? 0 : 1) const diff = rank(aD) - rank(bD) if (diff !== 0) return diff const ln = a.lastName.localeCompare(b.lastName) return ln !== 0 ? ln : a.firstName.localeCompare(b.firstName) }) .slice(0, MAX_ITEMS)

[github-actions]

PR Code Suggestions ✨

Latest suggestions up to 546fd94
Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Parse leave dates in-zone item.start and item.end are date-only strings, so converting them with .tz(currentTimezone) shifts them from the browser's local zone and can move single-day leave entries to the previous day. Parse those strings directly in currentTimezone so leave ranges are compared against the intended calendar day. edge-apps/bamboo-hr-app/src/main.ts [83-89] const data: Leave[] = await response.json() const today = dayjs().tz(currentTimezone).startOf('day') return data.filter((item) => { - const start = dayjs(item.start).tz(currentTimezone).startOf('day') - const end = dayjs(item.end).tz(currentTimezone).startOf('day') + const start = dayjs.tz(item.start, currentTimezone).startOf('day') + const end = dayjs.tz(item.end, currentTimezone).startOf('day') return today.isSameOrAfter(start) && today.isSameOrBefore(end) }) Suggestion importance[1-10]: 8 __ Why: This is a valid timezone bug: dayjs(item.start).tz(currentTimezone) can shift date-only leave values into the previous or next day before comparison. Parsing start and end directly in currentTimezone makes fetchLeaves() return the correct employees for single-day and boundary-day leave entries.	Medium
	Ensure full-height scaling container auto-scaler is a custom element, so it defaults to inline sizing and does not establish a full-height container for #app. Give html, body, and auto-scaler explicit block sizing so the layout and scaling logic do not collapse or render inconsistently on signage screens. edge-apps/bamboo-hr-app/src/css/style.css [21-52] +html, +body { + width: 100%; + height: 100%; +} + body { margin: 0; padding: 0; overflow: hidden; background: url('/static/images/bg.webp') no-repeat center center; background-size: cover; background-color: var(--color-bg); color: var(--color-white); font-family: Inter, system-ui, sans-serif; } auto-scaler { + display: block; + width: 100%; + height: 100%; position: relative; z-index: var(--z-index-content); } #app { width: 100%; height: 100%; display: flex; flex-direction: column; } Suggestion importance[1-10]: 8 __ Why: The new auto-scaler element is styled without display or explicit sizing, so #app { height: 100%; } can fail to fill the viewport. Adding height and block sizing to html, body, and auto-scaler is a concrete functional fix for layout stability on the new full-screen UI.	Medium
	Make displayed dates timezone-aware The date label and heading are formatted from the browser's local timezone, while the clock uses currentTimezone. On players running in a different zone, this can show the correct time next to the wrong calendar date, so format both dates with an explicit timeZone. edge-apps/bamboo-hr-app/src/main.ts [123-138] -dateEl.textContent = formatLocalizedDate(now, currentLocale, { +dateEl.textContent = new Intl.DateTimeFormat(currentLocale, { weekday: 'short', day: 'numeric', month: 'short', -}) + timeZone: currentTimezone, +}).format(now) ... -heading.textContent = formatLocalizedDate(new Date(), currentLocale, { +heading.textContent = new Intl.DateTimeFormat(currentLocale, { weekday: 'long', day: '2-digit', month: 'long', year: 'numeric', -}) + timeZone: currentTimezone, +}).format(new Date()) Suggestion importance[1-10]: 7 __ Why: The suggestion is contextually sound because the clock uses currentTimezone while the date strings in updateClock() and updateDateHeading() do not. That can display a mismatched date on devices outside the configured zone, though the proposed change is more of a presentation fix than a functional bug.	Medium
General	Count all matching employees Slicing before computing the summary makes the card report at most MAX_ITEMS, even when more employees actually match. Keep the full filtered list for counts and only slice the rows/avatar previews so the summary stays accurate. edge-apps/bamboo-hr-app/src/render.ts [95-140] -const upcoming = employees +const matches = employees .filter((e) => { if (!e[dateField]) return false const d = dayjs(e[dateField]).year(today.year()) return d.isSame(today, 'day') || d.isSame(tomorrow, 'day') }) .sort((a, b) => { const aD = dayjs(a[dateField]).year(today.year()) const bD = dayjs(b[dateField]).year(today.year()) const rank = (d: dayjs.Dayjs) => (d.isSame(today, 'day') ? 0 : 1) const diff = rank(aD) - rank(bD) if (diff !== 0) return diff const ln = a.lastName.localeCompare(b.lastName) return ln !== 0 ? ln : a.firstName.localeCompare(b.firstName) }) - .slice(0, MAX_ITEMS) + +const upcoming = matches.slice(0, MAX_ITEMS) ... updateCardSummary( summaryId, - upcoming.length, - countLabel(upcoming.length), + matches.length, + countLabel(matches.length), emptyMessage, upcoming.map((e) => ({ photoUrl: e.employeePhoto, firstName: e.firstName, lastName: e.lastName, })), ) Suggestion importance[1-10]: 6 __ Why: This correctly identifies that renderEmployeeDateList() truncates upcoming before passing its size into updateCardSummary(), so the summary can undercount matches. Keeping a full matches list for counts while slicing only displayed rows would improve correctness of the summary text.	Low

---

Previous suggestions

Suggestions up to commit ac76a84

Category	Suggestion	Impact
Possible issue	Handle year-boundary recurring dates Replacing the year blindly with today.year() drops Jan 1 events when the current day is Dec 31, because those dates stay in the past year window. Normalize each recurring event into the next valid occurrence in currentTimezone before filtering and sorting. edge-apps/bamboo-hr-app/src/main.ts [100-118] const today = dayjs().tz(currentTimezone).startOf('day') const tomorrow = today.add(1, 'day') + +const eventDateForThisWindow = (value: string): dayjs.Dayjs => { + let date = dayjs.tz(value, currentTimezone).year(today.year()).startOf('day') + if (date.isBefore(today)) { + date = date.add(1, 'year') + } + return date +} const upcoming = employees .filter((e) => { if (!e[dateField]) return false - const d = dayjs(e[dateField]).year(today.year()) - return d.isSame(today, 'day') || d.isSame(tomorrow, 'day') + const date = eventDateForThisWindow(e[dateField]) + return date.isSame(today, 'day') || date.isSame(tomorrow, 'day') }) .sort((a, b) => { - const aD = dayjs(a[dateField]).year(today.year()) - const bD = dayjs(b[dateField]).year(today.year()) - const rank = (d: dayjs.Dayjs) => (d.isSame(today, 'day') ? 0 : 1) - const diff = rank(aD) - rank(bD) + const aDate = eventDateForThisWindow(a[dateField]) + const bDate = eventDateForThisWindow(b[dateField]) + const diff = aDate.valueOf() - bDate.valueOf() if (diff !== 0) return diff const ln = a.lastName.localeCompare(b.lastName) return ln !== 0 ? ln : a.firstName.localeCompare(b.firstName) }) .slice(0, MAX_ITEMS) Suggestion importance[1-10]: 8 __ Why: This is a real correctness issue in renderEmployeeDateList: forcing recurring dates to today.year() causes Jan 1 events to be excluded when today is Dec 31. The suggested normalization to the next occurrence fixes filtering and sorting for birthdays and anniversaries around the year boundary.	Medium
	Apply timezone to date display The date next to the clock is formatted without applying currentTimezone, so it can show a different day than the time around midnight or when override_timezone is set. Format the date with an explicit timeZone so both parts of the clock stay consistent. edge-apps/bamboo-hr-app/src/main.ts [246-250] -dateEl.textContent = formatLocalizedDate(now, currentLocale, { +dateEl.textContent = new Intl.DateTimeFormat(currentLocale, { + timeZone: currentTimezone, weekday: 'short', day: 'numeric', month: 'short', -}) +}).format(now) Suggestion importance[1-10]: 7 __ Why: This correctly identifies that formatLocalizedDate(now, currentLocale, ...) does not receive currentTimezone, so the date can drift from the displayed time near day boundaries or when override_timezone is used. The proposed Intl.DateTimeFormat change is aligned with the issue and improves display correctness.	Medium
	Keep polling after failures If the first refreshData call fails, the interval is never created, so a temporary BambooHR outage leaves the app permanently stale until reload. Wrap refreshes in a retry-safe function and schedule the interval regardless of whether the first request succeeds. edge-apps/bamboo-hr-app/src/main.ts [294-295] -await refreshData(apiKey, subdomain) -setInterval(() => refreshData(apiKey, subdomain), REFRESH_INTERVAL) +const runRefresh = async (): Promise<void> => { + try { + await refreshData(apiKey, subdomain) + } catch (error) { + console.error('Failed to refresh BambooHR data', error) + } +} +await runRefresh() +setInterval(() => { + void runRefresh() +}, REFRESH_INTERVAL) + Suggestion importance[1-10]: 7 __ Why: This is a valid resilience improvement because a rejected initial refreshData prevents setInterval from ever being registered, leaving the app stale until reload. Wrapping refreshData in a safe runner preserves periodic updates even during transient BambooHR failures.	Medium

[github-actions]

Persistent review updated to latest commit 546fd94

[Copilot]

Pull request overview

Migrates the bamboo-hr-app from a Vue/Pinia + in-repo blueprint dependency to a vanilla HTML/CSS/TypeScript implementation aligned with the shared @screenly/edge-apps tooling, and removes legacy blueprint code/docs/workflows.

Changes:

• Replaced the BambooHR app UI + data flow with static HTML + vanilla TS render/update logic.
• Adopted shared Edge Apps tooling (@screenly/edge-apps, edge-apps-scripts) and new TS config.
• Removed the legacy blueprint library, its CI workflow, and related documentation; added Playwright-driven screenshot generation.

Reviewed changes

Copilot reviewed 68 out of 92 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
.github/workflows/blueprint-checks.yml	Removes legacy blueprint-specific CI workflow.
.github/workflows/edge-app-checks.yml	Simplifies changed-app detection (no special-case for blueprint).
docs/legacy-edge-apps-library.md	Removes deprecated blueprint library documentation.
docs/reusable-components.md	Removes deprecated blueprint Vue component documentation.
edge-apps/bamboo-hr-app/.gitignore	Adds app-local ignores (dist, logs, generated screenshots).
edge-apps/bamboo-hr-app/.ignore	Ignores local node_modules/ for Screenly CLI packaging.
edge-apps/bamboo-hr-app/.vscode/extensions.json	Removes Vue-oriented editor recommendations.
edge-apps/bamboo-hr-app/README.md	Updates setup/dev/build/deploy/testing docs for the new stack.
edge-apps/bamboo-hr-app/e2e/screenshots.spec.ts	Adds Playwright script to generate screenshots with mocked APIs.
edge-apps/bamboo-hr-app/e2e/tsconfig.json	Removes legacy e2e TS config.
edge-apps/bamboo-hr-app/e2e/vue.spec.ts	Removes legacy Vue e2e test.
edge-apps/bamboo-hr-app/eslint.config.ts	Removes app-local Vue ESLint config in favor of shared tooling.
edge-apps/bamboo-hr-app/index.html	Replaces Vue mountpoint with static markup (auto-scaler/top bar/cards).
edge-apps/bamboo-hr-app/package.json	Switches to shared scripts/tooling and updates dev dependencies.
edge-apps/bamboo-hr-app/playwright.config.ts	Removes legacy Playwright config (likely replaced by shared tooling).
edge-apps/bamboo-hr-app/screenshots/480x800.webp	Adds updated screenshot artifact for portrait resolution.
edge-apps/bamboo-hr-app/screenshots/800x480.webp	Adds updated screenshot artifact for landscape resolution.
edge-apps/bamboo-hr-app/src/App.vue	Removes Vue root component.
edge-apps/bamboo-hr-app/src/assets/main.scss	Removes legacy SCSS styling.
edge-apps/bamboo-hr-app/src/components/AnniversariesSection.vue	Removes Vue anniversaries section component.
edge-apps/bamboo-hr-app/src/components/BirthdaysSection.vue	Removes Vue birthdays section component.
edge-apps/bamboo-hr-app/src/components/OnLeaveSection.vue	Removes Vue on-leave section component.
edge-apps/bamboo-hr-app/src/components/tests/App.spec.ts	Removes Vue component unit tests.
edge-apps/bamboo-hr-app/src/constants.ts	Removes legacy constants file (logic moved into render module).
edge-apps/bamboo-hr-app/src/css/style.css	Adds new glassmorphism/dark UI styling and responsive behavior.
edge-apps/bamboo-hr-app/src/main.ts	Implements vanilla TS app bootstrap, data fetching, and rendering.
edge-apps/bamboo-hr-app/src/render.test.ts	Adds Bun+JSDOM unit tests for render helpers.
edge-apps/bamboo-hr-app/src/render.ts	Adds DOM rendering utilities for birthdays/anniversaries/on-leave.
edge-apps/bamboo-hr-app/src/stores/anniversaries.ts	Removes Pinia anniversaries store.
edge-apps/bamboo-hr-app/src/stores/birthdays.ts	Removes Pinia birthdays store.
edge-apps/bamboo-hr-app/src/stores/hr-data.ts	Removes Pinia HR aggregation store (refresh loop migrated).
edge-apps/bamboo-hr-app/src/stores/leaves.ts	Removes Pinia leaves store.
edge-apps/bamboo-hr-app/src/stores/settings.ts	Removes Pinia settings store (uses shared settings helpers now).
edge-apps/bamboo-hr-app/src/test-setup.ts	Removes Vitest global setup (migrated away from Vitest).
edge-apps/bamboo-hr-app/src/types.ts	Updates Employee type and adds Leave type for new data flow.
edge-apps/bamboo-hr-app/src/utils/avatar.ts	Removes legacy avatar utility (render module now handles initials/avatars).
edge-apps/bamboo-hr-app/static/images/Screenly.svg	Removes legacy static Screenly logo asset.
edge-apps/bamboo-hr-app/tsconfig.app.json	Removes Vue-oriented TS config.
edge-apps/bamboo-hr-app/tsconfig.json	Switches to shared @screenly/edge-apps tsconfig base.
edge-apps/bamboo-hr-app/tsconfig.node.json	Removes node-specific TS config from legacy Vite/Vitest setup.
edge-apps/bamboo-hr-app/tsconfig.vitest.json	Removes Vitest TS config.
edge-apps/bamboo-hr-app/vite.config.ts	Removes Vue/Vite config previously relying on blueprint plugins.
edge-apps/bamboo-hr-app/vitest.config.ts	Removes Vitest config (tests now run via Bun).
edge-apps/blueprint/.prettierrc.json	Removes legacy blueprint formatting config.
edge-apps/blueprint/assets/images/screenly.svg	Removes legacy blueprint asset.
edge-apps/blueprint/eslint.config.ts	Removes legacy blueprint ESLint config.
edge-apps/blueprint/package.json	Removes blueprint package manifest (blueprint library removed).
edge-apps/blueprint/scss/base.scss	Removes legacy shared SCSS base.
edge-apps/blueprint/ts/components/BrandLogoCard.vue	Removes legacy blueprint Vue component.
edge-apps/blueprint/ts/components/InfoCard.vue	Removes legacy blueprint Vue component.
edge-apps/blueprint/ts/components/icons/CoordinatesIcon.vue	Removes legacy blueprint icon component.
edge-apps/blueprint/ts/components/icons/HardwareIcon.vue	Removes legacy blueprint icon component.
edge-apps/blueprint/ts/components/icons/NameIcon.vue	Removes legacy blueprint icon component.
edge-apps/blueprint/ts/components/icons/VersionIcon.vue	Removes legacy blueprint icon component.
edge-apps/blueprint/ts/components/icons/index.ts	Removes legacy blueprint icons barrel export.
edge-apps/blueprint/ts/components/index.ts	Removes legacy blueprint components barrel export.
edge-apps/blueprint/ts/configs/index.ts	Removes legacy blueprint configs export.
edge-apps/blueprint/ts/configs/playwright.ts	Removes legacy blueprint Playwright config helper.
edge-apps/blueprint/ts/env.d.ts	Removes blueprint screenly global typing.
edge-apps/blueprint/ts/stores/base-settings-store.ts	Removes legacy blueprint store setup (Vue/Pinia).
edge-apps/blueprint/ts/stores/index.ts	Removes legacy blueprint stores barrel export.
edge-apps/blueprint/ts/stores/metadata-store.ts	Removes legacy blueprint metadata store (Vue/Pinia).
edge-apps/blueprint/ts/test/index.ts	Removes legacy blueprint test helpers barrel export.
edge-apps/blueprint/ts/test/lz-ts-mock.ts	Removes legacy blueprint lz-ts mock.
edge-apps/blueprint/ts/test/screenly-mock.ts	Removes legacy blueprint screenly mock.
edge-apps/blueprint/ts/types.ts	Removes legacy blueprint Screenly type definitions.
edge-apps/blueprint/ts/utils/index.ts	Removes legacy blueprint utils barrel export.
edge-apps/blueprint/ts/utils/locale.ts	Removes legacy blueprint locale helper.
edge-apps/blueprint/ts/utils/sentry.ts	Removes legacy blueprint Sentry helper.
edge-apps/blueprint/ts/vite-plugins/index.ts	Removes legacy blueprint Vite plugin exports.
edge-apps/blueprint/ts/vite-plugins/test-server.ts	Removes legacy blueprint test-server Vite plugin.
edge-apps/blueprint/ts/vite-plugins/watch-mock-data.ts	Removes legacy blueprint mock-data watch Vite plugin.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.