Monday, June 1, 2026

Why the Future of Document Management Is Not Another ECM

For more than two decades, Enterprise Content Management (ECM) systems have been the foundation of corporate document management.

They have proven their value by providing secure storage, version control, workflows, permissions, audit trails, records management and compliance capabilities. Platforms such as SharePoint, Oracle WebCenter Content (WCC), OpenText, Alfresco and many others continue to manage millions of business-critical documents every day.

The problem is not that these systems have failed.

The problem is that the expectations of users have changed.

The New Challenge: Knowledge Discovery

Traditionally, document management was focused on storing and retrieving documents.

Users knew what they were looking for:

  • Find a document.

  • Locate the latest version.

  • Check who approved it.

  • Review its history.

Artificial Intelligence introduces a completely different expectation.

Users now want answers rather than documents.

They want to ask questions such as:

  • Which systems are impacted by this change?

  • What requirements are affected by this decision?

  • Which documents contain conflicting information?

  • What risks are associated with this component?

  • What knowledge already exists about this topic?

Answering these questions requires much more than document storage and keyword search.

It requires understanding relationships, context, dependencies and knowledge hidden inside thousands of documents.

This is something that traditional ECM platforms were never designed to do.

Why Simply Adding AI Is Not Enough

Many current initiatives attempt to connect existing ECM repositories to chatbots or generic AI assistants.

While this approach can produce impressive demonstrations, it often struggles in real-world environments.

The reason is simple.

Documents are distributed across multiple repositories, each with its own structure, permissions, metadata models and lifecycle rules.

A typical organization may store information in:

  • SharePoint

  • Oracle WebCenter Content

  • OpenText

  • Alfresco

  • File shares

  • PLM systems

  • Email archives

Each repository contains valuable knowledge, but none of them provides a complete picture.

Adding an AI assistant on top of a single repository does not solve the fragmentation problem.

The Reality: Nobody Wants to Replace Their ECM

This is where many proposed solutions become unrealistic.

Large organizations have invested years, sometimes decades, building their document management ecosystems.

They have:

  • Millions of documents.

  • Complex workflows.

  • Regulatory requirements.

  • Existing integrations.

  • Thousands of users.

No organization wants to hear:

"Replace your entire ECM infrastructure."

The cost, risk and disruption would be enormous.

In practice, most organizations will continue using their existing ECM platforms for many years.

And that is perfectly reasonable.

A Different Approach

Instead of replacing existing ECM systems, a more realistic strategy is to preserve them as the official systems of record.

Their role remains essential:

  • Document storage.

  • Version control.

  • Security.

  • Compliance.

  • Auditability.

  • Records management.

What changes is what sits above them.

Rather than building yet another ECM, organizations should introduce a new layer capable of connecting all existing repositories and transforming the information they contain into usable knowledge.

This new layer becomes the bridge between traditional document management and modern AI capabilities.


Preserving Existing ECM Investments

One of the key advantages of this approach is that it does not require organizations to replace their existing ECM platforms.

Systems such as SharePoint, Oracle WebCenter Content, OpenText or other repositories can continue operating exactly as they do today. Documents remain in their current locations, managed by the same permissions, workflows and governance processes already in place.

The new platform simply connects to these repositories through their existing APIs and content services.

Rather than moving documents, the platform discovers and indexes knowledge from multiple sources while leaving the original content untouched.

This significantly reduces risk, cost and implementation effort.

Starting Small

Perhaps the most important aspect of this architecture is that it does not require a massive transformation project from day one.

A first version could start with a very simple user interface:

  • A unified search screen.
  • An AI-powered chat interface.
  • Basic document discovery across repositories.
  • Simple knowledge exploration capabilities.

Behind the scenes, the platform would connect to existing ECMs and gradually build a unified knowledge layer.

Additional capabilities such as impact analysis, knowledge graphs, intelligent agents and advanced workflows could then be introduced incrementally.

This allows organizations to begin generating value immediately while evolving towards a much more powerful Document Intelligence Platform over time.

Instead of replacing existing systems, the new platform enhances them, bringing AI-powered knowledge discovery to repositories that organizations already trust and depend on.

From Multiple Repositories to a Unified Knowledge Layer

The objective is not to migrate documents.

The objective is to unify access to knowledge.

In this model, existing repositories remain untouched:

  • SharePoint continues managing SharePoint documents.

  • Oracle WCC continues managing WCC content.

  • Other repositories continue performing their current role.

Above them, a new intelligence layer is introduced.

This layer is responsible for:

  • Discovering information across repositories.

  • Extracting knowledge from documents.

  • Understanding relationships between information.

  • Building semantic indexes.

  • Applying security and permission rules.

  • Providing AI-powered search and analysis capabilities.

Users no longer need to know where information is stored.

They interact with a unified knowledge platform capable of accessing multiple repositories behind the scenes.

The Next Generation of Document Management

The future is unlikely to be another standalone ECM platform.

Instead, it is likely to be a new architecture where existing ECMs continue acting as trusted repositories while a new intelligence layer provides AI-driven discovery, analysis and knowledge management capabilities.

This approach protects previous investments, reduces migration risks and enables organizations to benefit from Artificial Intelligence without disrupting their existing document management landscape.

The challenge is no longer managing documents.

The challenge is understanding and exploiting the knowledge contained within them.

And that requires a new architectural foundation.

Proposed Technology Stack

At this stage, the objective is not to build every component from scratch. Instead, the platform should leverage proven technologies for each layer while focusing development efforts on the areas that create real business value.

For the user interface and application layer, a rapid development platform such as Jmix provides an excellent starting point. It enables the fast creation of enterprise-grade user interfaces, administration screens, workflows, dashboards and security models, allowing the project to deliver working functionality in a relatively short timeframe.

For the intelligence layer, modern open-source AI technologies provide the foundation for knowledge discovery and semantic search. Large Language Models (LLMs) can be deployed locally to ensure full control over data, while vector databases can be used to support semantic retrieval and knowledge exploration.

The platform can therefore be structured around several complementary layers:

  • Application Layer: User interfaces, administration, workflows and dashboards.
  • Knowledge Layer: Unified access to information coming from multiple repositories.
  • AI Layer: Semantic search, document understanding, summarization and knowledge discovery.
  • Security and Governance Layer: Permissions, auditability, classification and compliance.
  • Repository Layer: Existing ECMs and other systems of record.

A possible implementation could combine:

  • Jmix for rapid enterprise application development.
  • Spring Boot for backend services and integration.
  • Local LLMs for secure AI processing.
  • Vector databases for semantic search and retrieval.
  • Knowledge graph technologies for relationship discovery and impact analysis.
  • Existing ECM platforms as trusted systems of record.

The key point is that none of these technologies replace the current repositories. Instead, they work together to create a new layer of intelligence capable of discovering, connecting and exploiting the knowledge already stored across the organization.

This approach allows the project to start with a simple and practical first release while providing a clear path towards a much more advanced Document Intelligence Platform in future iterations.

 


Recommended Technologies

AI Layer

The AI Layer should be built using proven open-source technologies rather than developed from scratch. The objective is to leverage mature components and focus development efforts on the capabilities that create real business value.

Capability

Recommended Technologies

Purpose

Large Language Models (LLMs)

Llama, Mistral, Mixtral, Qwen

Document understanding, summarization, question answering and reasoning

LLM Runtime / Inference Engine

vLLM, Ollama, Text Generation Inference (TGI)

Efficient execution of AI models, either for production or development environments

Vector Database

Qdrant, pgvector, Milvus

Semantic search, embeddings storage and Retrieval-Augmented Generation (RAG)

Knowledge Graph

Neo4j, ArangoDB

Relationship discovery, dependency mapping and impact analysis

Agent Framework

Dify, LangGraph

AI workflows, intelligent assistants and agent orchestration

For an initial release, a combination of Jmix, Spring Boot, Dify, vLLM and Qdrant could provide a fast path towards a working platform with AI-powered search, document chat and semantic retrieval capabilities.

As the platform evolves, more advanced technologies such as LangGraph and Neo4j can be introduced to support sophisticated agent workflows, relationship analysis and knowledge discovery scenarios.

The key point is that these technologies are not the product itself. They are building blocks. The real value lies in the intelligence layer built on top of them, including knowledge federation, document classification, metadata extraction, relationship discovery, impact analysis and security-aware access to information across multiple repositories.

Knowledge Layer

The Knowledge Layer is the core of the platform. Its role is to connect existing repositories, normalize their information, apply security rules and transform distributed documents into usable knowledge.

Capability

Recommended Technologies

Purpose

Repository Connectors

REST APIs, CMIS, Microsoft Graph API, Oracle WCC APIs

Connect to SharePoint, WCC, ECMs and other repositories without replacing them

Integration and Synchronization

Spring Boot, Apache Camel, Kafka, RabbitMQ

Move metadata, events and document updates between repositories and the intelligence platform

Metadata Federation

PostgreSQL, Oracle, Elasticsearch / OpenSearch

Normalize metadata from different systems into a common searchable model

Security Federation

LDAP, Active Directory, Keycloak, OAuth2 / OpenID Connect

Preserve permissions, roles and identity rules across repositories

Knowledge Processing

Apache Tika, OCR engines, custom extraction services

Extract text, structure and relevant information from documents

Search Indexing

OpenSearch, Elasticsearch

Support fast keyword search, filtering and faceted navigation

This layer is especially important because it prevents the platform from becoming just another isolated repository. Instead, it acts as a bridge between existing ECMs and the new AI capabilities.

The key idea is that documents can remain in their current systems of record, while the Knowledge Layer creates a unified view of their metadata, content, permissions and relationships.

In other words, the Knowledge Layer is what allows the platform to connect SharePoint, WCC, other ECMs, PLM systems, databases and file shares under a common intelligence model.

Presentation Layer

The Presentation Layer is responsible for providing simple, powerful and user-friendly access to the platform. It should allow users to search, explore, analyse and interact with knowledge without needing to know where documents are physically stored.

Capability

Recommended Technologies

Purpose

Enterprise UI Development

Jmix, Vaadin

Rapid development of enterprise screens, administration panels, dashboards and workflows

Advanced Web Interfaces

React, Angular, Vue

Build richer user experiences such as AI search, document exploration and visual analysis

AI Chat Interface

Dify UI, custom React UI, Vaadin components

Provide conversational access to documents and knowledge

Dashboards and Analytics

Jmix dashboards, Apache Superset, Grafana

Display document metrics, usage, quality indicators and knowledge insights

Graph Visualization

Neo4j Bloom, Cytoscape.js, React Flow, D3.js

Visualize relationships between documents, systems, requirements and risks

Document Viewer

PDF.js, OnlyOffice, Collabora

Preview documents, compare versions and display extracted knowledge next to the original content


For the first version, Jmix remains a very appropriate option because it allows the team to build useful enterprise interfaces quickly, including search screens, metadata views, administration panels and basic workflows.

Later, more advanced interfaces can be introduced using React or specialized visualization libraries for AI chat, relationship graphs, impact analysis and document intelligence dashboards.

The main goal of this layer is to make the platform feel simple for the user, even if the underlying architecture connects many repositories, AI services and knowledge sources behind the scenes.

Example of a Unified Search and Knowledge Discovery Experience

The Unified Search and Knowledge Discovery screen is the primary entry point to the platform. It combines traditional document search with AI-powered knowledge discovery, allowing users to search across multiple repositories through a single interface.

Users can perform natural language queries, apply advanced filters and explore documents stored in different systems such as SharePoint, WCC, engineering repositories and other ECM platforms.

Search results are enriched with AI-generated summaries, metadata, relationships and impact information, helping users understand not only which documents exist, but also how they are connected to other systems, requirements, reports and business processes.

The interface is organized into three main areas:

  • Advanced Filters Panel: Allows users to refine searches by repository, document type, classification, status, program, owner, date range and tags.
  • Results Panel: Displays matching documents together with summaries, metadata and related knowledge.
  • Knowledge Panel: Provides additional context, including relationships, dependencies, impact analysis and AI-generated insights.

This approach transforms document retrieval into knowledge discovery, enabling users to find information faster, understand its context and assess its potential impact across the organization.





Sunday, May 31, 2026

Why Frameworks Like Jmix Dramatically Accelerate Enterprise Application Development and How to Implement an Employee Expense Management Application in just One Hours using Jmix

One of the most important lessons learned from modern AI-assisted software development is that productivity is not determined solely by the capabilities of the AI. The underlying framework and architectural foundation play an equally important role.

When building enterprise applications, developers often spend a significant amount of time implementing infrastructure rather than business functionality. CRUD operations, security, authentication, user management, data binding, transactions, file handling, auditing, navigation, and UI generation are repeated in project after project. Although these tasks are necessary, they rarely provide direct business value.

This is where Jmix offers a significant advantage.

Built entirely on Java and Spring Boot technologies, Jmix provides a complete application development platform that allows developers to focus primarily on business requirements rather than technical plumbing. Data models, database mappings, user interfaces, security, workflows, and administration capabilities can be generated and extended rapidly while remaining fully customizable.

One of the most remarkable aspects of Jmix is the balance it achieves between productivity and flexibility. Unlike many low-code platforms, developers are not locked into proprietary languages or runtime environments. Everything remains standard Java, making the generated applications easy to understand, maintain, debug, and extend by any experienced Java developer.

The productivity gains become even more evident when Jmix is combined with AI-assisted development. AI can generate entities, business rules, views, workflows, and user interfaces, while Jmix provides the framework necessary to integrate these components into a consistent and maintainable enterprise application. This combination significantly reduces development time while also reducing implementation errors and architectural inconsistencies.

Another differentiating factor is the breadth of functionality available within a single platform. Very few Java-based frameworks provide integrated support for features such as:

  • Business Process Management (BPM)
  • Workflow automation
  • Kanban boards
  • Role-based security
  • File storage and document management
  • User and access administration
  • Audit trails
  • Dynamic user interfaces
  • Reporting and dashboards
  • Data management and CRUD generation



Traditionally, implementing these capabilities requires integrating multiple frameworks and libraries, each with its own configuration, lifecycle, dependencies, and learning curve. Jmix consolidates many of these concerns into a unified and coherent development model.

For development teams, this translates into several tangible benefits:

  • Faster application delivery
  • Lower development and maintenance costs
  • Reduced implementation risk
  • Fewer integration problems
  • Consistent architectural patterns
  • Easier onboarding of new developers
  • Higher code quality and maintainability

In a software industry increasingly influenced by AI-generated code, frameworks such as Jmix become powerful multipliers. They provide the structure, conventions, and enterprise capabilities that allow both developers and AI agents to produce high-quality business applications in a fraction of the time traditionally required.

The result is not only faster development, but also more reliable, maintainable, and scalable enterprise software.

One of the most important aspects of Jmix is that it is not a limiting platform. Unlike many low-code environments that lock developers into proprietary technologies and development models, Jmix is built entirely on standard Java and Spring Boot technologies.

This means that developers can fully benefit from the productivity gains provided by Jmix during the initial stages of a project while retaining complete control over the application's future evolution. If additional functionality is required beyond what Jmix provides out of the box, developers can seamlessly implement custom Spring services, integrate external systems, expose REST or GraphQL APIs, incorporate third-party Java libraries, or build highly specialized user interfaces.

In fact, one of the greatest advantages of Jmix is that it accelerates the development of the repetitive and infrastructure-heavy parts of an enterprise application while preserving the full flexibility of the underlying Spring ecosystem. The most time-consuming tasks data management, security, user administration, navigation, CRUD operations, workflows, and application structure are already solved. From that point forward, the development team is free to extend the application as far as business requirements demand.

In other words, adopting Jmix is not a technological compromise. It is a way to complete the hardest and most repetitive parts of enterprise software development faster, while keeping all the power and flexibility of the Java and Spring Boot ecosystem available whenever it is needed.

Creating the Employee Expense Management Application in Just One Hour Using Jmix. Without AI Assistence.

In the previous article, "How to Implement an Employee Expense Management Application in Two Hours with AI Assistance", we designed and implemented a complete expense management solution using a traditional enterprise architecture based on a relational database, Spring Boot, GraphQL, and React.

In this second exercise, the objective was different: to evaluate how much development effort could be reduced by leveraging a framework specifically designed for rapid enterprise application development.

The result was remarkable. Starting from the database schema created in the previous article, a fully functional application was built in approximately one hour using Jmix.

Starting Point: Reusing the Existing Database

Unlike the previous implementation, no database design work was required.

The application was built directly on top of the existing Oracle database schema containing the following tables:

  • EXPENSE_SHEET
  • EXPENSE_LINE

Since the database structure had already been validated, the focus shifted entirely to the application layer.

Step 1: Creating the Entity Model

The first step consisted of creating the JPA entities representing the business model.

Rather than designing a new model from scratch, the existing entity classes from the previous Spring Boot implementation were reused and adapted to Jmix.

Only minor modifications were required:

  • Adding Jmix entity annotations.
  • Adjusting date and time types.
  • Implementing Jmix-compatible enumerations.
  • Defining the master-detail relationship between ExpenseSheet and ExpenseLine.

The resulting model consisted of only two entities:

ExpenseSheet

Represents an employee expense report and contains:

  • Sheet Number
  • Employee Name
  • Sheet Date
  • Currency
  • Status
  • Total Amount
  • Responsible Person
  • Comments

It also owns a collection of ExpenseLine entities through a composition relationship.

ExpenseLine

Represents an individual expense item and contains:

  • Expense Date
  • Expense Type
  • Description
  • VAT Rate
  • Amount
  • Payment Method
  • Receipt File Name

This entity is linked to its parent ExpenseSheet through a standard master-detail relationship.

Step 2: Reusing Existing Enumerations

The enumerations created in the original application were reused with minimal changes.

The following business enumerations were preserved:

  • ExpenseStatus
  • ExpenseType
  • PaymentMethod
  • CurrencyCode

Only the implementation was adapted to conform to the Jmix EnumClass model, allowing automatic integration with:

  • Combo boxes
  • Filters
  • Forms
  • Data grids
  • Validation mechanisms

This avoided the need to recreate business rules already implemented in the original application.

Step 3: Generating the User Interface

One of the most significant productivity gains came from Jmix's ability to generate complete CRUD interfaces directly from the entity model.

Instead of manually developing pages, components, controllers, APIs, GraphQL schemas, DTOs, mappers, and frontend code, the application was generated directly from the entities.

Official Jmix Documentation


The following views were created.

Expense Sheets List View



Features included:

  • Data grid
  • Column sorting
  • Generic filtering
  • Column resizing
  • Column reordering
  • Create, Edit, Delete, and Refresh actions

The view was generated automatically and required only minor cosmetic adjustments.

Expense Sheet Detail View (Form at the top)



This view contains:

  • Expense Sheet header information
  • Employee details
  • Status and currency selectors
  • Total amount calculation
  • Comments section

The detail form serves as the master component of the application.

Expense Lines Embedded Grid (Table at the bottom)



A grid containing all expense lines associated with the selected expense sheet was added directly below the form.

Features include:

  • Create line
  • Edit line
  • Remove line
  • Sorting
  • Immediate visual refresh

The grid is bound directly to the collection of ExpenseLine entities belonging to the selected ExpenseSheet.

Expense Line Detail Dialog

A dedicated popup dialog was generated for editing individual expense lines.

The dialog includes:

  • Expense Date
  • Expense Type
  • Description
  • VAT Rate
  • Amount
  • Payment Method
  • Receipt information

The dialog operates within the same DataContext as the parent ExpenseSheet, enabling all modifications to remain in memory until the user explicitly saves the expense sheet.

Step 4: Implementing Business Logic

Only a very small amount of custom code was required.

The primary customization consisted of implementing automatic recalculation of the Expense Sheet total amount whenever an expense line was created, modified, or removed.

The process is entirely client-side:

  1. User edits an expense line.
  2. The line dialog closes.
  3. The total amount is recalculated in memory.
  4. The form is refreshed immediately.
  5. No database update occurs yet.
  6. Changes are persisted only when the user saves the Expense Sheet.

This approach eliminates inconsistent states and closely matches the behavior expected by business users.

Conclusion

Starting from the database schema created in the previous article, the entire application was built using:

  • Two entities
  • Four business enumerations
  • Four generated views
  • A small amount of custom business logic

No DTOs, GraphQL schemas, REST controllers, repositories, service layers, React components, frontend state management, or API integrations were required.

The result demonstrates how a framework such as Jmix can dramatically reduce development effort while still producing a fully functional enterprise application built entirely on standard Java and Spring Boot technologies.

For applications centered around data management, workflows, administration, and business processes, this approach can significantly reduce development time, implementation complexity, and maintenance costs while preserving full extensibility for future enhancements.

Wednesday, May 27, 2026

 How to Build an Employee Expense Management Application in Two Hours with Zero Coding and AI Assistance

Modern AI capabilities, combined with software architects who are able to precisely define and structure both business and technical requirements, are radically transforming the way enterprise applications are developed.

What previously required weeks of analysis, design, backend implementation, frontend development, integration, and testing can now be prototyped in just a few hours through an iterative collaboration between humans and AI-assisted development tools.

The key is not only the power of AI itself, but also the quality of the architectural guidance, domain modeling, transactional design, and requirement definition provided by experienced engineers. When both elements work together effectively, ultra-fast full-stack application development becomes a realistic and highly productive approach.

 1. Choosing the Right Technology Stack

One of the key reasons why it is now possible to build a functional enterprise application in just a few hours with the help of AI is the maturity and compatibility of modern development frameworks and architectures.

For this project, the selected stack was:

Layer

Technology Stack

Database

Oracle Database

Backend API

Spring Boot + GraphQL

Frontend

React + Material UI

This combination is particularly well suited for rapidly developing enterprise business applications such as employee expense management systems, approval workflows, master/detail transactional forms, dashboards, and administrative portals.

Database Layer

Although this implementation used Oracle as the relational database engine, the reality is that for an application of this size and complexity, almost any modern relational database would work perfectly well.

Why Spring Boot + GraphQL?

For the backend, the combination of Spring Boot and GraphQL is especially productive for AI-assisted development.

Traditional REST APIs often generate excessive boilerplate:

Many endpoints
Many DTOs
Many payload variations
Over-fetching
Under-fetching

GraphQL simplifies this considerably.

Instead of creating dozens of rigid endpoints, the frontend can request exactly the data it needs.

Advantages of Spring Boot + GraphQL

  • Rapid API generation
  • Strong typing
  • Clean schema-driven design
  • Excellent integration with JPA/Hibernate
  • Easy DTO mapping
  • Reduced frontend/backend coupling
  • Flexible queries
  • Simplified master/detail retrieval
  • Better frontend efficiency
  • Easier AI-assisted code generation

Spring Boot also provides:

  • Dependency injection
  • Transaction management
  • Security integration
  • Repository abstraction
  • Validation
  • Exception handling
  • Production-ready infrastructure

with very little manual configuration.

Why React for the Frontend?

React is particularly effective for applications with:

  • Dynamic forms
  • Popups/dialogs
  • Editable grids
  • Master/detail screens
  • Stateful workflows
  • Reactive updates

An expense management system contains exactly these kinds of interfaces.

Advantages of React + Material UI

  • Fast UI prototyping
  • Component reusability
  • Excellent state management patterns
  • Strong ecosystem
  • Clean separation of concerns
  • Responsive layouts
  • Rich enterprise UI components
  • DataGrid support
  • Dialog and form infrastructure
  • Easy integration with GraphQL/Apollo

 

Why This Architecture Works So Well with AI

This architecture is especially AI-friendly because it is:

Structured
Layered
Predictable
Strongly typed
Component-oriented

Project Logbook:  Building an Employee Expense Management Application with AI in Two Hours

Start Time

Main Step

00:00

1. Create the application mockups

00:20

2. Generate the database DDL from the mockups

00:32

3. Generate test data

00:42

4. Create the backend project in IntelliJ

01:25

5. Create the frontend application

02:00

Target completion

00:00  Create the Application Mockups

The first task is to ask the AI to generate the initial application mockups. The objective is to define the user experience before writing backend or frontend code.

The application should include three main user interfaces:

Mockup

Purpose

Expense Sheets Dashboard

Main table showing all employee expense sheets

Expense Sheet Edit Popup

Form for creating, viewing, and editing one expense sheet and its expense lines

Mobile Expense Sheet View

Simplified mobile interface for editing expenses from a mobile device

 Requirements to provide to the AI

Area

Requirement

Application domain

Employee expense management and control

Main entity

Expense Sheet

Detail entity

Expense Line

Main screen

Table with all expense sheets

Main table columns

Expense sheet number, employee name, sheet date, total amount, status, responsible name

Status values

Submitted, Approved, In Process of Pay, Paid, Rejected

Table behavior

Column filters, sorting icons, row actions

Row actions

View, Edit, Delete

Detail popup

Opens over the main table

Expense sheet form fields

Sheet number, employee name, sheet date, total amount, currency, status, responsible, comments

Expense lines table fields

Expense date, expense type, description, VAT, amount, payment method, receipt

Expense line actions

Add, View, Edit, Delete

Buttons

Save, Cancel/Close, Submit

Mobile interface

Simpler layout, fewer fields, optimized for small screens

UX requirement

Master/detail relationship: Expense Sheet contains multiple Expense Lines

Visual style

Enterprise-style, clean, aligned tables, clear buttons, icons for actions

Output format

Draw.io / diagrams.net XML

 

The AI agent returns:

 

  00:20  Generate the Database DDL from the Mockups

The second task is to ask the AI to generate the relational database model based on the mockups.

The application is simple enough to work with any modern relational database. Oracle Database was used in this implementation, but PostgreSQL or MySQL would also be suitable.

Requirement

Description

Database model

Relational

Main table

EXPENSE_SHEET

Detail table

EXPENSE_LINE

Relationship

One expense sheet has many expense lines

Integrity

Foreign key from EXPENSE_LINE to EXPENSE_SHEET

Total amount

Stored in EXPENSE_SHEET and recalculated from EXPENSE_LINE

Enums

Stored as codes in VARCHAR columns

Timestamps

created_at, updated_at

Constraints

Primary keys, foreign keys, not null constraints, unique sheet number

 00:32 — Generate Test Data

The third task is to ask the AI to generate test inserts.

Requirement

Description

Number of sheets

10 expense sheets

Average lines per sheet

Around 5 expense lines

Data realism

Different employees, dates, amounts, statuses, payment methods

Status coverage

Submitted, Approved, In Process of Pay, Paid, Rejected

Expense type coverage

Travel, Hotel, Meals, Transport, Other

Payment methods

Company Card, Personal Card, Cash, Bank Transfer

Total amount

Should match the sum of the lines

 

After executing DDL Script we have the test data


 

00:42 — Create the Backend Project in IntelliJ

The backend is created as a Spring Boot project in IntelliJ.

Backend technology requirements

Layer

Technology Requiirement

Language

Java 17

Framework

Spring Boot

API style

GraphQL

Persistence

Spring Data JPA / Hibernate

Database

Oracle Database

Mapping

MapStruct

Boilerplate reduction

Lombok

Build tool

Maven

IDE

IntelliJ IDEA

Testing endpoint

GraphiQL

 

Backend functional requirements

Area

Requirement

Entities

ExpenseSheet, ExpenseLine

DTOs

Output DTOs, input DTOs, filter DTOs

Enums

ExpenseStatus, CurrencyCode, ExpenseType, PaymentMethod

Enum display

Each enum should have code and label

Repositories

JpaRepository + JpaSpecificationExecutor

Filters

Accumulative filters using Specifications

Pagination

Page-based pagination

Sorting

Backend sorting by selected column

Services

Business logic layer

GraphQL schema

Queries and mutations

Controllers

GraphQL controllers

Security

Allow GraphiQL and frontend access during development

CORS

Allow React frontend from localhost:5173

Scalars

BigDecimal and Date scalars

Transactions

Use @Transactional for write operations

 

Backend implementation steps

After passing the requirements to the AI agent, we execute the next steps and requesting for the different artifacts: 

Step

Description

Author

1

Create Spring Boot project in IntelliJ

Developer

2

Configure Maven dependencies

Developer

3

Configure Oracle datasource in application.yaml

IA

4

Create JPA entities from database

IA

5

Replace String fields with enums and converters

IA

6

Create DTOs

IA

7

Create MapStruct mappers

IA

8

Create Specifications for filters

IA

9

Create repositories

IA

10

Create services and service implementations

IA

11

Create GraphQL schema

IA

12

Create GraphQL controllers

IA

13

Register custom GraphQL scalars

IA

14

Configure CORS and temporary development security

IA

15

Test queries and mutations in GraphiQL

Developer

 

Then we would have a full functional backend with no errors:



01:25  Create the Frontend Application

The frontend is created as a React application using Vite.

Layer

Technology Requirements

Framework

React

Language

TypeScript

Build tool

Vite

UI library

Material UI

Grid component

MUI DataGrid

API client

Apollo Client

API protocol

GraphQL

Development server

Vite dev server

Backend endpoint

http://localhost:8080/graphql

 

Frontend requirements to pass to the AI agent

Area

Requirement

Main page

Expense Sheets dashboard

Main grid

Shows all expense sheets

Main grid actions

View, Edit, Delete

Sorting

Column sorting connected to backend

Filtering

Column or toolbar filters

Popup 1

Expense Sheet form dialog

Popup 1 content

Header fields and expense lines grid

Popup 2

Expense Line dialog

Popup 2 content

Expense date, type, description, VAT, amount, payment method, receipt

Master/detail

Expense Sheet owns Expense Lines

State model

Working copy in memory

Save behavior

Save Sheet commits header and lines together

Cancel behavior

Cancel discards local changes

Total amount

Updated provisionally in frontend

Backend total

Recalculated definitively on save

UI style

Enterprise, clean, responsive

Mobile support

Simplified mobile version

 

Frontend implementation steps

Then we continue executing step by step and reviewing the results returned by the AI, frontend is no so complex as the backend.

Step

Description

Author

1

Create Vite React TypeScript project

Developer

2

Install Apollo Client, GraphQL, MUI, MUI DataGrid

Developer

3

Configure Apollo Client

Developer

4

Create shared TypeScript types

IA

5

Create GraphQL queries and mutations

IA

6

Build ExpenseSheetsPage

IA

7

Add main dashboard grid

IA

8

Add View/Edit/Delete action buttons

IA

9

Create ExpenseSheetFormDialog

IA

10

Add controlled form state for sheet header

IA

11

Create ExpenseLinesGrid inside sheet popup

IA

12

Create ExpenseLineDialog

IA

13

Implement working copy of lines in memory

IA

14

Implement Add/Edit/Delete line operations in local state

IA

15

Recalculate provisional total in frontend

IA

16

Implement Save Sheet as one GraphQL mutation

IA

17

Implement Cancel Sheet as discard local state

IA

18

Refresh dashboard after successful save

IA

 

At the end we have a full functional application:



 02:00  Target Completion