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.

src/components/ui/PageHeader.js

@@ -0,0 +1,15 @@
+"use client";
+
+const PageHeader = ({ title, description, children, className = "" }) => {
+	return (
+		<div className={`flex justify-between items-start mb-8 ${className}`}>
+			<div className="flex-1">
+				<h1 className="text-3xl font-bold text-gray-900">{title}</h1>
+				{description && <p className="text-gray-600 mt-1">{description}</p>}
+			</div>
+			{children && <div className="ml-6 flex-shrink-0">{children}</div>}
+		</div>
+	);
+};
+
+export default PageHeader;