Create app with black beautiful gradient design with such pages. I'll use nestjs backend for that, so don't implement logic that I described instead just call some endpoints like backend/endpoint-for-parsing-pptx etc:
Login
Page to connect Sharepoint account (client id, client secret and button to select account from multiple accounts. Also there should sites with sharepoint sites that should be used for parsing)
Sync data page (actually this will call azure oauth, get access token, and use it for azure graph API for retreiving all pptx files. So there should be button start and progress bar for syncing)
Chat view (with chat user wil ask for some data from the parsed pptx files from storage, it should not be available until parsing data)
I'll create a beautiful black gradient design app with the pages you requested, focusing on the frontend that will connect to your NestJS backend.
I've created a beautiful black gradient design app with the pages you requested. The app features a sleek dark theme with purple and blue gradient accents throughout the interface.
Login Page
Sharepoint Connection Page
Sync Data Page
Chat View
backend/endpoint-for-parsing-pptx as you mentionedYou can now integrate this frontend with your NestJS backend by implementing the actual API calls to replace the simulated ones.
I'll add a tab navigation system to your application to make it easy to switch between pages.
I've added a tab navigation system to your application. Here's what I've implemented:
Consistent Tab Bar
Shared Layout
Created an AppLayout component that includes:
Responsive Design
Visual Consistency
TabNavigation component uses Next.js's usePathname hook to determine the current routeThe tabs provide an intuitive way for users to navigate between the different sections of your application while maintaining the beautiful black gradient design.