[V0_FILE]html:file="reference/original-app.html" isEdit="true" isMerged="true" تطبيق مصاريفي الشهرية

تطبيق مصاريفي الشهرية

تسجيل المصاريف اليومية بالدينار العراقي

إضافة مصروف جديد

المبلغ (دينار عراقي)

وصف المصروف

المبلغ	الوصف	التاريخ	الوقت	الإجراءات

المجموع: 0 دينار عراقي

[V0_FILE]typescriptreact:file="components/export-button.tsx" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Download } from "lucide-react" import type { Expense } from "@/app/page" interface ExportButtonProps { expenses: Expense[] currentMonth: number currentYear: number } const months = [ "يناير", "فبراير", "مارس", "أبريل", "مايو", "يونيو", "يوليو", "أغسطس", "سبتمبر", "أكتوبر", "نوفمبر", "ديسمبر", ] export function ExportButton({ expenses, currentMonth, currentYear }: ExportButtonProps) { const exportToCSV = () => { if (expenses.length === 0) { alert("لا توجد بيانات للتصدير") return } const headers = ["المبلغ", "الوصف", "التاريخ", "الوقت"] const csvContent = [ headers.join(","), ...expenses.map((expense) => `${expense.amount},"${expense.description}","${expense.date}","${expense.time}"`), ].join("\n") const total = expenses.reduce((sum, expense) => sum + expense.amount, 0) const csvWithTotal = csvContent + `\n\nالمجموع,${total},,` const blob = new Blob(["\ufeff" + csvWithTotal], { type: "text/csv;charset=utf-8;" }) const link = document.createElement("a") const url = URL.createObjectURL(blob) link.setAttribute("href", url) link.setAttribute("download", `مصاريف_${months[currentMonth]}_${currentYear}.csv`) link.style.visibility = "hidden" document.body.appendChild(link) link.click() document.body.removeChild(link) } return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "تطبيق مصاريفي الشهرية", description: "تسجيل المصاريف اليومية بالدينار العراقي", manifest: "/manifest.json", themeColor: "#2c3e50", viewport: "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]markdown:file="README.md" isMerged="true" # تطبيق مصاريفي الشهرية تطبيق لتسجيل المصاريف اليومية بالدينار العراقي مع إمكانية التصدير والحفظ المحلي. ## المميزات - ✅ إضافة وتعديل وحذف المصاريف - ✅ التنقل بين الأشهر والسنوات - ✅ حفظ البيانات محلياً في المتصفح - ✅ تصدير البيانات إلى CSV - ✅ واجهة عربية متجاوبة - ✅ دعم الأجهزة المحمولة ## تحويل إلى APK لتحويل هذا التطبيق إلى APK للأندرويد: ### الطريقة الأولى: استخدام Capacitor 1. تثبيت Capacitor: \`\`\`bash npm install @capacitor/core @capacitor/cli npm install @capacitor/android \`\`\` 2. تهيئة Capacitor: \`\`\`bash npx cap init "مصاريفي" "com.example.expenses" \`\`\` 3. بناء التطبيق: \`\`\`bash npm run build npx cap add android npx cap sync \`\`\` 4. فتح في Android Studio: \`\`\`bash npx cap open android \`\`\` ### الطريقة الثانية: استخدام PWA Builder 1. زيارة https://www.pwabuilder.com 2. إدخال رابط التطبيق المنشور 3. تحميل APK المُولد ### الطريقة الثالثة: استخدام Cordova 1. تثبيت Cordova: \`\`\`bash npm install -g cordova \`\`\` 2. إنشاء مشروع Cordova: \`\`\`bash cordova create expenses com.example.expenses "مصاريفي" \`\`\` 3. إضافة منصة الأندرويد: \`\`\`bash cordova platform add android \`\`\` 4. بناء APK: \`\`\`bash cordova build android \`\`\` ## التشغيل المحلي \`\`\`bash npm install npm run dev \`\`\` ## النشر \`\`\`bash npm run build \`\`\` يمكن نشر التطبيق على Vercel أو أي منصة استضافة أخرى. [V0_FILE]jpg:file="public/icon-192.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icon-192-ZmT3fBgVA0aghd64NrvpZZwlMGTadf.jpg" isMerged="true" [V0_FILE]jpg:file="public/icon-512.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/icon-512-p8i9w2oNxQvWZJOug6CG4tQyr7v04S.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="components/month-selector.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent } from "@/components/ui/card" interface MonthSelectorProps { currentMonth: number currentYear: number onLoadMonth: (month: number, year: number) => void onStartNewMonth: () => void } const months = [ "كانون الثاني", "شباط", "آذار", "نيسان", "أيار", "حزيران", "تموز", "آب", "أيلول", "تشرين الأول", "تشرين الثاني", "كانون الأول", ] export function MonthSelector({ currentMonth, currentYear, onLoadMonth, onStartNewMonth }: MonthSelectorProps) { const currentYearNum = new Date().getFullYear() const years = Array.from({ length: 7 }, (_, i) => currentYearNum - 5 + i) const handleStartNewMonth = () => { if (confirm("هل تريد بدء شهر جديد؟ سيتم حفظ بيانات الشهر الحالي تلقائياً.")) { onStartNewMonth() } } return (

) } [V0_FILE]typescriptreact:file="components/expense-table.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Card, CardContent } from "@/components/ui/card" import type { Expense } from "@/app/page" interface ExpenseTableProps { expenses: Expense[] onEditExpense: (index: number, amount: number, description: string) => void onDeleteExpense: (index: number) => void onSetImportance: (index: number, importance: "important" | "not-important") => void } export function ExpenseTable({ expenses, onEditExpense, onDeleteExpense, onSetImportance }: ExpenseTableProps) { const [editingIndex, setEditingIndex] = useState(null) const [editAmount, setEditAmount] = useState("") const [editDescription, setEditDescription] = useState("") const startEdit = (index: number, expense: Expense) => { setEditingIndex(index) setEditAmount(expense.amount.toString()) setEditDescription(expense.description) } const saveEdit = () => { if (editingIndex !== null) { const amount = Number.parseFloat(editAmount) if (amount > 0 && editDescription.trim()) { onEditExpense(editingIndex, amount, editDescription.trim()) setEditingIndex(null) } } } const cancelEdit = () => { setEditingIndex(null) setEditAmount("") setEditDescription("") } const handleDelete = (index: number) => { if (confirm("هل أنت متأكد من حذف هذا المصروف؟")) { onDeleteExpense(index) } } return (

{expenses.map((expense, index) => ( ))}

المبلغ	الوصف	التاريخ	الوقت	الإجراءات
{editingIndex === index ? ( setEditAmount(e.target.value)} className="bg-slate-800 border-slate-600 text-right text-sm text-white" dir="ltr" /> ) : ( {expense.amount.toLocaleString()} )}	{editingIndex === index ? ( setEditDescription(e.target.value)} className="bg-slate-800 border-slate-600 text-right text-sm text-white" /> ) : ( {expense.description} )}	{expense.date}	{expense.time}	{editingIndex === index ? ( <> ) : ( <> )}

{expenses.length === 0 &&

لا توجد مصاريف مسجلة لهذا الشهر

}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { ExpenseForm } from "@/components/expense-form" import { ExpenseTable } from "@/components/expense-table" import { MonthSelector } from "@/components/month-selector" import { Summary } from "@/components/summary" import { ExportButton } from "@/components/export-button" export interface Expense { amount: number description: string date: string time: string timestamp: number importance?: "important" | "not-important" | null } export default function ExpenseTracker() { const [expenses, setExpenses] = useState([]) const [currentMonth, setCurrentMonth] = useState(new Date().getMonth()) const [currentYear, setCurrentYear] = useState(new Date().getFullYear()) // Load expenses from localStorage useEffect(() => { const monthKey = `expenses_${currentYear}_${currentMonth}` const storedExpenses = localStorage.getItem(monthKey) if (storedExpenses) { setExpenses(JSON.parse(storedExpenses)) } else { setExpenses([]) } }, [currentMonth, currentYear]) // Save expenses to localStorage const saveExpenses = (newExpenses: Expense[]) => { const monthKey = `expenses_${currentYear}_${currentMonth}` localStorage.setItem(monthKey, JSON.stringify(newExpenses)) setExpenses(newExpenses) } const addExpense = (amount: number, description: string) => { const now = new Date() const date = `${now.getDate().toString().padStart(2, "0")}/${(now.getMonth() + 1).toString().padStart(2, "0")}/${now.getFullYear()}` let hours = now.getHours() const minutes = now.getMinutes().toString().padStart(2, "0") const ampm = hours >= 12 ? "مساءً" : "صباحاً" if (hours === 0) { hours = 12 } else if (hours > 12) { hours = hours - 12 } const time = `${hours}:${minutes} ${ampm}` const newExpense: Expense = { amount, description, date, time, timestamp: now.getTime(), } const newExpenses = [...expenses, newExpense] saveExpenses(newExpenses) } const editExpense = (index: number, amount: number, description: string) => { const newExpenses = [...expenses] newExpenses[index] = { ...newExpenses[index], amount, description, } saveExpenses(newExpenses) } const deleteExpense = (index: number) => { const newExpenses = expenses.filter((_, i) => i !== index) saveExpenses(newExpenses) } const setImportance = (index: number, importance: "important" | "not-important") => { const newExpenses = [...expenses] newExpenses[index] = { ...newExpenses[index], importance, } saveExpenses(newExpenses) } const loadMonth = (month: number, year: number) => { setCurrentMonth(month) setCurrentYear(year) } const startNewMonth = () => { const now = new Date() setCurrentMonth(now.getMonth()) setCurrentYear(now.getFullYear()) } const totalAmount = expenses.reduce((sum, expense) => sum + expense.amount, 0) const importantTotal = expenses .filter((expense) => expense.importance === "important") .reduce((sum, expense) => sum + expense.amount, 0) const notImportantTotal = expenses .filter((expense) => expense.importance === "not-important") .reduce((sum, expense) => sum + expense.amount, 0) return (

تطبيق مصاريفي الشهرية

تسجيل المصاريف اليومية بالدينار العراقي

) } [V0_FILE]typescriptreact:file="components/summary.tsx" isEdit="true" isMerged="true" import { Card, CardContent } from "@/components/ui/card" interface SummaryProps { totalAmount: number importantTotal: number notImportantTotal: number } export function Summary({ totalAmount, importantTotal, notImportantTotal }: SummaryProps) { return (

المجموع:{" "} {totalAmount.toLocaleString()}{" "} دينار عراقي

المبالغ الضرورية

{importantTotal.toLocaleString()} د.ع

المبالغ غير المهمة

{notImportantTotal.toLocaleString()} د.ع

) } [V0_FILE]typescriptreact:file="components/expense-form.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" interface ExpenseFormProps { onAddExpense: (amount: number, description: string) => void } export function ExpenseForm({ onAddExpense }: ExpenseFormProps) { const [amount, setAmount] = useState("") const [description, setDescription] = useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() const amountNum = Number.parseFloat(amount) if (!amountNum || amountNum <= 0 || !description.trim()) { alert("يرجى إدخال مبلغ صحيح ووصف للمصروف") return } onAddExpense(amountNum, description.trim()) setAmount("") setDescription("") } return ( إضافة مصروف جديد ) } [V0_FILE]json:file="public/manifest.json" isEdit="true" { "name": "تطبيق مصاريفي الشهرية", "short_name": "مصاريفي", "description": "تسجيل المصاريف اليومية بالدينار العراقي", "start_url": "/", "display": "standalone", "background_color": "#1a1a1a", "theme_color": "#3b82f6", "orientation": "portrait", "scope": "/", "lang": "ar", "dir": "rtl", "categories": ["finance", "productivity"], "icons": [ { "src": "/icon-192.jpg", "sizes": "192x192", "type": "image/jpeg", "purpose": "maskable any" }, { "src": "/icon-512.jpg", "sizes": "512x512", "type": "image/jpeg", "purpose": "maskable any" } ] }