Refactor Project Tasks and Task Templates pages with new UI components
- Introduced PageContainer and PageHeader components for consistent layout. - Added SearchBar and FilterBar components for improved task filtering and searching. - Implemented LoadingState component for better loading indication. - Updated ProjectTasksPage to utilize new components and enhance user experience. - Refactored TaskTemplatesPage to use PageContainer and PageHeader for better structure. - Created FilterBar component to manage filter options dynamically. - Added SearchBar component for searching tasks with clear functionality. - Introduced States component for loading and error states.
This commit is contained in:
Chop
@@ -3,6 +3,8 @@ import Link from "next/link";
|
||||
import { Card, CardHeader, CardContent } from "@/components/ui/Card";
|
||||
import Button from "@/components/ui/Button";
|
||||
import Badge from "@/components/ui/Badge";
|
||||
import PageContainer from "@/components/ui/PageContainer";
|
||||
import PageHeader from "@/components/ui/PageHeader";
|
||||
|
||||
export default function TaskTemplatesPage() {
|
||||
const templates = db
|
||||
@@ -12,15 +14,12 @@ export default function TaskTemplatesPage() {
|
||||
`
|
||||
)
|
||||
.all();
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<div className="max-w-6xl mx-auto p-6">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Task Templates</h1>
|
||||
<p className="text-gray-600 mt-1">Manage reusable task templates</p>
|
||||
</div>
|
||||
<PageContainer>
|
||||
<PageHeader
|
||||
title="Task Templates"
|
||||
description="Manage reusable task templates"
|
||||
action={
|
||||
<Link href="/tasks/templates/new">
|
||||
<Button variant="primary" size="lg">
|
||||
<svg
|
||||
@@ -39,77 +38,77 @@ export default function TaskTemplatesPage() {
|
||||
New Template
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{templates.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="text-center py-12">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg
|
||||
className="w-16 h-16 mx-auto"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||
No task templates yet
|
||||
</h3>
|
||||
<p className="text-gray-500 mb-6">
|
||||
Create reusable task templates to streamline your workflow
|
||||
</p>
|
||||
<Link href="/tasks/templates/new">
|
||||
<Button variant="primary">Create First Template</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{templates.map((template) => (
|
||||
<Card
|
||||
key={template.task_id}
|
||||
className="hover:shadow-md transition-shadow"
|
||||
{templates.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="text-center py-12">
|
||||
<div className="text-gray-400 mb-4">
|
||||
<svg
|
||||
className="w-16 h-16 mx-auto"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 truncate pr-2">
|
||||
{template.name}
|
||||
</h3>
|
||||
<Badge variant="primary" size="sm">
|
||||
{template.max_wait_days} days
|
||||
</Badge>
|
||||
</div>
|
||||
{template.description && (
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-2">
|
||||
{template.description}
|
||||
</p>
|
||||
)}{" "}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-500">
|
||||
Template ID: {template.task_id}
|
||||
</span>
|
||||
<div className="flex space-x-2">
|
||||
<Link href={`/tasks/templates/${template.task_id}/edit`}>
|
||||
<Button variant="outline" size="sm">
|
||||
Edit
|
||||
</Button>
|
||||
</Link>
|
||||
<Button variant="secondary" size="sm">
|
||||
Duplicate
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V8zm0 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1v-2z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 mb-2">
|
||||
No task templates yet
|
||||
</h3>
|
||||
<p className="text-gray-500 mb-6">
|
||||
Create reusable task templates to streamline your workflow
|
||||
</p>
|
||||
<Link href="/tasks/templates/new">
|
||||
<Button variant="primary">Create First Template</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{templates.map((template) => (
|
||||
<Card
|
||||
key={template.task_id}
|
||||
className="hover:shadow-md transition-shadow"
|
||||
>
|
||||
<CardContent className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<h3 className="text-lg font-semibold text-gray-900 truncate pr-2">
|
||||
{template.name}
|
||||
</h3>
|
||||
<Badge variant="primary" size="sm">
|
||||
{template.max_wait_days} days
|
||||
</Badge>
|
||||
</div>
|
||||
{template.description && (
|
||||
<p className="text-gray-600 text-sm mb-4 line-clamp-2">
|
||||
{template.description}
|
||||
</p>
|
||||
)}{" "}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-500">
|
||||
Template ID: {template.task_id}
|
||||
</span>
|
||||
<div className="flex space-x-2">
|
||||
<Link href={`/tasks/templates/${template.task_id}/edit`}>
|
||||
<Button variant="outline" size="sm">
|
||||
Edit
|
||||
</Button>
|
||||
</div>
|
||||
</Link>
|
||||
<Button variant="secondary" size="sm">
|
||||
Duplicate
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}{" "}
|
||||
</div>
|
||||
)}
|
||||
</PageContainer>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user