Install a NextJS Dashboard as a Microsoft Teams App

We bought a NextJS React Material UI based Dashboard Application (See Vuexy links attached below). We wanna run this Dashboard as a Microsoft Teams Application. Microsoft Teams has a developer toolkit which does the scaffolding for a Microsoft Teams App (DOCS: https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/teams-toolkit-fundamentals). Your Task is to run the bought Dashboard as a Teams App with SSO. When The App is rendered you have the Teams App Context which gives you the values if Teams is used in Dark or Lite Mode and you should pass this to the Dashboard where a Dark or Lite Mode is also implemented.

Here are links to the Dashboard Documentation:
Installation Guide: https://demos.pixinvent.com/vuexy-nextjs-admin-template/documentation/docs/guide/overview/installation
(we removed the complete Next Auth Part form the Dashboard because the SSO is handled by Microsoft Teams as Application Host)
Dashboard Preview:
https://preview.themeforest.net/item/vuexy-vuejs-html-laravel-admin-dashboard-template/full_screen_preview/23328599?_ga=2.266374221.214546779.1736800652-1852338415.1721896527
Teams Development Resources:
Toolkit Docs: https://github.com/OfficeDev/teams-toolkit/wiki/Teams-Toolkit-Visual-Studio-Code-v5-Guide
Toolkit Docs: https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/teams-toolkit-fundamentals
Teams App SSO: https://learn.microsoft.com/en-us/microsoftteams/platform/toolkit/add-single-sign-on?tabs=typescript%2F%3Ffrom%3Dteamstoolkit
Teams Dev Samples: https://github.com/OfficeDev/teams-toolkit-samples

Your Tasks:
- Create the Repository, and do the Teams Tab Scaffolding
- Bring in the provided complete developed Next.JS Dashboard into Teams App Platform
- Handle the Dark/Lite Mode so when you switch in Teams it should be switched also in the Dashboard

Dev Environment:
We provide you a Microsoft 365 Development User tin our Tenant and all the Dashboard Files.