-
-
{task.description}
-
- {task.priority}
-
-
-
-
-
-
- {task.department}
-
-
-
-
- {formatDate(task.deadline)}
- {isUrgent && ` (${daysLeft} days left)`}
- {isOverdue && ` (Overdue by ${Math.abs(daysLeft)} days)`}
-
-
-
-
-
-
- {task.status}
-
-
-
e.stopPropagation()}>
-
-
-
-
-
-
- {isExpanded && (
-
-
-
-
-
Context from Policy:
-
{task.context}
-
+
+
+
+
+ {task.task_name}
+
+
+
+ {getPriorityIcon()}
+ {task.priority}
+
+
+
+ {documentName}
+
+ {task.description}
+
+ {task.description && task.description.length > 100 && (
+
)}
-
-
+
+
+
+ {task.due_date && (
+
+
+
+ {new Date(task.due_date).toLocaleDateString()}
+
+
+ )}
+
+
);
};
-
-export default TaskCard;
diff --git a/src/components/TaskList.tsx b/src/components/TaskList.tsx
index 4c8ecee..93df8c6 100644
--- a/src/components/TaskList.tsx
+++ b/src/components/TaskList.tsx
@@ -1,408 +1,418 @@
import { useState, useEffect } from 'react';
-import { Task } from '@/utils/mockData';
-import TaskCard from './TaskCard';
-import { Input } from '@/components/ui/input';
+import { useAuth } from '@/contexts/AuthContext';
+import { supabase } from '@/integrations/supabase/client';
+import { useToast } from '@/hooks/use-toast';
+import { Download, Filter, Search, Check, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
import { Badge } from '@/components/ui/badge';
-import { Search, Filter, CheckCircle2, List, X } from 'lucide-react';
+import {
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeader,
+ TableRow
+} from '@/components/ui/table';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
-} from "@/components/ui/select";
-import {
- DropdownMenu,
- DropdownMenuContent,
- DropdownMenuCheckboxItem,
- DropdownMenuTrigger
-} from "@/components/ui/dropdown-menu";
-import { cn } from '@/lib/utils';
+} from '@/components/ui/select';
+import {
+ Card,
+ CardContent,
+ CardDescription,
+ CardFooter,
+ CardHeader,
+ CardTitle,
+} from '@/components/ui/card';
+import { TaskCard } from '@/components/TaskCard';
+import { ExportOptions } from '@/components/ExportOptions';
-interface TaskListProps {
- tasks: Task[];
- onTaskUpdate: (updatedTasks: Task[]) => void;
+interface Task {
+ id: string;
+ task_name: string;
+ description: string;
+ priority: string;
+ due_date: string | null;
+ status: string;
+ created_at: string;
+ upload_id: string;
}
-const TaskList = ({ tasks, onTaskUpdate }: TaskListProps) => {
- const [filteredTasks, setFilteredTasks] = useState
(tasks);
- const [searchQuery, setSearchQuery] = useState('');
- const [sortBy, setSortBy] = useState('deadline');
- const [filterPriority, setFilterPriority] = useState([]);
- const [filterStatus, setFilterStatus] = useState([]);
- const [filterDepartment, setFilterDepartment] = useState([]);
- const [isFiltering, setIsFiltering] = useState(false);
+interface Upload {
+ id: string;
+ file_name: string;
+}
- const handleStatusChange = (id: string, status: 'Open' | 'In Progress' | 'Completed') => {
- const updatedTasks = tasks.map(task =>
- task.id === id ? { ...task, status } : task
- );
- onTaskUpdate(updatedTasks);
- };
-
- const handlePriorityChange = (id: string, priority: 'High' | 'Medium' | 'Low') => {
- const updatedTasks = tasks.map(task =>
- task.id === id ? { ...task, priority } : task
- );
- onTaskUpdate(updatedTasks);
- };
-
- const uniqueDepartments = [...new Set(tasks.map(task => task.department))];
-
- const sortTasks = (tasksToSort: Task[]) => {
- return [...tasksToSort].sort((a, b) => {
- switch (sortBy) {
- case 'deadline':
- return new Date(a.deadline).getTime() - new Date(b.deadline).getTime();
- case 'priority':
- const priorityOrder = { High: 0, Medium: 1, Low: 2 };
- return priorityOrder[a.priority] - priorityOrder[b.priority];
- case 'department':
- return a.department.localeCompare(b.department);
- default:
- return 0;
- }
- });
- };
-
- const filterTasks = () => {
- let result = tasks;
-
- // Search filter
- if (searchQuery) {
- result = result.filter(task =>
- task.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
- task.department.toLowerCase().includes(searchQuery.toLowerCase()) ||
- task.context.toLowerCase().includes(searchQuery.toLowerCase())
- );
- }
-
- // Priority filter
- if (filterPriority.length > 0) {
- result = result.filter(task => filterPriority.includes(task.priority));
- }
-
- // Status filter
- if (filterStatus.length > 0) {
- result = result.filter(task => filterStatus.includes(task.status));
- }
-
- // Department filter
- if (filterDepartment.length > 0) {
- result = result.filter(task => filterDepartment.includes(task.department));
- }
-
- // Sort the filtered results
- return sortTasks(result);
- };
+const TaskList = () => {
+ const { user } = useAuth();
+ const { toast } = useToast();
+ const [tasks, setTasks] = useState([]);
+ const [filteredTasks, setFilteredTasks] = useState([]);
+ const [uploads, setUploads] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [priorityFilter, setPriorityFilter] = useState('');
+ const [statusFilter, setStatusFilter] = useState('');
+ const [documentFilter, setDocumentFilter] = useState('');
+ const [viewMode, setViewMode] = useState<'table' | 'card'>('table');
useEffect(() => {
- setFilteredTasks(filterTasks());
- setIsFiltering(
- searchQuery !== '' ||
- filterPriority.length > 0 ||
- filterStatus.length > 0 ||
- filterDepartment.length > 0
- );
- }, [tasks, searchQuery, sortBy, filterPriority, filterStatus, filterDepartment]);
+ if (user) {
+ fetchTasks();
+ fetchUploads();
+ }
+ }, [user]);
- const clearFilters = () => {
- setSearchQuery('');
- setFilterPriority([]);
- setFilterStatus([]);
- setFilterDepartment([]);
+ useEffect(() => {
+ applyFilters();
+ }, [tasks, searchTerm, priorityFilter, statusFilter, documentFilter]);
+
+ const fetchTasks = async () => {
+ try {
+ setLoading(true);
+ const { data, error } = await supabase
+ .from('tasks')
+ .select('*')
+ .eq('user_id', user?.id)
+ .order('created_at', { ascending: false });
+
+ if (error) throw error;
+ setTasks(data || []);
+ setFilteredTasks(data || []);
+ } catch (error) {
+ console.error('Error fetching tasks:', error);
+ toast({
+ title: 'Error',
+ description: 'Failed to load tasks',
+ variant: 'destructive',
+ });
+ } finally {
+ setLoading(false);
+ }
};
- const completedTasksCount = tasks.filter(task => task.status === 'Completed').length;
- const taskCompletion = Math.round((completedTasksCount / tasks.length) * 100) || 0;
-
+ const fetchUploads = async () => {
+ try {
+ const { data, error } = await supabase
+ .from('uploads')
+ .select('id, file_name')
+ .eq('user_id', user?.id);
+
+ if (error) throw error;
+ setUploads(data || []);
+ } catch (error) {
+ console.error('Error fetching uploads:', error);
+ }
+ };
+
+ const applyFilters = () => {
+ let result = [...tasks];
+
+ // Apply search term filter
+ if (searchTerm) {
+ result = result.filter(
+ task =>
+ task.task_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ task.description.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+ }
+
+ // Apply priority filter
+ if (priorityFilter) {
+ result = result.filter(task => task.priority === priorityFilter);
+ }
+
+ // Apply status filter
+ if (statusFilter) {
+ result = result.filter(task => task.status === statusFilter);
+ }
+
+ // Apply document filter
+ if (documentFilter) {
+ result = result.filter(task => task.upload_id === documentFilter);
+ }
+
+ setFilteredTasks(result);
+ };
+
+ const updateTaskStatus = async (taskId: string, newStatus: string) => {
+ try {
+ const { error } = await supabase
+ .from('tasks')
+ .update({ status: newStatus })
+ .eq('id', taskId);
+
+ if (error) throw error;
+
+ setTasks(prevTasks =>
+ prevTasks.map(task =>
+ task.id === taskId ? { ...task, status: newStatus } : task
+ )
+ );
+
+ toast({
+ title: 'Task updated',
+ description: `Task status changed to ${newStatus}`,
+ });
+ } catch (error) {
+ console.error('Error updating task:', error);
+ toast({
+ title: 'Update failed',
+ description: 'Failed to update task status',
+ variant: 'destructive',
+ });
+ }
+ };
+
+ const getDocumentName = (uploadId: string) => {
+ const upload = uploads.find(u => u.id === uploadId);
+ return upload ? upload.file_name : 'Unknown Document';
+ };
+
+ const getPriorityBadge = (priority: string) => {
+ switch (priority.toLowerCase()) {
+ case 'high':
+ return {priority};
+ case 'medium':
+ return {priority};
+ case 'low':
+ return {priority};
+ default:
+ return {priority};
+ }
+ };
+
+ const getStatusBadge = (status: string) => {
+ switch (status.toLowerCase()) {
+ case 'completed':
+ return {status};
+ case 'in progress':
+ return {status};
+ case 'open':
+ return {status};
+ default:
+ return {status};
+ }
+ };
+
+ const clearFilters = () => {
+ setSearchTerm('');
+ setPriorityFilter('');
+ setStatusFilter('');
+ setDocumentFilter('');
+ };
+
+ if (loading) {
+ return (
+
+
+
+
+
+ );
+ }
+
return (
-
-
-
-
-
Tasks
-
- {tasks.length} tasks extracted, {completedTasksCount} completed ({taskCompletion}%)
-
-
-
-
-
-
-
-
-
-
-
-
-
- setSearchQuery(e.target.value)}
- className="pl-9 rounded-full"
- />
- {searchQuery && (
-
- )}
-
-
-
-
-
-
-
- {filteredTasks.length === 0 ? (
-
-
No tasks match your filters
-
Try adjusting your search or filters
-
-
- ) : (
-
- {filteredTasks.map((task) => (
-
- ))}
-
- )}
+
+
+
+ Showing {filteredTasks.length} of {tasks.length} tasks
+
+
+
);
};
diff --git a/src/components/UploadSection.tsx b/src/components/UploadSection.tsx
index 0897f5e..bfc6717 100644
--- a/src/components/UploadSection.tsx
+++ b/src/components/UploadSection.tsx
@@ -1,168 +1,206 @@
-import { useState, useRef } from 'react';
-import { Upload, FileType, FileUp, AlertCircle, Check } from 'lucide-react';
+import { useState } from 'react';
+import { useAuth } from '@/contexts/AuthContext';
+import { supabase } from '@/integrations/supabase/client';
+import { useToast } from '@/hooks/use-toast';
+import { Upload, FileIcon, Loader2, X } from 'lucide-react';
import { Button } from '@/components/ui/button';
-import { toast } from 'sonner';
+import { Progress } from '@/components/ui/progress';
interface UploadSectionProps {
- onUploadComplete: (fileName: string) => void;
+ onUploadComplete: () => void;
}
const UploadSection = ({ onUploadComplete }: UploadSectionProps) => {
- const [isDragging, setIsDragging] = useState(false);
+ const { user } = useAuth();
+ const { toast } = useToast();
const [file, setFile] = useState
(null);
- const [isUploading, setIsUploading] = useState(false);
- const fileInputRef = useRef(null);
+ const [uploading, setUploading] = useState(false);
+ const [uploadProgress, setUploadProgress] = useState(0);
- const handleDragOver = (e: React.DragEvent) => {
- e.preventDefault();
- setIsDragging(true);
- };
+ const allowedFileTypes = [
+ 'application/pdf',
+ 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
+ ];
- const handleDragLeave = () => {
- setIsDragging(false);
- };
-
- const handleDrop = (e: React.DragEvent) => {
- e.preventDefault();
- setIsDragging(false);
-
- const droppedFile = e.dataTransfer.files[0];
- if (isValidFile(droppedFile)) {
- setFile(droppedFile);
- }
- };
-
- const handleFileSelect = (e: React.ChangeEvent) => {
- const selectedFile = e.target.files?.[0];
- if (selectedFile && isValidFile(selectedFile)) {
+ const handleFileChange = (e: React.ChangeEvent) => {
+ if (e.target.files && e.target.files[0]) {
+ const selectedFile = e.target.files[0];
+
+ if (!allowedFileTypes.includes(selectedFile.type)) {
+ toast({
+ title: 'Invalid file type',
+ description: 'Please upload a PDF or DOCX file',
+ variant: 'destructive',
+ });
+ return;
+ }
+
setFile(selectedFile);
}
};
- const isValidFile = (file: File) => {
- const validTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
- if (!validTypes.includes(file.type)) {
- toast.error("Please upload a PDF or Word document");
- return false;
- }
- if (file.size > 10 * 1024 * 1024) { // 10MB limit
- toast.error("File size exceeds 10MB limit");
- return false;
- }
- return true;
+ const clearFile = () => {
+ setFile(null);
};
const handleUpload = async () => {
- if (!file) return;
+ if (!file || !user) return;
- setIsUploading(true);
-
- // Simulate file upload with a delay
try {
- await new Promise(resolve => setTimeout(resolve, 2000));
- toast.success(`${file.name} uploaded successfully`);
- onUploadComplete(file.name);
- } catch (error) {
- toast.error("Upload failed. Please try again.");
- console.error("Upload error:", error);
+ setUploading(true);
+ setUploadProgress(0);
+
+ // First, create an entry in the uploads table
+ const fileName = file.name;
+ const fileType = file.type;
+ const filePath = `${user.id}/${Date.now()}_${fileName}`;
+
+ const { data: uploadData, error: uploadError } = await supabase
+ .from('uploads')
+ .insert({
+ user_id: user.id,
+ file_name: fileName,
+ file_path: filePath,
+ file_type: fileType,
+ status: 'Processing'
+ })
+ .select()
+ .single();
+
+ if (uploadError) throw uploadError;
+
+ // Simulate progress for a better UX
+ const progressInterval = setInterval(() => {
+ setUploadProgress((prev) => {
+ const increment = Math.random() * 10;
+ const newProgress = Math.min(prev + increment, 90);
+ return newProgress;
+ });
+ }, 300);
+
+ // Upload the file to storage
+ const { error: storageError } = await supabase
+ .storage
+ .from('documents')
+ .upload(filePath, file);
+
+ clearInterval(progressInterval);
+
+ if (storageError) throw storageError;
+
+ // Call the edge function to process the document
+ const processingResponse = await supabase.functions.invoke('process-document', {
+ body: {
+ uploadId: uploadData.id,
+ userId: user.id,
+ filePath: filePath,
+ fileType: fileType
+ }
+ });
+
+ if (processingResponse.error) throw new Error(processingResponse.error.message);
+
+ setUploadProgress(100);
+
+ toast({
+ title: 'Upload successful',
+ description: 'Your document is now being processed',
+ });
+
+ // Clear file and reset progress after 1 second
+ setTimeout(() => {
+ setFile(null);
+ setUploadProgress(0);
+ onUploadComplete();
+ }, 1000);
+
+ } catch (error: any) {
+ console.error('Upload error:', error);
+ toast({
+ title: 'Upload failed',
+ description: error.message || 'An error occurred while uploading the document',
+ variant: 'destructive',
+ });
} finally {
- setIsUploading(false);
+ setUploading(false);
}
};
return (
-
-
-
Upload Your Policy Document
-
Upload a PDF or Word document to extract actionable tasks
-
-
-
-
-
- {!file ? (
- <>
-
-
-
-
Drag and drop your file here
-
- Support for PDF and Word documents up to 10MB
-
-