Indotalent Enterprise Kit Documentation

1. Functional Features

Invoice Manager is a complete invoicing solution built around three everyday business needs: organizing your customers, maintaining a dependable product catalog, and turning that information into professional invoices. Master registers keep your reference data clean and consistent, so every invoice you create draws from the same trusted source of truth.

The solution is organized into seven master registers that describe how your business groups its data, followed by the two core directories (Customers and Products) and the central Invoice feature that brings everything together.

2. Architecture Overview

Indotalent uses Vertical Slice Architecture (VSA) with ASP.NET Core Areas. Each feature lives in its own self-contained folder, including its controller, CQRS handlers, validators, API endpoints, views, and JavaScript. This eliminates the need to jump between multiple projects when working on a single feature.

Key Architectural Decisions

3. Project Structure

The project is organized into ASP.NET Core Areas. Each area groups features by access level:

Feature Folder Convention (VSA)

Every feature follows this convention:

├── Controllers/{EntityName}Controller.cs
├── Cqrs/
│   ├── Get{EntityName}ListHandler.cs
│   ├── Get{EntityName}ByIdHandler.cs
│   ├── Create{EntityName}Handler.cs + Validator.cs
│   ├── Update{EntityName}Handler.cs + Validator.cs
│   └── Delete{EntityName}Handler.cs
├── Endpoints/{EntityName}Endpoint.cs
└── Views/
    ├── Index.cshtml + Index.cshtml.js
    ├── Create.cshtml + Create.cshtml.js
    ├── Edit.cshtml + Edit.cshtml.js
    └── Detail.cshtml + Detail.cshtml.js

4. Application Name

The application name — displayed in the browser title bar, top-left logo, footer, and sidebar logo — is configured centrally through appsettings.json. This allows you to rebrand the entire application without editing any layout files manually.

Configure the application name in appsettings.json under AppSettings:

"AppSettings": {
    "Name": "Indotalent"
}

To rebrand the application, simply change the "Name" value. The layouts read this value at runtime via @Configuration["AppSettings:Name"], so the title, logo, and footer update automatically across both the public area and the authenticated area layouts.

7. CQRS Pattern (Step-by-Step)

Every feature uses a simple CQRS pattern with plain C# handlers (no MediatR). Each CRUD operation has its own handler class with a single HandleAsync() method.

Step 1: List Handler

public class GetTaxListHandler
{
    private readonly AppDbContext _context;

    public GetTaxListHandler(AppDbContext context) => _context = context;

    public async Taskobject>> HandleAsync(GetTaxListRequest request)
    {
        var query = _context.Tax.AsQueryable();

        // Apply search filter
        if (!string.IsNullOrWhiteSpace(request.Search))
            query = query.Where(x => x.Name.Contains(request.Search) || x.Code.Contains(request.Search));

        int page     = request.Page ?? 1;
        int pageSize = request.PageSize ?? 10;

        var total = await query.CountAsync();
        var items = await query
            .Skip((page - 1) * pageSize)
            .Take(pageSize)
            .Select(x => new TaxListItem { ... })
            .ToListAsync();

        return ApiResponse<object>.Ok(new { items, total, page, pageSize });
    }
}

Step 2: Create Handler

public class CreateTaxHandler
{
    public async Task> HandleAsync(CreateTaxRequest request)
    {
        // 1. Validate with FluentValidation
        var validator = new CreateTaxValidator();
        var result = await validator.ValidateAsync(request);
        if (!result.IsValid)
            return ApiResponse.Fail(
                "Validation failed", result.ToDictionary());

        // 2. Check for duplicate Code
        if (await _context.Tax.AnyAsync(x => x.Code == request.Code))
            return ApiResponse.Fail("Code already exists");

        // 3. Save to database
        var entity = new Tax
        {
            Code            = request.Code,
            Name            = request.Name,
            PercentageValue = request.PercentageValue,
            Description     = request.Description
        };
        _context.Tax.Add(entity);
        await _context.SaveChangesAsync();

        return ApiResponse.Ok(
            new CreateTaxResponse { Id = entity.Id, Code = entity.Code },
            "Tax has been created successfully");
    }
}

Step 3: Update Handler

Similar to Create but loads existing entity, validates it exists, updates properties, and saves.

Step 4: Delete Handler

public class DeleteTaxHandler
{
    public async Taskobject>> HandleAsync(string id)
    {
        var entity = await _context.Tax.FindAsync(id);
        if (entity == null)
            return ApiResponse<object>.Fail("Tax not found");

        _context.Tax.Remove(entity);
        await _context.SaveChangesAsync();

        return ApiResponse<object>.Ok(new { id }, "Tax deleted successfully");
    }
}

Standard API Response

All handlers return ApiResponse which wraps the result:

public class ApiResponse
{
    public bool Success { get; set; }
    public string? Message { get; set; }
    public T? Data { get; set; }
    public IDictionary<string, string[]>? Errors { get; set; }
}

8. Minimal API Endpoints

Data operations use ASP.NET Core Minimal API (not MVC controllers). Each feature registers its endpoints in a single {EntityName}Endpoint.cs file.

Endpoints are registered in Program.cs via app.Map{EntityName}Endpoints();.

9. Vue 3 Frontend Tutorial

The frontend uses Vue 3 Composition API with the global build (vue.global.prod.js). Vue is loaded in the layout and each page mounts its own Vue app instance on a specific element. This is not a Single Page Application — Vue enhances specific pages inside ASP.NET Core MVC views.

How Vue is Loaded

In _Layout.cshtml (line ~11), Vue is loaded via a simple script tag:

// File: _Layout.cshtml (line ~11)
<script src="~/js/vue.global.prod.js"></script>

This exposes the global Vue object. Each page then creates its own app — no build tools, no SPA routing, just lightweight page-level reactivity.

Basic Vue Setup Pattern

Every page that uses Vue follows this pattern:

// 1. Destructure Vue APIs you need
const { createApp, ref, reactive, onMounted } = Vue;

// 2. Create and mount a Vue app
createApp({
    setup() {
        // Reactive state (Vue will track changes)
        const contentReady   = ref(false);
        const errorMessage   = ref(null);
        const submitting     = ref(false);

        // Initialize on mount
        onMounted(async function() {
            contentReady.value = true;
        });

        // Return makes these available in HTML template
        return { contentReady, errorMessage, submitting };
    }
}).mount('#app-index');  // Mounts on 

Example 1: DataTable Index Page

This is the pattern used in Areas/Admin/Tax/Views/Index.cshtml.js. It combines Vue with DataTables for server-side paginated tables.

const { createApp, ref, onMounted } = Vue;

createApp({
    setup() {
        const contentReady = ref(false);
        const selectedId   = ref(null);

        function selectRow(row, id) {
            selectedId.value = id;
        }

        function clearSelection() {
            selectedId.value = null;
        }

        // Expose to window for DataTables to call
        window.vueApp = { selectRow, clearSelection };

        onMounted(function() {
            setTimeout(function() {
                contentReady.value = true;
            }, 500);
        });

        return { contentReady, selectedId };
    }
}).mount('#app-index');

var table = new DataTable('#taxTable', {
    processing:  true,
    serverSide:  true,
    ajax: {
        url: '/api/tax',
        data: function(d) {
            d.search   = d.search?.value || '';
            d.page     = (d.start / d.length) + 1;
            d.pageSize = d.length;
        },
        dataSrc: function(json) {
            if (json.success) {
                json.recordsTotal    = json.data.total;
                json.recordsFiltered = json.data.total;
                return json.data.items;
            }
            return [];
        }
    },
    columns: [
        { data: 'code' },
        { data: 'name' },
        {
            data: 'percentageValue',
            render: function(data) {
                return '' + data + '%';
            }
        }
    ],
    pageLength: 10
});

// Row click / draw handlers
table.on('draw', function() {
    if (window.vueApp) window.vueApp.clearSelection();
});

Example 2: Create Form with Validation

This is the pattern used in Areas/Admin/Tax/Views/Create.cshtml.js.

const { createApp, ref, reactive } = Vue;

createApp({
    setup() {
        // Form data (reactive object)
        const form = reactive({
            code: '',
            name: '',
            percentageValue: '',
            description: ''
        });

        // Validation errors (reactive)
        const errors = reactive({});

        // UI state
        const submitting = ref(false);
        const created    = ref(false);
        const errorMessage = ref('');

        return { form, errors, submitting, created, errorMessage };
    }
}).mount('#app-create');

function validate() {
    // Clear previous errors
    Object.keys(errors).forEach(key => delete errors[key]);
    errorMessage.value = '';

    if (!form.code || !form.code.trim()) {
        errors.code = 'Tax Code is required';
    } else if (form.code.length > 50) {
        errors.code = 'Tax Code must not exceed 50 characters';
    }

    if (!form.name || !form.name.trim()) {
        errors.name = 'Tax Name is required';
    }

    const val = parseFloat(form.percentageValue);
    if (isNaN(val) || val < 0 || val > 100) {
        errors.percentageValue = 'Percentage must be between 0 and 100';
    }

    return Object.keys(errors).length === 0;
}

async function submitForm() {
    if (!validate()) return;

    submitting.value = true;

    try {
        // Smooth UI delay: 500ms before actual request
        await new Promise(r => setTimeout(r, 500));

        const response = await fetch('/api/tax', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                code:            form.code,
                name:            form.name,
                percentageValue: parseFloat(form.percentageValue),
                description:     form.description
            })
        });

        const result = await response.json();

        if (result.success) {
            created.value = true;
            window.showToast('success', 'Created',
                'Record created successfully');
        } else {
            if (result.errors) {
                for (const key in result.errors) {
                    errors[key] = result.errors[key][0];
                }
            }
            errorMessage.value = result.message || 'Failed to create';
            window.showToast('error', 'Failed', result.message);
        }
    } catch (err) {
        errorMessage.value = 'An error occurred while submitting the form';
    } finally {
        submitting.value = false;
    }
}

Example 3: Loading States Pattern

Every page includes these essential reactive states for a polished UX:

// Essential reactive states
const contentReady   = ref(false);  // Controls v-if on main content
const loading       = ref(true);    // Used for spinner display
const errorMessage  = ref(null);  // Error notification
const successMessage = ref(null);  // Success notification

// Auto-hide after a few seconds
setTimeout(() => { successMessage.value = null; }, 3000);
setTimeout(() => { errorMessage.value   = null; }, 4000);

Example 4: Custom Confirmation Modal for Delete

Delete operations use a custom modal (not confirm()) with smooth UX:

const showDeleteModal = ref(false);
const deleting        = ref(false);

function closeDeleteModal() {
    showDeleteModal.value = false;
}

async function confirmDelete(id) {
    deleting.value = true;
    await new Promise(r => setTimeout(r, 500));  // Smooth delay

    try {
        const res = await fetch('/api/tax/' + id, { method: 'DELETE' });
        if (res.ok) {
            showDeleteModal.value = false;
            // Show success, reload table, redirect, etc.
        }
    } catch (err) {
        // Handle error
    } finally {
        deleting.value = false;
    }
}

// Toggle modal via v-bind:class / v-bind:style in HTML
// 

Vue Component Checklist

When creating a new Vue-enhanced page, ensure you include:

10. AI-Assisted Development

Indotalent ships with an automatic AI-assisted development pipeline driven by the .ai-assisted/ folder. The only file the developer writes is .ai-assisted/DATA-DICTIONARY.md — the AI generates everything else: the feature specification, the technical PRD, and the complete application.

How to Start the Development Sequence (automatic)

1. Fill .ai-assisted/DATA-DICTIONARY.md — application name, persona, and feature description.
2. Start the sequence — tell your AI coding agent exactly this command:

   start the development

3. The AI runs the whole chain automatically: Gate 0 (identity check) → DATA-DICTIONARY review → Phase 0 (FEATURE.md) → Phase 1 (PRD.md) → Phase 2 (build the application).
4. Done! A ready-to-use application, verified with dotnet build (0 errors) after every feature.

What the AI Generates Automatically

One command produces three deliverables:

Entity Types Auto-Detected by AI

Each Feature Is Generated With 18 Files

For every feature, the AI creates the full vertical slice:

Prompt Examples — Copy & Use (maintenance mode)

These per-feature prompts apply when the pipeline is inactive (maintenance mode). For a greenfield project, use the single command start the development instead. Replace {Entity} with your entity name.

Generate full CRUD for {Entity}. Follow the skill.

Generate full CRUD for {Entity} with lookup to {LookupEntity}. Follow the skill.

Generate full CRUD for {MasterEntity} with {DetailEntity}. Follow the skill.

Generate full CRUD for {Entity} with seed data. Follow the skill.

Smart Prompt Strategies

To get the best results from your AI agent and save tokens, use these strategies: