Indotalent Enterprise Kit Documentation

Product Overview & Personas

Project Manager (PM) is a resource and project management application that enables organizations to manage staff assignments, project charters, timesheet tracking, and skill profiling — with manager approval workflows and self-service capabilities for staff members.

Product Scope

The platform covers 14 features across 21 entities: organizational master data, staff profiles, project charters, project assignments with allocation tracking, timesheet entry and approval, and a user skill matrix. Master data and operational features are managed centrally, while staff members access a self-service portal limited to their own data.

Personas & Roles

Master Data Management

The organization's structure and classification data are managed through dedicated master data features. These records form the foundation for staff profiles, project charters, and reporting.

Admin and Member users have full CRUD access to all master data; Guest users have no access.

Expert Directory

Staff profiles extend the standard user account with organizational and costing information, turning every user into a managed resource.

Resource status drives assignment decisions and workload monitoring.

Project Charter

Projects are registered as formal charters, classified by project sub-group and optionally linked to a managing branch and client. Each project follows a lifecycle of predefined states.

Project Lifecycle

Project charters support image and document attachments (e.g., approval letters, contracts).

Project Assignment & Allocation

Managers allocate expert staff to projects by creating assignments that define the project role, allocation percentage, and effective period. The system validates that a resource's total allocation does not exceed 100% across overlapping periods.

Assignment Lifecycle

Assignments are the basis for timesheet entry and resource workload monitoring.

Timesheet Tracking & Approval

Staff log daily working hours and activity summaries against their project assignments. Submitted entries flow through a manager approval workflow, providing accurate effort data for billing and workload reporting.

Approval Workflow

Only Draft entries can be submitted, and only Submitted entries can be approved or rejected.

User Skill Matrix

The skill matrix links each staff member to the organization's skill taxonomy with a proficiency rating and years of experience. This supports expert discovery and staffing decisions.

Skills can carry supporting image and document attachments (e.g., certificates).

Self-Service Portal

Guest users access a self-service portal covering their own assignments, timesheets, and skills. All operations are automatically scoped to the authenticated user, guaranteeing data isolation.

The self-service portal keeps staff in control of their day-to-day records while managers retain oversight and approval authority.

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.

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: