Skip to content

Commit 6b5de13

Browse files
izadoesdevizadoesdev
committed
feat: API keys in orgs
1 parent 1be3298 commit 6b5de13

File tree

7 files changed

+115
-22
lines changed

7 files changed

+115
-22
lines changed

‎apps/dashboard/app/(main)/organizations/[slug]/components/overview-tab.tsx‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,11 @@ export function OverviewTab({ organization }: OverviewTabProps) {
4949
<Card>
5050
<CardHeader>
5151
<CardTitle className="flex items-center gap-2">
52-
<BuildingsIcon className="h-5 w-5" size={16} weight="duotone" />
52+
<BuildingsIcon
53+
className="h-5 w-5 not-dark:text-primary"
54+
size={16}
55+
weight="duotone"
56+
/>
5357
Organization Details
5458
</CardTitle>
5559
<CardDescription>
@@ -60,7 +64,7 @@ export function OverviewTab({ organization }: OverviewTabProps) {
6064
<div className="flex items-center gap-3">
6165
<div className="flex-shrink-0">
6266
<CalendarIcon
63-
className="h-4 w-4 text-muted-foreground"
67+
className="h-4 w-4 not-dark:text-primary text-muted-foreground"
6468
size={16}
6569
/>
6670
</div>
@@ -77,7 +81,7 @@ export function OverviewTab({ organization }: OverviewTabProps) {
7781
<div className="flex items-center gap-3">
7882
<div className="flex-shrink-0">
7983
<GlobeIcon
80-
className="h-4 w-4 text-muted-foreground"
84+
className="h-4 w-4 not-dark:text-primary text-muted-foreground"
8185
size={16}
8286
/>
8387
</div>
@@ -94,7 +98,7 @@ export function OverviewTab({ organization }: OverviewTabProps) {
9498
<div className="flex items-center gap-3">
9599
<div className="flex-shrink-0">
96100
<UsersIcon
97-
className="h-4 w-4 text-muted-foreground"
101+
className="h-4 w-4 not-dark:text-primary text-muted-foreground"
98102
size={16}
99103
/>
100104
</div>
@@ -112,7 +116,11 @@ export function OverviewTab({ organization }: OverviewTabProps) {
112116
<Card>
113117
<CardHeader>
114118
<CardTitle className="flex items-center gap-2">
115-
<ChartBarIcon className="h-5 w-5" size={16} weight="duotone" />
119+
<ChartBarIcon
120+
className="h-5 w-5 not-dark:text-primary"
121+
size={16}
122+
weight="duotone"
123+
/>
116124
Quick Stats
117125
</CardTitle>
118126
<CardDescription>
@@ -163,7 +171,11 @@ export function OverviewTab({ organization }: OverviewTabProps) {
163171
<CardHeader>
164172
<div className="flex items-center justify-between">
165173
<CardTitle className="flex items-center gap-2">
166-
<UsersIcon className="h-5 w-5" size={16} weight="duotone" />
174+
<UsersIcon
175+
className="h-5 w-5 not-dark:text-primary"
176+
size={16}
177+
weight="duotone"
178+
/>
167179
Recent Team Members
168180
</CardTitle>
169181
<Button
@@ -232,7 +244,10 @@ export function OverviewTab({ organization }: OverviewTabProps) {
232244
{member.role}
233245
</Badge>
234246
<div className="flex items-center gap-1 text-muted-foreground text-xs">
235-
<ClockIcon className="h-3 w-3" size={16} />
247+
<ClockIcon
248+
className="h-3 w-3 not-dark:text-primary"
249+
size={16}
250+
/>
236251
{dayjs(member.createdAt).fromNow()}
237252
</div>
238253
</div>
@@ -242,7 +257,7 @@ export function OverviewTab({ organization }: OverviewTabProps) {
242257
) : (
243258
<div className="py-8 text-center">
244259
<UsersIcon
245-
className="mx-auto mb-2 h-8 w-8 text-muted-foreground"
260+
className="mx-auto mb-2 h-8 w-8 not-dark:text-primary text-muted-foreground"
246261
size={32}
247262
weight="duotone"
248263
/>

‎apps/dashboard/app/(main)/organizations/[slug]/components/settings-tab.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,16 @@ import {
44
FloppyDiskIcon,
55
GearIcon,
66
GlobeIcon,
7+
KeyIcon,
78
TrashIcon,
89
WarningIcon,
910
} from '@phosphor-icons/react';
1011
import { useRouter } from 'next/navigation';
1112
import { useState } from 'react';
1213
import { toast } from 'sonner';
14+
import { ApiKeyCreateDialog } from '@/components/organizations/api-key-create-dialog';
15+
import { ApiKeyDetailDialog } from '@/components/organizations/api-key-detail-dialog';
16+
import { ApiKeyList } from '@/components/organizations/api-key-list';
1317
import {
1418
AlertDialog,
1519
AlertDialogAction,
@@ -49,6 +53,11 @@ export function SettingsTab({ organization }: SettingsTabProps) {
4953
const [isSaving, setIsSaving] = useState(false);
5054
const [isDeleting, setIsDeleting] = useState(false);
5155

56+
// API Keys dialogs state
57+
const [showCreateKey, setShowCreateKey] = useState(false);
58+
const [showKeyDetail, setShowKeyDetail] = useState(false);
59+
const [selectedKeyId, setSelectedKeyId] = useState<string | null>(null);
60+
5261
const { updateOrganizationAsync, deleteOrganizationAsync } =
5362
useOrganizations();
5463

@@ -260,6 +269,33 @@ export function SettingsTab({ organization }: SettingsTabProps) {
260269
</CardContent>
261270
</Card>
262271

272+
{/* API Keys */}
273+
<Card>
274+
<CardHeader>
275+
<CardTitle className="flex items-center gap-2">
276+
<KeyIcon
277+
className="h-5 w-5 not-dark:text-primary"
278+
size={16}
279+
weight="duotone"
280+
/>
281+
API Keys
282+
</CardTitle>
283+
<CardDescription>
284+
Create and manage API keys for this organization
285+
</CardDescription>
286+
</CardHeader>
287+
<CardContent>
288+
<ApiKeyList
289+
onCreateNew={() => setShowCreateKey(true)}
290+
onSelect={(id) => {
291+
setSelectedKeyId(id);
292+
setShowKeyDetail(true);
293+
}}
294+
organizationId={organization.id}
295+
/>
296+
</CardContent>
297+
</Card>
298+
263299
{/* Danger Zone */}
264300
<Card className="border-destructive/20 bg-destructive/5">
265301
<CardHeader>
@@ -285,6 +321,21 @@ export function SettingsTab({ organization }: SettingsTabProps) {
285321
and any shared resources will be removed.
286322
</p>
287323
</div>
324+
325+
{/* API Key Dialogs */}
326+
<ApiKeyCreateDialog
327+
onOpenChange={setShowCreateKey}
328+
open={showCreateKey}
329+
organizationId={organization.id}
330+
/>
331+
<ApiKeyDetailDialog
332+
keyId={selectedKeyId}
333+
onOpenChange={(open) => {
334+
setShowKeyDetail(open);
335+
if (!open) setSelectedKeyId(null);
336+
}}
337+
open={showKeyDetail}
338+
/>
288339
<Button
289340
className="rounded-lg"
290341
onClick={() => setShowDeleteDialog(true)}

‎apps/dashboard/app/(main)/organizations/[slug]/page.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,10 @@ function OrganizationNotFound() {
134134
</p>
135135
<Button asChild className="rounded">
136136
<Link href="/organizations">
137-
<CaretLeftIcon className="mr-2 h-4 w-4" size={16} />
137+
<CaretLeftIcon
138+
className="mr-2 h-4 w-4 not-dark:text-primary"
139+
size={16}
140+
/>
138141
Back to Organizations
139142
</Link>
140143
</Button>
@@ -261,7 +264,10 @@ export default function OrganizationPage() {
261264
className="relative h-10 cursor-pointer touch-manipulation whitespace-nowrap rounded-none px-2 text-xs transition-colors hover:bg-muted/50 sm:px-4 sm:text-sm"
262265
value="overview"
263266
>
264-
<ChartBarIcon className="mr-1 h-3 w-3" size={16} />
267+
<ChartBarIcon
268+
className="mr-1 h-3 w-3 not-dark:text-primary"
269+
size={16}
270+
/>
265271
<span className="hidden sm:inline">Overview</span>
266272
{activeTab === 'overview' && (
267273
<div className="absolute bottom-0 left-0 h-[2px] w-full rounded bg-primary" />
@@ -271,7 +277,10 @@ export default function OrganizationPage() {
271277
className="relative h-10 cursor-pointer touch-manipulation whitespace-nowrap rounded-none px-2 text-xs transition-colors hover:bg-muted/50 sm:px-4 sm:text-sm"
272278
value="teams"
273279
>
274-
<UsersIcon className="mr-1 h-3 w-3" size={16} />
280+
<UsersIcon
281+
className="mr-1 h-3 w-3 not-dark:text-primary"
282+
size={16}
283+
/>
275284
<span className="hidden sm:inline">Teams</span>
276285
{activeTab === 'teams' && (
277286
<div className="absolute bottom-0 left-0 h-[2px] w-full rounded bg-primary" />
@@ -281,7 +290,10 @@ export default function OrganizationPage() {
281290
className="relative h-10 cursor-pointer touch-manipulation whitespace-nowrap rounded-none px-2 text-xs transition-colors hover:bg-muted/50 sm:px-4 sm:text-sm"
282291
value="settings"
283292
>
284-
<GearIcon className="mr-1 h-3 w-3" size={16} />
293+
<GearIcon
294+
className="mr-1 h-3 w-3 not-dark:text-primary"
295+
size={16}
296+
/>
285297
<span className="hidden sm:inline">Settings</span>
286298
{activeTab === 'settings' && (
287299
<div className="absolute bottom-0 left-0 h-[2px] w-full rounded bg-primary" />

‎apps/dashboard/app/(main)/organizations/components/onboarding-card.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export function OnboardingCard({ onCreateOrganization }: OnboardingCardProps) {
4444
<CardHeader className="text-center">
4545
<div className="mx-auto mb-4 w-fit rounded-full border border-primary/20 bg-primary/10 p-4">
4646
<BuildingsIcon
47-
className="h-8 w-8 text-primary"
47+
className="h-8 w-8 not-dark:text-primary text-primary"
4848
size={32}
4949
weight="duotone"
5050
/>
@@ -60,7 +60,7 @@ export function OnboardingCard({ onCreateOrganization }: OnboardingCardProps) {
6060
<div className="text-center" key={feature.title}>
6161
<div className="mx-auto mb-2 w-fit rounded-full bg-muted/50 p-2">
6262
<feature.icon
63-
className="h-5 w-5 text-primary"
63+
className="h-5 w-5 not-dark:text-primary text-primary"
6464
size={20}
6565
weight="duotone"
6666
/>
@@ -75,7 +75,10 @@ export function OnboardingCard({ onCreateOrganization }: OnboardingCardProps) {
7575

7676
<div className="flex justify-center">
7777
<Button className="rounded" onClick={onCreateOrganization} size="lg">
78-
<BuildingsIcon className="mr-2 h-5 w-5" size={20} />
78+
<BuildingsIcon
79+
className="mr-2 h-5 w-5 not-dark:text-primary"
80+
size={20}
81+
/>
7982
Create Organization
8083
</Button>
8184
</div>

‎apps/dashboard/app/(main)/organizations/components/organization-switcher.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,10 @@ export function OrganizationSwitcher({
7272
<span className="max-w-[120px] truncate">
7373
{activeOrganization?.name || 'Personal'}
7474
</span>
75-
<ArrowRightIcon className="ml-auto h-3 w-3 opacity-50" size={16} />
75+
<ArrowRightIcon
76+
className="ml-auto h-3 w-3 not-dark:text-primary opacity-50"
77+
size={16}
78+
/>
7679
</Button>
7780
</DropdownMenuTrigger>
7881
<DropdownMenuContent align="end" className="w-56">

‎apps/dashboard/app/(main)/organizations/components/organizations-tab.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -180,7 +180,7 @@ export function OrganizationsTab({
180180
</p>
181181
<div className="mt-2 flex items-center gap-1">
182182
<CalendarIcon
183-
className="h-3 w-3 text-muted-foreground"
183+
className="h-3 w-3 not-dark:text-primary text-muted-foreground"
184184
size={16}
185185
/>
186186
<span className="text-muted-foreground text-xs">
@@ -211,7 +211,7 @@ export function OrganizationsTab({
211211
) : (
212212
<>
213213
<ArrowRightIcon
214-
className="mr-2 h-3 w-3"
214+
className="mr-2 h-3 w-3 not-dark:text-primary"
215215
size={16}
216216
/>
217217
Switch to This Organization
@@ -231,7 +231,10 @@ export function OrganizationsTab({
231231
variant="outline"
232232
>
233233
<Link href={`/organizations/${org.slug}`}>
234-
<GearIcon className="mr-2 h-3 w-3" size={16} />
234+
<GearIcon
235+
className="mr-2 h-3 w-3 not-dark:text-primary"
236+
size={16}
237+
/>
235238
Settings
236239
</Link>
237240
</Button>

‎apps/dashboard/app/(main)/organizations/page.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ function PageHeader({ onNewOrg }: { onNewOrg: () => void }) {
174174
</p>
175175
</div>
176176
<Button className="w-full rounded sm:w-auto" onClick={onNewOrg} size="sm">
177-
<PlusIcon className="mr-2 h-4 w-4" size={16} />
177+
<PlusIcon className="mr-2 h-4 w-4 not-dark:text-primary" size={16} />
178178
New Organization
179179
</Button>
180180
</div>
@@ -275,7 +275,10 @@ function MainView({
275275
className="relative h-10 cursor-pointer touch-manipulation whitespace-nowrap rounded-none px-2 text-xs transition-colors hover:bg-muted/50 sm:px-4 sm:text-sm"
276276
value="organizations"
277277
>
278-
<BuildingsIcon className="mr-1 h-3 w-3" size={16} />
278+
<BuildingsIcon
279+
className="mr-1 h-3 w-3 not-dark:text-primary"
280+
size={16}
281+
/>
279282
<span className="hidden sm:inline">Organizations</span>
280283
{activeTab === 'organizations' && (
281284
<div className="absolute bottom-0 left-0 h-[2px] w-full rounded bg-primary" />
@@ -287,7 +290,10 @@ function MainView({
287290
)}
288291
value="teams"
289292
>
290-
<UsersIcon className="mr-1 h-3 w-3" size={16} />
293+
<UsersIcon
294+
className="mr-1 h-3 w-3 not-dark:text-primary"
295+
size={16}
296+
/>
291297
<span className="hidden sm:inline">Teams</span>
292298
{activeTab === 'teams' && (
293299
<div className="absolute bottom-0 left-0 h-[2px] w-full rounded bg-primary" />

0 commit comments

Comments
 (0)