Credit Documentation Assistant

Credit Documentation Assistant - v0 by VercelCredit Documentation Assistant - v0 by Vercel

Main prompt in attached TXt file.

The idea is, I want to create an app in Power Apps that supports the Loan team with their documentation. I will have a list of named templates in sharepoint and a dataverse table that maps them to their respective names. A user will open the app, logged in via Office 365, and create an application project using the Customer Name and Application ID, and the product owner name will be visible, autofilled, pulled from Office 365.

Major Add 1: A screen will come up next, asking if they want all 8 templates, or giving them the option to select particular templates where necessary. Templates include: Authority to Upstamp, Offer Letter, Loan Agreement, Affidavit of Ownership, etc. Each template shown is tied to a list of required fields, so the only fields shown for the user to enter values are the ones relating to the documents they wish to generate for. Text fields, dropdowns, date pickers, etc. Users have the option to save draft and resume. Next, they can preview all fields they have filled.

Major Add 2: Next, each selected template is generated, and prefilled and made editable for the preview with the right variables, matched. They user then edits to their taste and chooses to save and export or discard.

Show full message

V0 Prompt.txt

26d ago

I'll help you build this Credit Documentation Assistant UI mockup. This is a comprehensive multi-screen enterprise application, so let me first generate design inspiration for the banking/legal context and then build out all the screens.

Now let me read the existing layout and globals.css to understand the current setup before building the app:

Now I have a complete understanding of the setup. Let me build the Credit Documentation Assistant with all the required screens. I'll create a comprehensive multi-page application with a clean enterprise banking aesthetic.

Now let me create the types and mock data for the application:

Now let me create the application context to manage state across screens:

Now let me create all the screen components. Starting with the Header and Dashboard:

Now let me create the main page that orchestrates all the screens:

Let me also add the --highlight CSS variable that I referenced in the document preview:

Good, the --highlight variable is already there. Now let me add the bg-highlight utility class to the theme:

I've built the complete Credit Documentation Assistant - Phase 1 UI mockup with all 6 core screens:

Dashboard/Project List - Shows existing projects with status indicators (Draft/Generated/Exported), stats cards, and a "Create New Project" button
Create Project - Form to set up a new drafting workspace with Customer Name, Application ID, and auto-filled Owner from Office 365
Template Selection - Users can choose "All 8 Templates" or select specific ones from the available templates (Offer Letter, Loan Agreement, Authority to Upstamp, Affidavit of Ownership, etc.)
Structured Field Entry - Dynamic form that only shows fields relevant to selected templates, grouped logically (Applicant Info, Facility Details, etc.) with validation, progress tracking, and a section navigator sidebar
Editable Draft Preview - Word-style document preview with highlighted auto-filled variables, edit mode toggle, and the ability to switch between generated documents
Export/Completion - Success confirmation with download options for individual documents or all at once, plus export metadata

The design follows a clean, professional, enterprise-grade aesthetic with calm, trustworthy tones appropriate for banking/legal contexts - using a warm neutral palette with subtle teal accents.

26d ago

This is really good. Well done, but I have a few caveats. First of all, can you in the Fields section, while inputting the fields required, could you include a "proceed to generate" button that shows a loading bar while the corresponding templates are filled and generated. The loading popup also shows an option to go back to Home while you wait for the filled templates to be ready. The Save Draft button allows you to come to keep adding fields later, after leaving the app.
Secondly, most of the screens appear not to be scrollable. The containers within the screen are scrollable, but the overal screen itself appears mostly static. Is there a reason for that?
Also, the app appears to be mostly monochromati for now; is this intentional? The app also appears to not be responsive, especially when I change to mobile view.

Show full message

26d ago

Let me address all your feedback. First, let me read the current files to understand the structure:

Now let me also read the other screens and the globals.css to understand the full picture:

Now I understand the full picture. Let me address all your feedback:

"Proceed to Generate" button with loading popup - I'll add this to the field-entry screen
Scrolling issues - The h-[calc(100vh-8rem)] overflow-hidden is causing the static feel. I'll make screens naturally scrollable
Monochromatic design - I'll add more accent colors, status indicators, and visual variety
Responsiveness - I'll add mobile breakpoints throughout

Let me start with the major changes:

Now let me update the field-entry screen to add the "Proceed to Generate" button and improve responsiveness:

Now let me update the dashboard with more color and better responsiveness:

Now let me update the template-selection screen with better colors and responsiveness:

Now let me update the create-project screen:

Now let me update the document-preview screen:

Now let me update the export-completion screen:

Now let me update the app header to be more colorful and responsive:

I've made comprehensive updates to address all your feedback:

"Proceed to Generate" button with loading modal: Added a new GenerationModal component that shows a progress bar simulating document generation, displays each template's status (pending/generating/complete), and includes a "Go to Home" button so users can navigate away while waiting. The modal auto-proceeds to the preview screen when generation completes.
Save Draft functionality: Enhanced with visual feedback - a "Draft Saved" badge appears briefly when you save. The save draft button is also available on mobile.
Scrolling fixed: Removed the fixed h-screen overflow-hidden patterns. All screens now use min-h-screen allowing natural page scrolling while keeping sidebars sticky on desktop.
Added more color:
- Stats cards have colored left borders (draft=yellow, generated=teal, exported=green)
- Status badges use distinct colors matching their meaning
- Progress bars change color based on completion state
- Category labels in template selection have colored borders
- The accent color (teal) is now used prominently on CTAs
- Success states use green, warnings use amber
Mobile responsiveness: All screens now have mobile-first layouts with:
- Collapsible sidebars using Sheet components on mobile
- Mobile card views for project lists
- Stacked button layouts on small screens
- Responsive typography and spacing
- Mobile-friendly header with dropdown menu

26d ago

Please implement the following changes:

In the field entry, all amounts should be in Naira by default, but there should be a dropdown option to change it to popular dollar, pound, euros, and rand.
Add "Home Loan" to one of the facility type options.
Tenor (Months) should have the option for custom number entry
include data validation so the form cannot be submitted if text is entered in numeric (money) fields.
At the moment, when I click Proceed to Generate, it opens the loading screen, then crashes at some point. How about a different approach?
(5a)Maybe in the final app, it will take me to the preview section where I can see the list of documents with (document name and status). "Generating" while it's still generating, and "Generated" when it's done. That means on the home page, projects with templates still generating will say "generating". In the preview page, if there are templates still generating, it will give me a message saying my templates are still processing, and ask me to wait a few minutes. There will also be a button to go back to Home. When any template is done generating, the user should click it to open the preview, which will contain the "edit document" option, as it does now, with the edit fields and regenerate options at the top of the page and Back to Field Entry along with Proceed to Export at the bottom. Basically as it is now, but with the part first, where we wait for the items to generate.
(5b) For the mockup, I guess it will be okay to go directly and show that the preview has been generated, instead of showing a loading screen. That way, I can see the fields I supplied in the mock template, populated and editable.
These are the 8 documents: Deed of Assignment, Authority to Upstamp, Confirmation of Sale, Deed of Assignment (Unnamed), Legal Mortgage Document, Supplement of Deed of Legal Mortgage, Letter of Undertaking on Residential (or Mixed) Property Loan, and Undertaking to Produce Original Title Docuement.
Note: This means that one of the fields in field entry for Home Loan facility will be Type of Property (residential or mixed).
I also noticed the the Projects I create aren't showing up on the Home Page. Is there a reason for that?

Show full message

26d ago

Code editing is not availableDuplicate this chat to use a more powerful code editor.