inter-hub/Web/View/RequirementCandidates/Index.hs

module Web.View.RequirementCandidates.Index where

import Web.Types
import Generated.Types
import IHP.Prelude
import IHP.ViewPrelude

data IndexView = IndexView
    { candidates    :: ![RequirementCandidate]
    , assignments   :: ![ReviewerAssignment]
    , users         :: ![User]
    , widgets       :: ![Widget]
    , mStatusFilter :: !(Maybe Text)
    }

instance View IndexView where
    html IndexView { .. } = [hsx|
        <div class="flex items-center justify-between mb-6">
            <h1 class="text-2xl font-semibold">Requirement Candidates</h1>
            <div class="flex gap-2">
                <a href={MyQueueAction}
                   class="text-sm border border-gray-300 px-3 py-1.5 rounded hover:bg-gray-50">
                    My Queue
                </a>
                <a href={NewRequirementCandidateAction}
                   class="bg-indigo-600 text-white text-sm font-medium px-4 py-2 rounded hover:bg-indigo-700">
                    New Candidate
                </a>
            </div>
        </div>

        <div class="flex gap-2 mb-4 flex-wrap">
            {renderFilterPills mStatusFilter}
        </div>

        {if null candidates
            then [hsx|<p class="text-sm text-gray-500">No candidates found.</p>|]
            else [hsx|
                <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
                    <table class="w-full text-sm">
                        <thead class="bg-gray-50 border-b border-gray-200">
                            <tr>
                                <th class="text-left px-4 py-3 font-medium text-gray-700">Title</th>
                                <th class="text-left px-4 py-3 font-medium text-gray-700">Widget</th>
                                <th class="text-left px-4 py-3 font-medium text-gray-700">Category</th>
                                <th class="text-left px-4 py-3 font-medium text-gray-700">Status</th>
                                <th class="text-left px-4 py-3 font-medium text-gray-700">Reviewer</th>
                                <th class="text-left px-4 py-3 font-medium text-gray-700">Created</th>
                            </tr>
                        </thead>
                        <tbody>
                            {forEach candidates (renderRow assignments users widgets)}
                        </tbody>
                    </table>
                </div>
            |]}
    |]

renderFilterPills :: Maybe Text -> Html
renderFilterPills current = [hsx|
    {renderPill Nothing current "All"}
    {renderPill (Just "open") current "Open"}
    {renderPill (Just "in_review") current "In Review"}
    {renderPill (Just "accepted") current "Accepted"}
    {renderPill (Just "rejected") current "Rejected"}
    {renderPill (Just "deferred") current "Deferred"}
|]

renderPill :: Maybe Text -> Maybe Text -> Text -> Html
renderPill target current label =
    let isActive = target == current
        baseClass = "text-xs px-3 py-1.5 rounded-full border "
        cls = if isActive
                then baseClass <> "bg-indigo-600 text-white border-indigo-600"
                else baseClass <> "border-gray-300 text-gray-600 hover:bg-gray-50"
        url = case target of
            Nothing -> pathTo RequirementCandidatesAction
            Just s  -> pathTo RequirementCandidatesAction <> "?status=" <> s
    in [hsx|<a href={url} class={cls}>{label}</a>|]

renderRow :: [ReviewerAssignment] -> [User] -> [Widget] -> RequirementCandidate -> Html
renderRow assignments users widgets c =
    let mAssignment = find (\ra -> ra.candidateId == c.id) assignments
        mReviewer   = mAssignment >>= \ra -> find (\u -> u.id == ra.userId) users
        mWidget     = find (\w -> w.id == c.sourceWidgetId) widgets
    in [hsx|
    <tr class="border-b border-gray-100 hover:bg-gray-50">
        <td class="px-4 py-3">
            <a href={ShowRequirementCandidateAction { requirementCandidateId = c.id }}
               class="font-medium text-indigo-600 hover:text-indigo-800">
                {c.title}
            </a>
        </td>
        <td class="px-4 py-3 text-gray-500 text-xs">
            {maybe "—" (.name) mWidget}
        </td>
        <td class="px-4 py-3">
            <span class="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">{c.category}</span>
        </td>
        <td class="px-4 py-3">
            <span class={statusClass c.status <> " text-xs px-2 py-0.5 rounded"}>{c.status}</span>
        </td>
        <td class="px-4 py-3 text-gray-500 text-xs">
            {maybe "Unassigned" (.name) mReviewer}
        </td>
        <td class="px-4 py-3 text-gray-400 text-xs">{show c.createdAt}</td>
    </tr>
|]

statusClass :: Text -> Text
statusClass "open"      = "bg-blue-100 text-blue-700"
statusClass "in_review" = "bg-yellow-100 text-yellow-800"
statusClass "accepted"  = "bg-green-100 text-green-800"
statusClass "rejected"  = "bg-red-100 text-red-800"
statusClass "deferred"  = "bg-gray-100 text-gray-600"
statusClass _           = "bg-gray-100 text-gray-600"