diff --git a/app/music/page.tsx b/app/calendar/page.tsx similarity index 100% rename from app/music/page.tsx rename to app/calendar/page.tsx diff --git a/app/client-nav.tsx b/app/client-nav.tsx index 5b2deb3..295a8bc 100644 --- a/app/client-nav.tsx +++ b/app/client-nav.tsx @@ -9,12 +9,13 @@ const examples = [ { name: "Chat", href: "/chat", color: "#25D366" }, // WhatsApp green { name: "Dashboard", href: "/dashboard", color: "#6366F1" }, // Indigo { name: "Mail", href: "/mail", color: "#FFD700" }, // Outlook yellow + { name: "Calendar", href: "/calendar", color: "#1DB954" }, // Spotify green + { name: "Meet", href: "/meet", color: "#059669" }, // Google Meet green { name: "Drive", href: "/drive", color: "#10B981" }, // Emerald green { name: "Editor", href: "/editor", color: "#2563EB" }, // Word blue { name: "Tables", href: "/tables", color: "#8B5CF6" }, // Purple - { name: "Meet", href: "/meet", color: "#059669" }, // Google Meet green - { name: "Videos", href: "/videos", color: "#DC2626" }, // YouTube red - { name: "Music", href: "/music", color: "#1DB954" }, // Spotify green + { name: "Media", href: "/media", color: "Yellow" }, + { name: "News", href: "/news", color: "blue" }, { name: "Templates", href: "/templates", color: "#F59E0B" }, // Amber { name: "Settings", href: "/settings", color: "#6B7280" }, // Gray ]; diff --git a/app/dashboard/components/DateRangePicker.tsx b/app/dashboard/components/DateRangePicker.tsx deleted file mode 100644 index c1c3b82..0000000 --- a/app/dashboard/components/DateRangePicker.tsx +++ /dev/null @@ -1,34 +0,0 @@ -"use client"; -import React, { useState } from 'react'; -import { format } from 'date-fns'; - -export function CalendarDateRangePicker() { - const [dateRange, setDateRange] = useState({ - startDate: new Date(), - endDate: new Date() - }); - - return ( -
- - to - -
- ); -} diff --git a/app/dashboard/components/MainNav.tsx b/app/dashboard/components/MainNav.tsx deleted file mode 100644 index ff21c97..0000000 --- a/app/dashboard/components/MainNav.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import React from 'react'; - -export function MainNav() { - return ( - - ); -} diff --git a/app/dashboard/components/Overview.tsx b/app/dashboard/components/Overview.tsx deleted file mode 100644 index da41809..0000000 --- a/app/dashboard/components/Overview.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; - -export function Overview() { - return ( -
-
- ); -} diff --git a/app/dashboard/components/RecentSales.tsx b/app/dashboard/components/RecentSales.tsx deleted file mode 100644 index 597e923..0000000 --- a/app/dashboard/components/RecentSales.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; - -const salesData = [ - { name: "Olivia Martin", email: "olivia.martin@email.com", amount: "+$1,999.00" }, - { name: "Jackson Lee", email: "jackson.lee@email.com", amount: "+$39.00" }, - { name: "Isabella Nguyen", email: "isabella.nguyen@email.com", amount: "+$299.00" }, - { name: "William Kim", email: "will@email.com", amount: "+$99.00" }, - { name: "Sofia Davis", email: "sofia.davis@email.com", amount: "+$39.00" }, -]; - -export function RecentSales() { - return ( -
- {salesData.map((item, index) => ( -
-
-
- {item.name[0]} -
-
-

{item.name}

-

{item.email}

-
-
- {item.amount} -
- ))} -
- ); -} diff --git a/app/dashboard/components/Search.tsx b/app/dashboard/components/Search.tsx deleted file mode 100644 index d62c468..0000000 --- a/app/dashboard/components/Search.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; - -export function Search() { - return ( -
- - - - -
- ); -} diff --git a/app/dashboard/components/TeamSwitcher.tsx b/app/dashboard/components/TeamSwitcher.tsx deleted file mode 100644 index a141fa7..0000000 --- a/app/dashboard/components/TeamSwitcher.tsx +++ /dev/null @@ -1,106 +0,0 @@ -"use client"; - -import React, { useState } from 'react'; - -const groups = [ - { - label: "Personal Account", - teams: [ - { label: "Alicia Koch", value: "personal" }, - ], - }, - { - label: "Teams", - teams: [ - { label: "Acme Inc.", value: "acme-inc" }, - { label: "Monsters Inc.", value: "monsters" }, - ], - }, -]; - -export function TeamSwitcher() { - const [open, setOpen] = useState(false); - const [showNewTeamDialog, setShowNewTeamDialog] = useState(false); - const [selectedTeam, setSelectedTeam] = useState(groups[0].teams[0]); - - return ( -
- - - {open && ( -
-
- -
- {groups.map((group) => ( -
-

{group.label}

- {group.teams.map((team) => ( - - ))} -
- ))} -
- -
-
- )} - - {showNewTeamDialog && ( -
-
-

Create team

- -
- - -
-
-
- )} -
- ); -} diff --git a/app/dashboard/components/UserNav.tsx b/app/dashboard/components/UserNav.tsx deleted file mode 100644 index d9f4dee..0000000 --- a/app/dashboard/components/UserNav.tsx +++ /dev/null @@ -1,35 +0,0 @@ -"use client"; - -import React, { useState } from 'react'; - -export function UserNav() { - const [open, setOpen] = useState(false); - - return ( -
- - - {open && ( -
-
-

shadcn

-

m@example.com

-
- {['Profile', 'Billing', 'Settings', 'New Team', 'Log out'].map((item) => ( - - ))} -
- )} -
- ); -} diff --git a/app/drive/page.tsx b/app/drive/page.tsx index edcf46c..960c092 100644 --- a/app/drive/page.tsx +++ b/app/drive/page.tsx @@ -1,183 +1,202 @@ "use client"; -import React, { useState, useEffect, useMemo } from 'react'; -import { Search, Plus, Upload, Download, Trash2, Copy, Move, Share, Star, Grid, List, Filter, SortAsc, Eye, Edit3, Archive, Clock, Users, Lock, Folder, File, Image, Video, Music, FileText, Code, Database, Package } from 'lucide-react'; +import React, { useState, useMemo } from 'react'; +import { + Search, Plus, Upload, Download, Trash2, Share, Star, + Grid, List, MoreVertical, Home, ChevronRight, + Folder, File, Image, Video, Music, FileText, Code, Database, + Package, Archive, Clock, Users, Eye, Edit3 +} from 'lucide-react'; +import { cn } from "@/lib/utils"; +// Simple date formatting functions +const formatDate = (dateString) => { + const date = new Date(dateString); + return date.toLocaleDateString('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric' + }); +}; -// Enhanced file system with realistic data structure +const formatDateTime = (dateString) => { + const date = new Date(dateString); + return date.toLocaleString('en-US', { + month: 'short', + day: 'numeric', + year: 'numeric', + hour: 'numeric', + minute: '2-digit', + hour12: true + }); +}; + +const formatDistanceToNow = (date) => { + const now = new Date(); + const diffMs = now - new Date(date); + const diffMinutes = Math.floor(diffMs / (1000 * 60)); + const diffHours = Math.floor(diffMs / (1000 * 60 * 60)); + const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); + + if (diffMinutes < 1) return 'now'; + if (diffMinutes < 60) return `${diffMinutes}m ago`; + if (diffHours < 24) return `${diffHours}h ago`; + if (diffDays < 7) return `${diffDays}d ago`; + return formatDate(date); +}; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Separator } from "@/components/ui/separator"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from "@/components/ui/dropdown-menu"; +import { + Tooltip, + TooltipContent, + TooltipTrigger, + TooltipProvider, +} from "@/components/ui/tooltip"; +import { + ResizableHandle, + ResizablePanel, + ResizablePanelGroup, +} from "@/components/ui/resizable"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; + +// File system data const fileSystemData = { "": { - name: "Root", + id: "root", + name: "My Drive", path: "", is_dir: true, - children: ["projects", "documents", "media", "shared", "archives", "templates"] + children: ["projects", "documents", "media", "shared"] }, "projects": { + id: "projects", name: "Projects", path: "projects", is_dir: true, - size: null, modified: "2025-01-15T10:30:00Z", - created: "2024-12-01T09:00:00Z", starred: true, shared: false, - tags: ["work", "development"], - children: ["web-apps", "mobile-apps", "data-science", "ai-research", "blockchain"] + children: ["web-apps", "mobile-apps", "ai-research"] }, "projects/web-apps": { + id: "web-apps", name: "Web Applications", path: "projects/web-apps", is_dir: true, - size: null, modified: "2025-01-14T16:45:00Z", - created: "2024-12-01T09:15:00Z", starred: false, shared: true, - tags: ["frontend", "backend", "fullstack"], - children: ["dashboard-pro", "e-commerce-platform", "social-media-app", "file-manager"] + children: ["dashboard-pro", "package.json", "README.md"] }, - "projects/web-apps/dashboard-pro": { - name: "Dashboard Pro", - path: "projects/web-apps/dashboard-pro", - is_dir: true, - size: null, - modified: "2025-01-13T14:20:00Z", - created: "2024-12-10T11:00:00Z", - starred: true, - shared: true, - tags: ["react", "typescript", "tailwind"], - children: ["src", "components", "styles", "tests", "package.json", "README.md", "deployment.yaml"] - }, - "projects/web-apps/dashboard-pro/package.json": { + "projects/web-apps/package.json": { + id: "package-json", name: "package.json", - path: "projects/web-apps/dashboard-pro/package.json", + path: "projects/web-apps/package.json", is_dir: false, size: 2048, type: "json", modified: "2025-01-13T14:20:00Z", - created: "2024-12-10T11:00:00Z", starred: false, - shared: false, - tags: ["config", "dependencies"] + shared: false }, - "projects/web-apps/dashboard-pro/README.md": { + "projects/web-apps/README.md": { + id: "readme-md", name: "README.md", - path: "projects/web-apps/dashboard-pro/README.md", + path: "projects/web-apps/README.md", is_dir: false, size: 5120, type: "markdown", modified: "2025-01-12T09:30:00Z", - created: "2024-12-10T11:05:00Z", starred: false, - shared: true, - tags: ["documentation"] + shared: true }, "documents": { + id: "documents", name: "Documents", path: "documents", is_dir: true, - size: null, modified: "2025-01-14T12:00:00Z", - created: "2024-11-01T08:00:00Z", starred: false, shared: false, - tags: ["personal", "work"], - children: ["proposals", "contracts", "presentations", "reports", "spreadsheets"] + children: ["proposals", "Q1-Strategy.pdf", "Budget-2025.xlsx"] }, - "documents/proposals": { - name: "Proposals", - path: "documents/proposals", - is_dir: true, - size: null, - modified: "2025-01-10T15:30:00Z", - created: "2024-11-15T10:00:00Z", - starred: true, - shared: true, - tags: ["business", "client"], - children: ["Q1-2025-Strategy.pdf", "AI-Integration-Proposal.docx", "Budget-Proposal-2025.xlsx"] - }, - "documents/proposals/Q1-2025-Strategy.pdf": { - name: "Q1 2025 Strategy.pdf", - path: "documents/proposals/Q1-2025-Strategy.pdf", + "documents/Q1-Strategy.pdf": { + id: "q1-strategy", + name: "Q1 Strategy.pdf", + path: "documents/Q1-Strategy.pdf", is_dir: false, size: 1048576, type: "pdf", modified: "2025-01-10T15:30:00Z", - created: "2025-01-08T14:00:00Z", starred: true, - shared: true, - tags: ["strategy", "quarterly", "important"] + shared: true }, "media": { + id: "media", name: "Media", path: "media", is_dir: true, - size: null, modified: "2025-01-13T18:45:00Z", - created: "2024-10-01T12:00:00Z", starred: false, shared: false, - tags: ["photos", "videos", "audio"], - children: ["photos", "videos", "audio", "graphics"] + children: ["photos", "videos", "vacation-2024.jpg"] }, - "media/photos": { - name: "Photos", - path: "media/photos", - is_dir: true, - size: null, - modified: "2025-01-13T18:45:00Z", - created: "2024-10-01T12:15:00Z", - starred: false, - shared: false, - tags: ["photography"], - children: ["vacation-2024.jpg", "team-photo.jpg", "product-shots.jpg", "nature-landscape.jpg"] - }, - "media/photos/vacation-2024.jpg": { + "media/vacation-2024.jpg": { + id: "vacation-photo", name: "vacation-2024.jpg", - path: "media/photos/vacation-2024.jpg", + path: "media/vacation-2024.jpg", is_dir: false, size: 3145728, type: "image", modified: "2024-12-25T20:00:00Z", - created: "2024-12-25T20:00:00Z", starred: true, - shared: false, - tags: ["vacation", "memories"] + shared: false }, "shared": { + id: "shared", name: "Shared", path: "shared", is_dir: true, - size: null, modified: "2025-01-12T11:20:00Z", - created: "2024-11-01T08:30:00Z", starred: false, shared: true, - tags: ["collaboration", "team"], - children: ["team-resources", "client-deliverables", "public-assets"] + children: ["team-resources", "client-files"] } }; const getFileIcon = (item) => { if (item.is_dir) { - return item.starred ? : ; + return ; } const iconMap = { pdf: , - docx: , - xlsx: , - json: , + xlsx: , + json: , markdown: , md: , jpg: , jpeg: , png: , mp4: