enhanced ui

frontend/src/components/common/ViewToggle.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { GridIcon, ListIcon, TableIcon } from "../../icons";
+
+export type ViewType = "table" | "kanban" | "list";
+
+interface ViewToggleProps {
+  currentView: ViewType;
+  onViewChange: (view: ViewType) => void;
+  className?: string;
+}
+
+const ViewToggle: React.FC<ViewToggleProps> = ({
+  currentView,
+  onViewChange,
+  className = "",
+}) => {
+  const views: { type: ViewType; icon: React.ReactNode; label: string }[] = [
+    { type: "table", icon: <TableIcon className="size-4" />, label: "Table" },
+    { type: "kanban", icon: <GridIcon className="size-4" />, label: "Kanban" },
+    { type: "list", icon: <ListIcon className="size-4" />, label: "List" },
+  ];
+
+  return (
+    <div className={`inline-flex items-center gap-1 rounded-lg bg-gray-100 p-0.5 dark:bg-gray-900 ${className}`}>
+      {views.map((view) => (
+        <button
+          key={view.type}
+          onClick={() => onViewChange(view.type)}
+          className={`inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
+            currentView === view.type
+              ? "bg-white text-gray-900 dark:bg-gray-800 dark:text-white shadow-sm"
+              : "text-gray-500 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white"
+          }`}
+          title={view.label}
+        >
+          {view.icon}
+          <span className="hidden sm:inline">{view.label}</span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default ViewToggle;
+