From 53225cc83093c7018571f5c518c5a4ba1d665013 Mon Sep 17 00:00:00 2001
From: FlashL3opard <69573060+Flashl3opard@users.noreply.github.com>
Date: Fri, 10 Jul 2026 17:58:39 +0530
Subject: [PATCH 1/2] PHEE-380: add Login page and Settings page with accordion
 sections

---
 src/components/ui/accordion.tsx   |  59 ++++++
 src/components/ui/checkbox.tsx    |  26 +++
 src/components/ui/switch.tsx      |  25 +++
 src/modules/auth/Login.tsx        | 142 +++++++++++++++
 src/modules/settings/Settings.tsx | 293 ++++++++++++++++++++++++++++++
 src/pages/LoginPage.tsx           |   8 +-
 src/pages/Settings.tsx            |   8 +-
 7 files changed, 547 insertions(+), 14 deletions(-)
 create mode 100644 src/components/ui/accordion.tsx
 create mode 100644 src/components/ui/checkbox.tsx
 create mode 100644 src/components/ui/switch.tsx
 create mode 100644 src/modules/auth/Login.tsx
 create mode 100644 src/modules/settings/Settings.tsx

diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..aa0e29a
--- /dev/null
+++ b/src/components/ui/accordion.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { Accordion as AccordionPrimitive } from "radix-ui"
+import { ChevronDown } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const Accordion = AccordionPrimitive.Root
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "flex flex-1 items-center justify-between py-4 text-sm font-medium text-foreground transition-all hover:underline outline-none [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDown className="size-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+      {...props}
+    >
+      <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
new file mode 100644
index 0000000..e535c5d
--- /dev/null
+++ b/src/components/ui/checkbox.tsx
@@ -0,0 +1,26 @@
+import * as React from "react"
+import { Checkbox as CheckboxPrimitive } from "radix-ui"
+import { CheckIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer size-4 shrink-0 rounded border border-input bg-transparent transition-colors outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#1565C0] data-[state=checked]:border-[#1565C0] data-[state=checked]:text-white",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center">
+        <CheckIcon className="size-3" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
diff --git a/src/components/ui/switch.tsx b/src/components/ui/switch.tsx
new file mode 100644
index 0000000..9c353e3
--- /dev/null
+++ b/src/components/ui/switch.tsx
@@ -0,0 +1,25 @@
+import * as React from "react"
+import { Switch as SwitchPrimitive } from "radix-ui"
+import { cn } from "@/lib/utils"
+
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#1565C0] data-[state=unchecked]:bg-gray-200",
+        className
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        className="pointer-events-none block size-4 rounded-full bg-white shadow-sm transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      />
+    </SwitchPrimitive.Root>
+  )
+}
+
+export { Switch }
diff --git a/src/modules/auth/Login.tsx b/src/modules/auth/Login.tsx
new file mode 100644
index 0000000..d9737ea
--- /dev/null
+++ b/src/modules/auth/Login.tsx
@@ -0,0 +1,142 @@
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { User, Lock, Eye, EyeOff } from 'lucide-react'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+
+const TENANTS = ['greenbank', 'bluebank', 'redbank']
+
+export default function Login() {
+  const navigate = useNavigate()
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [tenant, setTenant] = useState('')
+  const [rememberMe, setRememberMe] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    if (username === 'mifos' && password === 'password') {
+      navigate('/')
+    } else {
+      alert('Invalid credentials. Use mifos / password.')
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[#1565C0] flex items-center justify-center p-4">
+      <div className="w-full max-w-md bg-white rounded-2xl shadow-xl p-8 space-y-6">
+        {/* Logo + title */}
+        <div className="flex flex-col items-center gap-2">
+          <img
+            src="/payment-hub-ee.png"
+            alt="Payment Hub EE"
+            className="h-12 object-contain"
+            onError={(e) => {
+              e.currentTarget.style.display = 'none'
+            }}
+          />
+          <div className="text-center">
+            <p className="text-xl font-bold text-gray-900">Payment Hub EE</p>
+            <p className="text-sm text-muted-foreground">Operations</p>
+          </div>
+        </div>
+
+        {/* Form */}
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Username */}
+          <div className="space-y-1.5">
+            <Label htmlFor="username">Username</Label>
+            <div className="relative">
+              <User className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+              <Input
+                id="username"
+                placeholder="Enter username"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="pl-8"
+                required
+              />
+            </div>
+          </div>
+
+          {/* Password */}
+          <div className="space-y-1.5">
+            <Label htmlFor="password">Password</Label>
+            <div className="relative">
+              <Lock className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+              <Input
+                id="password"
+                type={showPassword ? 'text' : 'password'}
+                placeholder="Enter password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="pl-8 pr-9"
+                required
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword((v) => !v)}
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+                tabIndex={-1}
+              >
+                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+              </button>
+            </div>
+          </div>
+
+          {/* Tenant */}
+          <div className="space-y-1.5">
+            <Label htmlFor="tenant">Tenant</Label>
+            <Select value={tenant} onValueChange={setTenant} required>
+              <SelectTrigger id="tenant" className="w-full">
+                <SelectValue placeholder="Select tenant" />
+              </SelectTrigger>
+              <SelectContent>
+                {TENANTS.map((t) => (
+                  <SelectItem key={t} value={t}>
+                    {t}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Remember me */}
+          <div className="flex items-center gap-2">
+            <Checkbox
+              id="rememberMe"
+              checked={rememberMe}
+              onCheckedChange={(v) => setRememberMe(Boolean(v))}
+            />
+            <Label htmlFor="rememberMe" className="font-normal cursor-pointer">
+              Remember me
+            </Label>
+          </div>
+
+          {/* Submit */}
+          <Button
+            type="submit"
+            className="w-full bg-[#1565C0] hover:bg-[#0d47a1] text-white"
+          >
+            Sign In
+          </Button>
+        </form>
+
+        {/* Footer */}
+        <p className="text-center text-xs text-muted-foreground">
+          Powered by Mifos Initiative
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/src/modules/settings/Settings.tsx b/src/modules/settings/Settings.tsx
new file mode 100644
index 0000000..0c75a0b
--- /dev/null
+++ b/src/modules/settings/Settings.tsx
@@ -0,0 +1,293 @@
+import React, { useState } from 'react'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { Switch } from '@/components/ui/switch'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { CheckCircle, ImageIcon } from 'lucide-react'
+
+const TENANTS = ['greenbank', 'bluebank', 'redbank']
+const FONTS = ['Inter', 'Roboto', 'Open Sans']
+
+function SuccessAlert() {
+  return (
+    <div className="flex items-center gap-2 rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
+      <CheckCircle className="h-4 w-4 shrink-0" />
+      Settings saved successfully
+    </div>
+  )
+}
+
+export default function Settings() {
+  // Main Configuration
+  const [backendUrl, setBackendUrl] = useState('')
+  const [connectorUrl, setConnectorUrl] = useState('')
+  const [defaultTenant, setDefaultTenant] = useState('')
+  const [mainSaved, setMainSaved] = useState(false)
+
+  // Images
+  const [logoPreview, setLogoPreview] = useState<string | null>(null)
+
+  // Theme
+  const [primaryColor, setPrimaryColor] = useState('#1565C0')
+  const [fontFamily, setFontFamily] = useState('')
+  const [darkMode, setDarkMode] = useState(false)
+  const [themeSaved, setThemeSaved] = useState(false)
+
+  // Contact
+  const [supportEmail, setSupportEmail] = useState('')
+  const [helpDeskUrl, setHelpDeskUrl] = useState('')
+  const [orgName, setOrgName] = useState('')
+  const [contactSaved, setContactSaved] = useState(false)
+
+  function saveWithFeedback(
+    setter: React.Dispatch<React.SetStateAction<boolean>>
+  ) {
+    setter(true)
+    setTimeout(() => setter(false), 2500)
+  }
+
+  function handleLogoChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0]
+    if (file) {
+      setLogoPreview(URL.createObjectURL(file))
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-semibold tracking-tight">Settings</h1>
+
+      <div className="rounded-lg border bg-white">
+        <Accordion type="single" collapsible className="px-4">
+          {/* 1. Main Configuration */}
+          <AccordionItem value="main-config">
+            <AccordionTrigger>Main Configuration</AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-4">
+                {mainSaved && <SuccessAlert />}
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="backendUrl">Operations Backend URL</Label>
+                  <Input
+                    id="backendUrl"
+                    placeholder="http://ops.mifos.gazelle.test/api/v1"
+                    value={backendUrl}
+                    onChange={(e) => setBackendUrl(e.target.value)}
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="connectorUrl">Bulk Connector URL</Label>
+                  <Input
+                    id="connectorUrl"
+                    placeholder="https://ops.mifos.gazelle.test"
+                    value={connectorUrl}
+                    onChange={(e) => setConnectorUrl(e.target.value)}
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="defaultTenant">Default Tenant</Label>
+                  <Select value={defaultTenant} onValueChange={setDefaultTenant}>
+                    <SelectTrigger id="defaultTenant" className="w-full">
+                      <SelectValue placeholder="Select tenant" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {TENANTS.map((t) => (
+                        <SelectItem key={t} value={t}>
+                          {t}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <Button
+                  className="bg-[#1565C0] hover:bg-[#0d47a1] text-white"
+                  onClick={() => saveWithFeedback(setMainSaved)}
+                >
+                  Save
+                </Button>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          {/* 2. Images */}
+          <AccordionItem value="images">
+            <AccordionTrigger>Images</AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-4">
+                {/* Logo upload */}
+                <div className="space-y-1.5">
+                  <Label>Logo Upload</Label>
+                  <label className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 px-6 py-8 cursor-pointer hover:bg-gray-100 transition-colors">
+                    <ImageIcon className="h-8 w-8 text-gray-400" />
+                    <span className="text-sm text-muted-foreground">
+                      Drag & drop or click to upload logo
+                    </span>
+                    <span className="text-xs text-gray-400">PNG, JPG up to 2MB</span>
+                    <input
+                      type="file"
+                      accept="image/*"
+                      className="hidden"
+                      onChange={handleLogoChange}
+                    />
+                  </label>
+                </div>
+
+                {/* Favicon upload */}
+                <div className="space-y-1.5">
+                  <Label>Favicon Upload</Label>
+                  <label className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 px-6 py-6 cursor-pointer hover:bg-gray-100 transition-colors">
+                    <span className="text-sm text-muted-foreground">
+                      Click to upload favicon (.ico, .png)
+                    </span>
+                    <input type="file" accept=".ico,image/png" className="hidden" />
+                  </label>
+                </div>
+
+                {/* Preview */}
+                {logoPreview && (
+                  <div className="space-y-1.5">
+                    <Label>Current Logo Preview</Label>
+                    <div className="rounded-lg border bg-gray-50 p-4 flex items-center justify-center">
+                      <img
+                        src={logoPreview}
+                        alt="Logo preview"
+                        className="max-h-16 object-contain"
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          {/* 3. Theme and Font */}
+          <AccordionItem value="theme">
+            <AccordionTrigger>Theme and Font</AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-4">
+                {themeSaved && <SuccessAlert />}
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="primaryColor">Primary Color</Label>
+                  <div className="flex items-center gap-3">
+                    <input
+                      id="primaryColor"
+                      type="color"
+                      value={primaryColor}
+                      onChange={(e) => setPrimaryColor(e.target.value)}
+                      className="h-8 w-12 cursor-pointer rounded border border-input p-0.5"
+                    />
+                    <Input
+                      value={primaryColor}
+                      onChange={(e) => setPrimaryColor(e.target.value)}
+                      className="w-32 font-mono"
+                      placeholder="#1565C0"
+                    />
+                  </div>
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="fontFamily">Font Family</Label>
+                  <Select value={fontFamily} onValueChange={setFontFamily}>
+                    <SelectTrigger id="fontFamily" className="w-full">
+                      <SelectValue placeholder="Select font" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {FONTS.map((f) => (
+                        <SelectItem key={f} value={f}>
+                          {f}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <Switch
+                    id="darkMode"
+                    checked={darkMode}
+                    onCheckedChange={setDarkMode}
+                  />
+                  <Label htmlFor="darkMode" className="font-normal cursor-pointer">
+                    Dark Mode
+                  </Label>
+                </div>
+
+                <Button
+                  className="bg-[#1565C0] hover:bg-[#0d47a1] text-white"
+                  onClick={() => saveWithFeedback(setThemeSaved)}
+                >
+                  Save
+                </Button>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+
+          {/* 4. Contact Information */}
+          <AccordionItem value="contact">
+            <AccordionTrigger>Contact Information</AccordionTrigger>
+            <AccordionContent>
+              <div className="space-y-4">
+                {contactSaved && <SuccessAlert />}
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="supportEmail">Support Email</Label>
+                  <Input
+                    id="supportEmail"
+                    type="email"
+                    placeholder="support@example.com"
+                    value={supportEmail}
+                    onChange={(e) => setSupportEmail(e.target.value)}
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="helpDeskUrl">Help Desk URL</Label>
+                  <Input
+                    id="helpDeskUrl"
+                    placeholder="https://helpdesk.example.com"
+                    value={helpDeskUrl}
+                    onChange={(e) => setHelpDeskUrl(e.target.value)}
+                  />
+                </div>
+
+                <div className="space-y-1.5">
+                  <Label htmlFor="orgName">Organization Name</Label>
+                  <Input
+                    id="orgName"
+                    placeholder="Enter organization name"
+                    value={orgName}
+                    onChange={(e) => setOrgName(e.target.value)}
+                  />
+                </div>
+
+                <Button
+                  className="bg-[#1565C0] hover:bg-[#0d47a1] text-white"
+                  onClick={() => saveWithFeedback(setContactSaved)}
+                >
+                  Save
+                </Button>
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx
index 4131015..fec619c 100644
--- a/src/pages/LoginPage.tsx
+++ b/src/pages/LoginPage.tsx
@@ -1,7 +1 @@
-export default function LoginPage() {
-  return (
-    <div className="flex items-center justify-center min-h-screen">
-      <span className="text-2xl font-semibold text-gray-500">Login</span>
-    </div>
-  )
-}
+export { default } from '@/modules/auth/Login'
diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx
index 7a93e1a..4212537 100644
--- a/src/pages/Settings.tsx
+++ b/src/pages/Settings.tsx
@@ -1,7 +1 @@
-export default function Settings() {
-  return (
-    <div className="flex items-center justify-center py-32">
-      <span className="text-2xl font-semibold text-gray-500">Settings</span>
-    </div>
-  )
-}
+export { default } from '@/modules/settings/Settings'

From 3259c129132e78cde78e50b7f0103af59d71ac67 Mon Sep 17 00:00:00 2001
From: FlashL3opard <69573060+Flashl3opard@users.noreply.github.com>
Date: Fri, 10 Jul 2026 19:20:59 +0530
Subject: [PATCH 2/2] Addressed Copilot Suggestions

---
 src/modules/auth/Login.tsx        |  2 +-
 src/modules/settings/Settings.tsx | 12 +++++++-----
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/modules/auth/Login.tsx b/src/modules/auth/Login.tsx
index d9737ea..84e52ce 100644
--- a/src/modules/auth/Login.tsx
+++ b/src/modules/auth/Login.tsx
@@ -85,9 +85,9 @@ export default function Login() {
               />
               <button
                 type="button"
+                aria-label={showPassword ? 'Hide password' : 'Show password'}
                 onClick={() => setShowPassword((v) => !v)}
                 className="absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
-                tabIndex={-1}
               >
                 {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
               </button>
diff --git a/src/modules/settings/Settings.tsx b/src/modules/settings/Settings.tsx
index 0c75a0b..3618903 100644
--- a/src/modules/settings/Settings.tsx
+++ b/src/modules/settings/Settings.tsx
@@ -61,9 +61,11 @@ export default function Settings() {
 
   function handleLogoChange(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0]
-    if (file) {
-      setLogoPreview(URL.createObjectURL(file))
-    }
+    if (!file) return
+    setLogoPreview((prev) => {
+      if (prev) URL.revokeObjectURL(prev)
+      return URL.createObjectURL(file)
+    })
   }
 
   return (
@@ -136,9 +138,9 @@ export default function Settings() {
                   <label className="flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 px-6 py-8 cursor-pointer hover:bg-gray-100 transition-colors">
                     <ImageIcon className="h-8 w-8 text-gray-400" />
                     <span className="text-sm text-muted-foreground">
-                      Drag & drop or click to upload logo
+                      Click to upload logo
                     </span>
-                    <span className="text-xs text-gray-400">PNG, JPG up to 2MB</span>
+                    <span className="text-xs text-gray-400">PNG, JPG</span>
                     <input
                       type="file"
                       accept="image/*"