Skip to content

Commit

Permalink
fix: frontend UI improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@rflihxyz
rflihxyz committed Dec 22, 2024
1 parent f3ed35d commit 8fbb048
Show file tree
Hide file tree
Showing 7 changed files with 550 additions and 227 deletions.
60 changes: 53 additions & 7 deletions apps/webapp/src/app/(Dashboard)/configuration/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ import useUpdatePullFrequency from "@/hooks/create/useCreatePullFrequency";
import { toast } from "sonner";
import { useQueryClient } from "@tanstack/react-query";
import { Loader2 } from "lucide-react";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";

const frequencyOptions = [
{ label: '5 min', value: 300 },
Expand All @@ -63,7 +65,9 @@ export default function Page() {
const [open, setOpen] = useState(false);
const [localFrequencies, setLocalFrequencies] = useState<Record<string, string>>({});
const [loadingStates, setLoadingStates] = useState<Record<string, boolean>>({});

const [dialogOpen, setDialogOpen] = useState(false);
const [confirmText, setConfirmText] = useState('');
const [selectedVertical, setSelectedVertical] = useState<string | null>(null);

const queryClient = useQueryClient();

Expand Down Expand Up @@ -160,11 +164,54 @@ export default function Page() {
}
};



const handleConfirmSuspend = async () => {
try {
await saveFrequency(selectedVertical, '0');
setDialogOpen(false);
} catch (error) {
console.error('Error suspending sync:', error);
}
};

const handleSuspendClick = (vertical: string) => {
setSelectedVertical(vertical);
setConfirmText('');
setDialogOpen(true);
};

return (

<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent>
<DialogHeader>
<DialogTitle>Confirm Sync Suspension</DialogTitle>
<DialogDescription>
This will stop all automatic syncs for {selectedVertical?.toUpperCase()}. To confirm, please type "suspend" below.
</DialogDescription>
</DialogHeader>
<Input
value={confirmText}
onChange={(e) => setConfirmText(e.target.value)}
placeholder="Type 'suspend' to confirm"
/>
<DialogFooter>
<Button
variant="ghost"
onClick={() => setDialogOpen(false)}
>
Cancel
</Button>
<Button
variant="destructive"
onClick={handleConfirmSuspend}
disabled={confirmText.toLowerCase() !== 'suspend'}
>
Confirm Suspension
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<div className="flex-1 space-y-4 p-8 pt-6">
<div className="flex items-center justify-between space-y-2">
<Heading
Expand Down Expand Up @@ -245,7 +292,7 @@ export default function Page() {
<CardContent>
{VERTICALS.map(vertical => (
<div key={vertical} className="mb-4">
<label className="block text-sm font-medium text-white mb-1">
<label className="block text-sm font-medium mb-1">
{vertical.toUpperCase()}
</label>
<div className="flex items-center space-x-2">
Expand All @@ -266,13 +313,12 @@ export default function Page() {
</Select>
{localFrequencies[vertical] && localFrequencies[vertical] !== '0'&& (
<Button
onClick={() => handleFrequencyChangeAndSave(vertical, '0')}
onClick={() => handleSuspendClick(vertical)}
size="sm"
variant="destructive"
className="h-7"
>
{localFrequencies[vertical]}
Deactivate
Suspend Sync
</Button>
)}
</div>
Expand Down
68 changes: 60 additions & 8 deletions apps/webapp/src/app/b2c/login/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,22 @@ import Cookies from 'js-cookie';
import useProfileStore from "@/state/profileStore";
import useUser from "@/hooks/get/useUser";
import { Button } from "@/components/ui/button";
import { useTheme } from "next-themes";

export default function Page() {
const [userInitialized,setUserInitialized] = useState(true)
const {mutate} = useUser()
const router = useRouter()
const {profile} = useProfileStore();
const [activeTab, setActiveTab] = useState('login');
const { theme, systemTheme } = useTheme();
const [mounted, setMounted] = useState(false);

useEffect(() => {
setMounted(true);
}, []);

const currentTheme = theme === 'system' ? systemTheme : theme;

useEffect(() => {
if(profile)
Expand Down Expand Up @@ -50,17 +59,63 @@ export default function Page() {

},[])

if (!mounted) {
return (
<div className='min-h-screen flex justify-center items-center'>
<div className='w-[450px] min-h-[500px] p-8 rounded-lg border bg-card'>
<div className="flex justify-center mb-8">
<img
src="/logo-panora-black.png"
className='w-32'
alt="Panora"
/>
</div>
<div className="text-center space-y-2 mb-8">
<h1 className="text-2xl font-semibold tracking-tight">Welcome</h1>
<p className="text-sm text-muted-foreground">Sign in to your account or create one</p>
</div>
<Tabs defaultValue="login" className="space-y-6">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="login">Login</TabsTrigger>
<TabsTrigger value="create">Create Account</TabsTrigger>
</TabsList>
<TabsContent value="login">
<LoginUserForm/>
</TabsContent>
<TabsContent value="create">
<CreateUserForm/>
</TabsContent>
</Tabs>

{activeTab === 'forgot-password' && (
<Button variant="link" onClick={() => setActiveTab('login')}>
Back to Login
</Button>
)}
</div>
</div>
);
}

return (
<>

{!userInitialized ?
(
<div className='min-h-screen grid lg:grid-cols-2 mx-auto text-left'>
<div className='flex-1 flex flex-col py-12 sm:items-center lg:flex-none lg:px-20 xl:px-24'>
<div className="w-[400px]">
<img src="/logo.png" className='w-14' />
<div className='min-h-screen flex justify-center items-center'>
<div className='w-[450px] min-h-[500px] p-8 rounded-lg border bg-card'>
<div className="flex justify-center mb-8">
<img
src={currentTheme === "dark" ? "/logo-panora-white-hq.png" : "/logo-panora-black.png"}
className='w-32'
alt="Panora"
/>
</div>
<div className="text-center space-y-2 mb-8">
<h1 className="text-2xl font-semibold tracking-tight">Welcome</h1>
<p className="text-sm text-muted-foreground">Sign in to your account or create one</p>
</div>
<Tabs defaultValue="login" className="w-[400px] space-y-4">
<Tabs defaultValue="login" className="space-y-6">
<TabsList className="grid w-full grid-cols-2">
<TabsTrigger value="login">Login</TabsTrigger>
<TabsTrigger value="create">Create Account</TabsTrigger>
Expand All @@ -79,9 +134,6 @@ export default function Page() {
</Button>
)}
</div>
<div className='hidden lg:block relative flex-1'>
<img className='absolute inset-0 h-full w-full object-cover border-l' src="/bgbg.jpeg" alt='Login Page Image' />
</div>
</div>
) :
(
Expand Down
14 changes: 11 additions & 3 deletions apps/webapp/src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,15 @@ const inter = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "Panora",
description: "Unified API",
icons: {
icon: [
{
url: '/logo.png',
href: '/logo.png',
type: 'image/png',
}
]
}
};

export default function RootLayout({
Expand All @@ -22,16 +31,15 @@ export default function RootLayout({
<body className={`${inter.className} overflow-hidden`}>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
defaultTheme="light"
enableSystem={false}
disableTransitionOnChange
>
<Provider>
{children}
<Toaster />
</Provider>
</ThemeProvider>

</body>
</html>
);
Expand Down
Loading

0 comments on commit 8fbb048

Please sign in to comment.