...

react-shadcn-starter/src/App.tsx

@@ -1,24 +1,9 @@
 import React from 'react'
-import { WebdavFileManager } from './components/webdav-file-manager'
 import { Toaster } from './components/ui/toaster'
-import { OurCalendar } from './components/calendar/calendar'
-import { WebDAVConfig } from './lib/calendar-data'
-
-const webdavConfig: WebDAVConfig = {
-  url: 'http://localhost:3333',
-  username: 'admin',
-  password: '1234',
-}
 
 function App() {
   return (
     <>
-      <OurCalendar 
-        webdavConfig={webdavConfig} 
-        calendarFile="/calendars/kristof.json" 
-        circleFile="/calendars/cirlce1.json" 
-      />
-      {/* <WebdavFileManager /> */}
       <Toaster />
     </>
   )

react-shadcn-starter/src/Router.tsx

@@ -6,6 +6,8 @@ import NoMatch from "./pages/NoMatch";
 import Dashboard from "./pages/Dashboard";
 import Empty from "./pages/Empty";
 import Sample from "./pages/Sample";
+import Calendar from "./pages/Calendar";
+import FileManager from "./pages/FileManager";
 
 export const router = createBrowserRouter([
     {
@@ -16,6 +18,14 @@ export const router = createBrowserRouter([
                 path: "",
                 element: <Dashboard />,
             },
+            {
+                path: "calendar",
+                element: <Calendar />,
+            },
+            {
+                path: "filemanager",
+                element: <FileManager />,
+            },
             {
                 path: "sample",
                 element: <Sample />,

react-shadcn-starter/src/components/calendar/calendar.tsx

@@ -238,6 +238,7 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
 
     try {
       await dataManager.saveEvents(newEvents);
+      setEvents(newEvents); // Update local state after successful save
       toast({
         title: "Changes saved",
         description: "Your changes have been successfully saved.",
@@ -253,22 +254,48 @@ export function OurCalendar({ webdavConfig, calendarFile, circleFile }: Calendar
   }
 
   const handleAddEvent = async (event: Event) => {
-    const newEvents = [...events, event]
+    try {
-    setEvents(newEvents)
+      const newEvents = [...events, event];
-    setIsAddEventOpen(false)
+      await saveCalendarData(newEvents);
-    await saveCalendarData(newEvents)
+      setIsAddEventOpen(false);
+    } catch (err) {
+      console.error('Error adding event:', err);
+      toast({
+        title: "Error adding event",
+        description: "There was a problem adding the event. Please try again.",
+        variant: "destructive",
+      });
+    }
   }
 
   const handleEditEvent = async (updatedEvent: Event) => {
-    setEvents(prev => prev.map(event => event.id === updatedEvent.id ? updatedEvent : event))
+    try {
-    setSelectedEvent(null)
+      const newEvents = events.map(event => event.id === updatedEvent.id ? updatedEvent : event);
-    await saveCalendarData(events.map(event => event.id === updatedEvent.id ? updatedEvent : event))
+      await saveCalendarData(newEvents);
+      setSelectedEvent(null);
+    } catch (err) {
+      console.error('Error editing event:', err);
+      toast({
+        title: "Error editing event",
+        description: "There was a problem updating the event. Please try again.",
+        variant: "destructive",
+      });
+    }
   }
 
   const handleDeleteEvent = async (id: string) => {
-    setEvents(prev => prev.filter(event => event.id !== id))
+    try {
-    setSelectedEvent(null)
+      const newEvents = events.filter(event => event.id !== id);
-    await saveCalendarData(events.filter(event => event.id !== id))
+      await saveCalendarData(newEvents);
+      setSelectedEvent(null);
+    } catch (err) {
+      console.error('Error deleting event:', err);
+      toast({
+        title: "Error deleting event",
+        description: "There was a problem deleting the event. Please try again.",
+        variant: "destructive",
+      });
+    }
   }
 
   return (

react-shadcn-starter/src/components/calendar/eventform.tsx

@@ -42,15 +42,23 @@ export function EventForm({ onSubmit, initialData, isDarkMode }: EventFormProps)
   const [content, setContent] = React.useState(initialData?.content || '')
   const [attendees, setAttendees] = React.useState<string[]>(initialData?.attendees || [])
   const [isFullDay, setIsFullDay] = React.useState(initialData?.isFullDay || false)
+  const [isOpen, setIsOpen] = React.useState(false)
+
+  const handleDateSelect = (newDate: Date | undefined) => {
+    if (newDate) {
+      setDate(newDate)
+      setIsOpen(false)
+    }
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     if (title && date && category) {
       const color = categories.find(c => c.name === category)?.color || 'bg-gray-500 dark:bg-gray-700'
-      onSubmit({
+      const eventData: Event = {
         id: initialData?.id || uuidv4(),
         title,
-        date: date.toISOString().split('T')[0],
+        date: format(date, 'yyyy-MM-dd'),
         time: isFullDay ? '00:00' : time,
         duration: parseInt(duration),
         category,
@@ -58,7 +66,8 @@ export function EventForm({ onSubmit, initialData, isDarkMode }: EventFormProps)
         content,
         attendees,
         isFullDay
-      })
+      }
+      onSubmit(eventData)
     }
   }
 
@@ -74,11 +83,12 @@ export function EventForm({ onSubmit, initialData, isDarkMode }: EventFormProps)
           className="dark:bg-gray-700 dark:text-white dark:border-gray-600"
         />
       </div>
-      <div>
+      <div className="space-y-2">
         <Label htmlFor="date" className="dark:text-white">Date</Label>
-        <Popover>
+        <Popover open={isOpen} onOpenChange={setIsOpen}>
           <PopoverTrigger asChild>
             <Button
+              id="date"
               variant={"outline"}
               className={cn(
                 "w-full justify-start text-left font-normal",
@@ -90,11 +100,11 @@ export function EventForm({ onSubmit, initialData, isDarkMode }: EventFormProps)
               {date ? format(date, "PPP") : <span>Pick a date</span>}
             </Button>
           </PopoverTrigger>
-          <PopoverContent className="w-auto p-0">
+          <PopoverContent className="w-auto p-0" align="start">
             <Calendar
               mode="single"
               selected={date}
-              onSelect={(newDate) => newDate && setDate(newDate)}
+              onSelect={handleDateSelect}
               initialFocus
               className={isDarkMode ? "dark" : ""}
             />

react-shadcn-starter/src/components/icons.tsx

@@ -1,17 +1,44 @@
-type IconProps = React.HTMLAttributes<SVGElement>
+import {
+  LucideProps,
+  Moon,
+  SunMedium,
+  Twitter,
+  type Icon as LucideIcon,
+} from "lucide-react"
+
+export type Icon = typeof LucideIcon
 
 export const Icons = {
-    logo: (props: IconProps) => (
+  sun: SunMedium,
-        <svg viewBox="0 0 24 24" {...props}>
+  moon: Moon,
-            <rect x="2" y="2" width="20" height="20" rx="7" fill="#0F172A"/>
+  twitter: Twitter,
-        </svg>
+  logo: ({ ...props }: LucideProps) => (
-    ),
+    <svg
-    gitHub: (props: IconProps) => (
+      xmlns="http://www.w3.org/2000/svg"
-        <svg viewBox="0 0 438.549 438.549" {...props}>
+      viewBox="0 0 24 24"
-            <path
+      strokeWidth="1.5"
-                fill="currentColor"
+      stroke="currentColor"
-                d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+      fill="none"
-            ></path>
+      strokeLinecap="round"
-        </svg>
+      strokeLinejoin="round"
-    ),
+      {...props}
-}
+    >
+      <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+      <circle cx="12" cy="12" r="9" />
+      <line x1="12" y1="3" x2="12" y2="21" />
+      <line x1="3" y1="12" x2="21" y2="12" />
+    </svg>
+  ),
+  gitHub: ({ ...props }: LucideProps) => (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385c.6.105.825-.255.825-.57c0-.285-.015-1.23-.015-2.235c-3.015.555-3.795-.735-4.035-1.41c-.135-.345-.72-1.41-1.23-1.695c-.42-.225-1.02-.78-.015-.795c.945-.015 1.62.87 1.845 1.23c1.08 1.815 2.805 1.305 3.495.99c.105-.78.42-1.305.765-1.605c-2.67-.3-5.46-1.335-5.46-5.925c0-1.305.465-2.385 1.23-3.225c-.12-.3-.54-1.53.12-3.18c0 0 1.005-.315 3.3 1.23c.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23c.66 1.65.24 2.88.12 3.18c.765.84 1.23 1.905 1.23 3.225c0 4.605-2.805 5.625-5.475 5.925c.435.375.81 1.095.81 2.22c0 1.605-.015 2.895-.015 3.3c0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
+      />
+    </svg>
+  ),
+}

react-shadcn-starter/src/components/layouts/Header.tsx

@@ -77,7 +77,6 @@ export function Header() {
                             )
                         )}
                     </nav>
-
                 </div>
                 {/* mobile */}
                 <Sheet open={open} onOpenChange={setOpen}>
@@ -209,4 +208,4 @@ export function Header() {
             </div>
         </header>
     )
-}
+}

react-shadcn-starter/src/components/logo.tsx

@@ -1,11 +1,10 @@
-import { appConfig } from "@/config/app";
+import { Icons } from "./icons"
-import { Icons } from "./icons";
 
 export function Logo() {
-    return (
+  return (
-        <>
+    <div className="flex items-center space-x-2">
-            <Icons.logo className="h-6 w-6" />
+      <Icons.logo className="h-6 w-6" />
-            <span className="font-bold">{appConfig.name}</span>
+      <span className="font-bold inline-block">Hero Web</span>
-        </>
+    </div>
-    )
+  )
-}
+}

react-shadcn-starter/src/components/webdav-file-manager.tsx

@@ -6,16 +6,17 @@ import { javascript } from '@codemirror/lang-javascript'
 import { markdown } from '@codemirror/lang-markdown'
 import { json } from '@codemirror/lang-json'
 import { yaml } from '@codemirror/lang-yaml'
+import { WebDAVConfig } from "../lib/calendar-data"
 
-import { cn } from "@/lib/utils"
+import { cn } from "../lib/utils"
-import { Button } from "@/components/ui/button"
+import { Button } from "./ui/button"
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuSeparator,
   ContextMenuTrigger,
-} from "@/components/ui/context-menu"
+} from "./ui/context-menu"
 import {
   Dialog,
   DialogContent,
@@ -23,11 +24,11 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
+} from "./ui/dialog"
-import { Input } from "@/components/ui/input"
+import { Input } from "./ui/input"
-import { Label } from "@/components/ui/label"
+import { Label } from "./ui/label"
-import { ScrollArea } from "@/components/ui/scroll-area"
+import { ScrollArea } from "./ui/scroll-area"
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { Alert, AlertDescription, AlertTitle } from "./ui/alert"
 import { useToast } from "./ui/use-toast"
 
 // Custom fetch function to handle CORS
@@ -44,14 +45,6 @@ async function customFetch(url: string, options: RequestInit = {}) {
   return response
 }
 
-// Initialize WebDAV client with custom fetch
-const client = createClient("http://localhost:3333", {
-  username: "admin",
-  password: "1234",
-}) as WebDAVClient
-
-console.log("WebDAV client initialized:", client)
-
 type FileSystemItem = {
   basename: string
   filename: string
@@ -125,7 +118,13 @@ const Breadcrumb: React.FC<{
   )
 }
 
-const FileUploader: React.FC<{ currentPath: string, onUpload: () => void }> = ({ currentPath, onUpload }) => {
+interface FileUploaderProps {
+  currentPath: string
+  onUpload: () => void
+  client: WebDAVClient
+}
+
+const FileUploader: React.FC<FileUploaderProps> = ({ currentPath, onUpload, client }) => {
   const { toast } = useToast()
   
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -186,11 +185,14 @@ const FileUploader: React.FC<{ currentPath: string, onUpload: () => void }> = ({
   )
 }
 
-const FileSystemItem: React.FC<{
+interface FileSystemItemProps {
   item: FileSystemItem
   currentPath: string
   onRefresh: () => void
-}> = ({ item, currentPath, onRefresh }) => {
+  client: WebDAVClient
+}
+
+const FileSystemItem: React.FC<FileSystemItemProps> = ({ item, currentPath, onRefresh, client }) => {
   const [isEditDialogOpen, setIsEditDialogOpen] = useState(false)
   const [editedContent, setEditedContent] = useState("")
   const [isFullscreen, setIsFullscreen] = useState(false)
@@ -381,7 +383,11 @@ function formatFileSize(bytes: number): string {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`
 }
 
-export function WebdavFileManager() {
+interface WebdavFileManagerProps {
+  webdavConfig: WebDAVConfig
+}
+
+export function WebdavFileManager({ webdavConfig }: WebdavFileManagerProps) {
   const [currentPath, setCurrentPath] = useState("/")
   const [items, setItems] = useState<FileSystemItem[]>([])
   const [isLoading, setIsLoading] = useState(true)
@@ -391,6 +397,12 @@ export function WebdavFileManager() {
   const [newDirName, setNewDirName] = useState("")
   const { toast } = useToast()
 
+  // Initialize WebDAV client with provided config
+  const client = createClient(webdavConfig.url, {
+    username: webdavConfig.username,
+    password: webdavConfig.password,
+  }) as WebDAVClient
+
   const loadDirectory = async (path: string) => {
     setIsLoading(true)
     setError(null)
@@ -500,7 +512,7 @@ export function WebdavFileManager() {
           </Button>
           <h1 className="text-2xl font-bold">WebDAV File Manager</h1>
         </div>
-        <FileUploader currentPath={currentPath} onUpload={() => loadDirectory(currentPath)} />
+        <FileUploader currentPath={currentPath} onUpload={() => loadDirectory(currentPath)} client={client} />
       </div>
 
       <Breadcrumb path={currentPath} onNavigate={handleBreadcrumbNavigate} />
@@ -527,6 +539,7 @@ export function WebdavFileManager() {
                       item={item}
                       currentPath={currentPath}
                       onRefresh={() => loadDirectory(currentPath)}
+                      client={client}
                     />
                   </div>
                 ))}

react-shadcn-starter/src/config/app.ts

@@ -1,23 +1,17 @@
-interface AppConfig {
+import { WebDAVConfig } from '../lib/calendar-data'
-    name: string,
+
-    github: {
+export const appConfig = {
-        title: string,
+  name: "Hero Web",
-        url: string
+  github: {
-    },
+    url: "https://github.com/freeflowuniverse/heroweb",
-    author: {
+    title: "Hero Web on GitHub"
-        name: string,
+  }
-        url: string
-    },
 }
 
-export const appConfig: AppConfig = {
+export const webdavConfig: WebDAVConfig = {
-    name: "Sample App",
+  url: 'http://localhost:3333',
-    github: {
+  username: 'admin',
-        title: "React Shadcn Starter",
+  password: '1234',
-        url: "https://github.com/hayyi2/react-shadcn-starter",
+}
-    },
+
-    author: {
+export type { WebDAVConfig }
-        name: "hayyi",
-        url: "https://github.com/hayyi2/",
-    }
-}

react-shadcn-starter/src/config/menu.ts

@@ -18,24 +18,31 @@ export const mainMenu: NavItemWithChildren[] = [
     {
         title: 'Dashboard',
         to: '',
+        icon: 'logo'
     },
     {
-        title: 'Dropdown',
+        title: 'Calendar',
+        to: '/calendar',
+        icon: 'logo'
+    },
+    {
+        title: 'File Manager',
+        to: '/filemanager',
+        icon: 'logo'
+    },
+    {
+        title: 'More',
         items: [
             {
                 title: 'Sample',
                 to: '/sample',
             },
             {
-                title: 'Sample Dua',
+                title: 'Empty',
-                to: '/#',
+                to: '/empty',
             },
         ]
-    },
+    }
-    {
-        title: 'Empty',
-        to: 'empty',
-    },
 ]
 
 export const sideMenu: NavItemWithChildren[] = []

react-shadcn-starter/src/lib/utils.ts

@@ -1,6 +1,6 @@
 import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
-
+ 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }

react-shadcn-starter/src/pages/Calendar.tsx

@@ -0,0 +1,12 @@
+import { OurCalendar } from '../components/calendar/calendar'
+import { webdavConfig } from '../config/app'
+
+export default function Calendar() {
+  return (
+    <OurCalendar 
+      webdavConfig={webdavConfig} 
+      calendarFile="/calendars/kristof.json" 
+      circleFile="/calendars/cirlce1.json" 
+    />
+  )
+}

react-shadcn-starter/src/pages/Dashboard.tsx

@@ -9,8 +9,8 @@ export default function Dashboard() {
             </PageHeader>
             <Card>
                 <CardHeader>
-                    <CardTitle>React Shadcn Starter</CardTitle>
+                    <CardTitle>Hero Web</CardTitle>
-                    <CardDescription>React + Vite + TypeScript template for building apps with shadcn/ui.</CardDescription>
+                    <CardDescription>Lets play.</CardDescription>
                 </CardHeader>
             </Card>
         </>

react-shadcn-starter/src/pages/FileManager.tsx

@@ -0,0 +1,6 @@
+import { WebdavFileManager } from '../components/webdav-file-manager'
+import { webdavConfig } from '../config/app'
+
+export default function FileManager() {
+  return <WebdavFileManager webdavConfig={webdavConfig} />
+}