Portal UI
Developer Guide

<div class="project-list-header">
    <TabNavigation
        tabs="tabs"
        activeTab="'all'"
        tabCounts="{ 'all': state.total }"
        onTabChange.bind="handleTabChange"
        style="'notebook'"/>

    <div class="project-list-actions">
        <SearchBar
            value="state.searchTerm"
            placeholder="'Search projects...'"
            onChange.bind="handleSearch"/>

        <SortDropdown
            value="state.sortBy"
            options="state.sortOptions"
            onChange.bind="handleSort"/>

        <ExportDropdown
            enableExcel="state.exportSettings.excel"
            enablePdf="state.exportSettings.pdf"
            onExport.bind="handleExport"
            disabled="state.loading or state.projects.length === 0"/>

        <ViewSwitcher
            t-if="props.onViewModeChange"
            currentView="props.currentViewMode"
            onViewChange.bind="props.onViewModeChange"/>
    </div>
</div>

this.state = useState({
    projects: [], loading: false, total: 0,
    searchTerm: '', sortBy: 'name',
    currentPage: 1, totalPages: 1, limit: 10,
    sortOptions: [],                           // [{value, label}]
    exportSettings: { excel: true, pdf: true },
});
this.tabs = [{ id: 'all', label: 'Projects', badge: 0 }];

handleSearch(term)      { this.state.searchTerm = term;   this.state.currentPage = 1; this.load(); }
handleSort(value)       { this.state.sortBy   = value;    this.state.currentPage = 1; this.load(); }
handleTabChange(tabId)  { /* update domain, reload */ }

// Convert backend dict → dropdown array
this.state.sortOptions = Object.entries(response.data.sortings || {})
    .map(([value, label]) => ({ value, label }));

<FilterDropdown
    t-if="!props.projectId"
    value="state.filterBy"
    options="state.filterOptions"
    icon="'fa-filter'"
    onChange.bind="handleFilterChange"/>

<div t-if="state.loading">
    <LoadingSpinner show="true" message="'Loading projects...'"/>
</div>

<div t-elif="state.error" class="project-list-error">
    <i class="fa fa-exclamation-triangle fa-2x"/>
    <p t-esc="state.error"/>
    <button class="btn-retry" t-on-click="loadProjects">Retry</button>
</div>

<EmptyState
    t-elif="state.projects.length === 0"
    icon="'fa-folder-open'"
    title="'No projects found'"
    subtitle="state.searchTerm ? 'Try adjusting your search' : 'No projects available'"/>

<div t-else="">
    <!-- render your table / cards here -->

    <Pagination
        currentPage="state.currentPage"
        totalPages="state.totalPages"
        onPageChange.bind="onPageChange"/>
</div>

async handleExport(type) {
    const response = await apiService.call('/my/projects/api/list', {
        page: 1, limit: 10000,
        sortby: this.state.sortBy,
        search: this.state.searchTerm,
    });
    if (!response.success || !response.data.projects.length) return { data: [] };

    const headers = [
        { key: 'name',         label: 'Project Name',    width: 200 },
        { key: 'partner_name', label: 'Customer',        width: 150 },
        { key: 'user_name',    label: 'Project Manager', width: 150 },
        { key: 'task_count',   label: 'Tasks',           width:  80, align: 'center' },
    ];

    const data = response.data.projects.map(p => ({
        name:         p.name,
        partner_name: p.partner_id?.name || '-',
        user_name:    p.user_id?.name    || '-',
        task_count:   p.task_count       || 0,
    }));

    return {
        headers, data,
        filename:    'projects',
        sheetName:   'Projects',
        title:       'Projects',
        subtitle:    this.state.searchTerm ? `Search: ${this.state.searchTerm}` : '',
        orientation: 'portrait',
    };
}

<div class="detail-header">
    <button class="btn-back-header" t-on-click="goBack">
        <i class="fa fa-arrow-left"/>
    </button>

    <div class="header-title">
        <h2>
            <t t-esc="state.task.name"/>
            <StatusBadge
                label="state.task.state_label"
                variant="getStateVariant(state.task.state)"/>
        </h2>
    </div>

    <RecordNavigator
        currentRecordId="props.taskId"
        prevRecordId="state.prevTaskId"
        nextRecordId="state.nextTaskId"
        onNavigate.bind="navigateToTask"
        recordLabel="'Task'"/>
</div>

getStateVariant(state) {
    // Map backend state keys → StatusBadge variants
    return ({
        '01_in_progress': 'info',
        '02_changes_requested': 'warning',
        '03_approved': 'success',
        '1_done': 'success',
        '1_canceled': 'danger',
    })[state] || 'default';
}

<CardView
    items="state.projects"
    onCardClick.bind="viewProject"
    emptyMessage="'No projects available'">
    <t t-set-slot="card" t-slot-scope="scope">
        <div class="project-card">
            <h3 t-esc="scope.item.name"/>
            <StatusBadge label="scope.item.state_label"/>
            <p class="muted" t-esc="scope.item.partner_id?.name or '-'"/>
        </div>
    </t>
</CardView>