konnosDashboard
SpendCapModal.tsx125 lines · main
1import { Button, Modal, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from 'ui'
2
3import { DocsButton } from '@/components/ui/DocsButton'
4import { DOCS_URL } from '@/lib/constants'
5
6interface SpendCapModalProps {
7 visible: boolean
8 onHide: () => void
9}
10
11const SpendCapModal = ({ visible, onHide }: SpendCapModalProps) => {
12 return (
13 <Modal
14 hideFooter
15 visible={visible}
16 size="xlarge"
17 header={
18 <div className="flex justify-between items-center">
19 <span>Spend Cap</span>
20 <DocsButton href={`${DOCS_URL}/guides/platform/cost-control#spend-cap`} />
21 </div>
22 }
23 showCloseButton={false}
24 onCancel={() => onHide()}
25 >
26 <Modal.Content>
27 <div className="space-y-4">
28 <p className="text-sm">
29 Enabling the Spend Cap limits your usage to your plan's quota, which controls costs but
30 can restrict your service. Disabling the spend cap removes these limits, but any extra
31 usage beyond the plan's limit will be charged per usage.
32 </p>
33 <p className="text-sm">
34 Launching additional projects or enabling project add-ons will incur additional monthly
35 fees independent of your Spend Cap.
36 </p>
37
38 {/* Maybe instead of a table, show something more interactive like a spend cap playground */}
39 {/* Maybe ideate this in Figma first but this is good enough for now */}
40
41 <Table>
42 <TableHeader className="[&_th]:h-7">
43 <TableRow>
44 <TableHead className="w-[50%]">Item</TableHead>
45 <TableHead className="w-[25%]">Limit</TableHead>
46 <TableHead className="w-[25%]">Rate</TableHead>
47 </TableRow>
48 </TableHeader>
49 <TableBody className="[&_td]:py-2">
50 <TableRow>
51 <TableCell>Disk Size</TableCell>
52 <TableCell>8 GB per project</TableCell>
53 <TableCell translate="no">$0.125 per GB</TableCell>
54 </TableRow>
55
56 <TableRow>
57 <TableCell>Egress</TableCell>
58 <TableCell>250 GB</TableCell>
59 <TableCell translate="no">$0.09 per GB</TableCell>
60 </TableRow>
61
62 <TableRow>
63 <TableCell>Auth MAUs</TableCell>
64 <TableCell>100,000</TableCell>
65 <TableCell translate="no">$0.00325 per user</TableCell>
66 </TableRow>
67
68 <TableRow>
69 <TableCell>Auth Third-Party MAUs</TableCell>
70 <TableCell>100,000</TableCell>
71 <TableCell translate="no">$0.00325 per user</TableCell>
72 </TableRow>
73
74 <TableRow>
75 <TableCell>Auth Single Sign-On MAUs</TableCell>
76 <TableCell>50</TableCell>
77 <TableCell translate="no">$0.015 per user</TableCell>
78 </TableRow>
79
80 <TableRow>
81 <TableCell>Storage Size</TableCell>
82 <TableCell>100 GB</TableCell>
83 <TableCell translate="no">$0.021 per GB</TableCell>
84 </TableRow>
85
86 <TableRow>
87 <TableCell>Storage Image Transformations</TableCell>
88 <TableCell>100 origin images</TableCell>
89 <TableCell translate="no">$5 per 1000 images</TableCell>
90 </TableRow>
91
92 <TableRow>
93 <TableCell>Realtime Concurrent Peak Connections</TableCell>
94 <TableCell>500</TableCell>
95 <TableCell translate="no">$10 per 1000</TableCell>
96 </TableRow>
97
98 <TableRow>
99 <TableCell>Realtime Messages</TableCell>
100 <TableCell>5 Million</TableCell>
101 <TableCell translate="no">$2.50 per Million</TableCell>
102 </TableRow>
103
104 <TableRow>
105 <TableCell>Function Invocations</TableCell>
106 <TableCell>2 Million</TableCell>
107 <TableCell translate="no">$2 per Million</TableCell>
108 </TableRow>
109 </TableBody>
110 </Table>
111 </div>
112 </Modal.Content>
113 <Modal.Separator />
114 <Modal.Content>
115 <div className="flex items-center gap-2">
116 <Button block type="primary" onClick={() => onHide()}>
117 Understood
118 </Button>
119 </div>
120 </Modal.Content>
121 </Modal>
122 )
123}
124
125export default SpendCapModal