changed some styles in the Fixed Deposit section like other sections

src/dashboard/Dashboard.tsx

@@ -34,18 +34,18 @@ const Dashboard = () => {
 
   const handleMainTabChange = (tabId: MainTab) => {
     setActiveMainTab(tabId);
-    // Set default sub tab based on main tab, but none for customer-details
+    // Set default sub tab based on main tab - always first form
     const defaultSubTabs: Record<string, string> = {
       'transactions': 'bank-transfer',
       'summary': 'branch-summary',
-      'accounts': 'fixed-deposit',
-      'create-account': 'fixed-deposit-new',
-      'users': 'customers',
+      'accounts': 'account-details',
+      'create-account': 'joint-account-new',
+      'users': 'create-user',
       'customer-details': 'customer-info',
-      'branches': 'summary',
+      'branches': 'create-branch',
       'savings-plans': 'create',
       'my-profile': 'details',
-      'fixed-deposits': 'fixed-deposit',
+      'fixed-deposits': 'create-fd',
     };
     setActiveSubTab(defaultSubTabs[tabId]);
   };

src/dashboard/forms/CreateBranchForm.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { SubmitButton } from '../../components/common';
 import type { CreateBranch, BranchDetails } from '../../features/branch';
 
 interface CreateBranchFormProps {
@@ -78,11 +77,11 @@ const CreateBranchForm: React.FC<CreateBranchFormProps> = ({ onSuccess, isLoadin
     }
 
     return (
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-6">
             {/* Parent handles API errors; this form shows local success state only */}
 
             <div>
-                <label htmlFor="name" className="block text-sm text-blue-700 font-medium mb-1">
+                <label htmlFor="name" className="block text-sm font-semibold text-slate-700 mb-2">
                     Branch Name
                 </label>
                 <input
@@ -92,13 +91,13 @@ const CreateBranchForm: React.FC<CreateBranchFormProps> = ({ onSuccess, isLoadin
                     value={formData.name}
                     onChange={handleChange}
                     required
-                    className="p-2 border rounded w-full focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white border-blue-200"
+                    className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
                     placeholder="Enter branch name"
                 />
             </div>
 
             <div>
-                <label htmlFor="address" className="block text-sm text-blue-700 font-medium mb-1">
+                <label htmlFor="address" className="block text-sm font-semibold text-slate-700 mb-2">
                     Branch Address
                 </label>
                 <textarea
@@ -108,16 +107,18 @@ const CreateBranchForm: React.FC<CreateBranchFormProps> = ({ onSuccess, isLoadin
                     onChange={handleChange}
                     required
                     rows={3}
-                    className="p-2 border rounded w-full focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white border-blue-200"
+                    className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none resize-none"
                     placeholder="Enter branch address"
                 />
             </div>
 
-            <div className="flex justify-end">
-                <SubmitButton isSubmitting={!!isLoading}>
-                    Create Branch
-                </SubmitButton>
-            </div>
+            <button
+                type="submit"
+                disabled={!!isLoading}
+                className="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold py-4 rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-600/30"
+            >
+                {isLoading ? 'Creating...' : 'Create Branch'}
+            </button>
         </form>
     );
 };

src/dashboard/forms/CreateFixedDepositForm.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { getFDPlans, openFixedDeposit, type FixedDeposit, type FDPlan } from '../../api/fd';
+import { Wallet } from 'lucide-react';
 
 interface CreateFixedDepositFormProps {
   onSuccess: (fd: FixedDeposit) => void;
@@ -13,6 +14,8 @@ const CreateFixedDepositForm = ({ onSuccess, onError }: CreateFixedDepositFormPr
   const [plans, setPlans] = useState<FDPlan[]>([]);
   const [loading, setLoading] = useState(false);
   const [fetchingPlans, setFetchingPlans] = useState(true);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     const fetchPlans = async () => {
@@ -35,18 +38,23 @@ const CreateFixedDepositForm = ({ onSuccess, onError }: CreateFixedDepositFormPr
     if (!savingsAccountNo || !amount || !selectedPlanId) return;
 
     setLoading(true);
+    setError(null);
+    setSuccess(false);
+
     try {
       const response = await openFixedDeposit({
         savings_account_no: savingsAccountNo,
         amount: Number(amount),
         plan_id: selectedPlanId
       });
+      setSuccess(true);
       onSuccess(response);
       setSavingsAccountNo('');
       setAmount('');
       setSelectedPlanId('');
     } catch (err: any) {
       const errorMsg = err.response?.data?.detail || err.message || 'Failed to create fixed deposit';
+      setError(errorMsg);
       onError(errorMsg);
     } finally {
       setLoading(false);
@@ -60,15 +68,25 @@ const CreateFixedDepositForm = ({ onSuccess, onError }: CreateFixedDepositFormPr
 
   if (fetchingPlans) {
     return (
-      <div className="bg-slate-50 rounded-lg p-6 text-center">
+      <div className="bg-white rounded-2xl shadow-xl p-8 border border-slate-200 text-center">
         <div className="text-slate-600">Loading FD plans...</div>
       </div>
     );
   }
 
   return (
-    <div className="space-y-6">
-      <form onSubmit={handleSubmit} className="space-y-4">
+    <div className="bg-white rounded-2xl shadow-xl p-8 border border-slate-200">
+      <div className="flex items-center gap-3 mb-6 pb-6 border-b border-slate-200">
+        <div className="w-12 h-12 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl flex items-center justify-center">
+          <Wallet className="w-6 h-6 text-blue-600" />
+        </div>
+        <div>
+          <h3 className="text-2xl font-bold text-slate-800">Fixed Deposit</h3>
+          <p className="text-sm text-slate-500">Open a new fixed deposit account</p>
+        </div>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-6">
         <div>
           <label htmlFor="savingsAccountNo" className="block text-sm font-semibold text-slate-700 mb-2">
             Savings Account Number
@@ -78,7 +96,7 @@ const CreateFixedDepositForm = ({ onSuccess, onError }: CreateFixedDepositFormPr
             id="savingsAccountNo"
             value={savingsAccountNo}
             onChange={(e) => setSavingsAccountNo(e.target.value)}
-            className="w-full px-4 py-2 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
+            className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
             required
             placeholder="Enter savings account number"
           />
@@ -92,7 +110,7 @@ const CreateFixedDepositForm = ({ onSuccess, onError }: CreateFixedDepositFormPr
             id="plan"
             value={selectedPlanId}
             onChange={(e) => setSelectedPlanId(e.target.value)}
-            className="w-full px-4 py-2 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
+            className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
             required
           >
             <option value="">-- Select a plan --</option>
@@ -113,7 +131,7 @@ const CreateFixedDepositForm = ({ onSuccess, onError }: CreateFixedDepositFormPr
             id="amount"
             value={amount}
             onChange={(e) => setAmount(e.target.value)}
-            className="w-full px-4 py-2 rounded-lg border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
+            className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
             required
             min="1000"
             placeholder="Enter amount"
@@ -122,7 +140,7 @@ const CreateFixedDepositForm = ({ onSuccess, onError }: CreateFixedDepositFormPr
         </div>
 
         {selectedPlan && (
-          <div className="p-4 bg-blue-50 border border-blue-200 rounded-lg space-y-3">
+          <div className="p-4 bg-blue-50 border border-blue-200 rounded-xl space-y-3">
             <h4 className="font-semibold text-slate-800">Plan Details</h4>
             <div className="grid grid-cols-3 gap-3 text-sm">
               <div>
@@ -143,10 +161,22 @@ const CreateFixedDepositForm = ({ onSuccess, onError }: CreateFixedDepositFormPr
           </div>
         )}
 
+        {error && (
+          <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-xl">
+            {error}
+          </div>
+        )}
+
+        {success && (
+          <div className="bg-emerald-50 border border-emerald-200 text-emerald-700 px-4 py-3 rounded-xl">
+            Fixed deposit created successfully!
+          </div>
+        )}
+
         <button
           type="submit"
           disabled={loading || !savingsAccountNo || !amount || !selectedPlanId}
-          className="w-full py-2 px-4 rounded-lg font-medium text-white bg-blue-600 hover:bg-blue-700 transition-colors disabled:bg-slate-300 disabled:cursor-not-allowed"
+          className="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold py-4 rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-600/30"
         >
           {loading ? 'Creating...' : 'Create Fixed Deposit'}
         </button>

src/dashboard/forms/UpdateBranchForm.tsx

@@ -1,5 +1,4 @@
 import React, { useState } from 'react';
-import { SubmitButton } from '../../components/common';
 import type { BranchDetails, UpdateBranch } from '../../features/branch';
 
 interface UpdateBranchFormProps {
@@ -82,38 +81,40 @@ const UpdateBranchForm: React.FC<UpdateBranchFormProps> = ({ branch, onSubmit, i
     }
 
     return (
-        <form onSubmit={handleSubmit} className="space-y-4">
+        <form onSubmit={handleSubmit} className="space-y-6">
             <div>
-                <label htmlFor="name" className="block text-sm text-blue-700 font-medium mb-1">Branch Name</label>
+                <label htmlFor="name" className="block text-sm font-semibold text-slate-700 mb-2">Branch Name</label>
                 <input
                     type="text"
                     id="name"
                     name="name"
                     value={formData.name}
                     onChange={handleChange}
-                    className="p-2 border rounded w-full focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white border-blue-200"
+                    className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none"
                     placeholder="Enter branch name"
                 />
             </div>
 
             <div>
-                <label htmlFor="address" className="block text-sm text-blue-700 font-medium mb-1">Branch Address</label>
+                <label htmlFor="address" className="block text-sm font-semibold text-slate-700 mb-2">Branch Address</label>
                 <textarea
                     id="address"
                     name="address"
                     value={formData.address}
                     onChange={handleChange}
-                    className="p-2 border rounded w-full focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white border-blue-200"
+                    className="w-full px-4 py-3 rounded-xl border border-slate-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all outline-none resize-none"
                     placeholder="Enter branch address"
                     rows={3}
                 />
             </div>
 
-            <div className="flex justify-end">
-                <SubmitButton isSubmitting={!!isLoading}>
-                    Update Branch
-                </SubmitButton>
-            </div>
+            <button
+                type="submit"
+                disabled={!!isLoading}
+                className="w-full bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold py-4 rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-600/30"
+            >
+                {isLoading ? 'Updating...' : 'Update Branch'}
+            </button>
         </form>
     );
 };

src/dashboard/sections/BranchSection.tsx

@@ -106,20 +106,18 @@ const BranchSection: React.FC<BranchSectionProps> = ({ activeSubTab, setActiveSu
 
             {/* Search results are rendered inside the Search subtab's form component. */}
 
-            <div className="mt-6 bg-white p-8 rounded-xl shadow-md border border-gray-100">
+            <div className="mt-6 bg-white p-8 rounded-xl shadow-xl border border-slate-200">
                 {/* CREATE BRANCH */}
                 {activeSubTab === 'create-branch' && (
-                    <div className="max-w-6xl mx-auto">
-                        <h2 className="text-xl font-semibold mb-4">Create New Branch</h2>
+                    <div>
                         {error && <div className="mb-4"><Alert type="error">{error}</Alert></div>}
                         <CreateBranchForm onSuccess={handleCreate} isLoading={loading} createdBranch={createdBranch} />
                     </div>
                 )}
 
                 {/* UPDATE BRANCH */}
                 {activeSubTab === 'update-branch' && (
-                    <div className="max-w-6xl mx-auto">
-                        <h2 className="text-xl font-semibold mb-4">Update Branch</h2>
+                    <div>
                         {error && <div className="mb-4"><Alert type="error">{error}</Alert></div>}
                         {selectedBranch ? (
                             <UpdateBranchForm
@@ -138,8 +136,7 @@ const BranchSection: React.FC<BranchSectionProps> = ({ activeSubTab, setActiveSu
 
                 {/* SEARCH BRANCH */}
                 {activeSubTab === 'search-branch' && (
-                    <div className="max-w-6xl mx-auto">
-                        <h2 className="text-xl font-semibold mb-4">Search Branches</h2>
+                    <div>
                         {error && <div className="mb-4"><Alert type="error">{error}</Alert></div>}
                         <SearchBranchForm
                             // When selecting from the main Search tab we only set the selected branch

src/dashboard/sections/FixedDepositSection.tsx

@@ -49,14 +49,14 @@ const FixedDepositSection = () => {
       />
 
       {activeSubTab === 'create-fd' && (
-        <div className="max-w-2xl mx-auto">
+        <div>
           {error && (
             <div className="mb-4">
               <Alert type="error">{error}</Alert>
             </div>
           )}
 
-          <div className="bg-white rounded-lg shadow-sm p-6 space-y-4">
+          <div className="bg-white rounded-xl shadow-xl p-8 border border-slate-200 space-y-6">
             <h3 className="text-lg font-semibold text-slate-800">Create New Fixed Deposit Account</h3>
             <CreateFixedDepositForm onSuccess={handleSuccess} onError={handleError} />
           </div>