Add core components for task management and navigation

This commit introduces the foundational UI components and logic for the task management application, including task creation, calendar views, Kanban boards, and navigation elements. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/yy9YLEW
2025-09-11 08:59:20 +00:00
parent 5d959e8ab3
commit 28ad3f1535
88 changed files with 17059 additions and 0 deletions
@@ -0,0 +1,80 @@
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Home, Calendar, LayoutGrid, Plus, Settings } from 'lucide-react';
+import { useState } from 'react';
+
+interface BottomNavigationProps {
+  onTabChange?: (tab: string) => void;
+  onCreateTask?: () => void;
+  activeTab?: string;
+}
+
+export default function BottomNavigation({ onTabChange, onCreateTask, activeTab = 'tasks' }: BottomNavigationProps) {
+  const [currentTab, setCurrentTab] = useState(activeTab);
+
+  const tabs = [
+    { id: 'tasks', label: 'Tasks', icon: Home, badge: 3 },
+    { id: 'calendar', label: 'Calendar', icon: Calendar },
+    { id: 'create', label: 'Create', icon: Plus, isCreate: true },
+    { id: 'kanban', label: 'Board', icon: LayoutGrid },
+    { id: 'templates', label: 'Templates', icon: Settings }
+  ];
+
+  const handleTabClick = (tabId: string, isCreate?: boolean) => {
+    if (isCreate) {
+      onCreateTask?.();
+      console.log('Create task triggered');
+      return;
+    }
+    
+    setCurrentTab(tabId);
+    onTabChange?.(tabId);
+    console.log('Tab changed to:', tabId);
+  };
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 bg-background border-t border-border">
+      <div className="flex items-center justify-around px-2 py-2 safe-area-inset-bottom">
+        {tabs.map((tab) => {
+          const isActive = currentTab === tab.id && !tab.isCreate;
+          const Icon = tab.icon;
+          
+          return (
+            <Button
+              key={tab.id}
+              variant={tab.isCreate ? "default" : isActive ? "secondary" : "ghost"}
+              size={tab.isCreate ? "icon" : "sm"}
+              onClick={() => handleTabClick(tab.id, tab.isCreate)}
+              className={`relative flex flex-col gap-1 h-auto py-2 px-3 ${
+                tab.isCreate 
+                  ? 'w-12 h-12 rounded-full shadow-lg' 
+                  : 'flex-1 max-w-[80px]'
+              }`}
+              data-testid={`nav-${tab.id}`}
+            >
+              <Icon className={`${
+                tab.isCreate ? 'w-6 h-6' : 'w-5 h-5'
+              }`} />
+              
+              {!tab.isCreate && (
+                <span className="text-xs font-medium">
+                  {tab.label}
+                </span>
+              )}
+              
+              {tab.badge && !tab.isCreate && (
+                <Badge 
+                  variant="destructive" 
+                  className="absolute -top-1 -right-1 w-5 h-5 flex items-center justify-center text-xs p-0 min-w-[20px]"
+                  data-testid={`badge-${tab.id}`}
+                >
+                  {tab.badge}
+                </Badge>
+              )}
+            </Button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}