88 lines
2.1 KiB
TypeScript
88 lines
2.1 KiB
TypeScript
import {
|
|
Button,
|
|
Container,
|
|
Group,
|
|
Paper,
|
|
Stack,
|
|
Text,
|
|
Title,
|
|
} from "@mantine/core";
|
|
import { TaskCard } from "../../groups/TaskCard/TaskCard";
|
|
import type { TaskCardProps } from "../../groups/TaskCard/TaskCard";
|
|
|
|
export interface TasksScreenProps {
|
|
activeTasks: TaskCardProps[];
|
|
completedTasks: TaskCardProps[];
|
|
onRefresh: () => void;
|
|
onClearHistory: () => void;
|
|
}
|
|
|
|
const PageContainer = Container.withProps({
|
|
size: "xl",
|
|
py: "xl",
|
|
});
|
|
|
|
const ContentPanel = Paper.withProps({
|
|
withBorder: true,
|
|
p: "md",
|
|
});
|
|
|
|
const CompactButton = Button.withProps({
|
|
variant: "light",
|
|
size: "xs",
|
|
});
|
|
|
|
function formatSectionTitle(label: string, count: number): string {
|
|
return `${label} (${count})`;
|
|
}
|
|
|
|
export function TasksScreen({
|
|
activeTasks,
|
|
completedTasks,
|
|
onRefresh,
|
|
onClearHistory,
|
|
}: TasksScreenProps) {
|
|
return (
|
|
<PageContainer>
|
|
<ContentPanel>
|
|
<Stack gap="lg">
|
|
<Group justify="space-between">
|
|
<Title order={4}>
|
|
{formatSectionTitle("Active Tasks", activeTasks.length)}
|
|
</Title>
|
|
<CompactButton onClick={onRefresh}>Refresh Tasks</CompactButton>
|
|
</Group>
|
|
{activeTasks.length === 0 ? (
|
|
<Text c="dimmed">No active tasks</Text>
|
|
) : (
|
|
<Stack gap="md">
|
|
{activeTasks.map((task) => (
|
|
<TaskCard key={task.taskId} {...task} />
|
|
))}
|
|
</Stack>
|
|
)}
|
|
|
|
<Group justify="space-between">
|
|
<Title order={4}>
|
|
{formatSectionTitle("Completed Tasks", completedTasks.length)}
|
|
</Title>
|
|
{completedTasks.length > 0 && (
|
|
<CompactButton onClick={onClearHistory}>
|
|
Clear History
|
|
</CompactButton>
|
|
)}
|
|
</Group>
|
|
{completedTasks.length === 0 ? (
|
|
<Text c="dimmed">No completed tasks</Text>
|
|
) : (
|
|
<Stack gap="md">
|
|
{completedTasks.map((task) => (
|
|
<TaskCard key={task.taskId} {...task} />
|
|
))}
|
|
</Stack>
|
|
)}
|
|
</Stack>
|
|
</ContentPanel>
|
|
</PageContainer>
|
|
);
|
|
}
|