Fix: Default login credentials
Set default login credentials in the login form.
This commit is contained in:
gpt-engineer-app[bot]
@@ -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, {
|
||||
date: format(selectedDate, 'yyyy-MM-dd'),
|
||||
collection,
|
||||
deposit
|
||||
});
|
||||
setLoading(true);
|
||||
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Transaction added successfully",
|
||||
});
|
||||
try {
|
||||
await addTransaction(selectedEmployeeId, {
|
||||
transaction_date: format(selectedDate, 'yyyy-MM-dd'),
|
||||
collection_amount: collection,
|
||||
deposit_amount: deposit
|
||||
});
|
||||
|
||||
// Reset form
|
||||
setSelectedEmployeeId('');
|
||||
setCollectionAmount('');
|
||||
setDepositAmount('');
|
||||
setSelectedDate(new Date());
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Transaction added successfully",
|
||||
});
|
||||
|
||||
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">
|
||||
Add Transaction
|
||||
<Button type="submit" className="bg-blue-600 hover:bg-blue-700" disabled={loading}>
|
||||
{loading ? "Adding..." : "Add Transaction"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -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 [password, setPassword] = useState('');
|
||||
const [email, setEmail] = useState('admin@astra.in');
|
||||
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">
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
};
|
||||
@@ -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()])
|
||||
};
|
||||
};
|
||||
+15
-7
@@ -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 = () => {
|
||||
setIsAuthenticated(false);
|
||||
const handleLogout = async () => {
|
||||
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} />;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user