Skip to content

Commit e39cfc9

Browse files
Xeven777Xeven777
committed
shifting to shadcn - major changes
1 parent 8a31c6a commit e39cfc9

56 files changed

Lines changed: 2443 additions & 1252 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/(dashboard)/campaigns/[id]/edit/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import EditCampaignBuilder from "@/components/edit-campaign-builder";
1010
*/
1111
export default function EditCampaignPage() {
1212
return (
13-
<Suspense fallback={<div className="panel rounded p-8 h-64" />}>
13+
<Suspense fallback={<div className="bg-muted rounded p-8 h-64" />}>
1414
<EditCampaignBuilder />
1515
</Suspense>
1616
);

‎app/(dashboard)/campaigns/[id]/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import { getCampaignDetail } from "@/lib/server/automations";
1818
*/
1919
export default function CampaignDetailPage(props: PageProps<"/campaigns/[id]">) {
2020
return (
21-
<Suspense fallback={<div className="panel rounded p-8 h-64" />}>
21+
<Suspense fallback={<div className="bg-muted rounded p-8 h-64" />}>
2222
<CampaignDetailContent params={props.params} />
2323
</Suspense>
2424
);
@@ -37,11 +37,11 @@ async function CampaignDetailContent({
3737

3838
if (!campaign) {
3939
return (
40-
<div className="panel rounded p-8 text-center">
41-
<p className="text-sm text-muted">Campaign not found.</p>
40+
<div className="bg-muted rounded p-8 text-center">
41+
<p className="text-sm text-muted-foreground">Campaign not found.</p>
4242
<Link
4343
href="/campaigns"
44-
className="mt-4 inline-block rounded border border-border px-4 py-2 text-sm text-muted hover:text-foreground"
44+
className="mt-4 inline-block rounded border border-border px-4 py-2 text-sm text-muted-foreground hover:text-foreground"
4545
>
4646
Back to campaigns
4747
</Link>

‎app/(dashboard)/campaigns/import/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default function ImportCampaignsPage() {
8686
<div className="max-w-2xl mx-auto space-y-6">
8787
<div>
8888
<h1 className="text-lg font-semibold">Import campaigns</h1>
89-
<p className="text-sm text-muted mt-1">
89+
<p className="text-sm text-muted-foreground mt-1">
9090
Paste a CSV with one row per campaign. Each row opens in the builder
9191
prefilled and editable, so you can review it and pick the reel before
9292
saving. Required columns are{" "}
@@ -131,12 +131,12 @@ export default function ImportCampaignsPage() {
131131
onChange={(e) => setCsv(e.target.value)}
132132
placeholder={SAMPLE}
133133
rows={10}
134-
className="w-full px-4 py-3 rounded bg-surface border border-border text-sm font-mono text-foreground placeholder:text-zinc-600 focus:border-accent/40 focus:outline-none resize-y"
134+
className="w-full px-4 py-3 rounded bg-muted border border-border text-sm font-mono text-foreground placeholder:text-zinc-600 focus:border-accent/40 focus:outline-none resize-y"
135135
/>
136136
<button
137137
type="button"
138138
onClick={() => setCsv(SAMPLE)}
139-
className="text-xs text-muted hover:text-foreground"
139+
className="text-xs text-muted-foreground hover:text-foreground"
140140
>
141141
Fill with a sample
142142
</button>
@@ -151,7 +151,7 @@ export default function ImportCampaignsPage() {
151151
</button>
152152
<button
153153
onClick={() => router.push("/campaigns")}
154-
className="px-5 py-2 rounded text-sm text-muted hover:text-foreground border border-border"
154+
className="px-5 py-2 rounded text-sm text-muted-foreground hover:text-foreground border border-border"
155155
>
156156
Cancel
157157
</button>

‎app/(dashboard)/campaigns/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import type { AccountOption } from "@/components/account-select";
1919
*/
2020
export default function CampaignsPage() {
2121
return (
22-
<Suspense fallback={<div className="panel rounded p-8 h-64" />}>
22+
<Suspense fallback={<div className="bg-muted rounded p-8 h-64" />}>
2323
<CampaignsContent />
2424
</Suspense>
2525
);

‎app/(dashboard)/dashboard/page.tsx‎

Lines changed: 40 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -34,13 +34,13 @@ export default async function DashboardPage(props: PageProps<"/dashboard">) {
3434
function DashboardSkeleton() {
3535
return (
3636
<div className="space-y-8 animate-pulse" aria-busy="true">
37-
<div className="h-8 w-64 rounded bg-surface-hover/70" />
37+
<div className="h-8 w-64 rounded bg-muted/70" />
3838
<div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-3 sm:gap-4">
3939
{[...Array(6)].map((_, i) => (
40-
<div key={i} className="panel rounded p-5 h-32" />
40+
<div key={i} className="bg-muted rounded p-5 h-32" />
4141
))}
4242
</div>
43-
<div className="panel rounded p-6 h-64" />
43+
<div className="bg-muted rounded p-6 h-64" />
4444
</div>
4545
);
4646
}
@@ -79,7 +79,7 @@ async function DashboardContent({
7979
<h1 className="text-2xl font-bold text-foreground sm:text-3xl">
8080
Hello, {stats.userName ?? "there"}!
8181
</h1>
82-
<p className="mt-1 text-sm text-muted">
82+
<p className="mt-1 text-sm text-muted-foreground">
8383
{connectedCount} connected{" "}
8484
{connectedCount === 1 ? "account" : "accounts"}
8585
{" · "}
@@ -112,15 +112,24 @@ async function DashboardContent({
112112
{/* Chart + Recent Activity */}
113113
<div className="grid grid-cols-1 lg:grid-cols-6 gap-4 sm:gap-6">
114114
{/* 7-Day Chart */}
115-
<div className="lg:col-span-3 panel rounded p-4 sm:p-6">
116-
<h2 className="text-sm font-semibold text-foreground mb-6">DMs — Last 7 Days</h2>
115+
<div className="lg:col-span-3 bg-muted rounded p-4 sm:p-6">
116+
<h2 className="text-sm font-semibold text-foreground mb-6">
117+
DMs — Last 7 Days
118+
</h2>
117119
<div className="flex items-end gap-1.5 h-40 sm:gap-2">
118120
{stats.dailyDMs.map((day) => (
119-
<div key={day.date} className="min-w-0 flex-1 flex flex-col items-center gap-2">
120-
<span className="text-xs text-muted font-medium">{day.count}</span>
121+
<div
122+
key={day.date}
123+
className="min-w-0 flex-1 flex flex-col items-center gap-2"
124+
>
125+
<span className="text-xs text-muted-foreground font-medium">
126+
{day.count}
127+
</span>
121128
<div
122129
className="w-full rounded-sm bg-accent min-h-1"
123-
style={{ height: `${Math.max((day.count / maxDM) * 100, 4)}%` }}
130+
style={{
131+
height: `${Math.max((day.count / maxDM) * 100, 4)}%`,
132+
}}
124133
/>
125134
{/* Seven labels share a phone's width, so they must not wrap. */}
126135
<span className="w-full truncate text-center text-[10px] text-zinc-500">
@@ -132,29 +141,42 @@ async function DashboardContent({
132141
</div>
133142

134143
{/* Top Keywords */}
135-
<div className="lg:col-span-1 panel rounded p-4 sm:p-6">
136-
<h2 className="text-sm font-semibold text-foreground mb-4">Top Keywords</h2>
144+
<div className="lg:col-span-1 bg-muted rounded p-4 sm:p-6">
145+
<h2 className="text-sm font-semibold text-foreground mb-4">
146+
Top Keywords
147+
</h2>
137148
<div className="space-y-3">
138149
{stats.topKeywords.length === 0 && (
139-
<p className="text-sm text-muted py-8">No keyword matches yet</p>
150+
<p className="text-sm text-muted-foreground py-8">
151+
No keyword matches yet
152+
</p>
140153
)}
141154
{stats.topKeywords.map((keyword) => (
142-
<div key={keyword.keyword} className="flex items-center justify-between gap-3">
155+
<div
156+
key={keyword.keyword}
157+
className="flex items-center justify-between gap-3"
158+
>
143159
<span className="truncate text-sm font-medium text-foreground">
144160
{keyword.keyword}
145161
</span>
146-
<span className="text-xs text-muted">{keyword.count}</span>
162+
<span className="text-xs text-muted-foreground">
163+
{keyword.count}
164+
</span>
147165
</div>
148166
))}
149167
</div>
150168
</div>
151169

152170
{/* Recent Activity */}
153-
<div className="lg:col-span-2 panel rounded p-4 sm:p-6">
154-
<h2 className="text-sm font-semibold text-foreground mb-4">Recent Activity</h2>
171+
<div className="lg:col-span-2 bg-muted rounded p-4 sm:p-6">
172+
<h2 className="text-sm font-semibold text-foreground mb-4">
173+
Recent Activity
174+
</h2>
155175
<div className="space-y-3 max-h-60 overflow-y-auto">
156176
{stats.recentLogs.length === 0 && (
157-
<p className="text-sm text-muted text-center py-8">No activity yet</p>
177+
<p className="text-sm text-muted-foreground text-center py-8">
178+
No activity yet
179+
</p>
158180
)}
159181
{stats.recentLogs.map((log) => (
160182
<div
@@ -165,7 +187,7 @@ async function DashboardContent({
165187
<p className="text-sm font-medium text-foreground truncate">
166188
@{log.commenterName ?? "unknown"}
167189
</p>
168-
<p className="text-xs text-muted truncate">
190+
<p className="text-xs text-muted-foreground truncate">
169191
{log.instagramAccount
170192
? `@${log.instagramAccount.username} · `
171193
: ""}

‎app/(dashboard)/diagnostics/page.tsx‎

Lines changed: 41 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,9 @@ function formatDate(value: string) {
1818
}
1919

2020
function EmptyState({ label }: { label: string }) {
21-
return <p className="py-5 text-center text-sm text-muted">{label}</p>;
21+
return (
22+
<p className="py-5 text-center text-sm text-muted-foreground">{label}</p>
23+
);
2224
}
2325

2426
function Section({
@@ -29,7 +31,7 @@ function Section({
2931
children: React.ReactNode;
3032
}) {
3133
return (
32-
<section className="panel rounded p-4 sm:p-6">
34+
<section className="bg-muted rounded p-4 sm:p-6">
3335
<h2 className="text-base font-semibold text-foreground">{title}</h2>
3436
<div className="mt-4">{children}</div>
3537
</section>
@@ -44,13 +46,13 @@ export default function DiagnosticsPage() {
4446
<h1 className="text-2xl font-bold text-foreground">
4547
Production Diagnostics
4648
</h1>
47-
<p className="mt-1 text-sm text-muted">
49+
<p className="mt-1 text-sm text-muted-foreground">
4850
Health, queues, webhook failures, billing events, and worker alerts.
4951
</p>
5052
</div>
5153
<DiagnosticsRefresh />
5254
</div>
53-
<Suspense fallback={<div className="panel rounded p-8 h-64" />}>
55+
<Suspense fallback={<div className="bg-muted rounded p-8 h-64" />}>
5456
<DiagnosticsContent />
5557
</Suspense>
5658
</div>
@@ -71,8 +73,8 @@ async function DiagnosticsContent() {
7173
return (
7274
<>
7375
<div className="grid grid-cols-2 gap-3 sm:gap-4 md:grid-cols-3">
74-
<div className="panel rounded p-4 sm:p-5">
75-
<p className="text-xs font-semibold uppercase text-muted">
76+
<div className="bg-muted rounded p-4 sm:p-5">
77+
<p className="text-xs font-semibold uppercase text-muted-foreground">
7678
Worker health
7779
</p>
7880
<p
@@ -82,15 +84,15 @@ async function DiagnosticsContent() {
8284
>
8385
{data.workerHealth.healthy ? "Healthy" : "Needs attention"}
8486
</p>
85-
<p className="mt-2 text-xs text-muted">
87+
<p className="mt-2 text-xs text-muted-foreground">
8688
{workerAgeSeconds == null
8789
? "No heartbeat found"
8890
: `Last heartbeat ${workerAgeSeconds}s ago`}
8991
</p>
9092
</div>
9193
{["waiting", "active", "delayed", "failed"].map((key) => (
92-
<div key={key} className="panel rounded p-4 sm:p-5">
93-
<p className="text-xs font-semibold uppercase text-muted">
94+
<div key={key} className="bg-muted rounded p-4 sm:p-5">
95+
<p className="text-xs font-semibold uppercase text-muted-foreground">
9496
Queue {key}
9597
</p>
9698
<p className="mt-3 text-2xl font-bold text-foreground">
@@ -106,7 +108,7 @@ async function DiagnosticsContent() {
106108
{data.workerAlerts.map((alert) => (
107109
<div
108110
key={`${alert.createdAt}-${alert.jobId ?? alert.message}`}
109-
className="rounded border border-border bg-surface/50 p-4"
111+
className="rounded border border-border bg-muted/50 p-4"
110112
>
111113
<div className="flex flex-wrap items-start justify-between gap-x-3 gap-y-1">
112114
<p className="min-w-0 flex-1 break-words text-sm font-semibold text-foreground">
@@ -116,7 +118,7 @@ async function DiagnosticsContent() {
116118
{alert.level}
117119
</span>
118120
</div>
119-
<p className="mt-2 text-xs text-muted">
121+
<p className="mt-2 text-xs text-muted-foreground">
120122
{formatDate(alert.createdAt)}
121123
{alert.commentId ? ` · ${alert.commentId}` : ""}
122124
</p>
@@ -133,18 +135,23 @@ async function DiagnosticsContent() {
133135
{data.dmFailures.length ? (
134136
<div className="space-y-3">
135137
{data.dmFailures.map((item) => (
136-
<div key={item.id} className="border-b border-border pb-3 last:border-0">
138+
<div
139+
key={item.id}
140+
className="border-b border-border pb-3 last:border-0"
141+
>
137142
<div className="flex flex-wrap items-start justify-between gap-x-3 gap-y-1">
138143
<p className="min-w-0 flex-1 truncate text-sm font-semibold text-foreground">
139144
{item.automation.name}
140145
</p>
141146
<StatusBadge status={item.status} />
142147
</div>
143-
<p className="mt-1 truncate text-xs text-muted">
148+
<p className="mt-1 truncate text-xs text-muted-foreground">
144149
{item.commentText}
145150
</p>
146151
{item.errorMessage && (
147-
<p className="mt-1 text-xs text-error">{item.errorMessage}</p>
152+
<p className="mt-1 text-xs text-error">
153+
{item.errorMessage}
154+
</p>
148155
)}
149156
</div>
150157
))}
@@ -158,14 +165,17 @@ async function DiagnosticsContent() {
158165
{data.webhookFailures.length ? (
159166
<div className="space-y-3">
160167
{data.webhookFailures.map((event) => (
161-
<div key={event.id} className="border-b border-border pb-3 last:border-0">
168+
<div
169+
key={event.id}
170+
className="border-b border-border pb-3 last:border-0"
171+
>
162172
<p className="text-sm font-semibold text-foreground">
163173
{event.object ?? "Instagram webhook"}
164174
</p>
165175
<p className="mt-1 text-xs text-error">
166176
{event.errorMessage ?? "Unknown error"}
167177
</p>
168-
<p className="mt-1 text-xs text-muted">
178+
<p className="mt-1 text-xs text-muted-foreground">
169179
{formatDate(event.createdAt)}
170180
</p>
171181
</div>
@@ -182,11 +192,14 @@ async function DiagnosticsContent() {
182192
{data.tokenRefreshFailures.length ? (
183193
<div className="space-y-3">
184194
{data.tokenRefreshFailures.map((event) => (
185-
<div key={event.id} className="border-b border-border pb-3 last:border-0">
195+
<div
196+
key={event.id}
197+
className="border-b border-border pb-3 last:border-0"
198+
>
186199
<p className="text-sm font-semibold text-foreground">
187200
{event.message}
188201
</p>
189-
<p className="mt-1 text-xs text-muted">
202+
<p className="mt-1 text-xs text-muted-foreground">
190203
{formatDate(event.createdAt)}
191204
</p>
192205
</div>
@@ -196,17 +209,23 @@ async function DiagnosticsContent() {
196209
<EmptyState label="No token refresh failures." />
197210
)}
198211
</Section>
199-
200212
</div>
201213

202214
<Section title="Operational Event Timeline">
203215
{data.operationalEvents.length ? (
204216
<div className="space-y-3">
205217
{data.operationalEvents.map((event) => (
206-
<div key={event.id} className="grid gap-2 border-b border-border pb-3 last:border-0 sm:grid-cols-[140px_1fr_auto]">
207-
<p className="text-xs font-semibold text-muted">{event.source}</p>
218+
<div
219+
key={event.id}
220+
className="grid gap-2 border-b border-border pb-3 last:border-0 sm:grid-cols-[140px_1fr_auto]"
221+
>
222+
<p className="text-xs font-semibold text-muted-foreground">
223+
{event.source}
224+
</p>
208225
<p className="text-sm text-foreground">{event.message}</p>
209-
<p className="text-xs text-muted">{formatDate(event.createdAt)}</p>
226+
<p className="text-xs text-muted-foreground">
227+
{formatDate(event.createdAt)}
228+
</p>
210229
</div>
211230
))}
212231
</div>

0 commit comments

Comments
 (0)