mirror of
https://github.com/yusufipk/OpenFrame.git
synced 2026-09-11 17:46:06 +00:00
refactor: eslint and prettier conflict will be resolved and formatted
This commit is contained in:
Enes Köksal
@@ -1,5 +1,5 @@
|
||||
import { Skeleton } from "@/components/ui/skeleton"
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/card"
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Card, CardHeader, CardContent } from '@/components/ui/card';
|
||||
|
||||
function SettingsCardSkeleton({ rows }: { rows: number }) {
|
||||
return (
|
||||
@@ -20,7 +20,7 @@ function SettingsCardSkeleton({ rows }: { rows: number }) {
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
export default function SettingsLoading() {
|
||||
@@ -68,5 +68,5 @@ export default function SettingsLoading() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,17 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { Bell, Send, Mail, CheckCircle2, AlertCircle, Loader2, Globe, CreditCard, HardDrive } from 'lucide-react';
|
||||
import {
|
||||
Bell,
|
||||
Send,
|
||||
Mail,
|
||||
CheckCircle2,
|
||||
AlertCircle,
|
||||
Loader2,
|
||||
Globe,
|
||||
CreditCard,
|
||||
HardDrive,
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
@@ -93,16 +103,12 @@ function ToggleButton({
|
||||
onClick={onToggle}
|
||||
className={cn(
|
||||
'flex items-center justify-between w-full p-3 rounded-lg border transition-colors text-left',
|
||||
enabled
|
||||
? 'border-primary/50 bg-primary/5'
|
||||
: 'border-border hover:bg-accent/50'
|
||||
enabled ? 'border-primary/50 bg-primary/5' : 'border-border hover:bg-accent/50'
|
||||
)}
|
||||
>
|
||||
<div className="flex-1 min-w-0 pr-4">
|
||||
<span className="text-sm font-medium">{label}</span>
|
||||
{description && (
|
||||
<p className="text-xs text-muted-foreground mt-0.5">{description}</p>
|
||||
)}
|
||||
{description && <p className="text-xs text-muted-foreground mt-0.5">{description}</p>}
|
||||
</div>
|
||||
<div
|
||||
className={cn(
|
||||
@@ -336,9 +342,7 @@ export default function SettingsPage({ billingOnly = false }: { billingOnly?: bo
|
||||
<CreditCard className="h-5 w-5" />
|
||||
Billing
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Manage your paid plan and workspace creation access
|
||||
</CardDescription>
|
||||
<CardDescription>Manage your paid plan and workspace creation access</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{billingLoading || !billing ? (
|
||||
@@ -349,22 +353,25 @@ export default function SettingsPage({ billingOnly = false }: { billingOnly?: bo
|
||||
</div>
|
||||
) : !billing.isEnabled ? (
|
||||
<div className="rounded-md border border-muted bg-muted/40 p-4 text-sm text-muted-foreground">
|
||||
Stripe billing is disabled by this host. Workspace creation is unrestricted in this environment.
|
||||
Stripe billing is disabled by this host. Workspace creation is unrestricted in this
|
||||
environment.
|
||||
</div>
|
||||
) : !billing.isConfigured ? (
|
||||
<div className="rounded-md border border-amber-500/30 bg-amber-500/10 p-4 text-sm text-amber-700 dark:text-amber-400">
|
||||
Stripe is not configured yet. Add your Stripe environment variables before using billing.
|
||||
Stripe is not configured yet. Add your Stripe environment variables before using
|
||||
billing.
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{!billing.subscription.hasActiveSubscription
|
||||
&& !billing.subscription.hasActiveTrial
|
||||
&& billing.subscription.isTrialEligible
|
||||
&& billing.checkoutAvailable ? (
|
||||
{!billing.subscription.hasActiveSubscription &&
|
||||
!billing.subscription.hasActiveTrial &&
|
||||
billing.subscription.isTrialEligible &&
|
||||
billing.checkoutAvailable ? (
|
||||
<div className="rounded-md border border-primary/30 bg-primary/5 p-4 space-y-2">
|
||||
<p className="text-sm font-semibold">Start your 7-day free trial</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Get full access to all features — no charge until the trial ends. Cancel anytime.
|
||||
Get full access to all features — no charge until the trial ends. Cancel
|
||||
anytime.
|
||||
</p>
|
||||
</div>
|
||||
) : null}
|
||||
@@ -382,7 +389,7 @@ export default function SettingsPage({ billingOnly = false }: { billingOnly?: bo
|
||||
: billing.subscription.hasActiveTrial
|
||||
? 'Trial access is active.'
|
||||
: billing.subscription.isTrialEligible
|
||||
? 'You haven\'t started your free trial yet.'
|
||||
? "You haven't started your free trial yet."
|
||||
: 'Billing access has ended.'}
|
||||
</p>
|
||||
</div>
|
||||
@@ -393,35 +400,37 @@ export default function SettingsPage({ billingOnly = false }: { billingOnly?: bo
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{billing.subscription.hasActiveTrial
|
||||
&& billing.subscription.trialEndsAt
|
||||
&& hasScheduledCancellation ? (
|
||||
<p
|
||||
className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm font-medium text-destructive"
|
||||
>
|
||||
Access ends on {' '}
|
||||
{new Date(billing.subscription.trialEndsAt).toLocaleDateString()}.
|
||||
{billing.subscription.hasActiveTrial &&
|
||||
billing.subscription.trialEndsAt &&
|
||||
hasScheduledCancellation ? (
|
||||
<p className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm font-medium text-destructive">
|
||||
Access ends on {new Date(billing.subscription.trialEndsAt).toLocaleDateString()}.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{billing.subscription.currentPeriodEnd ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{hasScheduledCancellation ? 'Your subscription ends on ' : 'Current billing period ends on '}
|
||||
{hasScheduledCancellation
|
||||
? 'Your subscription ends on '
|
||||
: 'Current billing period ends on '}
|
||||
{new Date(billing.subscription.currentPeriodEnd).toLocaleDateString()}.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{hasScheduledCancellation && billing.subscription.cancelAt ? (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Cancellation was scheduled on {new Date(billing.subscription.cancelAt).toLocaleDateString()}.
|
||||
Cancellation was scheduled on{' '}
|
||||
{new Date(billing.subscription.cancelAt).toLocaleDateString()}.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
{!billing.subscription.hasBillingAccess
|
||||
&& billing.subscription.billingAccessEndedAt
|
||||
&& billing.subscription.storageCleanupEligibleAt ? (
|
||||
{!billing.subscription.hasBillingAccess &&
|
||||
billing.subscription.billingAccessEndedAt &&
|
||||
billing.subscription.storageCleanupEligibleAt ? (
|
||||
<p className="text-sm text-amber-700 dark:text-amber-400">
|
||||
Stored media cleanup is scheduled after {new Date(billing.subscription.storageCleanupEligibleAt).toLocaleDateString()} unless billing is restored first.
|
||||
Stored media cleanup is scheduled after{' '}
|
||||
{new Date(billing.subscription.storageCleanupEligibleAt).toLocaleDateString()}{' '}
|
||||
unless billing is restored first.
|
||||
</p>
|
||||
) : null}
|
||||
|
||||
@@ -473,346 +482,332 @@ export default function SettingsPage({ billingOnly = false }: { billingOnly?: bo
|
||||
</Card>
|
||||
|
||||
{billing?.subscription.hasBillingAccess && (
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<HardDrive className="h-5 w-5" />
|
||||
Storage
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Combined usage across video files and media attachments (200 GB limit)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{storageLoading || !storageInfo ? (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-2 w-full rounded-full" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">
|
||||
{formatBytes(storageInfo.usedBytes)} used of {formatBytes(storageInfo.limitBytes)}
|
||||
</span>
|
||||
<span
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<HardDrive className="h-5 w-5" />
|
||||
Storage
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Combined usage across video files and media attachments (200 GB limit)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{storageLoading || !storageInfo ? (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-4 w-48" />
|
||||
<Skeleton className="h-2 w-full rounded-full" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">
|
||||
{formatBytes(storageInfo.usedBytes)} used of{' '}
|
||||
{formatBytes(storageInfo.limitBytes)}
|
||||
</span>
|
||||
<span
|
||||
className={
|
||||
storageInfo.percentage >= 90
|
||||
? 'text-destructive font-medium'
|
||||
: storageInfo.percentage >= 75
|
||||
? 'text-amber-600 dark:text-amber-400 font-medium'
|
||||
: 'text-muted-foreground'
|
||||
}
|
||||
>
|
||||
{storageInfo.percentage < 0.1
|
||||
? '<0.1%'
|
||||
: `${storageInfo.percentage.toFixed(1)}%`}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={storageInfo.percentage}
|
||||
className={
|
||||
storageInfo.percentage >= 90
|
||||
? 'text-destructive font-medium'
|
||||
? '[&>div]:bg-destructive'
|
||||
: storageInfo.percentage >= 75
|
||||
? 'text-amber-600 dark:text-amber-400 font-medium'
|
||||
: 'text-muted-foreground'
|
||||
? '[&>div]:bg-amber-500'
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{storageInfo.percentage < 0.1 ? '<0.1%' : `${storageInfo.percentage.toFixed(1)}%`}
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={storageInfo.percentage}
|
||||
className={
|
||||
storageInfo.percentage >= 90
|
||||
? '[&>div]:bg-destructive'
|
||||
: storageInfo.percentage >= 75
|
||||
? '[&>div]:bg-amber-500'
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
{storageInfo.percentage >= 90 && (
|
||||
<p className="text-xs text-destructive">
|
||||
Storage is almost full. Delete unused files or contact support.
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
/>
|
||||
{storageInfo.percentage >= 90 && (
|
||||
<p className="text-xs text-destructive">
|
||||
Storage is almost full. Delete unused files or contact support.
|
||||
</p>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{!billingOnly && (
|
||||
<>
|
||||
{/* Event Subscriptions */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Bell className="h-5 w-5" />
|
||||
Notification Events
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Choose which events trigger notifications
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<ToggleButton
|
||||
enabled={settings.onNewVideo}
|
||||
onToggle={() =>
|
||||
setSettings((s) => ({ ...s, onNewVideo: !s.onNewVideo }))
|
||||
}
|
||||
label="New Video Added"
|
||||
description="When a new video is added to one of your projects"
|
||||
/>
|
||||
<ToggleButton
|
||||
enabled={settings.onNewVersion}
|
||||
onToggle={() =>
|
||||
setSettings((s) => ({ ...s, onNewVersion: !s.onNewVersion }))
|
||||
}
|
||||
label="New Version Added"
|
||||
description="When a new version is added to an existing video"
|
||||
/>
|
||||
<ToggleButton
|
||||
enabled={settings.onNewComment}
|
||||
onToggle={() =>
|
||||
setSettings((s) => ({ ...s, onNewComment: !s.onNewComment }))
|
||||
}
|
||||
label="New Comment"
|
||||
description="When someone leaves a comment on your videos"
|
||||
/>
|
||||
<ToggleButton
|
||||
enabled={settings.onNewReply}
|
||||
onToggle={() =>
|
||||
setSettings((s) => ({ ...s, onNewReply: !s.onNewReply }))
|
||||
}
|
||||
label="New Reply"
|
||||
description="When someone replies to a comment thread"
|
||||
/>
|
||||
<ToggleButton
|
||||
enabled={settings.onApprovalEvents}
|
||||
onToggle={() =>
|
||||
setSettings((s) => ({ ...s, onApprovalEvents: !s.onApprovalEvents }))
|
||||
}
|
||||
label="Approval Workflow"
|
||||
description="When approval requests are created, responded to, or finalized"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Event Subscriptions */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Bell className="h-5 w-5" />
|
||||
Notification Events
|
||||
</CardTitle>
|
||||
<CardDescription>Choose which events trigger notifications</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<ToggleButton
|
||||
enabled={settings.onNewVideo}
|
||||
onToggle={() => setSettings((s) => ({ ...s, onNewVideo: !s.onNewVideo }))}
|
||||
label="New Video Added"
|
||||
description="When a new video is added to one of your projects"
|
||||
/>
|
||||
<ToggleButton
|
||||
enabled={settings.onNewVersion}
|
||||
onToggle={() => setSettings((s) => ({ ...s, onNewVersion: !s.onNewVersion }))}
|
||||
label="New Version Added"
|
||||
description="When a new version is added to an existing video"
|
||||
/>
|
||||
<ToggleButton
|
||||
enabled={settings.onNewComment}
|
||||
onToggle={() => setSettings((s) => ({ ...s, onNewComment: !s.onNewComment }))}
|
||||
label="New Comment"
|
||||
description="When someone leaves a comment on your videos"
|
||||
/>
|
||||
<ToggleButton
|
||||
enabled={settings.onNewReply}
|
||||
onToggle={() => setSettings((s) => ({ ...s, onNewReply: !s.onNewReply }))}
|
||||
label="New Reply"
|
||||
description="When someone replies to a comment thread"
|
||||
/>
|
||||
<ToggleButton
|
||||
enabled={settings.onApprovalEvents}
|
||||
onToggle={() =>
|
||||
setSettings((s) => ({ ...s, onApprovalEvents: !s.onApprovalEvents }))
|
||||
}
|
||||
label="Approval Workflow"
|
||||
description="When approval requests are created, responded to, or finalized"
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Telegram */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Send className="h-5 w-5" />
|
||||
Telegram
|
||||
</CardTitle>
|
||||
<Badge variant={settings.telegramEnabled ? 'default' : 'secondary'}>
|
||||
{settings.telegramEnabled ? 'Enabled' : 'Disabled'}
|
||||
</Badge>
|
||||
{/* Telegram */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Send className="h-5 w-5" />
|
||||
Telegram
|
||||
</CardTitle>
|
||||
<Badge variant={settings.telegramEnabled ? 'default' : 'secondary'}>
|
||||
{settings.telegramEnabled ? 'Enabled' : 'Disabled'}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription>Get instant notifications via Telegram</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="rounded-md border bg-muted/40 p-3 space-y-2 text-sm text-muted-foreground">
|
||||
<p className="font-medium text-foreground">Setup instructions</p>
|
||||
<ol className="space-y-1.5 list-decimal list-inside">
|
||||
<li>
|
||||
Message{' '}
|
||||
<a
|
||||
href="https://t.me/UserInfeBot"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline underline-offset-2"
|
||||
>
|
||||
@UserInfeBot
|
||||
</a>{' '}
|
||||
on Telegram and send{' '}
|
||||
<code className="bg-muted px-1 rounded text-xs">/start</code> to get your Chat
|
||||
ID
|
||||
</li>
|
||||
<li>
|
||||
Start{' '}
|
||||
<a
|
||||
href="https://t.me/openframe_bot"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline underline-offset-2"
|
||||
>
|
||||
@openframe_bot
|
||||
</a>{' '}
|
||||
and send <code className="bg-muted px-1 rounded text-xs">/start</code> so it can
|
||||
message you
|
||||
</li>
|
||||
<li>Paste your Chat ID below and enable notifications</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="telegram-chat-id">Your Chat ID</Label>
|
||||
<Input
|
||||
id="telegram-chat-id"
|
||||
placeholder="123456789"
|
||||
value={telegramChatId}
|
||||
onChange={(e) => setTelegramChatId(e.target.value)}
|
||||
className="mt-1 font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ToggleButton
|
||||
enabled={settings.telegramEnabled}
|
||||
onToggle={() => setSettings((s) => ({ ...s, telegramEnabled: !s.telegramEnabled }))}
|
||||
label="Enable Telegram notifications"
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleTest('telegram')}
|
||||
disabled={!telegramChatId || testing === 'telegram'}
|
||||
>
|
||||
{testing === 'telegram' ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
) : (
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
Send Test Message
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Email */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Mail className="h-5 w-5" />
|
||||
Email
|
||||
</CardTitle>
|
||||
<Badge variant={settings.emailEnabled ? 'default' : 'secondary'}>
|
||||
{settings.emailEnabled ? 'Enabled' : 'Disabled'}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Receive notification emails to your account email address
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<ToggleButton
|
||||
enabled={settings.emailEnabled}
|
||||
onToggle={() => setSettings((s) => ({ ...s, emailEnabled: !s.emailEnabled }))}
|
||||
label="Enable email notifications"
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleTest('email')}
|
||||
disabled={!settings.emailEnabled || testing === 'email'}
|
||||
>
|
||||
{testing === 'email' ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
) : (
|
||||
<Mail className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
Send Test Email
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Timezone */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Globe className="h-5 w-5" />
|
||||
Timezone
|
||||
</CardTitle>
|
||||
<CardDescription>Timestamps in notifications will use this timezone</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Select
|
||||
value={settings.timezone}
|
||||
onValueChange={(value) => setSettings((s) => ({ ...s, timezone: value }))}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select timezone" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Americas</SelectLabel>
|
||||
<SelectItem value="America/New_York">Eastern Time (New York)</SelectItem>
|
||||
<SelectItem value="America/Chicago">Central Time (Chicago)</SelectItem>
|
||||
<SelectItem value="America/Denver">Mountain Time (Denver)</SelectItem>
|
||||
<SelectItem value="America/Los_Angeles">Pacific Time (Los Angeles)</SelectItem>
|
||||
<SelectItem value="America/Anchorage">Alaska (Anchorage)</SelectItem>
|
||||
<SelectItem value="Pacific/Honolulu">Hawaii (Honolulu)</SelectItem>
|
||||
<SelectItem value="America/Toronto">Toronto</SelectItem>
|
||||
<SelectItem value="America/Vancouver">Vancouver</SelectItem>
|
||||
<SelectItem value="America/Mexico_City">Mexico City</SelectItem>
|
||||
<SelectItem value="America/Sao_Paulo">São Paulo</SelectItem>
|
||||
<SelectItem value="America/Argentina/Buenos_Aires">Buenos Aires</SelectItem>
|
||||
<SelectItem value="America/Bogota">Bogotá</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Europe</SelectLabel>
|
||||
<SelectItem value="Europe/London">London (GMT/BST)</SelectItem>
|
||||
<SelectItem value="Europe/Paris">Paris (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Berlin">Berlin (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Amsterdam">Amsterdam (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Madrid">Madrid (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Rome">Rome (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Zurich">Zurich (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Stockholm">Stockholm (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Helsinki">Helsinki (EET)</SelectItem>
|
||||
<SelectItem value="Europe/Athens">Athens (EET)</SelectItem>
|
||||
<SelectItem value="Europe/Istanbul">Istanbul (TRT)</SelectItem>
|
||||
<SelectItem value="Europe/Moscow">Moscow (MSK)</SelectItem>
|
||||
<SelectItem value="Europe/Kiev">Kyiv (EET)</SelectItem>
|
||||
<SelectItem value="Europe/Warsaw">Warsaw (CET)</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Asia & Pacific</SelectLabel>
|
||||
<SelectItem value="Asia/Dubai">Dubai (GST)</SelectItem>
|
||||
<SelectItem value="Asia/Kolkata">India (IST)</SelectItem>
|
||||
<SelectItem value="Asia/Bangkok">Bangkok (ICT)</SelectItem>
|
||||
<SelectItem value="Asia/Singapore">Singapore (SGT)</SelectItem>
|
||||
<SelectItem value="Asia/Hong_Kong">Hong Kong (HKT)</SelectItem>
|
||||
<SelectItem value="Asia/Shanghai">Shanghai (CST)</SelectItem>
|
||||
<SelectItem value="Asia/Tokyo">Tokyo (JST)</SelectItem>
|
||||
<SelectItem value="Asia/Seoul">Seoul (KST)</SelectItem>
|
||||
<SelectItem value="Asia/Taipei">Taipei (CST)</SelectItem>
|
||||
<SelectItem value="Asia/Jakarta">Jakarta (WIB)</SelectItem>
|
||||
<SelectItem value="Australia/Sydney">Sydney (AEST)</SelectItem>
|
||||
<SelectItem value="Australia/Melbourne">Melbourne (AEST)</SelectItem>
|
||||
<SelectItem value="Australia/Perth">Perth (AWST)</SelectItem>
|
||||
<SelectItem value="Pacific/Auckland">Auckland (NZST)</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Africa & Middle East</SelectLabel>
|
||||
<SelectItem value="Africa/Cairo">Cairo (EET)</SelectItem>
|
||||
<SelectItem value="Africa/Lagos">Lagos (WAT)</SelectItem>
|
||||
<SelectItem value="Africa/Johannesburg">Johannesburg (SAST)</SelectItem>
|
||||
<SelectItem value="Africa/Nairobi">Nairobi (EAT)</SelectItem>
|
||||
<SelectItem value="Asia/Riyadh">Riyadh (AST)</SelectItem>
|
||||
<SelectItem value="Asia/Tehran">Tehran (IRST)</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Other</SelectLabel>
|
||||
<SelectItem value="UTC">UTC</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Separator className="my-6" />
|
||||
|
||||
{/* Save button */}
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
'Save Settings'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Get instant notifications via Telegram
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="rounded-md border bg-muted/40 p-3 space-y-2 text-sm text-muted-foreground">
|
||||
<p className="font-medium text-foreground">Setup instructions</p>
|
||||
<ol className="space-y-1.5 list-decimal list-inside">
|
||||
<li>
|
||||
Message{' '}
|
||||
<a
|
||||
href="https://t.me/UserInfeBot"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline underline-offset-2"
|
||||
>
|
||||
@UserInfeBot
|
||||
</a>
|
||||
{' '}on Telegram and send <code className="bg-muted px-1 rounded text-xs">/start</code> to get your Chat ID
|
||||
</li>
|
||||
<li>
|
||||
Start{' '}
|
||||
<a
|
||||
href="https://t.me/openframe_bot"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-primary underline underline-offset-2"
|
||||
>
|
||||
@openframe_bot
|
||||
</a>
|
||||
{' '}and send <code className="bg-muted px-1 rounded text-xs">/start</code> so it can message you
|
||||
</li>
|
||||
<li>Paste your Chat ID below and enable notifications</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label htmlFor="telegram-chat-id">Your Chat ID</Label>
|
||||
<Input
|
||||
id="telegram-chat-id"
|
||||
placeholder="123456789"
|
||||
value={telegramChatId}
|
||||
onChange={(e) => setTelegramChatId(e.target.value)}
|
||||
className="mt-1 font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<ToggleButton
|
||||
enabled={settings.telegramEnabled}
|
||||
onToggle={() =>
|
||||
setSettings((s) => ({ ...s, telegramEnabled: !s.telegramEnabled }))
|
||||
}
|
||||
label="Enable Telegram notifications"
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleTest('telegram')}
|
||||
disabled={!telegramChatId || testing === 'telegram'}
|
||||
>
|
||||
{testing === 'telegram' ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
) : (
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
Send Test Message
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Email */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Mail className="h-5 w-5" />
|
||||
Email
|
||||
</CardTitle>
|
||||
<Badge variant={settings.emailEnabled ? 'default' : 'secondary'}>
|
||||
{settings.emailEnabled ? 'Enabled' : 'Disabled'}
|
||||
</Badge>
|
||||
</div>
|
||||
<CardDescription>
|
||||
Receive notification emails to your account email address
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<ToggleButton
|
||||
enabled={settings.emailEnabled}
|
||||
onToggle={() =>
|
||||
setSettings((s) => ({ ...s, emailEnabled: !s.emailEnabled }))
|
||||
}
|
||||
label="Enable email notifications"
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleTest('email')}
|
||||
disabled={!settings.emailEnabled || testing === 'email'}
|
||||
>
|
||||
{testing === 'email' ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
) : (
|
||||
<Mail className="h-4 w-4 mr-2" />
|
||||
)}
|
||||
Send Test Email
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Timezone */}
|
||||
<Card className="mb-6">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Globe className="h-5 w-5" />
|
||||
Timezone
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Timestamps in notifications will use this timezone
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Select
|
||||
value={settings.timezone}
|
||||
onValueChange={(value) =>
|
||||
setSettings((s) => ({ ...s, timezone: value }))
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Select timezone" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Americas</SelectLabel>
|
||||
<SelectItem value="America/New_York">Eastern Time (New York)</SelectItem>
|
||||
<SelectItem value="America/Chicago">Central Time (Chicago)</SelectItem>
|
||||
<SelectItem value="America/Denver">Mountain Time (Denver)</SelectItem>
|
||||
<SelectItem value="America/Los_Angeles">Pacific Time (Los Angeles)</SelectItem>
|
||||
<SelectItem value="America/Anchorage">Alaska (Anchorage)</SelectItem>
|
||||
<SelectItem value="Pacific/Honolulu">Hawaii (Honolulu)</SelectItem>
|
||||
<SelectItem value="America/Toronto">Toronto</SelectItem>
|
||||
<SelectItem value="America/Vancouver">Vancouver</SelectItem>
|
||||
<SelectItem value="America/Mexico_City">Mexico City</SelectItem>
|
||||
<SelectItem value="America/Sao_Paulo">São Paulo</SelectItem>
|
||||
<SelectItem value="America/Argentina/Buenos_Aires">Buenos Aires</SelectItem>
|
||||
<SelectItem value="America/Bogota">Bogotá</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Europe</SelectLabel>
|
||||
<SelectItem value="Europe/London">London (GMT/BST)</SelectItem>
|
||||
<SelectItem value="Europe/Paris">Paris (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Berlin">Berlin (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Amsterdam">Amsterdam (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Madrid">Madrid (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Rome">Rome (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Zurich">Zurich (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Stockholm">Stockholm (CET)</SelectItem>
|
||||
<SelectItem value="Europe/Helsinki">Helsinki (EET)</SelectItem>
|
||||
<SelectItem value="Europe/Athens">Athens (EET)</SelectItem>
|
||||
<SelectItem value="Europe/Istanbul">Istanbul (TRT)</SelectItem>
|
||||
<SelectItem value="Europe/Moscow">Moscow (MSK)</SelectItem>
|
||||
<SelectItem value="Europe/Kiev">Kyiv (EET)</SelectItem>
|
||||
<SelectItem value="Europe/Warsaw">Warsaw (CET)</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Asia & Pacific</SelectLabel>
|
||||
<SelectItem value="Asia/Dubai">Dubai (GST)</SelectItem>
|
||||
<SelectItem value="Asia/Kolkata">India (IST)</SelectItem>
|
||||
<SelectItem value="Asia/Bangkok">Bangkok (ICT)</SelectItem>
|
||||
<SelectItem value="Asia/Singapore">Singapore (SGT)</SelectItem>
|
||||
<SelectItem value="Asia/Hong_Kong">Hong Kong (HKT)</SelectItem>
|
||||
<SelectItem value="Asia/Shanghai">Shanghai (CST)</SelectItem>
|
||||
<SelectItem value="Asia/Tokyo">Tokyo (JST)</SelectItem>
|
||||
<SelectItem value="Asia/Seoul">Seoul (KST)</SelectItem>
|
||||
<SelectItem value="Asia/Taipei">Taipei (CST)</SelectItem>
|
||||
<SelectItem value="Asia/Jakarta">Jakarta (WIB)</SelectItem>
|
||||
<SelectItem value="Australia/Sydney">Sydney (AEST)</SelectItem>
|
||||
<SelectItem value="Australia/Melbourne">Melbourne (AEST)</SelectItem>
|
||||
<SelectItem value="Australia/Perth">Perth (AWST)</SelectItem>
|
||||
<SelectItem value="Pacific/Auckland">Auckland (NZST)</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Africa & Middle East</SelectLabel>
|
||||
<SelectItem value="Africa/Cairo">Cairo (EET)</SelectItem>
|
||||
<SelectItem value="Africa/Lagos">Lagos (WAT)</SelectItem>
|
||||
<SelectItem value="Africa/Johannesburg">Johannesburg (SAST)</SelectItem>
|
||||
<SelectItem value="Africa/Nairobi">Nairobi (EAT)</SelectItem>
|
||||
<SelectItem value="Asia/Riyadh">Riyadh (AST)</SelectItem>
|
||||
<SelectItem value="Asia/Tehran">Tehran (IRST)</SelectItem>
|
||||
</SelectGroup>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Other</SelectLabel>
|
||||
<SelectItem value="UTC">UTC</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Separator className="my-6" />
|
||||
|
||||
{/* Save button */}
|
||||
<div className="flex justify-end">
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 animate-spin mr-2" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
'Save Settings'
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user