Fix: Default login credentials

Set default login credentials in the login form.

src/components/AdminDataEntryModal.tsx

@@ -10,7 +10,7 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 import { CalendarIcon } from "lucide-react";
 import { format } from "date-fns";
 import { cn } from "@/lib/utils";
-import { useEmployeeData } from "@/hooks/useEmployeeData";
+import { useSupabaseEmployeeData } from "@/hooks/useSupabaseEmployeeData";
 import { useToast } from "@/hooks/use-toast";
 
 interface AdminDataEntryModalProps {
@@ -20,15 +20,16 @@ interface AdminDataEntryModalProps {
 }
 
 export const AdminDataEntryModal = ({ isOpen, onClose, onDataUpdate }: AdminDataEntryModalProps) => {
-  const { employees, addTransaction } = useEmployeeData();
+  const { employees, addTransaction } = useSupabaseEmployeeData();
   const { toast } = useToast();
   
   const [selectedEmployeeId, setSelectedEmployeeId] = useState<string>('');
   const [collectionAmount, setCollectionAmount] = useState<string>('');
   const [depositAmount, setDepositAmount] = useState<string>('');
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
+  const [loading, setLoading] = useState(false);
 
-  const handleSubmit = (e: React.FormEvent) => {
+  const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     
     if (!selectedEmployeeId) {
@@ -52,24 +53,36 @@ export const AdminDataEntryModal = ({ isOpen, onClose, onDataUpdate }: AdminData
       return;
     }
 
-    addTransaction(selectedEmployeeId, {
+    setLoading(true);
-      date: format(selectedDate, 'yyyy-MM-dd'),
-      collection,
-      deposit
-    });
 
-    toast({
+    try {
-      title: "Success",
+      await addTransaction(selectedEmployeeId, {
-      description: "Transaction added successfully",
+        transaction_date: format(selectedDate, 'yyyy-MM-dd'),
-    });
+        collection_amount: collection,
+        deposit_amount: deposit
+      });
 
-    // Reset form
+      toast({
-    setSelectedEmployeeId('');
+        title: "Success",
-    setCollectionAmount('');
+        description: "Transaction added successfully",
-    setDepositAmount('');
+      });
-    setSelectedDate(new Date());
 
-    onDataUpdate();
+      // Reset form
+      setSelectedEmployeeId('');
+      setCollectionAmount('');
+      setDepositAmount('');
+      setSelectedDate(new Date());
+      
+      onDataUpdate();
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "Failed to add transaction. Please try again.",
+        variant: "destructive"
+      });
+    } finally {
+      setLoading(false);
+    }
   };
 
   const handleClose = () => {
@@ -99,7 +112,7 @@ export const AdminDataEntryModal = ({ isOpen, onClose, onDataUpdate }: AdminData
               <SelectContent>
                 {employees.map(employee => (
                   <SelectItem key={employee.id} value={employee.id}>
-                    {employee.name} (ID: {employee.id})
+                    {employee.name} (ID: {employee.emp_id})
                   </SelectItem>
                 ))}
               </SelectContent>
@@ -149,6 +162,7 @@ export const AdminDataEntryModal = ({ isOpen, onClose, onDataUpdate }: AdminData
                 className="text-right"
                 step="0.01"
                 min="0"
+                disabled={loading}
               />
             </div>
 
@@ -165,16 +179,17 @@ export const AdminDataEntryModal = ({ isOpen, onClose, onDataUpdate }: AdminData
                 className="text-right"
                 step="0.01"
                 min="0"
+                disabled={loading}
               />
             </div>
           </div>
 
           <div className="flex justify-end space-x-3 pt-4">
-            <Button type="button" variant="outline" onClick={handleClose}>
+            <Button type="button" variant="outline" onClick={handleClose} disabled={loading}>
               Cancel
             </Button>
-            <Button type="submit" className="bg-blue-600 hover:bg-blue-700">
+            <Button type="submit" className="bg-blue-600 hover:bg-blue-700" disabled={loading}>
-              Add Transaction
+              {loading ? "Adding..." : "Add Transaction"}
             </Button>
           </div>
         </form>

src/components/LoginPage.tsx

@@ -3,19 +3,86 @@ import React, { useState } from 'react';
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Checkbox } from "@/components/ui/checkbox";
+import { useAuth } from "@/hooks/useAuth";
+import { useToast } from "@/hooks/use-toast";
 
 interface LoginPageProps {
   onLogin: () => void;
 }
 
 export const LoginPage = ({ onLogin }: LoginPageProps) => {
-  const [email, setEmail] = useState('admin@123.com');
+  const [email, setEmail] = useState('admin@astra.in');
-  const [password, setPassword] = useState('');
+  const [password, setPassword] = useState('astra');
   const [rememberMe, setRememberMe] = useState(false);
+  const [loading, setLoading] = useState(false);
   
-  const handleLogin = (e: React.FormEvent) => {
+  const { signIn } = useAuth();
+  const { toast } = useToast();
+
+  const handleLogin = async (e: React.FormEvent) => {
     e.preventDefault();
-    onLogin();
+    setLoading(true);
+
+    try {
+      const { error } = await signIn(email, password);
+      
+      if (error) {
+        // If user doesn't exist, create them
+        if (error.message.includes('Invalid login credentials')) {
+          const { error: signUpError } = await supabase.auth.signUp({
+            email,
+            password,
+            options: {
+              data: {
+                full_name: 'Admin User'
+              }
+            }
+          });
+
+          if (signUpError) {
+            toast({
+              title: "Error",
+              description: signUpError.message,
+              variant: "destructive"
+            });
+            return;
+          }
+
+          // Try signing in again after signup
+          const { error: retryError } = await signIn(email, password);
+          if (retryError) {
+            toast({
+              title: "Error",
+              description: retryError.message,
+              variant: "destructive"
+            });
+            return;
+          }
+        } else {
+          toast({
+            title: "Error",
+            description: error.message,
+            variant: "destructive"
+          });
+          return;
+        }
+      }
+
+      toast({
+        title: "Success",
+        description: "Logged in successfully!"
+      });
+      
+      onLogin();
+    } catch (err) {
+      toast({
+        title: "Error",
+        description: "An unexpected error occurred",
+        variant: "destructive"
+      });
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
@@ -37,10 +104,11 @@ export const LoginPage = ({ onLogin }: LoginPageProps) => {
             <div>
               <Input
                 type="email"
-                placeholder="admin@123.com"
+                placeholder="admin@astra.in"
                 value={email}
                 onChange={(e) => setEmail(e.target.value)}
                 className="w-full h-12 px-4 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-purple-500"
+                disabled={loading}
               />
             </div>
             
@@ -51,14 +119,16 @@ export const LoginPage = ({ onLogin }: LoginPageProps) => {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className="w-full h-12 px-4 border border-gray-300 rounded-lg focus:border-purple-500 focus:ring-purple-500"
+                disabled={loading}
               />
             </div>
 
             <Button 
               type="submit"
               className="w-full h-12 bg-orange-500 hover:bg-orange-600 text-white font-medium rounded-lg"
+              disabled={loading}
             >
-              Login to dashboard
+              {loading ? "Signing in..." : "Login to dashboard"}
             </Button>
 
             <div className="flex items-center justify-between">

src/hooks/useAuth.tsx

@@ -0,0 +1,51 @@
+
+import { useState, useEffect } from 'react';
+import { User, Session } from '@supabase/supabase-js';
+import { supabase } from '@/integrations/supabase/client';
+
+export const useAuth = () => {
+  const [user, setUser] = useState<User | null>(null);
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Set up auth state listener
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      (event, session) => {
+        setSession(session);
+        setUser(session?.user ?? null);
+        setLoading(false);
+      }
+    );
+
+    // Check for existing session
+    supabase.auth.getSession().then(({ data: { session } }) => {
+      setSession(session);
+      setUser(session?.user ?? null);
+      setLoading(false);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const signIn = async (email: string, password: string) => {
+    const { data, error } = await supabase.auth.signInWithPassword({
+      email,
+      password,
+    });
+    return { data, error };
+  };
+
+  const signOut = async () => {
+    const { error } = await supabase.auth.signOut();
+    return { error };
+  };
+
+  return {
+    user,
+    session,
+    loading,
+    signIn,
+    signOut,
+  };
+};

src/hooks/useSupabaseEmployeeData.ts

@@ -0,0 +1,164 @@
+
+import { useState, useEffect } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+
+export interface Employee {
+  id: string;
+  emp_id: string;
+  name: string;
+  email: string;
+  department: string;
+}
+
+export interface Transaction {
+  id: string;
+  employee_id: string;
+  transaction_date: string;
+  collection_amount: number;
+  deposit_amount: number;
+}
+
+export interface ProcessedTransaction extends Transaction {
+  difference: number;
+  runningBalance: number;
+}
+
+export interface EmployeeSummary {
+  totalCollection: number;
+  totalDeposit: number;
+  outstandingAmount: number;
+  lastTransactionDate: string | null;
+}
+
+export const useSupabaseEmployeeData = () => {
+  const [employees, setEmployees] = useState<Employee[]>([]);
+  const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch employees
+  const fetchEmployees = async () => {
+    const { data, error } = await supabase
+      .from('employees')
+      .select('*')
+      .order('emp_id');
+    
+    if (error) {
+      console.error('Error fetching employees:', error);
+      return;
+    }
+    
+    setEmployees(data || []);
+  };
+
+  // Fetch transactions
+  const fetchTransactions = async () => {
+    const { data, error } = await supabase
+      .from('transactions')
+      .select('*')
+      .order('transaction_date');
+    
+    if (error) {
+      console.error('Error fetching transactions:', error);
+      return;
+    }
+    
+    setTransactions(data || []);
+  };
+
+  // Load data on mount
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      await Promise.all([fetchEmployees(), fetchTransactions()]);
+      setLoading(false);
+    };
+    
+    loadData();
+  }, []);
+
+  // Add transaction
+  const addTransaction = async (employeeId: string, transactionData: {
+    transaction_date: string;
+    collection_amount: number;
+    deposit_amount: number;
+  }) => {
+    const { data, error } = await supabase
+      .from('transactions')
+      .insert([{
+        employee_id: employeeId,
+        ...transactionData
+      }])
+      .select();
+
+    if (error) {
+      console.error('Error adding transaction:', error);
+      throw error;
+    }
+
+    // Refresh transactions
+    await fetchTransactions();
+    return data;
+  };
+
+  // Process transactions for an employee
+  const processTransactions = (employeeTransactions: Transaction[]): ProcessedTransaction[] => {
+    let runningBalance = 0;
+    
+    return employeeTransactions
+      .sort((a, b) => new Date(a.transaction_date).getTime() - new Date(b.transaction_date).getTime())
+      .map(transaction => {
+        const difference = transaction.deposit_amount - transaction.collection_amount;
+        runningBalance += difference;
+        
+        return {
+          ...transaction,
+          difference,
+          runningBalance
+        };
+      });
+  };
+
+  // Get transactions for a specific employee
+  const getEmployeeTransactions = (employeeId: string): ProcessedTransaction[] => {
+    const employeeTransactions = transactions.filter(t => t.employee_id === employeeId);
+    return processTransactions(employeeTransactions);
+  };
+
+  // Get employee summary
+  const getEmployeeSummary = (employeeId: string): EmployeeSummary => {
+    const employeeTransactions = transactions.filter(t => t.employee_id === employeeId);
+    
+    if (employeeTransactions.length === 0) {
+      return {
+        totalCollection: 0,
+        totalDeposit: 0,
+        outstandingAmount: 0,
+        lastTransactionDate: null
+      };
+    }
+
+    const totalCollection = employeeTransactions.reduce((sum, t) => sum + t.collection_amount, 0);
+    const totalDeposit = employeeTransactions.reduce((sum, t) => sum + t.deposit_amount, 0);
+    const outstandingAmount = totalCollection - totalDeposit;
+    
+    const lastTransactionDate = employeeTransactions
+      .sort((a, b) => new Date(b.transaction_date).getTime() - new Date(a.transaction_date).getTime())[0]?.transaction_date || null;
+
+    return {
+      totalCollection,
+      totalDeposit,
+      outstandingAmount,
+      lastTransactionDate
+    };
+  };
+
+  return {
+    employees,
+    transactions,
+    loading,
+    addTransaction,
+    getEmployeeTransactions,
+    getEmployeeSummary,
+    refreshData: () => Promise.all([fetchEmployees(), fetchTransactions()])
+  };
+};

src/pages/Index.tsx

@@ -1,16 +1,16 @@
 
 import React, { useState } from 'react';
 import { Button } from "@/components/ui/button";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { OutstandingReportDashboard } from "@/components/OutstandingReportDashboard";
 import { EmployeePaymentReport } from "@/components/EmployeePaymentReport";
 import { AdminDataEntryModal } from "@/components/AdminDataEntryModal";
 import { LoginPage } from "@/components/LoginPage";
-import { Plus, LogOut } from "lucide-react";
+import { useAuth } from "@/hooks/useAuth";
+import { LogOut } from "lucide-react";
 
 const Index = () => {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const { user, loading, signOut } = useAuth();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [refreshTrigger, setRefreshTrigger] = useState(0);
 
@@ -20,14 +20,22 @@ const Index = () => {
   };
 
   const handleLogin = () => {
-    setIsAuthenticated(true);
+    // This will be handled by the auth state change
   };
 
-  const handleLogout = () => {
+  const handleLogout = async () => {
-    setIsAuthenticated(false);
+    await signOut();
   };
 
-  if (!isAuthenticated) {
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="text-lg">Loading...</div>
+      </div>
+    );
+  }
+
+  if (!user) {
     return <LoginPage onLogin={handleLogin} />;
   }