dealroom/templates/requests.templ

package templates

import "dealroom/internal/model"
import "fmt"

type RequestItem struct {
	ID            string
	ItemNumber    string
	Section       string
	Description   string
	Priority      string
	AtlasStatus   string
	AtlasNote     string
	Confidence    int
	BuyerComment  string
	SellerComment string
	BuyerGroup    string
}

type RequestsByGroup struct {
	Name     string
	Requests []*RequestItem
}

templ RequestListPage(profile *model.Profile, deals []*model.Deal, dealRequests map[string][]*RequestsByGroup) {
	@Layout(profile, "requests") {
		<div class="space-y-5">
			<div class="flex items-center justify-between">
				<div>
					<h1 class="text-2xl font-bold">Request Lists</h1>
					<p class="text-sm text-gray-500 mt-1">Diligence request tracking across all deals.</p>
				</div>
				<div class="flex items-center gap-3">
					<select id="dealFilter" onchange="filterRequests()" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-100 focus:border-teal-500 focus:outline-none">
						<option value="">All Deals</option>
						for _, deal := range deals {
							<option value={ deal.ID }>{ deal.Name }</option>
						}
					</select>
					<select id="groupFilter" onchange="filterRequests()" class="px-3 py-2 bg-gray-800 border border-gray-700 rounded-lg text-sm text-gray-100 focus:border-teal-500 focus:outline-none">
						<option value="">All Groups</option>
					</select>
				</div>
			</div>

			for _, deal := range deals {
				if groups, ok := dealRequests[deal.ID]; ok && len(groups) > 0 {
					<div class="bg-gray-900 rounded-lg border border-gray-800 deal-section" data-deal-id={ deal.ID }>
						<div class="p-4 border-b border-gray-800">
							<div class="flex items-center gap-2">
								<h2 class="text-sm font-semibold">{ deal.Name }</h2>
								@StageBadge(deal.Stage)
								<span class="text-xs text-gray-500">· { deal.TargetCompany }</span>
							</div>
						</div>

						for _, group := range groups {
							<div class="border-b border-gray-800 last:border-b-0 group-section" data-group={ group.Name }>
								<div class="px-4 py-2 bg-gray-800/30">
									<span class="text-xs font-medium text-teal-400">{ group.Name }</span>
									<span class="text-xs text-gray-500 ml-2">{ fmt.Sprintf("%d items", len(group.Requests)) }</span>
								</div>
								<table class="w-full">
									<thead>
										<tr class="border-b border-gray-800/50">
											<th class="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider w-16">#</th>
											<th class="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider w-24">Section</th>
											<th class="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider">Request Item</th>
											<th class="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider w-16">Priority</th>
											<th class="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider w-20">
												<span class="flex items-center gap-1 text-teal-400">🤖 Atlas</span>
											</th>
											<th class="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider w-16">Conf.</th>
											<th class="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider w-[150px]">💬 Buyer</th>
											<th class="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider w-[150px]">💬 Seller</th>
											<th class="text-left px-4 py-2 text-xs font-medium text-gray-500 uppercase tracking-wider w-[180px]">🤖 Atlas Note</th>
										</tr>
									</thead>
									<tbody class="divide-y divide-gray-800/30">
										for _, req := range group.Requests {
											<tr class="hover:bg-gray-800/20">
												<td class="px-4 py-2 text-xs text-gray-500">{ req.ItemNumber }</td>
												<td class="px-4 py-2 text-xs text-gray-400">{ req.Section }</td>
												<td class="px-4 py-2 text-sm">{ req.Description }</td>
												<td class="px-4 py-2">@PriorityBadge(req.Priority)</td>
												<td class="px-4 py-2">@StatusIcon(req.AtlasStatus)</td>
												<td class="px-4 py-2 text-xs text-gray-500">
													if req.Confidence > 0 {
														{ fmt.Sprintf("%d%%", req.Confidence) }
													}
												</td>
												<td class="px-4 py-2 text-xs text-gray-400 max-w-[150px] truncate" title={ req.BuyerComment }>
													if req.BuyerComment != "" {
														{ req.BuyerComment }
													} else {
														<span class="italic text-gray-600">Add comment...</span>
													}
												</td>
												<td class="px-4 py-2 text-xs text-gray-400 max-w-[150px] truncate" title={ req.SellerComment }>
													if req.SellerComment != "" {
														{ req.SellerComment }
													} else {
														<span class="italic text-gray-600">Add comment...</span>
													}
												</td>
												<td class="px-4 py-2 text-xs text-gray-500 max-w-[180px] truncate" title={ req.AtlasNote }>
													{ req.AtlasNote }
												</td>
											</tr>
										}
									</tbody>
								</table>
							</div>
						}
					</div>
				}
			}
			<script>
				function filterRequests() {
					var dealId = document.getElementById('dealFilter').value;
					var group = document.getElementById('groupFilter').value;
					document.querySelectorAll('.deal-section').forEach(function(el) {
						var show = !dealId || el.getAttribute('data-deal-id') === dealId;
						el.style.display = show ? '' : 'none';
						if (show) {
							el.querySelectorAll('.group-section').forEach(function(gs) {
								var gShow = !group || gs.getAttribute('data-group') === group;
								gs.style.display = gShow ? '' : 'none';
							});
						}
					});
				}
			</script>
		</div>
	}
}