DOCS Technical Documentation

Indotalent Enterprise Kit Documentation

A comprehensive guide to the architecture, features, and development workflow of the Indotalent ASP.NET Core MVC enterprise starter kit.

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
Aspect Implementation
ArchitectureVertical Slice via ASP.NET Core Areas
Backend APIMinimal API (not MVC controllers for data operations)
CQRSPlain handlers (no MediatR dependency)
DatabaseEF Core with multi-provider (InMemory / SQL Server / PostgreSQL)
Primary KeysString (GUID) — no auto-increment
Soft DeleteIHasIsDeleted + global query filter
AuditIHasAudit + auto-populated on SaveChanges
ValidationFluentValidation (server) + custom JS (client)
FrontendVue 3 Composition API + DataTables (inside MVC views)
AuthASP.NET Core Identity + JWT with Refresh Token Rotation + Firebase SSO
Rate LimitingSystem.Threading.RateLimiting — 4 policies
Background JobsHangfire with built-in dashboard

2. Project Structure

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

Area Purpose Auth Required
Areas/Public/Public-facing pages (Home, Privacy, Documentation)No
Areas/Identity/ASP.NET Core Identity pages (Login, Register, Manage)Mixed
Areas/Admin/Admin-only features (User, Role, Tax, Currency, etc.)Admin role
Areas/Main/Member features (Todo, etc.)Member role
Areas/Components/Reusable partial views (Audit Trail card, etc.)N/A
Feature Folder Convention (VSA)

Every feature follows this convention:

Areas/Admin/{EntityName}/
├── 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.

File / PathDescription
Areas/Public/Views/Shared/_Layout.cshtmlRenders the app name in the browser title, navbar logo, and footer
Areas/_LayoutArea.cshtmlRenders the app name in the browser title and sidebar logo
appsettings.json → AppSettingsCentral application name configuration

Configure the application name in appsettings.json under AppSettings:

appsettings.json — 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.

Enterprise Features

Authentication

Full-featured authentication with ASP.NET Core Identity, JWT access tokens with refresh token rotation, and optional Firebase SSO.

File / PathDescription
Infrastructures/Authentications/Jwt/JwtService.csJWT token generation, refresh token creation, hashing, and validation
Infrastructures/Authentications/Jwt/JwtAuthEndpoints.csMinimal API endpoints: POST /api/auth/*
Infrastructures/Authentications/Firebase/Firebase token verification on server side
Areas/Identity/Pages/Account/Razor Pages for Login, Register, Manage, etc.
Configappsettings.json → JwtSettings
JWT + Refresh Token Flow
// 1. Login → POST /api/auth/login with email+password
// 2. Response returns: { token, refreshToken, expiresAt, user }
// 3. When access token expires → POST /api/auth/refresh
//    with { refreshToken } → new token pair (rotation)
// 4. Refresh token is hashed (SHA256) and stored in DB

Role-Based Authorization

Pre-configured roles: Guest, Member, and Admin. New users automatically receive the Guest role.

File / PathDescription
Infrastructures/Authorizations/Identity/ApplicationRoles.csRole constants
Infrastructures/Databases/DatabaseSeeder.csSeeds Admin user + roles on startup
Areas/Admin/*/Controllers/*.cs[Authorize(Roles = AdminConst)]
ApplicationRoles.cs
public static class ApplicationRoles
{
    public const string AdminConst  = "Admin";
    public const string MemberConst = "Member";
    public const string GuestConst  = "Guest";
}

SSO Firebase

Indotalent supports Firebase Single Sign-On (SSO) as an optional authentication method. When enabled, users can sign in using their Google account via Firebase Authentication. The Firebase configuration is stored in appsettings.json under the SsoFirebase section.

File / PathDescription
Infrastructures/Authentications/Firebase/Firebase token verification service
appsettings.json → SsoFirebaseFirebase project configuration

To enable Firebase SSO, configure the following in appsettings.json:

appsettings.json — SsoFirebase
"SsoFirebase": {
    "IsUsed": true,
    "ProjectId": "xxx",
    "ApiKey": "xxx",
    "AuthDomain": "xxx.firebaseapp.com",
    "StorageBucket": "xxx.firebasestorage.app",
    "MessagingSenderId": "xxx",
    "AppId": "xxx"
}

Set "IsUsed": true to enable Firebase SSO. Replace the placeholder values (xxx) with your actual Firebase project credentials from the Firebase Console. Set "IsUsed": false to disable Firebase SSO and use only the built-in Identity authentication.

AutoNumber Generation

Entities implementing IHasAutoNumber get auto-generated codes like COMP-0001.

File / PathDescription
Data/Interfaces/IHasAutoNumber.csInterface definition
Infrastructures/AutoNumberGenerator/AutoNumberGeneratorService.csNumber generation service
UsageAdd : BaseEntity, IHasAutoNumber to entity

Background Jobs (Hangfire)

Hangfire with built-in dashboard at /hangfire (Admin only). Supports recurring, fire-and-forget, and delayed jobs.

File / PathDescription
Infrastructures/BackgroundJobs/DI.csHangfire configuration + storage
Infrastructures/BackgroundJobs/HangfireAuthorizationFilter.csAdmin-only dashboard access
Infrastructures/BackgroundJobs/Jobs/SerilogCleanupJob.csSample recurring job

Multi-Database

Switch between InMemory, SQL Server, and PostgreSQL with a single config change. The application supports three database providers — simply toggle "IsUsed" to switch between them.

File / PathDescription
Infrastructures/Databases/DatabaseSettingsModel.csConfiguration model
Infrastructures/Databases/DI.csEF Core provider registration
appsettings.jsonSet "IsUsed": true for your provider

Configure your database provider in appsettings.json under DatabaseSettings:

appsettings.json — DatabaseSettings
"DatabaseSettings": {
    // InMemory (default, no external DB needed)
    "InMemory": {
        "IsUsed": true,
        "ConnectionString": "IndotalentDb",
        "TimeoutInSeconds": 1800
    },
    // Microsoft SQL Server
    "MsSQL": {
        "IsUsed": false,
        "ConnectionString": "Server=localhost\\SQLEXPRESS;Database=MyDb;Trusted_Connection=True;TrustServerCertificate=True",
        "TimeoutInSeconds": 1800
    },
    // PostgreSQL
    "PostgreSQL": {
        "IsUsed": false,
        "ConnectionString": "Host=localhost;Database=MyDb;Username=postgres;Password=yourpassword",
        "TimeoutInSeconds": 1800
    }
}

To switch providers, set the desired provider's "IsUsed" to true and the others to false. Only one provider can be active at a time. Update the ConnectionString to match your database server credentials.

Demo Mode

Indotalent includes a Demo Mode feature that, when enabled, automatically seeds the database with dummy demo data on application startup. This is useful for testing, presentations, or evaluation purposes without needing to manually enter data.

File / PathDescription
Infrastructures/Databases/DatabaseSeeder.csSeeds demo data when Demo Mode is active
appsettings.json → DemoModeToggle Demo Mode on/off

Configure Demo Mode in appsettings.json:

appsettings.json — DemoMode
"DemoMode": {
    "IsDemo": true
}

Set "IsDemo": true to enable Demo Mode — the application will seed dummy data (sample users, roles, and demo records) on every startup. Set "IsDemo": false to disable it and start with a clean database.

AI Chat

Indotalent includes an AI Chat feature that can be enabled by configuring your preferred AI provider's API key. The application supports multiple AI providers including ChatGPT, Claude, Gemini, and DeepSeek.

File / PathDescription
appsettings.json → AiSettingsAI provider selection and API keys

Configure AI Chat in appsettings.json under AiSettings:

appsettings.json — AiSettings
"AiSettings": {
    // Choose your provider: "ChatGPT", "Claude", "Gemini", or "DeepSeek"
    "Provider": "ChatGPT",
    "ChatGPT": {
        "ApiKey": "sk-your-chatgpt-api-key",
        "Model": "gpt-4o"
    },
    "Claude": {
        "ApiKey": "sk-ant-your-claude-api-key",
        "Model": "claude-3-opus-20240229"
    },
    "Gemini": {
        "ApiKey": "your-gemini-api-key",
        "Model": "gemini-1.5-pro"
    },
    "DeepSeek": {
        "ApiKey": "your-deepseek-api-key",
        "Model": "deepseek-v4-flash"
    }
}

To enable AI Chat, set the "Provider" field to your chosen provider name and fill in the corresponding "ApiKey" with your actual API key from that provider. Leave the API keys empty to disable the AI Chat feature.

Email Delivery

Multi-provider email service supporting SendGrid, Mailgun, SMTP, and Mailjet. Toggle "IsUsed" to switch between providers.

File / PathDescription
Infrastructures/Email/EmailSettingsModel.csProvider selection + API keys
Infrastructures/Email/EmailService.csMain email service with templates
Infrastructures/Email/SendGrid/, Mailgun/, etc.Provider implementations
Infrastructures/Email/IdentityEmailSenderAdapter.csIdentity integration

Configure email delivery in appsettings.json under EmailSettings:

appsettings.json — EmailSettings
"EmailSettings": {
    // SendGrid
    "SendGrid": {
        "IsUsed": false,
        "ApiKey": "SG.your-sendgrid-api-key",
        "FromEmail": "noreply@email.com"
    },
    // Mailgun
    "Mailgun": {
        "IsUsed": false,
        "ApiKey": "key-your-mailgun-api-key",
        "Domain": "mg.yourdomain.com",
        "FromEmail": "noreply@email.com"
    },
    // Mailjet
    "Mailjet": {
        "IsUsed": false,
        "ApiKey": "mj-your-public-key",
        "ApiSecret": "mj-your-private-key",
        "FromEmail": "noreply@email.com"
    },
    // SMTP (default)
    "Smtp": {
        "IsUsed": true,
        "Host": "smtp.gmail.com",
        "Port": 465,
        "UserName": "your-email@gmail.com",
        "Password": "your-app-password",
        "FromAddress": "your-email@gmail.com",
        "FromName": "no-reply"
    }
}

To switch email providers, set the desired provider's "IsUsed" to true and the others to false. Only one provider can be active at a time. Fill in the API keys and credentials for your chosen provider.

File Upload / Download

File storage service supporting local file system with upload, download, delete operations.

File / PathDescription
Infrastructures/File/FileStorageService.csCore service
Infrastructures/File/FileStorageSettingsModel.csStorage path, allowed extensions, max size
Infrastructures/File/Local/Local file system implementation

Health Checks

Built-in health check endpoints with dashboard UI at /Admin/HealthCheck/Index.

File / PathDescription
Infrastructures/HealthChecks/DI.csHealth check registration
Endpoints/healthz (liveness), /ready (readiness), /health
Dashboard/Admin/HealthCheck/Index

Logging (Serilog)

Structured logging with Serilog. Writes to rolling files with automatic 3-day cleanup via Hangfire.

File / PathDescription
Infrastructures/Logging/Serilog/Serilog configuration
wwwroot/data/serilog/Log file output directory
Infrastructures/BackgroundJobs/Jobs/SerilogCleanupJob.csAuto-cleanup job (daily at midnight)

Rate Limiting

Four rate limiting policies using System.Threading.RateLimiting, configurable via appsettings.json.

PolicyScopeDefault
GlobalAll requests100 req/min
AuthenticatedAuthenticated users200 req/min
WritePOST/PUT/DELETE50 req/min
AdminAdmin role500 req/min

Functional Features

Functional Overview

Asset Manager is a complete IT asset lifecycle management solution. It provides centralized master data for branches, departments, manufacturers, vendors, and depreciation profiles, then links them together through asset models and individual asset records. Every asset moves through a defined lifecycle, can be assigned to employees, and carries the purchase, warranty, and end-of-life information needed for accurate tracking and planning.

FeatureDescription
BranchCompany locations with full address and contact details
DepartmentOrganizational units that employees and assets belong to
EmployeeUser accounts with HR profile data, branch and department membership
ManufactureDevice and equipment manufacturers used by asset models
VendorSuppliers that provide hardware, software, and services
DepreciationValuation profiles that plan asset value over time
Asset Model GroupHigh-level categories for asset models
Asset Model Sub GroupFine-grained categories within an asset model group
Asset ModelCatalog of equipment types that assets are based on
AssetIndividual physical assets with lifecycle stages and assignment
My AssetSelf-service portal showing assets assigned to the logged-in user

Branch

The Branch feature manages the company's physical locations. Each branch records its street address, city, state, postal code, country, and the phone and email contacts that employees and vendors can reach. Branches provide the organizational anchor for employee assignment and for understanding where assets are located.

Key capabilities:

  • Maintain a master list of all company locations
  • Capture complete address and contact information per location
  • Associate employees and assets with a specific branch
  • Attach images and documents to a branch record

Department

The Department feature organizes the company into functional units such as Information Technology, Human Resources, Finance, and Operations. Every employee is assigned to a department, which makes it easy to see who is accountable for an asset and how equipment is distributed across the organization.

Key capabilities:

  • Maintain a master list of organizational units
  • Assign employees to their department
  • Support department-level reporting and accountability
  • Attach images and documents to a department record

Employee

The Employee feature bridges user accounts and the asset inventory. Each employee has an HR profile with an employee number, full name, and summary, and is linked to a branch and a department. These profiles are the people to whom assets are assigned.

Key capabilities:

  • Register employees with HR profile data
  • Link each employee to a branch and department
  • Serve as the assignment target for asset records
  • Provide the foundation for the My Asset self-service experience

Manufacture

The Manufacture feature maintains the master list of equipment brands and manufacturers, such as Dell, Apple, and Lenovo. Asset models reference a manufacturer so the inventory always carries consistent brand information without repeated free-text entry.

Key capabilities:

  • Maintain a master list of equipment manufacturers
  • Link asset models to their manufacturer
  • Keep brand information consistent across the inventory
  • Attach images and documents to a manufacturer record

Vendor

The Vendor feature tracks the suppliers that provide hardware, software, and services. Each vendor records its address, phone, website, and a named contact person. Purchase records on assets reference the vendor, giving a complete procurement history.

Key capabilities:

  • Maintain a master list of approved suppliers
  • Capture contact person details for each vendor
  • Reference vendors from asset purchase records
  • Attach images and documents to a vendor record

Depreciation

The Depreciation feature defines how the value of assets declines over time. Depreciation profiles, such as a three-year or five-year linear schedule, are applied to asset models so finance teams can plan replacement cycles and understand asset value consistently.

Key capabilities:

  • Define depreciation profiles by amount or percentage
  • Apply profiles to asset models
  • Support value planning and replacement budgeting
  • Attach images and documents to a depreciation profile

Asset Model Group

The Asset Model Group feature provides the top-level classification for the asset catalog. Groups such as Computers, Networking, Peripherals, and Software organize asset models into broad categories that are easy to browse and report on.

Key capabilities:

  • Maintain high-level categories for the asset catalog
  • Organize asset models into logical groupings
  • Support category-level filtering and reporting
  • Attach images and documents to a group record

Asset Model Sub Group

The Asset Model Sub Group feature refines the catalog with finer-grained categories inside each group. For example, the Computers group can contain sub groups for Laptops, Desktops, and Servers, letting the team classify equipment precisely before it reaches the asset level.

Key capabilities:

  • Organize asset models within a parent group
  • Provide precise classification for the catalog
  • Support detailed filtering and reporting
  • Attach images and documents to a sub group record

Asset Model

The Asset Model feature is the catalog of equipment types the organization standardizes on, such as a Dell Latitude 5420 laptop or a Cisco Catalyst 9200 switch. Each model belongs to a group and sub group, references a manufacturer and depreciation profile, and serves as the template for individual asset records.

Key capabilities:

  • Define standard equipment types with specifications
  • Link each model to group, sub group, manufacturer, and depreciation profile
  • Use models as the basis for creating asset records
  • Attach images and documents to a model record

Asset

The Asset feature is the heart of Asset Manager. Each asset record represents one physical item with a unique tag and serial number, a link to its model, and full procurement information including purchase date, order number, supplier, cost, and warranty period. Assets move through defined lifecycle stages and can be assigned to employees.

Key capabilities:

  • Track the full asset lifecycle: Ready to Assign, Assigned, Repair, Quarantine, and Missing
  • Enforce assignment rules, including reassignment and return workflows
  • Record purchase, warranty, and end-of-life information per asset
  • Capture BYOD status and full specifications
  • Attach documents and images to each asset record
  • Apply assignment control so an active asset cannot be assigned to a second person

My Asset

My Asset is the self-service portal for employees. It shows only the assets currently assigned to the logged-in user, giving each person a clear view of the equipment they are responsible for. Guests and administrators use this portal as the personal inventory view.

Key capabilities:

  • Show only assets assigned to the logged-in user
  • Provide a read-only view of assigned equipment and its status
  • Give guests and administrators an immediate personal inventory
  • Reduce helpdesk volume by answering the question "what do I have?"

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
GetTaxListHandler.cs
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
CreateTaxHandler.cs
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
DeleteTaxHandler.cs
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:

ApiResponse.cs
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.

MethodRouteActionAuth
GET/api/{entity}Paginated list with search & sortRequired
GET/api/{entity}/{id}Get by IDRequired
POST/api/{entity}Create new recordRequired
PUT/api/{entity}Update existing recordRequired
DELETE/api/{entity}/{id}Delete recordRequired

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:

_Layout.cshtml
// 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:

basic-vue-setup.js
// 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.

1 Vue Setup for Row Selection
Index.cshtml.js — Vue Setup
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');
2 DataTable Initialization
Index.cshtml.js — DataTable
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.

1 Form State & Reactivity
Create.cshtml.js — Form Setup
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');
2 Client-Side Validation
Create.cshtml.js — Validation
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;
}
3 Submit with 500ms Smooth Delay
Create.cshtml.js — Submit
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:

loading-pattern.js
// 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:

confirm-delete.js
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:

const { createApp, ref, reactive, onMounted } = Vue;
contentReady, loading, errorMessage states
500ms smooth delay before async operations
Loading spinner v-bind:disabled="submitting"
Success (3s) + Error (4s) auto-hide notifications
Custom modal for delete (not confirm())
Mount on #app-{action} (e.g., #app-create)
onMounted for initial data fetching

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.

Important — before you start: make sure .ai-assisted/DATA-DICTIONARY.md has been updated to match the new application you are about to build. The AI builds exactly what that file describes — template placeholders ([ ... ]), the ## EXAMPLE app, or data from a previous project would be built as-is.

What the AI Generates Automatically

One command produces three deliverables:

FEATURE.md — business source of truth (Phase 0)
PRD.md — technical blueprint / build backlog (Phase 1)
The full application, feature by feature (Phase 2)
Entity Types Auto-Detected by AI
Pattern in EntityDetected Type
public ICollection? Items { get; set; }Master-Detail
public string {X}Id { get; set; } + navigation propertyWith Lookup
Neither pattern abovePure Master Data
: BaseEntity, IHasAutoNumberAdds auto-numbering
Each Feature Is Generated With 18 Files

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

{Entity}Controller.cs
4 CQRS Handlers + 2 Validators
{Entity}Endpoint.cs
4 Views (Index, Create, Edit, Detail)
4 JS Files (collocated with views)
Program.cs + DbContext updates
Maintenance Mode — Adding a Single Feature

Once the application is customized (AppSettings:Name is no longer Indotalent), the pipeline is inactive. To add a single feature, work directly with .ai-assisted/SKILL-SOFTWARE-ENGINEERING.md: create the entity class in Data/Entities/{Entity}.cs and let the AI generate the feature following the skill.

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.

PURE MASTER DATA

Generate a simple CRUD feature with no relationships:

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

Generate a feature that references another entity via foreign key:

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

Generate a header-detail feature (e.g., Sales Order with line items):

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

Generate a feature with pre-populated seed data:

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:

Limit Context to One Folder

"Read Areas/Admin/Currency/ and generate a new feature following the same pattern."
This restricts the AI to just the Currency feature folder, saving thousands of tokens.

Reference an Existing Entity

"Generate full CRUD for Category. Use Tax as the template. Follow the skill."
The AI will use Tax as a reference and adapt it for Category.

Avoid Vague Prompts

"Make me a CRUD" → Too vague. The AI doesn't know your patterns.
"Generate full CRUD for Category. Follow the skill." → The AI knows exactly what to do.

Chain Multiple Entities

"Generate full CRUD for Category, Product, and Customer. Follow the skill."
One prompt, multiple entities. The AI processes each independently.

📖 For the complete set of ready-to-use prompts (Options 1–5), open .ai-assisted/SKILL-SOFTWARE-ENGINEERING.md → section "For Users: What to Say to Your AI".


Indotalent Enterprise Kit — Technical Documentation v1.0
Built with ASP.NET Core MVC 10 · Vue 3 · Hangfire · Serilog · EF Core · VSA Architecture