Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement budget alerts & limit #551

Merged
merged 12 commits into from
Jan 24, 2025
Merged

Implement budget alerts & limit #551

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
54c8315
add: skeletons + usage limits components
ben-fornefeld Jan 10, 2025
6d9a278
improve: billing limit components
ben-fornefeld Jan 10, 2025
93a6b9b
add: billing limits states + api layer
ben-fornefeld Jan 10, 2025
673272e
fix account selector billing url retrieval
ben-fornefeld Jan 17, 2025
e644a98
add billing api logic + improve billing alerts components
ben-fornefeld Jan 17, 2025
a742e8e
Update text for usage limits
mlejva Jan 18, 2025
eada5d4
Fix build error
mlejva Jan 19, 2025
1e45455
prevent form submission with empty values
ben-fornefeld Jan 20, 2025
379cc26
update fetch headers for billing alerts
ben-fornefeld Jan 24, 2025
1337573
update teams retrieval for is_blocked & blocked_reason
ben-fornefeld Jan 24, 2025
830af85
add team blocked banner on page layout
ben-fornefeld Jan 24, 2025
04f223f
improve team blocked banner
ben-fornefeld Jan 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions apps/web/src/app/(dashboard)/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Suspense, useEffect, useState } from 'react'
import { useLocalStorage } from 'usehooks-ts'

import {
ArrowUpRight,
BarChart,
CreditCard,
FileText,
Expand All @@ -27,6 +28,7 @@ import { PersonalContent } from '@/components/Dashboard/Personal'
import { TemplatesContent } from '@/components/Dashboard/Templates'
import { SandboxesContent } from '@/components/Dashboard/Sandboxes'
import { DeveloperContent } from '@/components/Dashboard/Developer'
import { Button } from '@/components/Button'

function redirectToCurrentURL() {
const url = typeof window !== 'undefined' ? window.location.href : undefined
Expand Down Expand Up @@ -149,11 +151,25 @@ const Dashboard = ({ user }) => {
currentTeam={currentTeam}
setCurrentTeam={setCurrentTeam}
setTeams={setTeams}
domainState={domainState}
/>
<div className="flex-1 md:pl-10 pb-16">
<h2 className="text-2xl mb-2 font-bold">
{selectedItem[0].toUpperCase() + selectedItem.slice(1)}
</h2>
<div className="flex flex-col w-full">
<h2 className="text-2xl mb-2 font-bold">
{selectedItem[0].toUpperCase() + selectedItem.slice(1)}
</h2>
{currentTeam.is_blocked && (
<Button
onClick={() => setSelectedItem('usage')}
variant="desctructive"
className="mb-3 dark:ring-0 w-fit dark:bg-red-900/20 whitespace-break-spaces rounded-lg h-8 items-center text-xs"
>
Usage is blocked: {currentTeam.blocked_reason}.
<ArrowUpRight className="w-4 h-4" />
</Button>
)}
</div>

<div className="border border-white/5 w-full h-[1px] mb-10" />
<MainContent
selectedItem={selectedItem}
Expand All @@ -178,6 +194,7 @@ const Sidebar = ({
currentTeam,
setCurrentTeam,
setTeams,
domainState,
}) => (
<div className="md:h-full md:w-48 space-y-2 pb-10 md:pb-0">
<AccountSelector
Expand All @@ -186,6 +203,7 @@ const Sidebar = ({
currentTeam={currentTeam}
setCurrentTeam={setCurrentTeam}
setTeams={setTeams}
domainState={domainState}
/>

<div className="flex flex-row justify-center space-x-4 md:space-x-0 md:space-y-2 md:flex-col">
Expand Down
8 changes: 5 additions & 3 deletions apps/web/src/components/Dashboard/AccountSelector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,22 +19,24 @@ import {
} from '../ui/alert-dialog'
import { useState } from 'react'
import { Button } from '../Button'

const createTeamUrl = `${process.env.NEXT_PUBLIC_BILLING_API_URL}/teams`
import { getBillingUrl } from '@/app/(dashboard)/dashboard/utils'

export const AccountSelector = ({
teams,
user,
currentTeam,
setCurrentTeam,
setTeams,
domainState,
}) => {
const [domain] = domainState

const [isDialogOpen, setIsDialogOpen] = useState(false)
const [teamName, setTeamName] = useState('')
const closeDialog = () => setIsDialogOpen(false)

const createNewTeam = async () => {
const res = await fetch(createTeamUrl, {
const res = await fetch(getBillingUrl(domain, '/teams'), {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Expand Down
Loading
Loading