- Looking for a starting point or more instructions? Head over to{" "}
-
- Templates
- {" "}
- or the{" "}
-
- Learning
- {" "}
- center.
-
+ {/* Left Side - Guide */}
+
+ {/* Background Accents */}
+
+
+
+
+
+
SISTEM INFORMASI KESEHATAN
-
-
-
- Deploy Now
-
-
- Documentation
-
+
+
Panduan Login
+
+
+
+
+
+
1
+
+
Masukkan Username
+
Gunakan username yang telah diberikan oleh administrator sistem.
+
+
+
+
+
2
+
+
Masukkan Password
+
Ketik password Anda dengan benar. Password bersifat case-sensitive.
+
+
+
+
+
3
+
+
Klik Tombol Masuk
+
Setelah mengisi data, klik tombol "Masuk" untuk mengakses sistem.
+
+
-
+
+
+
+
+
Lupa Password?
+
Hubungi administrator untuk reset password atau gunakan fitur "Lupa Password" di form login.
+
+
+
+
+
Bantuan: (021) 555-1234
+
+
+
Sistem ini dilindungi dan diawasi. Akses tidak sah akan ditindak sesuai hukum yang berlaku.
+
+
+
+
+
+ {/* Right Side - Login Form */}
+
+
+ {/* Decorative Elements for Card style */}
+
+
+
+
Login
+
Masukkan Akun Anda untuk melanjutkan
+
+
+
+
+
+
+
+ © 2024 HealthPortal. Hak Cipta Dilindungi.
+
+
- );
+ )
}
diff --git a/app/test-supabase/page.tsx b/app/test-supabase/page.tsx
new file mode 100644
index 0000000..39eade8
--- /dev/null
+++ b/app/test-supabase/page.tsx
@@ -0,0 +1,35 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { supabase } from '@/lib/supabase'
+
+export default function TestPage() {
+ const [status, setStatus] = useState('Checking connection...')
+
+ useEffect(() => {
+ async function checkConnection() {
+ try {
+ const { data, error } = await supabase.auth.getSession()
+ if (error) {
+ setStatus('Error connecting to Supabase: ' + error.message)
+ } else {
+ setStatus('Success! Connected to Supabase. Session data available.')
+ }
+ } catch (err: any) {
+ setStatus('Unexpected error: ' + err.message)
+ }
+ }
+ checkConnection()
+ }, [])
+
+ return (
+
+
Supabase Connection Test
+
+ {status}
+
+
+ If you see a success message, the Supabase client is correctly initialized with the provided URL and Anon Key.
+
+
+ )
+}
diff --git a/components/dashboard-footer.tsx b/components/dashboard-footer.tsx
new file mode 100644
index 0000000..fe24624
--- /dev/null
+++ b/components/dashboard-footer.tsx
@@ -0,0 +1,33 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+
+export function DashboardFooter() {
+ const pathname = usePathname()
+
+ // Don't show footer on login page (/)
+ if (pathname === '/') {
+ return null
+ }
+
+ return (
+
+ )
+}
diff --git a/components/feature-card.tsx b/components/feature-card.tsx
new file mode 100644
index 0000000..d50566c
--- /dev/null
+++ b/components/feature-card.tsx
@@ -0,0 +1,51 @@
+import { LucideIcon } from 'lucide-react'
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+
+interface FeatureCardProps {
+ title: string
+ description?: string
+ icon: LucideIcon
+ href: string
+ color: 'green' | 'blue' | 'orange' | 'purple' | 'red'
+ className?: string
+}
+
+export function FeatureCard({ title, description, icon: Icon, href, color, className }: FeatureCardProps) {
+ const colorStyles = {
+ green: 'border-green-500 text-green-600',
+ blue: 'border-blue-500 text-blue-600',
+ orange: 'border-orange-500 text-orange-600',
+ purple: 'border-purple-500 text-purple-600',
+ red: 'border-red-500 text-red-600',
+ }
+
+ const iconBgStyles = {
+ green: 'bg-green-50 text-green-600 border-green-200',
+ blue: 'bg-blue-50 text-blue-600 border-blue-200',
+ orange: 'bg-orange-50 text-orange-600 border-orange-200',
+ purple: 'bg-purple-50 text-purple-600 border-purple-200',
+ red: 'bg-red-50 text-red-600 border-red-200',
+ }
+
+ return (
+
+
+
+
+
+
+
+
{title}
+ {description && (
+
{description}
+ )}
+
+
+
+ )
+}
diff --git a/components/logout-button.tsx b/components/logout-button.tsx
new file mode 100644
index 0000000..80b6345
--- /dev/null
+++ b/components/logout-button.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+import { logout } from '@/app/actions'
+import { Button } from '@/components/ui/button'
+import { LogOut } from 'lucide-react'
+
+export function LogoutButton() {
+ return (
+
+ )
+}
diff --git a/components/realtime-clock.tsx b/components/realtime-clock.tsx
new file mode 100644
index 0000000..4f01105
--- /dev/null
+++ b/components/realtime-clock.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export function RealtimeClock() {
+ const [date, setDate] = useState
(null) // Start null to avoid hydration mismatch
+
+ useEffect(() => {
+ setDate(new Date()) // Set initial date on client
+ const timer = setInterval(() => {
+ setDate(new Date())
+ }, 1000)
+ return () => clearInterval(timer)
+ }, [])
+
+ if (!date) {
+ // Render a placeholder or nothing during SSR/initial mount to prevent flicker
+ return (
+
+
00:00:00 WIB
+
LOADING...
+
+
{formattedTime} WIB
+
{formattedDate}
+