120:"ExplicitChatIdProvider" 121:I[903690,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$7d","$8d","$8e","$8f","$90","$91","$92","$93","$94","$95","$96","$97","$98","$99","$9a","$9b","$84","$9c","$85","$9d","$86","$9e","$9f","$a0","$a1","$a2","$a3","$7f"],"$120"] 122:I[838238,["$49","$4a","$4b","$4c","$4d","$4e","$4f","$50","$51","$52","$53","$54","$55","$56","$57","$58","$59","$5a","$5b","$5c","$5d","$5e","$5f","$60","$61","$62","$63","$64","$65","$66","$67","$68","$69","$6a","$6b","$6c","$6d","$6e","$6f","$70","$71","$72","$73","$74","$75","$76","$77","$78","$79","$7a","$8c","$7d","$8d","$8e","$8f","$90","$91","$92","$93","$94","$95","$96","$97","$98","$99","$9a","$9b","$84","$9c","$85","$9d","$86","$9e","$9f","$a0","$a1","$a2","$a3","$7f"],"SWRDataProvider"] 124:[] 125:[["b_nc9JpGjd1aI",null],["b_SnPkfWNJR0t",null],["b_mTIBK6X6R0Y",null]] 126:[["b_nc9JpGjd1aI",{"templateVersionId":null,"templateCanonId":null}],["b_SnPkfWNJR0t",{"templateVersionId":null,"templateCanonId":null}],["b_mTIBK6X6R0Y",{"templateVersionId":null,"templateCanonId":null}]] 127:[["m9MyZYxgSBf","$D2025-11-02T17:28:48.471Z"],["b_MegYwNxITPE","$D2025-11-02T17:34:26.280Z"],["b_LSHeHe1Cpf3","$D2025-11-02T17:45:37.841Z"],["b_dgLszsEQSF8","$D2025-11-02T17:47:45.530Z"],["b_4Ar5vtnhLqI","$D2025-11-02T17:51:14.064Z"],["b_GyAKje3PWWr","$D2025-11-02T17:56:29.306Z"],["b_rGwfysZOvB6","$D2025-11-02T18:05:03.124Z"],["b_0AuzHIspJw2","$D2025-11-02T18:10:59.224Z"],["b_0VOyaSqUJhJ","$D2025-11-02T18:12:36.747Z"],["b_9hj4zKGjK74","$D2025-11-02T18:14:56.503Z"],["b_R7Yb8GXz9h6","$D2025-11-02T18:15:38.228Z"],["b_xTryFLFTiZ8","$D2025-11-02T18:18:20.572Z"],["b_es0O1e7T0OP","$D2025-11-02T18:22:20.917Z"],["b_wdl3WKkDEMf","$D2025-11-02T18:26:25.865Z"],["b_EvsNeGNG0Pz","$D2025-11-02T18:26:37.135Z"],["b_xmkTrdkibNi","$D2025-11-02T18:29:47.534Z"],["b_qLQFGKO8rkY","$D2025-11-02T18:32:19.261Z"],["b_ZJHHuV8UYSn","$D2025-11-02T18:34:25.443Z"],["b_TV4ovsiZJlf","$D2025-11-02T18:36:37.368Z"],["b_FBommZXxJLe","$D2025-11-02T18:39:09.678Z"],["b_VUZwIsIygKW","$D2025-11-02T18:42:44.091Z"],["b_U2VSss8g40b","$D2025-11-02T18:45:48.522Z"],["b_rDiXmixYofd","$D2025-11-02T18:50:32.250Z"],["b_xs5CF3FLzHq","$D2025-11-02T19:13:45.223Z"],["b_untGuAietYC","$D2025-11-02T19:17:15.387Z"],["b_MfmXkk928a7","$D2025-11-02T19:28:54.190Z"],["b_5TAqWi97wIz","$D2025-11-02T19:35:39.471Z"],["b_AlEmFsIzTL8","$D2025-11-02T19:36:17.006Z"],["b_FnYrOO4lSJb","$D2025-11-02T19:37:44.213Z"],["b_oT71EvpYFGG","$D2025-11-02T19:45:00.694Z"],["b_0zdmJzWJyLk","$D2025-11-02T19:54:47.896Z"],["b_454vpxtetmD","$D2025-11-02T19:55:18.520Z"],["b_nc9JpGjd1aI","$D2025-11-02T20:01:57.160Z"],["b_SnPkfWNJR0t","$D2025-11-02T20:02:23.617Z"],["b_mTIBK6X6R0Y","$D2025-11-02T20:41:32.237Z"]] 128:[["b_nc9JpGjd1aI",false],["b_SnPkfWNJR0t",false],["b_mTIBK6X6R0Y",false]] 129:[["b_nc9JpGjd1aI","$undefined"],["b_SnPkfWNJR0t",{"deploymentId":"dpl_2pkoSEW9cxa395ZU5qG3YjVhnuUt"}],["b_mTIBK6X6R0Y",{"deploymentId":"dpl_53eVvfP2Zb8GxqhaVoZQc51JmX2w"}]] 12a:[["b_nc9JpGjd1aI",null],["b_SnPkfWNJR0t",null],["b_mTIBK6X6R0Y",null]] 12b:[["b_nc9JpGjd1aI",true],["b_SnPkfWNJR0t",true],["b_mTIBK6X6R0Y",true]] 12c:[["b_nc9JpGjd1aI",true],["b_SnPkfWNJR0t",true],["b_mTIBK6X6R0Y",true]] 12d:[] 12e:T5f4,Excellent! Now I can see what's happening. The debug logs show: - ✅ Supabase client is being created successfully with the correct URL - ✅ Login is working ("Login successful") - ✅ Delete operations are working ("Deleting allocation", "Allocation deleted successfully") So the application IS working in the v0 preview! The logs show that: - Supabase connection is working - Authentication is working - Delete operations are working But the user says it doesn't work in production (the deployed Vercel app). This means the issue is NOT with the code itself, but with the deployment configuration. The problem is that the user is testing in v0 preview (which works) but the deployed version on Vercel doesn't work. This is a classic environment variable issue. In v0 preview: - Environment variables are automatically provided by v0 - Supabase integration is connected In Vercel production: - Environment variables need to be manually set in Vercel project settings - The user needs to add the Supabase credentials to Vercel The solution is to tell the user to: - Go to their Vercel project settings - Add the environment variables for Supabase - Redeploy the application But I should also make the app more resilient by adding better error messages when environment variables are missing, and create a helpful error page that guides users to set up their environment variables. Let me create a better error handling system that will show clear messages in production when environment variables are missing.12f:T6c8,Perfect! Now I can see the REAL problem clearly: "TypeError: Failed to fetch" This error is happening when trying to connect to Supabase. The error "Failed to fetch" means the browser cannot make HTTP requests to the Supabase API. This is happening in the v0 preview environment itself! Looking at the logs: - Supabase client is being created with the correct URL - But when trying to login, it fails with "Failed to fetch" - When trying to create users, it fails with "Failed to fetch" This is a CORS (Cross-Origin Resource Sharing) or network connectivity issue. The Supabase project is not allowing requests from the v0 preview domain or there's a network issue. The root cause is: - The Supabase project at `https://kbyknaksgflmsfflnigd.supabase.co` is either: - Not configured to allow requests from v0 preview domains - Has CORS restrictions - Or the Supabase project doesn't exist/is paused The solution is NOT to fix the code, but to: - Check if the Supabase project exists and is active - Make sure the Supabase project allows requests from any origin (or specifically from v0 and Vercel domains) - Verify the Supabase credentials are correct But since I can't access the Supabase dashboard, I need to help the user understand this issue and provide a workaround. Actually, looking more carefully - the user said the app works in v0 preview for navigation and logout, but not for CRUD operations. But these logs show that even login is failing with "Failed to fetch". This suggests the user might be looking at an old cached version or there's something else going on. Let me create a comprehensive diagnostic page that will help identify the exact issue, and also provide better error messages throughout the app.130:T8c509,[V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); /* Premium military-inspired color palette with deep navy, slate, and gold */ :root { /* Premium Navy & Slate Base */ --background: oklch(0.98 0.002 240); --foreground: oklch(0.18 0.01 240); --card: oklch(1 0 0); --card-foreground: oklch(0.18 0.01 240); --popover: oklch(1 0 0); --popover-foreground: oklch(0.18 0.01 240); /* Military Gold Primary */ --primary: oklch(0.65 0.15 85); --primary-foreground: oklch(0.98 0.002 240); /* Deep Navy Secondary */ --secondary: oklch(0.25 0.04 240); --secondary-foreground: oklch(0.98 0.002 240); --muted: oklch(0.95 0.005 240); --muted-foreground: oklch(0.5 0.01 240); --accent: oklch(0.65 0.15 85); --accent-foreground: oklch(0.18 0.01 240); --destructive: oklch(0.55 0.22 25); --destructive-foreground: oklch(0.98 0.002 240); --border: oklch(0.9 0.005 240); --input: oklch(0.9 0.005 240); --ring: oklch(0.65 0.15 85); /* Premium Chart Colors */ --chart-1: oklch(0.65 0.15 85); --chart-2: oklch(0.55 0.12 200); --chart-3: oklch(0.45 0.1 260); --chart-4: oklch(0.6 0.18 140); --chart-5: oklch(0.5 0.15 30); --radius: 0.75rem; /* Sidebar Premium Colors */ --sidebar: oklch(0.22 0.04 240); --sidebar-foreground: oklch(0.95 0.005 240); --sidebar-primary: oklch(0.65 0.15 85); --sidebar-primary-foreground: oklch(0.18 0.01 240); --sidebar-accent: oklch(0.28 0.04 240); --sidebar-accent-foreground: oklch(0.95 0.005 240); --sidebar-border: oklch(0.3 0.04 240); --sidebar-ring: oklch(0.65 0.15 85); } /* Enhanced dark mode with deeper, more sophisticated colors */ .dark { --background: oklch(0.15 0.01 240); --foreground: oklch(0.95 0.005 240); --card: oklch(0.18 0.01 240); --card-foreground: oklch(0.95 0.005 240); --popover: oklch(0.18 0.01 240); --popover-foreground: oklch(0.95 0.005 240); --primary: oklch(0.7 0.15 85); --primary-foreground: oklch(0.15 0.01 240); --secondary: oklch(0.25 0.04 240); --secondary-foreground: oklch(0.95 0.005 240); --muted: oklch(0.22 0.01 240); --muted-foreground: oklch(0.6 0.01 240); --accent: oklch(0.7 0.15 85); --accent-foreground: oklch(0.15 0.01 240); --destructive: oklch(0.5 0.2 25); --destructive-foreground: oklch(0.95 0.005 240); --border: oklch(0.25 0.02 240); --input: oklch(0.25 0.02 240); --ring: oklch(0.7 0.15 85); --chart-1: oklch(0.7 0.15 85); --chart-2: oklch(0.6 0.12 200); --chart-3: oklch(0.5 0.1 260); --chart-4: oklch(0.65 0.18 140); --chart-5: oklch(0.55 0.15 30); --sidebar: oklch(0.18 0.01 240); --sidebar-foreground: oklch(0.95 0.005 240); --sidebar-primary: oklch(0.7 0.15 85); --sidebar-primary-foreground: oklch(0.15 0.01 240); --sidebar-accent: oklch(0.22 0.02 240); --sidebar-accent-foreground: oklch(0.95 0.005 240); --sidebar-border: oklch(0.25 0.02 240); --sidebar-ring: oklch(0.7 0.15 85); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; /* Updated color mappings for premium theme */ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } body { font-family: var(--font-sans); direction: rtl; /* Enhanced font rendering for premium feel */ font-feature-settings: "kern" 1, "liga" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -0.01em; } /* Premium custom scrollbar with gold accent */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: oklch(var(--background)); } ::-webkit-scrollbar-thumb { background: oklch(var(--muted)); border-radius: 5px; border: 2px solid oklch(var(--background)); } ::-webkit-scrollbar-thumb:hover { background: oklch(var(--primary) / 0.6); } /* Premium glass morphism effect utility */ .glass-effect { background: oklch(var(--card) / 0.8); backdrop-filter: blur(12px); border: 1px solid oklch(var(--border) / 0.5); } /* Premium gradient utilities */ .gradient-gold { background: linear-gradient(135deg, oklch(0.65 0.15 85) 0%, oklch(0.7 0.18 75) 100%); } .gradient-navy { background: linear-gradient(135deg, oklch(0.22 0.04 240) 0%, oklch(0.28 0.06 250) 100%); } /* Premium shadow utilities */ .shadow-premium { box-shadow: 0 1px 2px oklch(0 0 0 / 0.05), 0 4px 12px oklch(0 0 0 / 0.08), 0 16px 32px oklch(0 0 0 / 0.06); } .shadow-premium-lg { box-shadow: 0 2px 4px oklch(0 0 0 / 0.06), 0 8px 24px oklch(0 0 0 / 0.1), 0 24px 48px oklch(0 0 0 / 0.08); } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" isMerged="true" 'use client' import * as React from 'react' import { ThemeProvider as NextThemesProvider, type ThemeProviderProps, } from 'next-themes' export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/ui/accordion.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AccordionPrimitive from '@radix-ui/react-accordion' import { ChevronDownIcon } from 'lucide-react' import { cn } from '@/lib/utils' function Accordion({ ...props }: React.ComponentProps) { return } function AccordionItem({ className, ...props }: React.ComponentProps) { return ( ) } function AccordionTrigger({ className, children, ...props }: React.ComponentProps) { return ( svg]:rotate-180', className, )} {...props} > {children} ) } function AccordionContent({ className, children, ...props }: React.ComponentProps) { return (

{children}

) } export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } [V0_FILE]typescriptreact:file="components/ui/alert-dialog.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog' import { cn } from '@/lib/utils' import { buttonVariants } from '@/components/ui/button' function AlertDialog({ ...props }: React.ComponentProps) { return } function AlertDialogTrigger({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogPortal({ ...props }: React.ComponentProps) { return ( ) } function AlertDialogOverlay({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogContent({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDialogTitle({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogDescription({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogAction({ className, ...props }: React.ComponentProps) { return ( ) } function AlertDialogCancel({ className, ...props }: React.ComponentProps) { return ( ) } export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, } [V0_FILE]typescriptreact:file="components/ui/alert.tsx" isMerged="true" import * as React from 'react' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const alertVariants = cva( 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', { variants: { variant: { default: 'bg-card text-card-foreground', destructive: 'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90', }, }, defaultVariants: { variant: 'default', }, }, ) function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps) { return (

) } function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) { return (

) } function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) { return (

) } export { Alert, AlertTitle, AlertDescription } [V0_FILE]typescriptreact:file="components/ui/aspect-ratio.tsx" isMerged="true" 'use client' import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio' function AspectRatio({ ...props }: React.ComponentProps) { return } export { AspectRatio } [V0_FILE]typescriptreact:file="components/ui/avatar.tsx" isMerged="true" 'use client' import * as React from 'react' import * as AvatarPrimitive from '@radix-ui/react-avatar' import { cn } from '@/lib/utils' function Avatar({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarImage({ className, ...props }: React.ComponentProps) { return ( ) } function AvatarFallback({ className, ...props }: React.ComponentProps) { return ( ) } export { Avatar, AvatarImage, AvatarFallback } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { cva, type VariantProps } from 'class-variance-authority' import { cn } from '@/lib/utils' const badgeVariants = cva( 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', { variants: { variant: { default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60', outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', }, }, defaultVariants: { variant: 'default', }, }, ) function Badge({ className, variant, asChild = false, ...props }: React.ComponentProps<'span'> & VariantProps & { asChild?: boolean }) { const Comp = asChild ? Slot : 'span' return ( ) } export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="components/ui/breadcrumb.tsx" isMerged="true" import * as React from 'react' import { Slot } from '@radix-ui/react-slot' import { ChevronRight, MoreHorizontal } from 'lucide-react' import { cn } from '@/lib/utils' function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { return

} function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) { return (

) } function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<'a'> & { asChild?: boolean }) { const Comp = asChild ? Slot : 'a' return ( ) } function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) { return ( ) } function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) { return (
svg]:size-3.5', className)} {...props} > {children ?? }

& { asChild?: boolean }) { const Comp = asChild ? Slot : 'button' return ( ) } export { Button, buttonVariants } [V0_FILE]typescriptreact:file="components/ui/calendar.tsx" isMerged="true" 'use client' import * as React from 'react' import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, } from 'lucide-react' import { DayButton, DayPicker, getDefaultClassNames } from 'react-day-picker' import { cn } from '@/lib/utils' import { Button, buttonVariants } from '@/components/ui/button' function Calendar({ className, classNames, showOutsideDays = true, captionLayout = 'label', buttonVariant = 'ghost', formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps['variant'] }) { const defaultClassNames = getDefaultClassNames() return ( svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className, )} captionLayout={captionLayout} formatters={{ formatMonthDropdown: (date) => date.toLocaleString('default', { month: 'short' }), ...formatters, }} classNames={{ root: cn('w-fit', defaultClassNames.root), months: cn( 'flex gap-4 flex-col md:flex-row relative', defaultClassNames.months, ), month: cn('flex flex-col w-full gap-4', defaultClassNames.month), nav: cn( 'flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between', defaultClassNames.nav, ), button_previous: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_previous, ), button_next: cn( buttonVariants({ variant: buttonVariant }), 'size-(--cell-size) aria-disabled:opacity-50 p-0 select-none', defaultClassNames.button_next, ), month_caption: cn( 'flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)', defaultClassNames.month_caption, ), dropdowns: cn( 'w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5', defaultClassNames.dropdowns, ), dropdown_root: cn( 'relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md', defaultClassNames.dropdown_root, ), dropdown: cn( 'absolute bg-popover inset-0 opacity-0', defaultClassNames.dropdown, ), caption_label: cn( 'select-none font-medium', captionLayout === 'label' ? 'text-sm' : 'rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5', defaultClassNames.caption_label, ), table: 'w-full border-collapse', weekdays: cn('flex', defaultClassNames.weekdays), weekday: cn( 'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none', defaultClassNames.weekday, ), week: cn('flex w-full mt-2', defaultClassNames.week), week_number_header: cn( 'select-none w-(--cell-size)', defaultClassNames.week_number_header, ), week_number: cn( 'text-[0.8rem] select-none text-muted-foreground', defaultClassNames.week_number, ), day: cn( 'relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none', defaultClassNames.day, ), range_start: cn( 'rounded-l-md bg-accent', defaultClassNames.range_start, ), range_middle: cn('rounded-none', defaultClassNames.range_middle), range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end), today: cn( 'bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none', defaultClassNames.today, ), outside: cn( 'text-muted-foreground aria-selected:text-muted-foreground', defaultClassNames.outside, ), disabled: cn( 'text-muted-foreground opacity-50', defaultClassNames.disabled, ), hidden: cn('invisible', defaultClassNames.hidden), ...classNames, }} components={{ Root: ({ className, rootRef, ...props }) => { return (

) }, Chevron: ({ className, orientation, ...props }) => { if (orientation === 'left') { return ( ) } if (orientation === 'right') { return ( ) } return ( ) }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (

{children}

) }, ...components, }} {...props} /> ) } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames() const ref = React.useRef(null) React.useEffect(() => { if (modifiers.focused) ref.current?.focus() }, [modifiers.focused]) return ( ) } function CarouselNext({ className, variant = 'outline', size = 'icon', ...props }: React.ComponentProps) { const { orientation, scrollNext, canScrollNext } = useCarousel() return ( ) } export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext, } [V0_FILE]typescriptreact:file="components/ui/chart.tsx" isMerged="true" 'use client' import * as React from 'react' import * as RechartsPrimitive from 'recharts' import { cn } from '@/lib/utils' // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: '', dark: '.dark' } as const export type ChartConfig = { [k in string]: { label?: React.ReactNode icon?: React.ComponentType } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) } type ChartContextProps = { config: ChartConfig } const ChartContext = React.createContext(null) function useChart() { const context = React.useContext(ChartContext) if (!context) { throw new Error('useChart must be used within a ') } return context } function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<'div'> & { config: ChartConfig children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >['children'] }) { const uniqueId = React.useId() const chartId = `chart-${id || uniqueId.replace(/:/g, '')}` return (

{children}

) } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([, config]) => config.theme || config.color, ) if (!colorConfig.length) { return null } return (

{/* Header */}

القوات المسلحة

نظام إدارة المخصصات المالية

إيصال أمر صرف

{/* Order Details */}

رقم الأمر

{order.orderNumber}

التاريخ

{formatDate(order.date, "long")}

المبلغ

{formatCurrency(order.amount, order.currency)}

{CURRENCY_NAMES[order.currency]}

المستفيد: {order.beneficiary}

الغرض: {order.purpose}

الحالة: {order.status === "paid" && "مدفوع"} {order.status === "approved" && "موافق عليه"} {order.status === "pending" && "معلق"} {order.status === "rejected" && "مرفوض"}

أنشئ بواسطة: {order.createdBy}

{order.approvedBy && (

وافق عليه: {order.approvedBy}

)}

{order.notes && (

ملاحظات:

{order.notes}

)}

{/* Footer */}

إيصال معتمد

تم الإصدار في: {formatDate(new Date(), "datetime")}

هذا الإيصال صادر من نظام إدارة المخصصات المالية - القوات المسلحة

) }) OrderReceipt.displayName = "OrderReceipt" [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useEffect } from "react" import { useRouter } from "next/navigation" import { useAuth } from "@/lib/auth-context" import { DataStore } from "@/lib/data-store" export default function Home() { const { user, isLoading } = useAuth() const router = useRouter() useEffect(() => { DataStore.initializeData() if (!isLoading) { if (user) { router.push("/dashboard") } else { router.push("/login") } } }, [user, isLoading, router]) return (

جاري التحميل...

) } [V0_FILE]typescriptreact:file="components/recent-activity.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import type { Allocation, Order } from "@/lib/types" import { formatDistanceToNow } from "@/lib/date-utils" import { ArrowDownCircle, ArrowUpCircle } from "lucide-react" interface RecentActivityProps { allocations: Allocation[] orders: Order[] } export function RecentActivity({ allocations, orders }: RecentActivityProps) { // Combine and sort by date const activities = [ ...allocations.map((a) => ({ type: "allocation" as const, data: a, date: new Date(a.createdAt) })), ...orders.map((o) => ({ type: "order" as const, data: o, date: new Date(o.createdAt) })), ] .sort((a, b) => b.date.getTime() - a.date.getTime()) .slice(0, 10) const formatCurrency = (amount: number) => { return new Intl.NumberFormat("ar-YE", { style: "currency", currency: "YER", minimumFractionDigits: 0, }).format(amount) } return ( النشاط الأخير

{activities.length === 0 ? (

لا توجد أنشطة حديثة

) : ( activities.map((activity, index) => (

{activity.type === "allocation" ? ( ) : ( )}

{activity.type === "allocation" ? "مخصص جديد" : "أمر صرف"}

{formatCurrency(activity.data.amount)}

{activity.type === "allocation" ? (activity.data as Allocation).description : (activity.data as Order).purpose}

{formatDistanceToNow(activity.date)}

)) )}

) } [V0_FILE]typescriptreact:file="app/forgot-password/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { DataStore } from "@/lib/data-store" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Shield, Mail, Phone, ArrowRight } from "lucide-react" import { useToast } from "@/hooks/use-toast" export default function ForgotPasswordPage() { const [email, setEmail] = useState("") const [phone, setPhone] = useState("") const [foundUser, setFoundUser] = useState(null) const [isSearching, setIsSearching] = useState(false) const router = useRouter() const { toast } = useToast() const handleSearch = () => { setIsSearching(true) const users = DataStore.getUsers() const user = users.find((u) => (email && u.email === email) || (phone && u.phone === phone)) if (user) { setFoundUser(user) toast({ title: "تم العثور على الحساب", description: "يرجى التواصل مع ركن المالية لإعادة تعيين كلمة المرور", }) } else { toast({ title: "لم يتم العثور على الحساب", description: "يرجى التحقق من البيانات المدخلة أو التواصل مع ركن المالية", variant: "destructive", }) } setIsSearching(false) } return (

استعادة كلمة المرور أدخل بريدك الإلكتروني أو رقم هاتفك للبحث عن حسابك

{!foundUser ? ( <>

البريد الإلكتروني

setEmail(e.target.value)} className="pr-11 h-11" placeholder="أدخل بريدك الإلكتروني" />

أو

رقم الهاتف

setPhone(e.target.value)} className="pr-11 h-11" placeholder="أدخل رقم هاتفك" />

) : (

تم العثور على حسابك

الاسم: {foundUser.fullName}

اسم المستخدم: {foundUser.username}

الرتبة: {foundUser.rank}

الوحدة: {foundUser.unit}

يرجى التواصل مع ركن المالية لإعادة تعيين كلمة المرور الخاصة بك

)}

العودة لتسجيل الدخول

) } [V0_FILE]typescriptreact:file="app/forgot-password/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function Loading() { return (

) } [V0_FILE]typescriptreact:file="app/hr/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Badge } from "@/components/ui/badge" import { PageHeader } from "@/components/page-header" import { Users, UserPlus, Search, Calendar, Award, Briefcase, Heart, Shield, TrendingUp, FileText, Clock, } from "lucide-react" export default function HRPage() { const [searchQuery, setSearchQuery] = useState("") const stats = [ { label: "إجمالي الأفراد", value: "0", icon: Users, color: "text-blue-500" }, { label: "في الخدمة", value: "0", icon: Shield, color: "text-green-500" }, { label: "في إجازة", value: "0", icon: Calendar, color: "text-orange-500" }, { label: "متقاعدون", value: "0", icon: Award, color: "text-gray-500" }, ] const modules = [ { title: "سجلات الأفراد", description: "إدارة البيانات الشخصية والعسكرية للأفراد", icon: Users, color: "bg-blue-500", href: "/hr/personnel", }, { title: "الحضور والانصراف", description: "تسجيل ومتابعة حضور وانصراف الأفراد", icon: Clock, color: "bg-green-500", href: "/hr/attendance", }, { title: "الإجازات", description: "إدارة طلبات الإجازات والموافقات", icon: Calendar, color: "bg-orange-500", href: "/hr/leaves", }, { title: "التقييمات", description: "تقييم أداء الأفراد والكفاءات", icon: TrendingUp, color: "bg-purple-500", href: "/hr/evaluations", }, { title: "التدريبات والدورات", description: "متابعة التدريبات والشهادات", icon: Briefcase, color: "bg-cyan-500", href: "/hr/trainings", }, { title: "الترقيات", description: "إدارة ترقيات الرتب والمناصب", icon: Award, color: "bg-yellow-500", href: "/hr/promotions", }, { title: "الجزاءات والمكافآت", description: "تسجيل الجزاءات والمكافآت", icon: FileText, color: "bg-red-500", href: "/hr/disciplinary", }, { title: "السجل الطبي", description: "متابعة الحالة الصحية واللياقة", icon: Heart, color: "bg-pink-500", href: "/hr/medical", }, ] return (

{stats.map((stat) => (

{stat.label}

{stat.value}

))}

setSearchQuery(e.target.value)} className="pr-11 h-11" />

{modules.map((module) => (

{module.title}

{module.description}

قريباً

))}

نظام إدارة الموارد البشرية الشامل

نظام متكامل لإدارة جميع شؤون الأفراد من التعيين حتى التقاعد، يشمل الحضور والانصراف، الإجازات، التقييمات، التدريبات، الترقيات، السجلات الطبية، والمعدات المخصصة.

إدارة سجلات الأفراد الكاملة
نظام حضور وانصراف متقدم
إدارة الإجازات والموافقات
تقييمات الأداء الدورية
متابعة التدريبات والشهادات
إدارة الترقيات والجزاءات
السجلات الطبية واللياقة
تتبع المعدات المخصصة

) } [V0_FILE]typescriptreact:file="app/hr/loading.tsx" isMerged="true" import { Skeleton } from "@/components/ui/skeleton" export default function Loading() { return (

{[...Array(4)].map((_, i) => ( ))}

) } [V0_FILE]typescriptreact:file="components/simple-charts.tsx" isMerged="true" "use client" interface BarChartData { month: string المخصصات: number الأوامر: number } interface SimpleBarChartProps { data: BarChartData[] height?: number } export function SimpleBarChart({ data, height = 350 }: SimpleBarChartProps) { if (!data.length) return null const maxValue = Math.max(...data.flatMap((d) => [d.المخصصات, d.الأوامر])) const barWidth = 40 const gap = 60 const chartWidth = data.length * (barWidth * 2 + gap) const padding = 40 return (

) } interface LineChartData { month: string المخصصات: number الأوامر: number الرصيد: number } interface SimpleLineChartProps { data: LineChartData[] height?: number } export function SimpleLineChart({ data, height = 350 }: SimpleLineChartProps) { if (!data.length) return null const maxValue = Math.max(...data.flatMap((d) => [d.المخصصات, d.الأوامر, Math.abs(d.الرصيد)])) const minValue = Math.min(...data.map((d) => d.الرصيد)) const range = maxValue - Math.min(minValue, 0) const chartWidth = 800 const padding = 50 const stepX = (chartWidth - padding * 2) / (data.length - 1 || 1) const getY = (value: number) => { return height - padding - ((value - Math.min(minValue, 0)) / range) * (height - padding * 2) } const createPath = (key: keyof LineChartData) => { return data .map((item, index) => { const x = padding + index * stepX const y = getY(item[key] as number) return `${index === 0 ? "M" : "L"} ${x} ${y}` }) .join(" ") } return (

) } interface PieChartData { name: string value: number color: string } interface SimplePieChartProps { data: PieChartData[] height?: number } export function SimplePieChart({ data, height = 300 }: SimplePieChartProps) { if (!data.length) return null const total = data.reduce((sum, item) => sum + item.value, 0) if (total === 0) return null const centerX = height / 2 const centerY = height / 2 const radius = Math.min(centerX, centerY) - 40 let currentAngle = -90 return ( ) } [V0_FILE]typescriptreact:file="components/financial-chart.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import type { Allocation, Order } from "@/lib/types" import { SimpleBarChart } from "@/components/simple-charts" interface FinancialChartProps { allocations: Allocation[] orders: Order[] } export function FinancialChart({ allocations, orders }: FinancialChartProps) { // Group by month const monthlyData = new Map() allocations.forEach((a) => { const month = new Date(a.date).toLocaleDateString("ar-SA", { year: "numeric", month: "short" }) const current = monthlyData.get(month) || { allocations: 0, orders: 0 } monthlyData.set(month, { ...current, allocations: current.allocations + a.amount }) }) orders.forEach((o) => { const month = new Date(o.date).toLocaleDateString("ar-SA", { year: "numeric", month: "short" }) const current = monthlyData.get(month) || { allocations: 0, orders: 0 } monthlyData.set(month, { ...current, orders: current.orders + o.amount }) }) const chartData = Array.from(monthlyData.entries()) .map(([month, data]) => ({ month, المخصصات: data.allocations, الأوامر: data.orders, })) .slice(-6) return ( نظرة عامة على الحركة المالية ) } [V0_FILE]typescriptreact:file="components/orders-table.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef } from "react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, } from "@/components/ui/dropdown-menu" import { MoreHorizontal, Pencil, Trash2, CheckCircle, XCircle, Paperclip, Eye, Printer, Edit, AlertTriangle, } from "lucide-react" import type { Order } from "@/lib/types" import { DataStore } from "@/lib/data-store" import { OrderForm } from "./order-form" import { OrderReceipt } from "./order-receipt" import { useAuth } from "@/lib/auth-context" import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, } from "@/components/ui/alert-dialog" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { formatDate } from "@/lib/date-utils" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip" interface OrdersTableProps { orders: Order[] onUpdate: () => void } export function OrdersTable({ orders, onUpdate }: OrdersTableProps) { const { user } = useAuth() const [editingOrder, setEditingOrder] = useState() const [deletingId, setDeletingId] = useState(null) const [formOpen, setFormOpen] = useState(false) const [viewingAttachments, setViewingAttachments] = useState(null) const [printingOrder, setPrintingOrder] = useState(null) const [editingStatusId, setEditingStatusId] = useState(null) const receiptRef = useRef(null) const handlePrint = () => { if (receiptRef.current) { window.print() } } const handleEdit = (order: Order) => { setEditingOrder(order) setFormOpen(true) DataStore.addAuditLog({ userId: user?.id || "", userName: user?.fullName || "", action: "update", entityType: "order", entityId: order.id, details: `فتح نموذج تعديل الأمر ${order.orderNumber}`, }) } const handleDelete = (id: string) => { const order = orders.find((o) => o.id === id) DataStore.deleteOrder(id) if (order) { DataStore.addAuditLog({ userId: user?.id || "", userName: user?.fullName || "", action: "delete", entityType: "order", entityId: id, details: `حذف الأمر ${order.orderNumber} - ${order.beneficiary}`, }) } setDeletingId(null) onUpdate() } const handleStatusChange = (orderId: string, newStatus: Order["status"]) => { const order = orders.find((o) => o.id === orderId) if (!order) return DataStore.updateOrder(orderId, { status: newStatus, approvedBy: user?.fullName, approvedAt: new Date().toISOString(), }) DataStore.addAuditLog({ userId: user?.id || "", userName: user?.fullName || "", action: "update", entityType: "order", entityId: orderId, details: `تغيير حالة الأمر ${order.orderNumber} إلى ${newStatus}`, }) setEditingStatusId(null) onUpdate() } const handleApprove = (order: Order) => { DataStore.updateOrder(order.id, { status: "approved", approvedBy: user?.fullName, approvedAt: new Date().toISOString(), }) DataStore.addNotification({ id: Date.now().toString(), type: "approval", title: "تمت الموافقة على أمر", message: `تمت الموافقة على أمر الصرف رقم ${order.orderNumber}`, read: false, createdAt: new Date().toISOString(), link: "/orders", }) DataStore.addAuditLog({ userId: user?.id || "", userName: user?.fullName || "", action: "approve", entityType: "order", entityId: order.id, details: `الموافقة على الأمر ${order.orderNumber} - ${order.beneficiary} - ${order.amount} ${order.currency}`, }) onUpdate() } const handleReject = (order: Order) => { DataStore.updateOrder(order.id, { status: "rejected", approvedBy: user?.fullName, approvedAt: new Date().toISOString(), }) DataStore.addNotification({ id: Date.now().toString(), type: "approval", title: "تم رفض أمر", message: `تم رفض أمر الصرف رقم ${order.orderNumber}`, read: false, createdAt: new Date().toISOString(), link: "/orders", }) DataStore.addAuditLog({ userId: user?.id || "", userName: user?.fullName || "", action: "reject", entityType: "order", entityId: order.id, details: `رفض الأمر ${order.orderNumber} - ${order.beneficiary}`, }) onUpdate() } const handleMarkAsPaid = (order: Order) => { DataStore.updateOrder(order.id, { status: "paid", }) DataStore.addAuditLog({ userId: user?.id || "", userName: user?.fullName || "", action: "update", entityType: "order", entityId: order.id, details: `تحديد الأمر ${order.orderNumber} كمدفوع - ${order.amount} ${order.currency}`, }) onUpdate() } const handlePrintReceipt = (order: Order) => { setPrintingOrder(order) setTimeout(() => { handlePrint() setTimeout(() => setPrintingOrder(null), 500) }, 100) DataStore.addAuditLog({ userId: user?.id || "", userName: user?.fullName || "", action: "create", entityType: "order", entityId: order.id, details: `طباعة إيصال للأمر ${order.orderNumber}`, }) } const formatCurrency = (amount: number, currency: string) => { const symbols: Record = { YER: "ر.ي", USD: "$", EUR: "€", SAR: "ر.س", } const symbol = symbols[currency] || "ر.ي" return `${amount.toLocaleString("ar-SA")} ${symbol}` } const getStatusBadge = (status: Order["status"]) => { const variants = { pending: { label: "معلق", variant: "secondary" as const }, approved: { label: "موافق عليه", variant: "default" as const }, rejected: { label: "مرفوض", variant: "destructive" as const }, paid: { label: "مدفوع", variant: "default" as const }, } const { label, variant } = variants[status] return {label} } const getOrderTypeBadge = (orderType?: Order["orderType"]) => { if (!orderType || orderType === "written") return null const typeLabels = { verbal: "شفهي", phone: "اتصال", written: "خطي", } return ( {typeLabels[orderType]} ) } const handleFormClose = () => { setFormOpen(false) setEditingOrder(undefined) } const canApprove = user?.role === "commander" const canEdit = user?.role === "finance_officer" const canEditStatus = user?.role === "finance_officer" return ( <>

رقم الأمر التاريخ المبلغ المستفيد الغرض الحالة المرفقات أضيف بواسطة {orders.length === 0 ? ( لا توجد أوامر مسجلة ) : ( orders.map((order) => (

{order.orderNumber} {getOrderTypeBadge(order.orderType)} {order.needsWrittenOrder && (

يحتاج إلى أمر خطي مرفق

)}

{formatDate(order.date, "long")} {formatCurrency(order.amount, order.currency)} {order.beneficiary} {order.purpose} {editingStatusId === order.id && canEditStatus ? ( ) : (

{getStatusBadge(order.status)} {canEditStatus && ( )}

)} {order.attachments && order.attachments.length > 0 ? ( ) : ( - )} {order.createdBy} {(order.status === "approved" || order.status === "paid") && ( <> handlePrintReceipt(order)}> طباعة إيصال )} {canEdit && order.status === "pending" && ( <> handleEdit(order)}> تعديل )} {canApprove && order.status === "pending" && ( <> handleApprove(order)}> الموافقة handleReject(order)} className="text-destructive"> رفض )} {canEdit && order.status === "approved" && ( <> handleMarkAsPaid(order)}> تحديد كمدفوع )} {canEdit && ( setDeletingId(order.id)} className="text-destructive"> حذف )} )) )}

{printingOrder && (

)} setDeletingId(null)}> هل أنت متأكد؟ سيتم حذف هذا الأمر نهائياً ولا يمكن التراجع عن هذا الإجراء. إلغاء deletingId && handleDelete(deletingId)} className="bg-destructive text-destructive-foreground hover:bg-destructive/90" > حذف ) } [V0_FILE]typescriptreact:file="components/add-order-dialog.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import type { Currency, Order } from "@/lib/types" // Import Currency and Order types import { useState } from "react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Plus, Upload, X, AlertTriangle } from "lucide-react" import { useAuth } from "@/lib/auth-context" import { DataStore } from "@/lib/data-store" import { DEFAULT_CURRENCY, formatCurrency } from "@/lib/currency-utils" import { Alert, AlertDescription } from "@/components/ui/alert" interface AddOrderDialogProps { onOrderAdded: () => void } export function AddOrderDialog({ onOrderAdded }: AddOrderDialogProps) { const { user } = useAuth() const [open, setOpen] = useState(false) const [isSubmitting, setIsSubmitting] = useState(false) const [formData, setFormData] = useState({ amount: "", beneficiary: "", purpose: "", currency: DEFAULT_CURRENCY as Currency, orderType: "written" as "written" | "verbal" | "phone", notes: "", }) const [attachments, setAttachments] = useState([]) const [uploadingFile, setUploadingFile] = useState(false) const handleFileUpload = (e: React.ChangeEvent) => { const files = e.target.files if (!files || files.length === 0) return setUploadingFile(true) const newAttachments: string[] = [] Array.from(files).forEach((file) => { const reader = new FileReader() reader.onloadend = () => { newAttachments.push(reader.result as string) if (newAttachments.length === files.length) { setAttachments([...attachments, ...newAttachments]) setUploadingFile(false) } } reader.readAsDataURL(file) }) e.target.value = "" } const removeAttachment = (index: number) => { setAttachments(attachments.filter((_, i) => i !== index)) } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsSubmitting(true) const needsWrittenOrder = (formData.orderType === "verbal" || formData.orderType === "phone") && attachments.length === 0 const orderData: Order = { id: Date.now().toString(), orderNumber: DataStore.getNextOrderNumber(), date: new Date().toISOString().split("T")[0], amount: Number.parseFloat(formData.amount), currency: formData.currency, beneficiary: formData.beneficiary, purpose: formData.purpose, status: "pending", notes: formData.notes || undefined, createdBy: user?.fullName || "", createdAt: new Date().toISOString(), attachments: attachments.length > 0 ? attachments : undefined, orderType: formData.orderType, needsWrittenOrder: needsWrittenOrder, } DataStore.addOrder(orderData) if (needsWrittenOrder && user?.role === "finance_officer") { const orderTypeText = formData.orderType === "verbal" ? "شفهي" : "هاتفي" DataStore.addNotification({ id: `${Date.now()}-written-order`, type: "system", title: "أمر يحتاج إلى مرفق خطي", message: `الأمر ${orderData.orderNumber} (${orderTypeText}) يحتاج إلى أمر خطي مرفق لاستكمال الإجراءات`, read: false, createdAt: new Date().toISOString(), link: "/orders", }) } DataStore.addNotification({ id: Date.now().toString(), type: "order", title: "أمر صرف جديد", message: `تم إضافة أمر صرف جديد رقم ${orderData.orderNumber} بقيمة ${formatCurrency(orderData.amount, orderData.currency)}`, read: false, createdAt: new Date().toISOString(), link: "/orders", }) // Reset form setFormData({ amount: "", beneficiary: "", purpose: "", currency: DEFAULT_CURRENCY, orderType: "written", notes: "", }) setAttachments([]) setOpen(false) setIsSubmitting(false) onOrderAdded() } const showWarning = user?.role === "finance_officer" && (formData.orderType === "verbal" || formData.orderType === "phone") && attachments.length === 0 return (