Indotalent Enterprise Kit Documentation

1. 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

2. 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

3. 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.

5. Functional Features

This section describes what Meal Manager does from a business perspective — the features, the master data it manages, and the workflows it supports.

6. 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; }
}

7. 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();.

8. 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:

9. 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: