apps/sudo/app/routes/requests.tsx · flagon-io/g1t

description="Owners asking for a higher limit, or for help with a month that went past what they meant. g1t answers within one business day; the owner is told in the app and by email."

60

/>

61

62

{REQUEST_STATUSES.map((value) => (

63

<Link

64

key={value}

65

to={requestsHref(value)}

66

aria-current={value === status ? "page" : undefined}

67

className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs whitespace-nowrap transition-colors ${

68

value === status ? "border-merged/50 bg-merged/10 text-merged" : "border-line text-muted hover:border-line-strong hover:text-fg"

69

}`}

70

>

71

{STATUS_LABEL[value]}

72

{value === "open" && openCount != null && <span className="tabular text-faint">{openCount}</span>}

</Link>

))}

</nav>

{done && <Notice tone="ok">{done}</Notice>}

78

{error && <Notice tone="warn">Billing did not answer for requests: {error}</Notice>}

79

</div>

80

81

{rows.length === 0 && !error ? (

82

83

Requests show up here when an owner uses Raise my limit, or tells g1t a month went past what they meant.

</EmptyState>

) : (

rows.map((row) => (

<RequestCard

key={row.request.id}

row={row}

now={now}

error={actionData && "id" in actionData && actionData.id === row.request.id ? actionData : null}

/>

))

)}

</div>

</main>

);

}

function RequestCard({

row,

now,

error,

}: {

row: LimitRequestReview;

106

now: string;

107

error: { error: string; values?: Record<string, string> } | null;

108

}) {

109

const { request, history } = row;

110

const { pathname, search } = useLocation();

111

const wait = waiting(request.createdAt, new Date(now));

112

const open = request.status === "open";

113

const overage = request.kind === "overage";

114

const workspaceAge = age(history.firstSeen, new Date(now));

115

const facts: [string, string][] = [

116

["Plan", history.plan ?? "—"],

117

["Seen for", workspaceAge ?? "—"],

118

["Paid, cleared", `${usd(history.paidClearedMicros)} in ${history.payments} payment${history.payments === 1 ? "" : "s"}`],

119

["Disputes · declines", `${history.disputes} · ${history.declines}`],

120

["Ceiling now", usd(history.ceilingMicros)],

121

["Highest ceiling", usd(history.maxCeilingMicros)],

122

["Owners' spend limit", history.spendLimitMicros == null ? "Automatic or none" : usd(history.spendLimitMicros)],

123

["Last hour · usual hour", `${usd(history.lastHourMicros)} · ${usd(history.averageHourMicros)}`],

124

["Last day", usd(history.lastDayMicros)],

];

return (

<section

id={request.id}

className={`scroll-mt-20 rounded-lg border bg-surface ${open && wait.overdue ? "border-danger/40" : "border-line"}`}

>

{request.workspace}

</Link>

<Badge tone={overage ? "warn" : "lavender"}>{overage ? "Spent more than meant" : "Raise my limit"}</Badge>

138

{request.status === "approved" && <Badge tone="mint">Approved{request.decidedMicros != null ? ` at ${usd(request.decidedMicros)}` : ""}</Badge>}

139

{request.status === "declined" && <Badge tone="danger">Declined</Badge>}

140

</p>

141

142

By <span className="font-mono">{request.createdBy}</span> · <When at={request.createdAt} time />

</p>

</div>

{open && (

Waiting {wait.label}

{wait.overdue ? " · past one business day" : ""}

</p>

)}

</header>

{!overage && (

<div>

<dt className="text-xs text-muted">Asked for</dt>

159

<dd className="tabular mt-0.5 text-lg font-semibold">{usd(request.amountMicros)}</dd>

160

</div>

161

<div>

162

<dt className="text-xs text-muted">Expects to spend a month</dt>

163

<dd className="tabular mt-0.5 text-lg font-semibold">{usd(request.expectedMonthlyMicros)}</dd>

</div>

</dl>

)}

<blockquote className="border-l-2 border-line-strong pl-3 text-sm break-words whitespace-pre-line text-fg-soft">{request.reason}</blockquote>

168

{request.answer && (

169

170

Answer{request.decidedBy ? <> by <span className="font-mono">{request.decidedBy}</span></> : null}: {request.answer}

171

</p>

172

)}

173

{history.months.length > 0 && (

<thead>

<th className="py-1 pr-3 font-medium">Month</th>

179

<th className="py-1 pr-3 text-right font-medium">Charged</th>

</tr>

</thead>

<tbody>

{history.months.map((month) => (

186

187

<td className="py-1 pr-3 font-mono text-muted">{month.month}</td>

188

<td className="tabular py-1 pr-3 text-right">{usd(month.chargedMicros)}</td>

189

<td className="tabular py-1 pr-3 text-right text-muted">{usd(month.costMicros)}</td>

190

<td className="tabular py-1 text-right">{usd(month.paidMicros)}</td>

</tr>

))}

</tbody>

</table>

</div>

)}

{open && (

{error && <Notice tone="error">{error.error}</Notice>}

201

{overage ? (

202

203

Usually answered with a goodwill credit on{" "}

Overages

</Link>

, which also closes this request. Or answer it here.

</p>

) : (

</Field>

)}

</Field>

Decline

</Button>

Approve

</Button>

</div>

</form>

)}

</div>

{facts.map(([label, value]) => (

232

233

<dt className="text-faint">{label}</dt>

234

<dd className="tabular text-fg-soft">{value}</dd>

</div>

))}

</dl>

</div>

</section>

);

}