diff --git a/src/routes/dashboard/+page.svelte b/src/routes/dashboard/+page.svelte
index d3fc0f8..d6d5eb0 100644
--- a/src/routes/dashboard/+page.svelte
+++ b/src/routes/dashboard/+page.svelte
@@ -1,2079 +1,2333 @@
 <script>
-	import { onMount, onDestroy, tick } from 'svelte';
-	import { goto } from '$app/navigation';
-	import { io } from 'socket.io-client';
-	import VehiclesContent from '$lib/components/VehiclesContent.svelte';
-	import UnitsContent from '$lib/components/UnitsContent.svelte';
-	import PersonnelContent from '$lib/components/PersonnelContent.svelte';
-	import GoodsManagersContent from '$lib/components/GoodsManagersContent.svelte';
-	import GoodsManagerContent from '$lib/components/GoodsManagerContent.svelte';
-	import DevriçarkContent from '$lib/components/DevriçarkContent.svelte';
-	import MonthlyFuelReportContent from '$lib/components/MonthlyFuelReportContent.svelte';
+  import { onMount, onDestroy, tick } from "svelte";
+  import { goto } from "$app/navigation";
+  import { io } from "socket.io-client";
+  import VehiclesContent from "$lib/components/VehiclesContent.svelte";
+  import UnitsContent from "$lib/components/UnitsContent.svelte";
+  import PersonnelContent from "$lib/components/PersonnelContent.svelte";
+  import GoodsManagersContent from "$lib/components/GoodsManagersContent.svelte";
+  import GoodsManagerContent from "$lib/components/GoodsManagerContent.svelte";
+  import DevriçarkContent from "$lib/components/DevriçarkContent.svelte";
+  import MonthlyFuelReportContent from "$lib/components/MonthlyFuelReportContent.svelte";
 
-	let user = null;
-	let loading = true;
-	let currentTime = '';
-	let showMobileMenu = false;
-	let showFuelForm = false;
-	let showGoodsManager = false;
-	let showVehicles = false;
-	let showUnits = false;
-	let showPersonnel = false;
-	let showGoodsManagers = false;
-	let showDevriçark = false;
-	let showMonthlyReport = false;
-	let socket = null;
+  let user = null;
+  let loading = true;
+  let currentTime = "";
+  let showMobileMenu = false;
+  let showFuelForm = false;
+  let showGoodsManager = false;
+  let showVehicles = false;
+  let showUnits = false;
+  let showPersonnel = false;
+  let showGoodsManagers = false;
+  let showDevriçark = false;
+  let showMonthlyReport = false;
+  let socket = null;
 
-	// Admin state reset function
-	function resetAdminStates() {
-		showVehicles = false;
-		showUnits = false;
-		showPersonnel = false;
-		showGoodsManagers = false;
-		showFuelForm = false;
-		showGoodsManager = false;
-		showDevriçark = false;
-		showMonthlyReport = false;
-	}
+  // Admin state reset function
+  function resetAdminStates() {
+    showVehicles = false;
+    showUnits = false;
+    showPersonnel = false;
+    showGoodsManagers = false;
+    showFuelForm = false;
+    showGoodsManager = false;
+    showDevriçark = false;
+    showMonthlyReport = false;
+  }
 
-	
-	// Fuel Manager için veriler
-	let fuelSummary = { benzin: 0, motorin: 0 };
-	let pendingSlips = [];
-	let approvedRejectedSlips = [];
-	let fuelLoading = true;
-	let vehicles = [];
-	let units = [];
-	let personnel = [];
-	let goodsManagers = [];
-	let formError = '';
-	let formSuccess = '';
-	let isSubmitting = false;
+  // Fuel Manager için veriler
+  let fuelSummary = { benzin: 0, motorin: 0 };
+  let pendingSlips = [];
+  let approvedRejectedSlips = [];
+  let fuelLoading = true;
+  let vehicles = [];
+  let units = [];
+  let personnel = [];
+  let goodsManagers = [];
+  let formError = "";
+  let formSuccess = "";
+  let isSubmitting = false;
 
-	let formData = {
-		date: new Date().toISOString().split('T')[0],
-		force_command: '1. Komutanlık',
-		unit_id: '',
-		vehicle_id: '',
-		fuel_type: 'benzin',
-		liters: '',
-		km: '',
-		personnel_id: '',
-		goods_manager_id: '',
-		notes: ''
-	};
+  let formData = {
+    date: new Date().toISOString().split("T")[0],
+    force_command: "1. Komutanlık",
+    unit_id: "",
+    vehicle_id: "",
+    fuel_type: "benzin",
+    liters: "",
+    km: "",
+    personnel_id: "",
+    goods_manager_id: "",
+    notes: ""
+  };
 
-	$: displayPendingSlips = pendingSlips;
-	$: displayHistorySlips = approvedRejectedSlips;
+  $: displayPendingSlips = pendingSlips;
+  $: displayHistorySlips = approvedRejectedSlips;
 
-	onMount(async () => {
-		// localStorage'dan kullanıcı bilgisini al
-		const userData = localStorage.getItem('user');
-		if (!userData) {
-			goto('/');
-			return;
-		}
+  onMount(async () => {
+    // localStorage'dan kullanıcı bilgisini al
+    const userData = localStorage.getItem("user");
+    if (!userData) {
+      goto("/");
+      return;
+    }
 
-		user = JSON.parse(userData);
-		loading = false;
+    user = JSON.parse(userData);
+    loading = false;
 
-		// Zamanı güncelle
-		updateTime();
-		setInterval(updateTime, 1000);
+    // Zamanı güncelle
+    updateTime();
+    setInterval(updateTime, 1000);
 
-		// Eğer fuel_manager ise yakıt verilerini yükle ve socket bağlantısı kur
-		if (user.role === 'fuel_manager') {
-			await loadFuelData();
-			
-			// Socket.IO bağlantısı
-			socket = io('http://localhost:3000');
-			
-			// Fiş durumu güncellendiğinde listeyi yenile
-			socket.on('fuel-slip-updated', (data) => {
-				console.log('Dashboard - fuel-slip-updated received:', data);
-				if (data.fuel_manager_id === user.id) {
-					loadFuelData();
-					formSuccess = `Fiş durumu güncellendi: ${data.status === 'approved' ? 'Onaylandı' : 'Reddedildi'}`;
-					setTimeout(() => formSuccess = '', 3000);
-				}
-			});
+    // Eğer fuel_manager ise yakıt verilerini yükle ve socket bağlantısı kur
+    if (user.role === "fuel_manager") {
+      await loadFuelData();
 
-			socket.on('connect', () => {
-				console.log('Dashboard - Socket.IO connected for fuel_manager:', socket.id);
-			});
-		}
+      // Socket.IO bağlantısı
+      socket = io("http://localhost:3000");
 
-		// Eğer goods_manager ise socket bağlantısı kur (GoodsManagerContent component'i kendi socket'ini kullanacak)
-		if (user.role === 'goods_manager') {
-			console.log('Dashboard - goods_manager logged in, user:', user);
-		}
-	});
+      // Fiş durumu güncellendiğinde listeyi yenile
+      socket.on("fuel-slip-updated", (data) => {
+        console.log("Dashboard - fuel-slip-updated received:", data);
+        if (data.fuel_manager_id === user.id) {
+          loadFuelData();
+          formSuccess = `Fiş durumu güncellendi: ${data.status === "approved" ? "Onaylandı" : "Reddedildi"}`;
+          setTimeout(() => (formSuccess = ""), 3000);
+        }
+      });
 
-	// Cleanup
-	onDestroy(() => {
-		if (socket) {
-			socket.disconnect();
-		}
-	});
+      socket.on("connect", () => {
+        console.log(
+          "Dashboard - Socket.IO connected for fuel_manager:",
+          socket.id
+        );
+      });
+    }
 
-	async function loadFuelData() {
-		fuelLoading = true;
-		try {
-			const slipsResponse = await fetch('/api/fuel-slips');
-			if (slipsResponse.ok) {
-				const data = await slipsResponse.json();
-				const allSlips = data.fuelSlips || [];
+    // Eğer goods_manager ise socket bağlantısı kur (GoodsManagerContent component'i kendi socket'ini kullanacak)
+    if (user.role === "goods_manager") {
+      console.log("Dashboard - goods_manager logged in, user:", user);
+    }
+  });
 
-				// Sadece bu yakıt sorumlusunun onaylı fişlerini topla
-				const myApprovedSlips = allSlips.filter(slip => slip.status === 'approved' && slip.fuel_manager_id === user.id);
-				fuelSummary = myApprovedSlips.reduce(
-					(summary, slip) => {
-						if (slip.fuel_type === 'benzin') {
-							summary.benzin += slip.liters || 0;
-						} else if (slip.fuel_type === 'motorin') {
-							summary.motorin += slip.liters || 0;
-						}
-						return summary;
-					},
-					{ benzin: 0, motorin: 0 }
-				);
+  // Cleanup
+  onDestroy(() => {
+    if (socket) {
+      socket.disconnect();
+    }
+  });
 
-				// Sadece bu yakıt sorumlusunun fişlerini göster
-				const mySlips = allSlips.filter(slip => slip.fuel_manager_id === user.id);
-				pendingSlips = mySlips.filter(slip => slip.status === 'pending');
-				approvedRejectedSlips = mySlips.filter(slip => slip.status !== 'pending');
-			}
+  async function loadFuelData() {
+    fuelLoading = true;
+    try {
+      const slipsResponse = await fetch("/api/fuel-slips");
+      if (slipsResponse.ok) {
+        const data = await slipsResponse.json();
+        const allSlips = data.fuelSlips || [];
 
-			// Form için gerekli veriler
-			const [vehiclesRes, unitsRes, personnelRes, goodsManagersRes] = await Promise.all([
-				fetch('/api/vehicles'),
-				fetch('/api/units'),
-				fetch('/api/fuel-personnel'),
-				fetch('/api/goods-managers')
-			]);
+        // Sadece bu yakıt sorumlusunun onaylı fişlerini topla
+        const myApprovedSlips = allSlips.filter(
+          (slip) =>
+            slip.status === "approved" && slip.fuel_manager_id === user.id
+        );
+        fuelSummary = myApprovedSlips.reduce(
+          (summary, slip) => {
+            if (slip.fuel_type === "benzin") {
+              summary.benzin += slip.liters || 0;
+            } else if (slip.fuel_type === "motorin") {
+              summary.motorin += slip.liters || 0;
+            }
+            return summary;
+          },
+          { benzin: 0, motorin: 0 }
+        );
 
-			if (vehiclesRes.ok) {
-				const vehiclesData = await vehiclesRes.json();
-				vehicles = vehiclesData.vehicles || [];
-			}
+        // Sadece bu yakıt sorumlusunun fişlerini göster
+        const mySlips = allSlips.filter(
+          (slip) => slip.fuel_manager_id === user.id
+        );
+        pendingSlips = mySlips.filter((slip) => slip.status === "pending");
+        approvedRejectedSlips = mySlips.filter(
+          (slip) => slip.status !== "pending"
+        );
+      }
 
-			if (unitsRes.ok) {
-				const unitsData = await unitsRes.json();
-				units = unitsData.units || [];
-			}
+      // Form için gerekli veriler
+      const [vehiclesRes, unitsRes, personnelRes, goodsManagersRes] =
+        await Promise.all([
+          fetch("/api/vehicles"),
+          fetch("/api/units"),
+          fetch("/api/fuel-personnel"),
+          fetch("/api/goods-managers")
+        ]);
 
-			if (personnelRes.ok) {
-				const personnelData = await personnelRes.json();
-				personnel = personnelData.fuelPersonnel?.filter(p => p.is_active) || [];
-			}
+      if (vehiclesRes.ok) {
+        const vehiclesData = await vehiclesRes.json();
+        vehicles = vehiclesData.vehicles || [];
+      }
 
-			if (goodsManagersRes.ok) {
-				const goodsData = await goodsManagersRes.json();
-				goodsManagers = goodsData.goodsManagers?.filter(gm => gm.is_active) || [];
-				if (!formData.goods_manager_id && goodsManagers.length) {
-					formData.goods_manager_id = goodsManagers[0].id;
-				}
-			}
-		} catch (err) {
-			console.error('Yakıt verileri yüklenemedi:', err);
-			formError = 'Veriler yüklenirken bir hata oluştu.';
-		} finally {
-			fuelLoading = false;
-		}
-	}
+      if (unitsRes.ok) {
+        const unitsData = await unitsRes.json();
+        units = unitsData.units || [];
+      }
 
-	function resetForm() {
-		formData = {
-			date: new Date().toISOString().split('T')[0],
-			force_command: '1. Komutanlık',
-			unit_id: '',
-			vehicle_id: '',
-			fuel_type: 'benzin',
-			liters: '',
-			km: '',
-			personnel_id: '',
-			goods_manager_id: goodsManagers[0]?.id || '',
-			notes: ''
-		};
-	}
+      if (personnelRes.ok) {
+        const personnelData = await personnelRes.json();
+        personnel =
+          personnelData.fuelPersonnel?.filter((p) => p.is_active) || [];
+      }
 
-	async function handleCreateSlip() {
-		if (!user) return;
+      if (goodsManagersRes.ok) {
+        const goodsData = await goodsManagersRes.json();
+        goodsManagers =
+          goodsData.goodsManagers?.filter((gm) => gm.is_active) || [];
+        if (!formData.goods_manager_id && goodsManagers.length) {
+          formData.goods_manager_id = goodsManagers[0].id;
+        }
+      }
+    } catch (err) {
+      console.error("Yakıt verileri yüklenemedi:", err);
+      formError = "Veriler yüklenirken bir hata oluştu.";
+    } finally {
+      fuelLoading = false;
+    }
+  }
 
-		formError = '';
-		formSuccess = '';
+  function resetForm() {
+    formData = {
+      date: new Date().toISOString().split("T")[0],
+      force_command: "1. Komutanlık",
+      unit_id: "",
+      vehicle_id: "",
+      fuel_type: "benzin",
+      liters: "",
+      km: "",
+      personnel_id: "",
+      goods_manager_id: goodsManagers[0]?.id || "",
+      notes: ""
+    };
+  }
 
-		const requiredFields = ['date', 'force_command', 'unit_id', 'vehicle_id', 'fuel_type', 'liters', 'km', 'personnel_id', 'goods_manager_id'];
-		for (const field of requiredFields) {
-			if (!formData[field]) {
-				formError = 'Lütfen tüm zorunlu alanları doldurun.';
-				return;
-			}
-		}
+  async function handleCreateSlip() {
+    if (!user) return;
 
-		if (Number(formData.liters) <= 0 || Number(formData.km) < 0) {
-			formError = 'Litre ve KM değerleri geçerli olmalıdır.';
-			return;
-		}
+    formError = "";
+    formSuccess = "";
 
-		isSubmitting = true;
+    const requiredFields = [
+      "date",
+      "force_command",
+      "unit_id",
+      "vehicle_id",
+      "fuel_type",
+      "liters",
+      "km",
+      "personnel_id",
+      "goods_manager_id"
+    ];
+    for (const field of requiredFields) {
+      if (!formData[field]) {
+        formError = "Lütfen tüm zorunlu alanları doldurun.";
+        return;
+      }
+    }
 
-		try {
-			const response = await fetch('/api/fuel-slips', {
-				method: 'POST',
-				headers: {
-					'Content-Type': 'application/json'
-				},
-				body: JSON.stringify({
-					...formData,
-					fuel_manager_id: user.id
-				})
-			});
+    if (Number(formData.liters) <= 0 || Number(formData.km) < 0) {
+      formError = "Litre ve KM değerleri geçerli olmalıdır.";
+      return;
+    }
 
-			const data = await response.json();
+    isSubmitting = true;
 
-			if (!response.ok) {
-				formError = data?.message || 'Yakıt fişi oluşturulamadı.';
-				return;
-			}
+    try {
+      const response = await fetch("/api/fuel-slips", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          ...formData,
+          fuel_manager_id: user.id
+        })
+      });
 
-			formSuccess = 'Yakıt fişi başarıyla oluşturuldu.';
-			resetForm();
-			await loadFuelData();
-			showFuelForm = false;
-		} catch (err) {
-			console.error('Yakıt fişi oluşturulamadı:', err);
-			formError = 'Sunucuya ulaşılamadı.';
-		} finally {
-			isSubmitting = false;
-		}
-	}
+      const data = await response.json();
 
-	function updateTime() {
-		const now = new Date();
-		const options = {
-			year: 'numeric',
-			month: 'long',
-			day: 'numeric',
-			hour: '2-digit',
-			minute: '2-digit',
-			second: '2-digit'
-		};
-		currentTime = now.toLocaleDateString('tr-TR', options);
-	}
+      if (!response.ok) {
+        formError = data?.message || "Yakıt fişi oluşturulamadı.";
+        return;
+      }
 
-	function handleLogout() {
-		localStorage.removeItem('user');
-		goto('/');
-	}
+      formSuccess = "Yakıt fişi başarıyla oluşturuldu.";
+      resetForm();
+      await loadFuelData();
+      showFuelForm = false;
+    } catch (err) {
+      console.error("Yakıt fişi oluşturulamadı:", err);
+      formError = "Sunucuya ulaşılamadı.";
+    } finally {
+      isSubmitting = false;
+    }
+  }
 
-	function getRoleDisplayName(role) {
-		switch (role) {
-			case 'admin':
-				return '<i class="fas fa-user-shield"></i> Sistem Yöneticisi';
-			case 'fuel_manager':
-				return '<i class="fas fa-gas-pump"></i> Yakıt Sorumlusu';
-			case 'goods_manager':
-				return '<i class="fas fa-clipboard-check"></i> Mal Sorumlusu';
-			default:
-				return 'Bilinmeyen Rol';
-		}
-	}
+  function updateTime() {
+    const now = new Date();
+    const options = {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit"
+    };
+    currentTime = now.toLocaleDateString("tr-TR", options);
+  }
 
-	function getRoleBadgeClass(role) {
-		switch (role) {
-			case 'admin':
-				return 'role-admin';
-			case 'fuel_manager':
-				return 'role-fuel';
-			case 'goods_manager':
-				return 'role-goods';
-			default:
-				return '';
-		}
-	}
+  function handleLogout() {
+    localStorage.removeItem("user");
+    goto("/");
+  }
 
-	function getStatusClass(status) {
-		switch (status) {
-			case 'pending':
-				return 'status-pending';
-			case 'approved':
-				return 'status-approved';
-			case 'rejected':
-				return 'status-rejected';
-			default:
-				return '';
-		}
-	}
+  function getRoleDisplayName(role) {
+    switch (role) {
+      case "admin":
+        return '<i class="fas fa-user-shield"></i> Sistem Yöneticisi';
+      case "fuel_manager":
+        return '<i class="fas fa-gas-pump"></i> Yakıt Sorumlusu';
+      case "goods_manager":
+        return '<i class="fas fa-clipboard-check"></i> Mal Sorumlusu';
+      default:
+        return "Bilinmeyen Rol";
+    }
+  }
 
-	function getStatusLabel(status) {
-		switch (status) {
-			case 'pending':
-				return '<i class="fas fa-clock"></i> Beklemede';
-			case 'approved':
-				return '<i class="fas fa-check-circle"></i> Onaylı';
-			case 'rejected':
-				return '<i class="fas fa-times-circle"></i> Reddedildi';
-			default:
-				return 'Bilinmiyor';
-		}
-	}
+  function getRoleBadgeClass(role) {
+    switch (role) {
+      case "admin":
+        return "role-admin";
+      case "fuel_manager":
+        return "role-fuel";
+      case "goods_manager":
+        return "role-goods";
+      default:
+        return "";
+    }
+  }
 
-	function formatDate(value) {
-		const date = value ? new Date(value) : null;
-		return date ? date.toLocaleDateString('tr-TR') : '-';
-	}
+  function getStatusClass(status) {
+    switch (status) {
+      case "pending":
+        return "status-pending";
+      case "approved":
+        return "status-approved";
+      case "rejected":
+        return "status-rejected";
+      default:
+        return "";
+    }
+  }
 
-	function formatKm(value) {
-		return typeof value === 'number'
-			? value.toLocaleString('tr-TR')
-			: value
-				? Number(value).toLocaleString('tr-TR')
-				: '-';
-	}
+  function getStatusLabel(status) {
+    switch (status) {
+      case "pending":
+        return '<i class="fas fa-clock"></i> Beklemede';
+      case "approved":
+        return '<i class="fas fa-check-circle"></i> Onaylı';
+      case "rejected":
+        return '<i class="fas fa-times-circle"></i> Reddedildi';
+      default:
+        return "Bilinmiyor";
+    }
+  }
 
-	function formatLiters(value) {
-		return value ? `${Number(value).toFixed(0)}L` : '-';
-	}
+  function formatDate(value) {
+    const date = value ? new Date(value) : null;
+    return date ? date.toLocaleDateString("tr-TR") : "-";
+  }
 
-	function getFuelTypeLabel(type) {
-		return type === 'benzin' ? '⛽ Benzin' : '🛢️ Motorin';
-	}
+  function formatKm(value) {
+    return typeof value === "number"
+      ? value.toLocaleString("tr-TR")
+      : value
+        ? Number(value).toLocaleString("tr-TR")
+        : "-";
+  }
 
-	function navigateTo(page) {
+  function formatLiters(value) {
+    return value ? `${Number(value).toFixed(0)}L` : "-";
+  }
 
-		if (page === 'fuel-slips' && user?.role === 'fuel_manager') {
-			showFuelForm = true;
-			showMobileMenu = false;
-			return;
-		}
+  function getFuelTypeLabel(type) {
+    return type === "benzin" ? "⛽ Benzin" : "🛢️ Motorin";
+  }
 
-		if (page === '' && user?.role === 'fuel_manager') {
-			showFuelForm = false;
-			showMobileMenu = false;
-			return;
-		}
+  function navigateTo(page) {
+    if (page === "fuel-slips" && user?.role === "fuel_manager") {
+      showFuelForm = true;
+      showMobileMenu = false;
+      return;
+    }
 
-		if (page === '' && user?.role === 'goods_manager') {
-			showGoodsManager = false;
-			showDevriçark = false;
-			showMonthlyReport = false;
-			showMobileMenu = false;
-			return;
-		}
+    if (page === "" && user?.role === "fuel_manager") {
+      showFuelForm = false;
+      showMobileMenu = false;
+      return;
+    }
 
-		if (page === 'goods-manager' && user?.role === 'goods_manager') {
-			console.log('🎯 Navigating to goods-manager, user:', user);
-			showGoodsManager = true;
-			showDevriçark = false;
-			showMonthlyReport = false;
-			showMobileMenu = false;
-			return;
-		}
+    if (page === "" && user?.role === "goods_manager") {
+      showGoodsManager = false;
+      showDevriçark = false;
+      showMonthlyReport = false;
+      showMobileMenu = false;
+      return;
+    }
 
-		if (page === 'devriçark' && user?.role === 'goods_manager') {
-			console.log('🎯 Navigating to devriçark, user:', user);
-			showGoodsManager = false;
-			showDevriçark = true;
-			showMonthlyReport = false;
-			showMobileMenu = false;
-			return;
-		}
+    if (page === "goods-manager" && user?.role === "goods_manager") {
+      console.log("🎯 Navigating to goods-manager, user:", user);
+      showGoodsManager = true;
+      showDevriçark = false;
+      showMonthlyReport = false;
+      showMobileMenu = false;
+      return;
+    }
 
-		if (page === 'aylik-yakit-dokumu' && user?.role === 'goods_manager') {
-			console.log('🎯 Navigating to aylik-yakit-dokumu, user:', user);
-			showGoodsManager = false;
-			showDevriçark = false;
-			showMonthlyReport = true;
-			showMobileMenu = false;
-			return;
-		}
+    if (page === "devriçark" && user?.role === "goods_manager") {
+      console.log("🎯 Navigating to devriçark, user:", user);
+      showGoodsManager = false;
+      showDevriçark = true;
+      showMonthlyReport = false;
+      showMobileMenu = false;
+      return;
+    }
 
-		if (page === 'distribution-document' && user?.role === 'fuel_manager') {
-			// Dağıtım belgesi sayfasına yönlendir (gelecekte oluşturulacak)
-			showMobileMenu = false;
-			alert('Dağıtım Belgesi özelliği yakında eklenecek.');
-			return;
-		}
+    if (page === "aylik-yakit-dokumu" && user?.role === "goods_manager") {
+      console.log("🎯 Navigating to aylik-yakit-dokumu, user:", user);
+      showGoodsManager = false;
+      showDevriçark = false;
+      showMonthlyReport = true;
+      showMobileMenu = false;
+      return;
+    }
 
-		showMobileMenu = false;
+    if (page === "distribution-document" && user?.role === "fuel_manager") {
+      // Dağıtım belgesi sayfasına yönlendir (gelecekte oluşturulacak)
+      showMobileMenu = false;
+      alert("Dağıtım Belgesi özelliği yakında eklenecek.");
+      return;
+    }
 
-		if (page === 'goods-manager') {
-			if (user?.role === 'goods_manager') {
-				console.log('🎯 Setting showGoodsManager to true');
-				showGoodsManager = true;
-				showFuelForm = false;
-				showMobileMenu = false;
-				return;
-			} else {
-				goto('/goods-manager');
-				return;
-			}
-		}
+    showMobileMenu = false;
 
-		// Admin page navigation for SPA
-		if (user?.role === 'admin') {
-			// Hide all content first
-			showFuelForm = false;
-			showGoodsManager = false;
+    if (page === "goods-manager") {
+      if (user?.role === "goods_manager") {
+        console.log("🎯 Setting showGoodsManager to true");
+        showGoodsManager = true;
+        showFuelForm = false;
+        showMobileMenu = false;
+        return;
+      } else {
+        goto("/goods-manager");
+        return;
+      }
+    }
 
-			// 🎯 Ana Sayfa Case'i - Admin SPA içinde ana sayfaya dönüş
-			if (page === '') {
-				resetAdminStates();  // Tüm admin state'lerini false yap
-				showMobileMenu = false;
-				tick();  // Svelte reactivity'yi zorla
-				return;  // goto çağrısı yapma, SPA içinde kal
-			}
+    // Admin page navigation for SPA
+    if (user?.role === "admin") {
+      // Hide all content first
+      showFuelForm = false;
+      showGoodsManager = false;
 
-			if (page === 'vehicles') {
-				resetAdminStates();
-				showVehicles = true;
-				showMobileMenu = false;
-				return;
-			}
+      // 🎯 Ana Sayfa Case'i - Admin SPA içinde ana sayfaya dönüş
+      if (page === "") {
+        resetAdminStates(); // Tüm admin state'lerini false yap
+        showMobileMenu = false;
+        tick(); // Svelte reactivity'yi zorla
+        return; // goto çağrısı yapma, SPA içinde kal
+      }
 
-			if (page === 'units') {
-				resetAdminStates();
-				showUnits = true;
-				showMobileMenu = false;
-				return;
-			}
+      if (page === "vehicles") {
+        resetAdminStates();
+        showVehicles = true;
+        showMobileMenu = false;
+        return;
+      }
 
-			if (page === 'personnel') {
-				resetAdminStates();
-				showPersonnel = true;
-				showMobileMenu = false;
-				return;
-			}
+      if (page === "units") {
+        resetAdminStates();
+        showUnits = true;
+        showMobileMenu = false;
+        return;
+      }
 
-			if (page === 'goods-managers') {
-				resetAdminStates();
-				showGoodsManagers = true;
-				showMobileMenu = false;
-				return;
-			}
-		}
+      if (page === "personnel") {
+        resetAdminStates();
+        showPersonnel = true;
+        showMobileMenu = false;
+        return;
+      }
 
-		goto(`/dashboard/${page}`);
-	}
+      if (page === "goods-managers") {
+        resetAdminStates();
+        showGoodsManagers = true;
+        showMobileMenu = false;
+        return;
+      }
+    }
+
+    goto(`/dashboard/${page}`);
+  }
 </script>
 
 <div class="welcome-container">
-	<div class="container">
-		{#if loading}
-			<div class="text-center">
-				<div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
-				<p class="mt-4">Yükleniyor...</p>
-			</div>
-		{:else if user}
-			<div class="dashboard-layout">
-				<!-- Sol Navigasyon Menüsü -->
-				<nav class="sidebar {showMobileMenu ? 'mobile-open' : ''}">
-					<div class="sidebar-header">
-						<h3 class="sidebar-title">
-							{#if user.role === 'admin'}
-								Yönetim Paneli
-							{:else if user.role === 'fuel_manager'}
-								Yakıt İşlemleri
-							{:else if user.role === 'goods_manager'}
-								Onay Paneli
-							{/if}
-						</h3>
-						<button class="mobile-close-btn" on:click={() => showMobileMenu = false}>×</button>
-					</div>
-					<ul class="nav-menu">
-						<li class="nav-item">
-							<button class="nav-btn" on:click={() => navigateTo('')} class:active={user.role === 'admin' ? !showVehicles && !showUnits && !showPersonnel && !showGoodsManagers : (user.role === 'goods_manager' ? !showGoodsManager && !showDevriçark && !showMonthlyReport : (user.role !== 'fuel_manager' ? !showFuelForm : true))}>
-								<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-									<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-									<polyline points="9 22 9 12 15 12 15 22"/>
-								</svg>
-								Ana Sayfa
-							</button>
-						</li>
+  <div class="container">
+    {#if loading}
+      <div class="text-center">
+        <div
+          class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"
+        ></div>
+        <p class="mt-4">Yükleniyor...</p>
+      </div>
+    {:else if user}
+      <div class="dashboard-layout">
+        <!-- Sol Navigasyon Menüsü -->
+        <nav class="sidebar {showMobileMenu ? 'mobile-open' : ''}">
+          <div class="sidebar-header">
+            <h3 class="sidebar-title">
+              {#if user.role === "admin"}
+                Yönetim Paneli
+              {:else if user.role === "fuel_manager"}
+                Yakıt İşlemleri
+              {:else if user.role === "goods_manager"}
+                Onay Paneli
+              {/if}
+            </h3>
+            <button
+              class="mobile-close-btn"
+              on:click={() => (showMobileMenu = false)}>×</button
+            >
+          </div>
+          <ul class="nav-menu">
+            <li class="nav-item">
+              <button
+                class="nav-btn"
+                on:click={() => navigateTo("")}
+                class:active={user.role === "admin"
+                  ? !showVehicles &&
+                    !showUnits &&
+                    !showPersonnel &&
+                    !showGoodsManagers
+                  : user.role === "goods_manager"
+                    ? !showGoodsManager && !showDevriçark && !showMonthlyReport
+                    : user.role !== "fuel_manager"
+                      ? !showFuelForm
+                      : true}
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                >
+                  <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                  <polyline points="9 22 9 12 15 12 15 22" />
+                </svg>
+                Ana Sayfa
+              </button>
+            </li>
 
-						{#if user.role === 'admin'}
-							<li class="nav-item">
-								<button class="nav-btn" on:click={() => navigateTo('vehicles')} class:active={showVehicles}>
-									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-										<path d="M19 9l-7 7-7-7"/>
-										<rect x="11" y="5" width="2" height="14"/>
-										<path d="M5 5v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5"/>
-									</svg>
-									Araç Yönetimi
-								</button>
-							</li>
-							<li class="nav-item">
-								<button class="nav-btn" on:click={() => navigateTo('units')} class:active={showUnits}>
-									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-										<path d="M3 21h18"/>
-										<path d="M5 21V7l8-4v18"/>
-										<path d="M19 21V11l-6-4"/>
-									</svg>
-									Birlik Yönetimi
-								</button>
-							</li>
-							<li class="nav-item">
-								<button class="nav-btn" on:click={() => navigateTo('personnel')} class:active={showPersonnel}>
-									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-										<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-										<circle cx="9" cy="7" r="4"/>
-										<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
-										<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
-									</svg>
-									Yakıt Personeli
-								</button>
-							</li>
-							<li class="nav-item">
-								<button class="nav-btn" on:click={() => navigateTo('goods-managers')} class:active={showGoodsManagers}>
-									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-										<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-										<circle cx="9" cy="7" r="4"/>
-										<path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
-										<path d="M16 3.13a4 4 0 0 1 0 7.75"/>
-									</svg>
-									Personel İşlemleri
-								</button>
-							</li>
-						{:else if user.role === 'fuel_manager'}
-							<li class="nav-item">
-								<button class="nav-btn" on:click={() => navigateTo('fuel-slips')} class:active={showFuelForm}>
-									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-										<polyline points="14 2 14 8 20 8"/>
-										<line x1="16" y1="13" x2="8" y2="13"/>
-										<line x1="16" y1="17" x2="8" y2="17"/>
-										<polyline points="10 9 9 9 8 9"/>
-									</svg>
-									Yakıt Fişi Oluştur
-								</button>
-							</li>
-							<li class="nav-item">
-								<button class="nav-btn" on:click={() => navigateTo('distribution-document')}>
-									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-										<polyline points="14 2 14 8 20 8"/>
-										<line x1="12" y1="18" x2="12" y2="12"/>
-										<line x1="9" y1="15" x2="15" y2="15"/>
-									</svg>
-									Dağıtım Belgesi Oluştur
-								</button>
-							</li>
-						{:else if user.role === 'goods_manager'}
-							<li class="nav-item">
-								<button class="nav-btn" on:click={() => navigateTo('goods-manager')} class:active={showGoodsManager}>
-									<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-										<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
-										<polyline points="22 4 12 14.01 9 11.01"/>
-									</svg>
-									Atanan Fişler
-								</button>
-							</li>
-							<li class="nav-item">
-								<button class="nav-btn" on:click={() => navigateTo('aylik-yakit-dokumu')} class:active={showMonthlyReport}>
-									<i class="fa-solid fa-list-ol"></i>
-									Aylık Yakıt Dökümü
-								</button>
-							</li>
-							<li class="nav-item">
-								<button class="nav-btn" on:click={() => navigateTo('devriçark')} class:active={showDevriçark}>
-									<i class="fa-regular fa-file-lines"></i>
-									Devriçark İşlemleri
-								</button>
-							</li>
-						{/if}
-					</ul>
-				</nav>
+            {#if user.role === "admin"}
+              <li class="nav-item">
+                <button
+                  class="nav-btn"
+                  on:click={() => navigateTo("vehicles")}
+                  class:active={showVehicles}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M19 9l-7 7-7-7" />
+                    <rect x="11" y="5" width="2" height="14" />
+                    <path d="M5 5v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V5" />
+                  </svg>
+                  Araç Yönetimi
+                </button>
+              </li>
+              <li class="nav-item">
+                <button
+                  class="nav-btn"
+                  on:click={() => navigateTo("units")}
+                  class:active={showUnits}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M3 21h18" />
+                    <path d="M5 21V7l8-4v18" />
+                    <path d="M19 21V11l-6-4" />
+                  </svg>
+                  Birlik Yönetimi
+                </button>
+              </li>
+              <li class="nav-item">
+                <button
+                  class="nav-btn"
+                  on:click={() => navigateTo("personnel")}
+                  class:active={showPersonnel}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                    <circle cx="9" cy="7" r="4" />
+                    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                  </svg>
+                  Yakıt Personeli
+                </button>
+              </li>
+              <li class="nav-item">
+                <button
+                  class="nav-btn"
+                  on:click={() => navigateTo("goods-managers")}
+                  class:active={showGoodsManagers}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                    <circle cx="9" cy="7" r="4" />
+                    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+                  </svg>
+                  Personel İşlemleri
+                </button>
+              </li>
+            {:else if user.role === "fuel_manager"}
+              <li class="nav-item">
+                <button
+                  class="nav-btn"
+                  on:click={() => navigateTo("fuel-slips")}
+                  class:active={showFuelForm}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                    />
+                    <polyline points="14 2 14 8 20 8" />
+                    <line x1="16" y1="13" x2="8" y2="13" />
+                    <line x1="16" y1="17" x2="8" y2="17" />
+                    <polyline points="10 9 9 9 8 9" />
+                  </svg>
+                  Yakıt Fişi Oluştur
+                </button>
+              </li>
+              <li class="nav-item">
+                <button
+                  class="nav-btn"
+                  on:click={() => navigateTo("distribution-document")}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path
+                      d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                    />
+                    <polyline points="14 2 14 8 20 8" />
+                    <line x1="12" y1="18" x2="12" y2="12" />
+                    <line x1="9" y1="15" x2="15" y2="15" />
+                  </svg>
+                  Dağıtım Belgesi Oluştur
+                </button>
+              </li>
+            {:else if user.role === "goods_manager"}
+              <li class="nav-item">
+                <button
+                  class="nav-btn"
+                  on:click={() => navigateTo("goods-manager")}
+                  class:active={showGoodsManager}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                    <polyline points="22 4 12 14.01 9 11.01" />
+                  </svg>
+                  Atanan Fişler
+                </button>
+              </li>
+              <li class="nav-item">
+                <button
+                  class="nav-btn"
+                  on:click={() => navigateTo("aylik-yakit-dokumu")}
+                  class:active={showMonthlyReport}
+                >
+                  <i class="fa-solid fa-list-ol"></i>
+                  Aylık Yakıt Dökümü
+                </button>
+              </li>
+              <li class="nav-item">
+                <button
+                  class="nav-btn"
+                  on:click={() => navigateTo("devriçark")}
+                  class:active={showDevriçark}
+                >
+                  <i class="fa-regular fa-file-lines"></i>
+                  Devriçark İşlemleri
+                </button>
+              </li>
+            {/if}
+          </ul>
+        </nav>
 
-				<!-- Ana İçerik Alanı -->
-				<div class="main-content">
-					<div class="welcome-card card">
-						<!-- Üst kısım: Kullanıcı bilgileri -->
-						<div class="user-header">
-							<div class="user-avatar">
-								<div class="avatar-circle">
-									{#if user.role === 'admin'}
-										<i class="fa-solid fa-user-tie"></i>
-									{:else if user.role === 'fuel_manager'}
-										<i class="fa-solid fa-gas-pump"></i>
-									{:else if user.role === 'goods_manager'}
-										<i class="fa-solid fa-truck"></i>
-									{/if}
-								</div>
-							</div>
-							<div class="user-info">
-								<h2 class="user-name">{user.full_name}</h2>
-								<div class="role-badge {getRoleBadgeClass(user.role)}">
-									{@html getRoleDisplayName(user.role)}
-								</div>
-							</div>
-							<div class="header-actions">
-								<button class="btn mobile-menu-btn" on:click={() => showMobileMenu = !showMobileMenu}>
-									<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-										<line x1="3" y1="12" x2="21" y2="12"/>
-										<line x1="3" y1="6" x2="21" y2="6"/>
-										<line x1="3" y1="18" x2="21" y2="18"/>
-									</svg>
-								</button>
-								<button class="btn btn-inactive" on:click={handleLogout}>
-									Çıkış Yap
-								</button>
-							</div>
-						</div>
+        <!-- Ana İçerik Alanı -->
+        <div class="main-content">
+          <div class="welcome-card card">
+            <!-- Üst kısım: Kullanıcı bilgileri -->
+            <div class="user-header">
+              <div class="user-avatar">
+                <div class="avatar-circle">
+                  {#if user.role === "admin"}
+                    <i class="fa-solid fa-user-tie"></i>
+                  {:else if user.role === "fuel_manager"}
+                    <i class="fa-solid fa-gas-pump"></i>
+                  {:else if user.role === "goods_manager"}
+                    <i class="fa-solid fa-truck"></i>
+                  {/if}
+                </div>
+              </div>
+              <div class="user-info">
+                <h2 class="user-name">{user.full_name}</h2>
+                <div class="role-badge {getRoleBadgeClass(user.role)}">
+                  {@html getRoleDisplayName(user.role)}
+                </div>
+              </div>
+              <div class="header-actions">
+                <button
+                  class="btn mobile-menu-btn"
+                  on:click={() => (showMobileMenu = !showMobileMenu)}
+                >
+                  <svg
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                  >
+                    <line x1="3" y1="12" x2="21" y2="12" />
+                    <line x1="3" y1="6" x2="21" y2="6" />
+                    <line x1="3" y1="18" x2="21" y2="18" />
+                  </svg>
+                </button>
+                <button class="btn btn-inactive" on:click={handleLogout}>
+                  Çıkış Yap
+                </button>
+              </div>
+            </div>
 
-				<!-- Ayırıcı -->
-				<div class="divider"></div>
+            <!-- Ayırıcı -->
+            <div class="divider"></div>
 
-				<!-- Sadece admin ve goods_manager için bilgilendirme -->
-				{#if user.role === 'admin' && !showVehicles && !showUnits && !showPersonnel && !showGoodsManagers}
-					<!-- Karşılama mesajı -->
-					<div class="welcome-content">
-						<p class="welcome-message">
-							{#if user.role === 'admin'}
-								Sisteme hoş geldiniz! Araç, birlik ve personel yönetimi yapabilirsiniz.
-							{:else if user.role === 'goods_manager'}
-								Hoş geldiniz! Size atanan yakıt fişlerini onaylayabilirsiniz.
-							{/if}
-						</p>
+            <!-- Sadece admin ve goods_manager için bilgilendirme -->
+            {#if user.role === "admin" && !showVehicles && !showUnits && !showPersonnel && !showGoodsManagers}
+              <!-- Karşılama mesajı -->
+              <div class="welcome-content">
+                <p class="welcome-message">
+                  {#if user.role === "admin"}
+                    Sisteme hoş geldiniz! Araç, birlik ve personel yönetimi
+                    yapabilirsiniz.
+                  {:else if user.role === "goods_manager"}
+                    Hoş geldiniz! Size atanan yakıt fişlerini
+                    onaylayabilirsiniz.
+                  {/if}
+                </p>
 
-						<div class="current-time">
-							<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="inline mr-2">
-								<circle cx="12" cy="12" r="10"/>
-								<polyline points="12 6 12 12 16 14"/>
-							</svg>
-							{currentTime}
-						</div>
-					</div>
+                <div class="current-time">
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    class="inline mr-2"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <polyline points="12 6 12 12 16 14" />
+                  </svg>
+                  {currentTime}
+                </div>
+              </div>
 
-					<!-- İstatistikler Kartları -->
-					<div class="stats-grid">
-						<div class="stat-card card">
-							<div class="stat-icon fuel-icon">
-								<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-									<path d="M3 3h18v18H3z"/>
-									<path d="M7 7h10v10H7z"/>
-									<path d="M11 3v18"/>
-									<path d="M3 11h18"/>
-								</svg>
-							</div>
-							<div class="stat-info">
-								<h3 class="stat-title">Yakıt İşlemleri</h3>
-								<p class="stat-value">Sistem Hazır</p>
-							</div>
-						</div>
+              <!-- İstatistikler Kartları -->
+              <div class="stats-grid">
+                <div class="stat-card card">
+                  <div class="stat-icon fuel-icon">
+                    <svg
+                      width="32"
+                      height="32"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <path d="M3 3h18v18H3z" />
+                      <path d="M7 7h10v10H7z" />
+                      <path d="M11 3v18" />
+                      <path d="M3 11h18" />
+                    </svg>
+                  </div>
+                  <div class="stat-info">
+                    <h3 class="stat-title">Yakıt İşlemleri</h3>
+                    <p class="stat-value">Sistem Hazır</p>
+                  </div>
+                </div>
 
-						<div class="stat-card card">
-							<div class="stat-icon goods-icon">
-								<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-									<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
-								</svg>
-							</div>
-							<div class="stat-info">
-								<h3 class="stat-title">Mal Takibi</h3>
-								<p class="stat-value">Aktif</p>
-							</div>
-						</div>
+                <div class="stat-card card">
+                  <div class="stat-icon goods-icon">
+                    <svg
+                      width="32"
+                      height="32"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <path
+                        d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+                      />
+                    </svg>
+                  </div>
+                  <div class="stat-info">
+                    <h3 class="stat-title">Mal Takibi</h3>
+                    <p class="stat-value">Aktif</p>
+                  </div>
+                </div>
 
-						<div class="stat-card card">
-							<div class="stat-icon system-icon">
-								<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-									<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
-									<line x1="8" y1="21" x2="16" y2="21"/>
-									<line x1="12" y1="17" x2="12" y2="21"/>
-								</svg>
-							</div>
-							<div class="stat-info">
-								<h3 class="stat-title">Sistem Durumu</h3>
-								<p class="stat-value">✅ Çalışıyor</p>
-							</div>
-						</div>
-					</div>
+                <div class="stat-card card">
+                  <div class="stat-icon system-icon">
+                    <svg
+                      width="32"
+                      height="32"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
+                      <line x1="8" y1="21" x2="16" y2="21" />
+                      <line x1="12" y1="17" x2="12" y2="21" />
+                    </svg>
+                  </div>
+                  <div class="stat-info">
+                    <h3 class="stat-title">Sistem Durumu</h3>
+                    <p class="stat-value">✅ Çalışıyor</p>
+                  </div>
+                </div>
+              </div>
 
-					<!-- Bilgilendirme -->
-					<div class="info-section">
-						<div class="info-card card">
-							<h3 class="info-title">📋 Bilgilendirme</h3>
-							<div class="info-content">
-								{#if user.role === 'admin'}
-									<ul class="info-list">
-										<li>Araç, birlik ve personel yönetimi yapabilirsiniz</li>
-										<li>Personel işlemlerini yönetebilirsiniz</li>
-										<li>Tüm kullanıcıları yönetebilirsiniz</li>
-										<li>Sistem ayarlarını yapılandırabilirsiniz</li>
-										<li>Raporları görüntüleyebilirsiniz</li>
-									</ul>
-								{:else if user.role === 'goods_manager'}
-									<ul class="info-list">
-										<li>Araçların aldığı yakıtları takip edebilirsiniz</li>
-										<li>Onay/red işlemleri yapabilirsiniz</li>
-										<li>Ay sonu devriçark cetveli hazırlayabilirsiniz</li>
-									</ul>
-								{/if}
-							</div>
-						</div>
-					</div>
-				{:else if user.role === 'goods_manager' && showGoodsManager}
-					<!-- Goods Manager Content -->
-					<GoodsManagerContent {user} />
-				{:else if user.role === 'goods_manager' && showMonthlyReport}
-					<!-- Monthly Fuel Report Content -->
-					<MonthlyFuelReportContent {user} />
-				{:else if user.role === 'goods_manager' && showDevriçark}
-					<!-- Devriçark Content -->
-					<DevriçarkContent {user} />
-				{:else if user.role === 'admin'}
-					<!-- Admin Dynamic Content -->
+              <!-- Bilgilendirme -->
+              <div class="info-section">
+                <div class="info-card card">
+                  <h3 class="info-title">📋 Bilgilendirme</h3>
+                  <div class="info-content">
+                    {#if user.role === "admin"}
+                      <ul class="info-list">
+                        <li>
+                          Araç, birlik ve personel yönetimi yapabilirsiniz
+                        </li>
+                        <li>Personel işlemlerini yönetebilirsiniz</li>
+                        <li>Tüm kullanıcıları yönetebilirsiniz</li>
+                        <li>Sistem ayarlarını yapılandırabilirsiniz</li>
+                        <li>Raporları görüntüleyebilirsiniz</li>
+                      </ul>
+                    {:else if user.role === "goods_manager"}
+                      <ul class="info-list">
+                        <li>Araçların aldığı yakıtları takip edebilirsiniz</li>
+                        <li>Onay/red işlemleri yapabilirsiniz</li>
+                        <li>Ay sonu devriçark cetveli hazırlayabilirsiniz</li>
+                      </ul>
+                    {/if}
+                  </div>
+                </div>
+              </div>
+            {:else if user.role === "goods_manager" && showGoodsManager}
+              <!-- Goods Manager Content -->
+              <GoodsManagerContent {user} />
+            {:else if user.role === "goods_manager" && showMonthlyReport}
+              <!-- Monthly Fuel Report Content -->
+              <MonthlyFuelReportContent {user} />
+            {:else if user.role === "goods_manager" && showDevriçark}
+              <!-- Devriçark Content -->
+              <DevriçarkContent {user} />
+            {:else if user.role === "admin"}
+              <!-- Admin Dynamic Content -->
 
-					{#if showVehicles}
-						<VehiclesContent {user} />
-					{:else if showUnits}
-						<UnitsContent {user} />
-					{:else if showPersonnel}
-						<PersonnelContent {user} />
-					{:else if showGoodsManagers}
-						<GoodsManagersContent {user} />
-					{:else}
-						<!-- Admin Welcome Message (Default) -->
-						<div class="welcome-card card">
-							<div class="card-header">
-								<div class="card-icon">🚗</div>
-								<h3>Araç Yönetimi</h3>
-							</div>
-							<div class="card-content">
-								<p>Yukarıdaki menüden Araç Yönetimi'ni seçerek araçları yönetebilirsiniz.</p>
-								<p style="margin-top: 1rem; color: var(--primary-color); font-weight: 600;">✅ Admin SPA yüklendi!</p>
-							</div>
-						</div>
-					{/if}
-				{:else}
-					<!-- Fuel Manager ana görünümü -->
-					{#if formSuccess}
-						<div class="form-alert success-alert">
-							{formSuccess}
-						</div>
-					{/if}
+              {#if showVehicles}
+                <VehiclesContent {user} />
+              {:else if showUnits}
+                <UnitsContent {user} />
+              {:else if showPersonnel}
+                <PersonnelContent {user} />
+              {:else if showGoodsManagers}
+                <GoodsManagersContent {user} />
+              {:else}
+                <!-- Admin Welcome Message (Default) -->
+                <div class="welcome-card card">
+                  <div class="card-header">
+                    <div class="card-icon">🚗</div>
+                    <h3>Araç Yönetimi</h3>
+                  </div>
+                  <div class="card-content">
+                    <p>
+                      Yukarıdaki menüden Araç Yönetimi'ni seçerek araçları
+                      yönetebilirsiniz.
+                    </p>
+                    <p
+                      style="margin-top: 1rem; color: var(--primary-color); font-weight: 600;"
+                    >
+                      ✅ Admin SPA yüklendi!
+                    </p>
+                  </div>
+                </div>
+              {/if}
+            {:else}
+              <!-- Fuel Manager ana görünümü -->
+              {#if formSuccess}
+                <div class="form-alert success-alert">
+                  {formSuccess}
+                </div>
+              {/if}
 
-					{#if formError && showFuelForm}
-						<div class="form-alert error-alert">
-							{formError}
-						</div>
-					{/if}
+              {#if formError && showFuelForm}
+                <div class="form-alert error-alert">
+                  {formError}
+                </div>
+              {/if}
 
+              {#if !showFuelForm}
+                <section class="fuel-summary-section">
+                  <div class="fuel-summary-grid">
+                    <div class="fuel-summary-card benzin">
+                      <div class="summary-icon-wrapper">
+                        <div class="summary-icon">⛽</div>
+                      </div>
+                      <div class="summary-info">
+                        <h3 class="summary-title">Benzin</h3>
+                        <p class="summary-amount">
+                          {fuelLoading ? "..." : fuelSummary.benzin.toFixed(1)}
+                          <span class="summary-unit">LT</span>
+                        </p>
+                        <span class="summary-label">Toplam Yakıt</span>
+                      </div>
+                    </div>
+                    <div class="fuel-summary-card motorin">
+                      <div class="summary-icon-wrapper">
+                        <div class="summary-icon">🛢️</div>
+                      </div>
+                      <div class="summary-info">
+                        <h3 class="summary-title">Motorin</h3>
+                        <p class="summary-amount">
+                          {fuelLoading ? "..." : fuelSummary.motorin.toFixed(1)}
+                          <span class="summary-unit">LT</span>
+                        </p>
+                        <span class="summary-label">Toplam Yakıt</span>
+                      </div>
+                    </div>
+                  </div>
+                </section>
 
-					{#if !showFuelForm}
-						<section class="fuel-summary-section">
-							<div class="fuel-summary-grid">
-								<div class="fuel-summary-card benzin">
-									<div class="summary-icon-wrapper">
-										<div class="summary-icon">⛽</div>
-									</div>
-									<div class="summary-info">
-										<h3 class="summary-title">Benzin</h3>
-										<p class="summary-amount">
-											{fuelLoading ? '...' : fuelSummary.benzin.toFixed(1)}
-											<span class="summary-unit">LT</span>
-										</p>
-										<span class="summary-label">Toplam Yakıt</span>
-									</div>
-								</div>
-								<div class="fuel-summary-card motorin">
-									<div class="summary-icon-wrapper">
-										<div class="summary-icon">🛢️</div>
-									</div>
-									<div class="summary-info">
-										<h3 class="summary-title">Motorin</h3>
-										<p class="summary-amount">
-											{fuelLoading ? '...' : fuelSummary.motorin.toFixed(1)}
-											<span class="summary-unit">LT</span>
-										</p>
-										<span class="summary-label">Toplam Yakıt</span>
-									</div>
-								</div>
-							</div>
-						</section>
+                <section class="tables-section">
+                  <div class="table-container">
+                    <div class="fuel-table-header">
+                      <h3 class="fuel-table-title">Onay Bekleyen Fişler</h3>
+                      <span class="count-badge">{pendingSlips.length}</span>
+                    </div>
+                    {#if fuelLoading}
+                      <div class="table-loader">Yükleniyor...</div>
+                    {:else if pendingSlips.length === 0}
+                      <div class="empty-table">
+                        <div class="empty-table-icon">📄</div>
+                        <p>Onay bekleyen fiş bulunmamaktadır.</p>
+                      </div>
+                    {:else}
+                      <div class="table-wrapper">
+                        <table class="fuel-table">
+                          <thead>
+                            <tr>
+                              <th>S.No</th>
+                              <th>Araç Plaka</th>
+                              <th>Personel</th>
+                              <th>Mal Sorumlusu</th>
+                              <th>KM</th>
+                              <th>Tarih</th>
+                              <th>Yakıt Cinsi</th>
+                              <th>Miktar</th>
+                              <th>Durum</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {#each pendingSlips as slip, index}
+                              <tr>
+                                <td>{index + 1}</td>
+                                <td>{slip.vehicle_info?.plate || "-"}</td>
+                                <td>{slip.personnel_info?.full_name || "-"}</td>
+                                <td
+                                  >{slip.goods_manager_info?.full_name ||
+                                    "-"}</td
+                                >
+                                <td>{formatKm(slip.km)}</td>
+                                <td>{formatDate(slip.date)}</td>
+                                <td>{getFuelTypeLabel(slip.fuel_type)}</td>
+                                <td>{formatLiters(slip.liters)}</td>
+                                <td>
+                                  <span
+                                    class={`status-badge ${getStatusClass(slip.status)}`}
+                                    title={slip.status === "rejected" &&
+                                    slip.approval_notes
+                                      ? `Red Nedeni: ${slip.approval_notes}`
+                                      : ""}
+                                  >
+                                    {@html getStatusLabel(slip.status)}
+                                  </span>
+                                </td>
+                              </tr>
+                            {/each}
+                          </tbody>
+                        </table>
+                      </div>
+                    {/if}
+                  </div>
 
-						<section class="tables-section">
-						<div class="table-container">
-							<div class="fuel-table-header">
-								<h3 class="fuel-table-title">Onay Bekleyen Fişler</h3>
-								<span class="count-badge">{pendingSlips.length}</span>
-							</div>
-							{#if fuelLoading}
-								<div class="table-loader">Yükleniyor...</div>
-							{:else if pendingSlips.length === 0}
-								<div class="empty-table">
-									<div class="empty-table-icon">📄</div>
-									<p>Onay bekleyen fiş bulunmamaktadır.</p>
-								</div>
-							{:else}
-								<div class="table-wrapper">
-									<table class="fuel-table">
-										<thead>
-											<tr>
-												<th>S.No</th>
-												<th>Araç Plaka</th>
-												<th>Personel</th>
-												<th>Mal Sorumlusu</th>
-												<th>KM</th>
-												<th>Tarih</th>
-												<th>Yakıt Cinsi</th>
-												<th>Miktar</th>
-												<th>Durum</th>
-											</tr>
-										</thead>
-										<tbody>
-											{#each pendingSlips as slip, index}
-												<tr>
-													<td>{index + 1}</td>
-													<td>{slip.vehicle_info?.plate || '-'}</td>
-													<td>{slip.personnel_info?.full_name || '-'}</td>
-													<td>{slip.goods_manager_info?.full_name || '-'}</td>
-													<td>{formatKm(slip.km)}</td>
-													<td>{formatDate(slip.date)}</td>
-													<td>{getFuelTypeLabel(slip.fuel_type)}</td>
-													<td>{formatLiters(slip.liters)}</td>
-													<td>
-														<span
-															class={`status-badge ${getStatusClass(slip.status)}`}
-															title={slip.status === 'rejected' && slip.approval_notes ? `Red Nedeni: ${slip.approval_notes}` : ''}
-														>
-															{@html getStatusLabel(slip.status)}
-														</span>
-													</td>
-												</tr>
-											{/each}
-										</tbody>
-									</table>
-								</div>
-							{/if}
-						</div>
+                  <div class="table-container">
+                    <div class="fuel-table-header">
+                      <h3 class="fuel-table-title">İşlem Geçmişi</h3>
+                      <span class="count-badge"
+                        >{approvedRejectedSlips.length}</span
+                      >
+                    </div>
+                    {#if fuelLoading}
+                      <div class="table-loader">Yükleniyor...</div>
+                    {:else if approvedRejectedSlips.length === 0}
+                      <div class="empty-table">
+                        <div class="empty-table-icon">🗂️</div>
+                        <p>İşlenmiş fiş bulunmamaktadır.</p>
+                      </div>
+                    {:else}
+                      <div class="table-wrapper">
+                        <table class="fuel-table">
+                          <thead>
+                            <tr>
+                              <th>S.No</th>
+                              <th>Araç Plaka</th>
+                              <th>Personel</th>
+                              <th>Mal Sorumlusu</th>
+                              <th>KM</th>
+                              <th>Tarih</th>
+                              <th>Yakıt Cinsi</th>
+                              <th>Miktar</th>
+                              <th>Durum</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {#each approvedRejectedSlips as slip, index}
+                              <tr>
+                                <td>{index + 1}</td>
+                                <td>{slip.vehicle_info?.plate || "-"}</td>
+                                <td>{slip.personnel_info?.full_name || "-"}</td>
+                                <td
+                                  >{slip.goods_manager_info?.full_name ||
+                                    "-"}</td
+                                >
+                                <td>{formatKm(slip.km)}</td>
+                                <td>{formatDate(slip.date)}</td>
+                                <td>{getFuelTypeLabel(slip.fuel_type)}</td>
+                                <td>{formatLiters(slip.liters)}</td>
+                                <td>
+                                  <span
+                                    class={`status-badge ${getStatusClass(slip.status)}`}
+                                    title={slip.status === "rejected" &&
+                                    slip.approval_notes
+                                      ? `Red Nedeni: ${slip.approval_notes}`
+                                      : ""}
+                                  >
+                                    {@html getStatusLabel(slip.status)}
+                                  </span>
+                                </td>
+                              </tr>
+                            {/each}
+                          </tbody>
+                        </table>
+                      </div>
+                    {/if}
+                  </div>
+                </section>
+              {/if}
 
-						<div class="table-container">
-							<div class="fuel-table-header">
-								<h3 class="fuel-table-title">İşlem Geçmişi</h3>
-								<span class="count-badge">{approvedRejectedSlips.length}</span>
-							</div>
-							{#if fuelLoading}
-								<div class="table-loader">Yükleniyor...</div>
-							{:else if approvedRejectedSlips.length === 0}
-								<div class="empty-table">
-									<div class="empty-table-icon">🗂️</div>
-									<p>İşlenmiş fiş bulunmamaktadır.</p>
-								</div>
-							{:else}
-								<div class="table-wrapper">
-									<table class="fuel-table">
-										<thead>
-											<tr>
-												<th>S.No</th>
-												<th>Araç Plaka</th>
-												<th>Personel</th>
-												<th>Mal Sorumlusu</th>
-												<th>KM</th>
-												<th>Tarih</th>
-												<th>Yakıt Cinsi</th>
-												<th>Miktar</th>
-												<th>Durum</th>
-											</tr>
-										</thead>
-										<tbody>
-											{#each approvedRejectedSlips as slip, index}
-												<tr>
-													<td>{index + 1}</td>
-													<td>{slip.vehicle_info?.plate || '-'}</td>
-													<td>{slip.personnel_info?.full_name || '-'}</td>
-													<td>{slip.goods_manager_info?.full_name || '-'}</td>
-													<td>{formatKm(slip.km)}</td>
-													<td>{formatDate(slip.date)}</td>
-													<td>{getFuelTypeLabel(slip.fuel_type)}</td>
-													<td>{formatLiters(slip.liters)}</td>
-													<td>
-														<span
-															class={`status-badge ${getStatusClass(slip.status)}`}
-															title={slip.status === 'rejected' && slip.approval_notes ? `Red Nedeni: ${slip.approval_notes}` : ''}
-														>
-															{@html getStatusLabel(slip.status)}
-														</span>
-													</td>
-												</tr>
-											{/each}
-										</tbody>
-									</table>
-								</div>
-							{/if}
-						</div>
-					</section>
-					{/if}
+              {#if showFuelForm}
+                <section class="fuel-form-section">
+                  <div class="fuel-form-header">
+                    <h3 class="fuel-form-title">
+                      <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        style="display: inline-block; vertical-align: middle; margin-right: 0.5rem;"
+                      >
+                        <path
+                          d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                        />
+                        <polyline points="14 2 14 8 20 8" />
+                        <line x1="16" y1="13" x2="8" y2="13" />
+                        <line x1="16" y1="17" x2="8" y2="17" />
+                        <polyline points="10 9 9 9 8 9" />
+                      </svg>
+                      Yeni Yakıt Fişi Oluştur
+                    </h3>
+                  </div>
 
-					{#if showFuelForm}
-						<section class="fuel-form-section">
-							<div class="fuel-form-header">
-								<h3 class="fuel-form-title">
-									<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: inline-block; vertical-align: middle; margin-right: 0.5rem;">
-										<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
-										<polyline points="14 2 14 8 20 8"/>
-										<line x1="16" y1="13" x2="8" y2="13"/>
-										<line x1="16" y1="17" x2="8" y2="17"/>
-										<polyline points="10 9 9 9 8 9"/>
-									</svg>
-									Yeni Yakıt Fişi Oluştur
-								</h3>
-							</div>
+                  {#if formError}
+                    <div class="form-alert error-alert">
+                      {formError}
+                    </div>
+                  {/if}
 
-							{#if formError}
-								<div class="form-alert error-alert">
-									{formError}
-								</div>
-							{/if}
-
-							<form class="fuel-form" on:submit|preventDefault={handleCreateSlip}>
-								<div class="form-grid">
-									<div class="form-group">
-										<label for="force_command">Kuvvet Komutanlığı</label>
-										<input
-											id="force_command"
-											class="form-input"
-											type="text"
-											placeholder="1. Komutanlık"
-											bind:value={formData.force_command}
-											required
-										/>
-									</div>
-									<div class="form-group">
-										<label for="date">Tarih</label>
-										<input
-											id="date"
-											class="form-input"
-											type="date"
-											bind:value={formData.date}
-											required
-										/>
-									</div>
-									<div class="form-group">
-										<label for="unit_id">Birlik</label>
-										<select
-											id="unit_id"
-											class="form-select"
-											bind:value={formData.unit_id}
-											required
-										>
-											<option value="">Birlik Seçin</option>
-											{#each units as unit}
-												<option value={unit.id}>{unit.name}</option>
-											{/each}
-										</select>
-									</div>
-									<div class="form-group">
-										<label for="vehicle_id">Araç</label>
-										<select
-											id="vehicle_id"
-											class="form-select"
-											bind:value={formData.vehicle_id}
-											required
-										>
-											<option value="">Araç Seçin</option>
-											{#each vehicles as vehicle}
-												<option value={vehicle.id}>{vehicle.brand} {vehicle.model} ({vehicle.plate})</option>
-											{/each}
-										</select>
-									</div>
-									<div class="form-group">
-										<label for="fuel_type">Yakıt Türü</label>
-										<select
-											id="fuel_type"
-											class="form-select"
-											bind:value={formData.fuel_type}
-											required
-										>
-											<option value="benzin">Benzin</option>
-											<option value="motorin">Motorin</option>
-										</select>
-									</div>
-									<div class="form-group">
-										<label for="liters">Litre</label>
-										<input
-											id="liters"
-											class="form-input"
-											type="number"
-											min="0.1"
-											step="0.1"
-											placeholder="45"
-											bind:value={formData.liters}
-											required
-										/>
-									</div>
-									<div class="form-group">
-										<label for="km">Kilometre</label>
-										<input
-											id="km"
-											class="form-input"
-											type="number"
-											min="0"
-											placeholder="125.420"
-											bind:value={formData.km}
-											required
-										/>
-									</div>
-									<div class="form-group">
-										<label for="personnel_id">Teslim Eden</label>
-										<select
-											id="personnel_id"
-											class="form-select"
-											bind:value={formData.personnel_id}
-											required
-										>
-											<option value="">Personel Seçin</option>
-											{#each personnel as person}
-												<option value={person.id}>{person.rank} {person.full_name}</option>
-											{/each}
-										</select>
-									</div>
-									<div class="form-group">
-										<label for="goods_manager_id">Teslim Alan</label>
-										<select
-											id="goods_manager_id"
-											class="form-select"
-											bind:value={formData.goods_manager_id}
-											required
-										>
-											<option value="">Mal Sorumlusu Seçin</option>
-											{#each goodsManagers as manager}
-												<option value={manager.id}>{manager.rank} {manager.full_name}</option>
-											{/each}
-										</select>
-									</div>
-									<div class="form-group full-width">
-										<label for="notes">Notlar</label>
-										<textarea
-											id="notes"
-											class="form-textarea"
-											rows="2"
-											placeholder="Haftalık yakıt ikmali..."
-											bind:value={formData.notes}
-										></textarea>
-									</div>
-								</div>
-								<div class="form-actions">
-									<button
-										type="button"
-										class="btn btn-secondary"
-										on:click={() => { showFuelForm = false; formError = ''; }}
-									>
-										<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-											<line x1="18" y1="6" x2="6" y2="18"/>
-											<line x1="6" y1="6" x2="18" y2="18"/>
-										</svg>
-										Vazgeç
-									</button>
-									<button type="submit" class="btn btn-primary" disabled={isSubmitting}>
-										{#if isSubmitting}
-											<span class="btn-spinner"></span>
-											Kaydediliyor...
-										{:else}
-											<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-												<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-												<polyline points="17 21 17 13 7 13 7 21"/>
-												<polyline points="7 3 7 8 15 8"/>
-											</svg>
-											Fiş Oluştur
-										{/if}
-									</button>
-								</div>
-							</form>
-						</section>
-					{/if}
-				{/if}
-				</div>
-				</div> <!-- main-content kapanış -->
-			</div> <!-- dashboard-layout kapanış -->
-		{:else}
-			<div class="text-center">
-				<p>Oturum bulunamadı. Yönlendiriliyorsunuz...</p>
-			</div>
-		{/if}
-	</div>
+                  <form
+                    class="fuel-form"
+                    on:submit|preventDefault={handleCreateSlip}
+                  >
+                    <div class="form-grid">
+                      <div class="form-group">
+                        <label for="force_command">Kuvvet Komutanlığı</label>
+                        <input
+                          id="force_command"
+                          class="form-input"
+                          type="text"
+                          placeholder="1. Komutanlık"
+                          bind:value={formData.force_command}
+                          required
+                        />
+                      </div>
+                      <div class="form-group">
+                        <label for="date">Tarih</label>
+                        <input
+                          id="date"
+                          class="form-input"
+                          type="date"
+                          bind:value={formData.date}
+                          required
+                        />
+                      </div>
+                      <div class="form-group">
+                        <label for="unit_id">Birlik</label>
+                        <select
+                          id="unit_id"
+                          class="form-select"
+                          bind:value={formData.unit_id}
+                          required
+                        >
+                          <option value="">Birlik Seçin</option>
+                          {#each units as unit}
+                            <option value={unit.id}>{unit.name}</option>
+                          {/each}
+                        </select>
+                      </div>
+                      <div class="form-group">
+                        <label for="vehicle_id">Araç</label>
+                        <select
+                          id="vehicle_id"
+                          class="form-select"
+                          bind:value={formData.vehicle_id}
+                          required
+                        >
+                          <option value="">Araç Seçin</option>
+                          {#each vehicles as vehicle}
+                            <option value={vehicle.id}
+                              >{vehicle.brand}
+                              {vehicle.model} ({vehicle.plate})</option
+                            >
+                          {/each}
+                        </select>
+                      </div>
+                      <div class="form-group">
+                        <label for="fuel_type">Yakıt Türü</label>
+                        <select
+                          id="fuel_type"
+                          class="form-select"
+                          bind:value={formData.fuel_type}
+                          required
+                        >
+                          <option value="benzin">Benzin</option>
+                          <option value="motorin">Motorin</option>
+                        </select>
+                      </div>
+                      <div class="form-group">
+                        <label for="liters">Litre</label>
+                        <input
+                          id="liters"
+                          class="form-input"
+                          type="number"
+                          min="0.1"
+                          step="0.1"
+                          placeholder="45"
+                          bind:value={formData.liters}
+                          required
+                        />
+                      </div>
+                      <div class="form-group">
+                        <label for="km">Kilometre</label>
+                        <input
+                          id="km"
+                          class="form-input"
+                          type="number"
+                          min="0"
+                          placeholder="125.420"
+                          bind:value={formData.km}
+                          required
+                        />
+                      </div>
+                      <div class="form-group">
+                        <label for="personnel_id">Teslim Eden</label>
+                        <select
+                          id="personnel_id"
+                          class="form-select"
+                          bind:value={formData.personnel_id}
+                          required
+                        >
+                          <option value="">Personel Seçin</option>
+                          {#each personnel as person}
+                            <option value={person.id}
+                              >{person.rank} {person.full_name}</option
+                            >
+                          {/each}
+                        </select>
+                      </div>
+                      <div class="form-group">
+                        <label for="goods_manager_id">Teslim Alan</label>
+                        <select
+                          id="goods_manager_id"
+                          class="form-select"
+                          bind:value={formData.goods_manager_id}
+                          required
+                        >
+                          <option value="">Mal Sorumlusu Seçin</option>
+                          {#each goodsManagers as manager}
+                            <option value={manager.id}
+                              >{manager.rank} {manager.full_name}</option
+                            >
+                          {/each}
+                        </select>
+                      </div>
+                      <div class="form-group full-width">
+                        <label for="notes">Notlar</label>
+                        <textarea
+                          id="notes"
+                          class="form-textarea"
+                          rows="2"
+                          placeholder="Haftalık yakıt ikmali..."
+                          bind:value={formData.notes}
+                        ></textarea>
+                      </div>
+                    </div>
+                    <div class="form-actions">
+                      <button
+                        type="button"
+                        class="btn btn-secondary"
+                        on:click={() => {
+                          showFuelForm = false;
+                          formError = "";
+                        }}
+                      >
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                        >
+                          <line x1="18" y1="6" x2="6" y2="18" />
+                          <line x1="6" y1="6" x2="18" y2="18" />
+                        </svg>
+                        Vazgeç
+                      </button>
+                      <button
+                        type="submit"
+                        class="btn btn-primary"
+                        disabled={isSubmitting}
+                      >
+                        {#if isSubmitting}
+                          <span class="btn-spinner"></span>
+                          Kaydediliyor...
+                        {:else}
+                          <svg
+                            width="16"
+                            height="16"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                          >
+                            <path
+                              d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"
+                            />
+                            <polyline points="17 21 17 13 7 13 7 21" />
+                            <polyline points="7 3 7 8 15 8" />
+                          </svg>
+                          Fiş Oluştur
+                        {/if}
+                      </button>
+                    </div>
+                  </form>
+                </section>
+              {/if}
+            {/if}
+          </div>
+        </div>
+        <!-- main-content kapanış -->
+      </div>
+      <!-- dashboard-layout kapanış -->
+    {:else}
+      <div class="text-center">
+        <p>Oturum bulunamadı. Yönlendiriliyorsunuz...</p>
+      </div>
+    {/if}
+  </div>
 </div>
 
 <style>
-	.welcome-container {
-		min-height: 100vh;
-		background: #F2F3F7;
-		padding: 2rem var(--page-horizontal-padding);
-	}
-
-	:global(.welcome-container .container) {
-		width: 100%;
-		max-width: 1800px;
-		margin: 0;
-		margin-right: auto;
-		padding: 0;
-	}
-
-	.welcome-card {
-		max-width: 1600px;
-		margin: 0 auto;
-	}
-
-	.user-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 2rem;
-	}
-
-	.user-avatar {
-		margin-right: 1.5rem;
-	}
-
-	.avatar-circle {
-		width: 80px;
-		height: 80px;
-		border-radius: 50%;
-		background: var(--primary-color);
-		color: white;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		font-size: 2.5rem;
-		font-weight: bold;
-	}
-
-	.avatar-circle i {
-		font-size: 2.5rem;
-	}
-
-	.user-info {
-		flex: 1;
-	}
-
-	.user-name {
-		font-size: 1.8rem;
-		font-weight: 700;
-		color: var(--text-color);
-		margin-bottom: 0.5rem;
-	}
-
-	.divider {
-		height: 1px;
-		background: var(--card-border-color);
-		margin: 2rem 0;
-	}
-
-	.welcome-content {
-		text-align: center;
-		padding: 2rem 0;
-	}
-
-	.welcome-icon {
-		color: var(--primary-color);
-		margin-bottom: 1.5rem;
-	}
-
-	.welcome-title {
-		font-size: 2.5rem;
-		font-weight: 700;
-		color: var(--text-color);
-		margin-bottom: 1rem;
-	}
-
-	.welcome-message {
-		font-size: 1.2rem;
-		color: var(--text-secondary);
-		margin-bottom: 1.5rem;
-		line-height: 1.6;
-	}
-
-	.current-time {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--text-secondary);
-		font-size: 1rem;
-		margin-top: 1rem;
-	}
-
-	.stats-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-		gap: 1.5rem;
-		margin: 3rem 0;
-	}
-
-	.stat-card {
-		display: flex;
-		align-items: center;
-		padding: 1.5rem;
-		border: 1px solid #c9c8cb;
-		border-radius: 12px;
-		transition: transform 0.3s ease, box-shadow 0.3s ease;
-	}
-
-	
-	.stat-icon {
-		width: 60px;
-		height: 60px;
-		border-radius: 12px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		margin-right: 1rem;
-	}
-
-	.fuel-icon {
-		background: rgba(37, 99, 235, 0.1);
-		color: #2563EB;
-	}
-
-	.goods-icon {
-		background: rgba(5, 150, 105, 0.1);
-		color: #059669;
-	}
-
-	.system-icon {
-		background: rgba(220, 38, 38, 0.1);
-		color: #DC2626;
-	}
-
-	.stat-info {
-		flex: 1;
-	}
-
-	.stat-title {
-		font-size: 1rem;
-		font-weight: 600;
-		color: var(--text-secondary);
-		margin-bottom: 0.5rem;
-	}
-
-	.stat-value {
-		font-size: 1.4rem;
-		font-weight: 700;
-		color: var(--text-color);
-	}
-
-	.info-section {
-		margin-top: 2rem;
-	}
-
-	.info-title {
-		font-size: 1.3rem;
-		font-weight: 600;
-		color: var(--text-color);
-		margin-bottom: 1rem;
-	}
-
-	.info-list {
-		list-style: none;
-		padding: 0;
-	}
-
-	.info-list li {
-		padding: 0.75rem 0;
-		border-bottom: 1px solid var(--card-border-color);
-		display: flex;
-		align-items: center;
-	}
-
-	.info-list li:last-child {
-		border-bottom: none;
-	}
-
-	.info-list li::before {
-		content: "✓";
-		color: var(--primary-color);
-		font-weight: bold;
-		margin-right: 0.75rem;
-	}
-
-	/* Responsive tasarım */
-	@media (max-width: 768px) {
-		.user-header {
-			flex-direction: column;
-			text-align: center;
-		}
-
-		.user-avatar {
-			margin-right: 0;
-			margin-bottom: 1rem;
-		}
-
-		.avatar-circle {
-			width: 60px;
-			height: 60px;
-			font-size: 1.5rem;
-		}
-
-		.welcome-title {
-			font-size: 2rem;
-		}
-
-		.stats-grid {
-			grid-template-columns: 1fr;
-		}
-
-		.current-time {
-			flex-direction: column;
-			gap: 0.5rem;
-		}
-	}
-
-	/* Dashboard Layout */
-	.dashboard-layout {
-		display: flex;
-		gap: 2rem;
-		min-height: calc(100vh - 4rem);
-		padding: 0 var(--page-horizontal-padding);
-		width: 100%;
-		box-sizing: border-box;
-	}
-
-	.sidebar {
-		width: 280px;
-		background: white;
-		border: 1px solid #c9c8cb;
-		border-radius: 12px;
-		padding: 1.5rem 1.5rem 1.5rem 0;
-		height: fit-content;
-		position: sticky;
-		top: 2rem;
-	}
-
-	.sidebar-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 2rem;
-		padding: 0 0 1rem 1.5rem;
-		border-bottom: 1px solid var(--card-border-color);
-	}
-
-	.sidebar-title {
-		font-size: 1.2rem;
-		font-weight: 600;
-		color: var(--text-color);
-		margin: 0;
-	}
-
-	.mobile-close-btn {
-		display: none;
-		background: none;
-		border: none;
-		font-size: 1.5rem;
-		color: var(--text-secondary);
-		cursor: pointer;
-		padding: 0.25rem;
-	}
-
-	.nav-menu {
-		list-style: none;
-		padding: 0 0 0 1.5rem;
-		margin: 0;
-	}
-
-	.nav-item {
-		margin-bottom: 0.5rem;
-	}
-
-	.nav-btn {
-		width: 100%;
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		padding: 0.75rem 1rem;
-		background: none;
-		border: none;
-		border-radius: 8px;
-		color: var(--text-secondary);
-		font-size: 0.95rem;
-		cursor: pointer;
-		transition: all 0.3s ease;
-		text-align: left;
-	}
-
-	
-	.nav-btn.active {
-		background: var(--primary-color);
-		color: white;
-		font-weight: 500;
-	}
-
-	.main-content {
-		flex: 65;
-	}
-
-	.header-actions {
-		display: flex;
-		gap: 1rem;
-		align-items: center;
-	}
-
-	.mobile-menu-btn {
-		display: none;
-		background: none;
-		border: 1px solid var(--card-border-color);
-		border-radius: 8px;
-		padding: 0.5rem;
-		cursor: pointer;
-		color: var(--text-secondary);
-	}
-
-	/* Responsive Tasarım */
-	@media (max-width: 1024px) {
-		.dashboard-layout {
-			flex-direction: column;
-		}
-
-		.sidebar {
-			width: 100%;
-			position: static;
-			display: none;
-		}
-
-		.sidebar.mobile-open {
-			display: block;
-			position: fixed;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
-			z-index: 1000;
-			background: rgba(0, 0, 0, 0.5);
-			padding: 0;
-		}
-
-		.sidebar.mobile-open > * {
-			background: white;
-			border-radius: 12px;
-			margin: 2rem var(--page-horizontal-padding);
-			max-height: 80vh;
-			overflow-y: auto;
-		}
-
-		.mobile-close-btn {
-			display: block;
-		}
-
-		.mobile-menu-btn {
-			display: block;
-		}
-
-		.header-actions {
-			flex-wrap: wrap;
-		}
-	}
-
-	@media (max-width: 768px) {
-		.dashboard-layout {
-			padding: 0 var(--page-horizontal-padding);
-		}
-
-		.user-header {
-			flex-direction: column;
-			text-align: center;
-			gap: 1rem;
-		}
-
-		.user-avatar {
-			margin-right: 0;
-			margin-bottom: 0;
-		}
-
-		.avatar-circle {
-			width: 60px;
-			height: 60px;
-			font-size: 1.5rem;
-		}
-
-		.avatar-circle i {
-			font-size: 1.75rem;
-		}
-
-		.welcome-title {
-			font-size: 2rem;
-		}
-
-		.stats-grid {
-			grid-template-columns: 1fr;
-		}
-
-		.current-time {
-			flex-direction: column;
-			gap: 0.5rem;
-		}
-
-		.sidebar.mobile-open > * {
-			margin: 1rem;
-		}
-	}
-
-	/* Animasyonlar */
-	@keyframes fadeIn {
-		from {
-			opacity: 0;
-			transform: translateY(20px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.welcome-card {
-		animation: fadeIn 0.6s ease-out;
-	}
-
-	.stat-card {
-		animation: fadeIn 0.8s ease-out;
-	}
-
-	.stat-card:nth-child(2) {
-		animation-delay: 0.1s;
-	}
-
-	.stat-card:nth-child(3) {
-		animation-delay: 0.2s;
-	}
-
-	.nav-item {
-		animation: fadeIn 0.5s ease-out;
-	}
-
-	.nav-item:nth-child(1) { animation-delay: 0.1s; }
-	.nav-item:nth-child(2) { animation-delay: 0.2s; }
-	.nav-item:nth-child(3) { animation-delay: 0.3s; }
-	.nav-item:nth-child(4) { animation-delay: 0.4s; }
-
-	/* Fuel Form Styles */
-	.fuel-form-section {
-		animation: slideDown 0.3s ease-out;
-	}
-
-	@keyframes slideDown {
-		from {
-			opacity: 0;
-			transform: translateY(-20px);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0);
-		}
-	}
-
-	.fuel-form-header {
-		display: flex;
-		align-items: center;
-		margin-bottom: 2rem;
-		padding-bottom: 1.5rem;
-		border-bottom: 2px solid #E5E7EB;
-	}
-
-	.fuel-form-title {
-		font-size: 1.75rem;
-		font-weight: 700;
-		color: var(--text-color);
-		margin: 0;
-		display: flex;
-		align-items: center;
-	}
-
-	.fuel-form {
-		animation: fadeIn 0.4s ease-out 0.1s both;
-	}
-
-	.form-grid {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-		gap: 1.5rem;
-		margin-bottom: 2rem;
-	}
-
-	.form-group.full-width {
-		grid-column: 1 / -1;
-	}
-
-	.form-group label {
-		display: block;
-		margin-bottom: 0.5rem;
-		font-weight: 600;
-		color: var(--text-color);
-		font-size: 0.9rem;
-	}
-
-	.form-select, .form-textarea {
-		width: 100%;
-		padding: 0.875rem 1rem;
-		border: 2px solid #E5E7EB;
-		border-radius: 8px;
-		font-size: 0.95rem;
-		transition: all 0.2s ease;
-		background: white;
-		font-family: inherit;
-	}
-
-	.form-select:focus, .form-textarea:focus, .form-input:focus {
-		outline: none;
-		border-color: var(--primary-color);
-		box-shadow: 0 0 0 3px rgba(108, 165, 227, 0.1);
-	}
-
-	.form-textarea {
-		resize: vertical;
-		min-height: 80px;
-	}
-
-	.form-actions {
-		display: flex;
-		gap: 1rem;
-		justify-content: flex-end;
-		padding-top: 2rem;
-		border-top: 2px solid #F3F4F6;
-	}
-
-	.btn-spinner {
-		width: 16px;
-		height: 16px;
-		border: 2px solid rgba(255, 255, 255, 0.3);
-		border-top-color: white;
-		border-radius: 50%;
-		display: inline-block;
-		animation: spin 0.8s linear infinite;
-	}
-
-	@keyframes spin {
-		to { transform: rotate(360deg); }
-	}
-
-	.form-alert {
-		padding: 1rem 1.25rem;
-		border-radius: 8px;
-		margin-bottom: 1.5rem;
-		font-size: 0.9rem;
-		font-weight: 500;
-		display: flex;
-		align-items: center;
-		gap: 0.75rem;
-		animation: slideDown 0.3s ease-out;
-	}
-
-	.success-alert {
-		background: #D1FAE5;
-		color: #065F46;
-		border: 1px solid #6EE7B7;
-	}
-
-	.error-alert {
-		background: #FEE2E2;
-		color: #991B1B;
-		border: 1px solid #FCA5A5;
-	}
-
-	.success-alert::before {
-		content: '✓';
-		font-size: 1.25rem;
-		font-weight: bold;
-	}
-
-	.error-alert::before {
-		content: '⚠';
-		font-size: 1.25rem;
-	}
-
-	/* Redirect Section Styles */
-	.redirect-section {
-		display: flex;
-		justify-content: center;
-		align-items: center;
-		min-height: 400px;
-		padding: 2rem 0;
-	}
-
-	.redirect-card {
-		text-align: center;
-		max-width: 500px;
-		padding: 3rem;
-	}
-
-	.redirect-icon {
-		color: var(--primary-color);
-		margin-bottom: 2rem;
-	}
-
-	.redirect-title {
-		font-size: 2rem;
-		font-weight: 700;
-		color: var(--text-color);
-		margin-bottom: 1rem;
-	}
-
-	.redirect-message {
-		font-size: 1.1rem;
-		color: var(--text-secondary);
-		margin-bottom: 2rem;
-		line-height: 1.6;
-	}
-
-	.btn-large {
-		padding: 1rem 2rem;
-		font-size: 1.1rem;
-		font-weight: 600;
-		gap: 0.75rem;
-	}
-
-	.btn-large svg {
-		width: 24px;
-		height: 24px;
-	}
-
-	/* Fuel Manager Summary Styles */
-	.fuel-summary-section {
-		margin-bottom: 2rem;
-	}
-
-	.fuel-summary-grid {
-		display: flex;
-		gap: 1.5rem;
-		flex-wrap: wrap;
-	}
-
-	.fuel-summary-card {
-		padding: 1.5rem 2rem;
-		border-radius: 16px;
-		border: 1px solid transparent;
-		display: flex;
-		align-items: center;
-		gap: 1.5rem;
-		flex: 1;
-		min-width: 240px;
-		transition: all 0.3s ease;
-	}
-
-	.fuel-summary-card.benzin {
-		background: #FFEDD5;
-		border-color: #FED7AA;
-	}
-
-	.fuel-summary-card.motorin {
-		background: #DBEAFE;
-		border-color: #BFDBFE;
-	}
-
-	
-	.summary-icon-wrapper {
-		width: 64px;
-		height: 64px;
-		border-radius: 12px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		flex-shrink: 0;
-	}
-
-	.fuel-summary-card.benzin .summary-icon-wrapper {
-		background: #FDE047;
-	}
-
-	.fuel-summary-card.motorin .summary-icon-wrapper {
-		background: #93C5FD;
-	}
-
-	.summary-icon {
-		font-size: 2rem;
-	}
-
-	.summary-info {
-		flex: 1;
-		min-width: 0;
-	}
-
-	.summary-title {
-		font-size: 0.875rem;
-		font-weight: 600;
-		color: var(--text-secondary);
-		margin-bottom: 0.5rem;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-	}
-
-	.summary-amount {
-		font-size: 2rem;
-		font-weight: 700;
-		color: var(--text-color);
-		margin-bottom: 0.25rem;
-		line-height: 1;
-	}
-
-	.summary-unit {
-		font-size: 1rem;
-		color: var(--text-secondary);
-		margin-left: 0.25rem;
-		font-weight: 500;
-	}
-
-	.summary-label {
-		font-size: 0.75rem;
-		color: var(--text-secondary);
-		display: block;
-	}
-
-	/* Tables Section Styles */
-	.tables-section {
-		display: grid;
-		grid-template-columns: 1fr;
-		gap: 2rem;
-	}
-
-	.table-container {
-		background: white;
-		border-radius: 12px;
-		border: 1px solid #c9c8cb;
-		overflow: hidden;
-	}
-
-	.fuel-table-header {
-		padding: 1.5rem;
-		border-bottom: 1px solid var(--card-border-color);
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-	}
-
-	.fuel-table-title {
-		font-size: 1.2rem;
-		font-weight: 600;
-		color: var(--text-color);
-		margin: 0;
-	}
-
-	.count-badge {
-		background: var(--primary-color);
-		color: white;
-		padding: 0.25rem 0.75rem;
-		border-radius: 12px;
-		font-size: 0.8rem;
-		font-weight: 600;
-	}
-
-	.table-wrapper {
-		overflow-x: auto;
-		border-radius: 12px;
-		border: 1px solid #E5E7EB;
-	}
-
-	.fuel-table {
-		width: 100%;
-		border-collapse: collapse;
-		background: white;
-	}
-
-	.fuel-table th {
-		background: #F9FAFB;
-		padding: 1rem 1.25rem;
-		text-align: left;
-		font-weight: 600;
-		color: var(--text-color);
-		border-bottom: 2px solid #E5E7EB;
-		white-space: nowrap;
-		font-size: 0.875rem;
-		text-transform: uppercase;
-		letter-spacing: 0.5px;
-	}
-
-	.fuel-table th:first-child {
-		padding-left: 1.5rem;
-		border-top-left-radius: 12px;
-	}
-
-	.fuel-table th:last-child {
-		border-top-right-radius: 12px;
-	}
-
-	.fuel-table td {
-		padding: 1rem 1.25rem;
-		border-bottom: 1px solid #F3F4F6;
-		color: var(--text-color);
-		font-size: 0.9rem;
-	}
-
-	.fuel-table td:first-child {
-		padding-left: 1.5rem;
-		font-weight: 600;
-		color: var(--text-secondary);
-	}
-
-	.fuel-table tbody tr {
-		transition: all 0.2s ease;
-	}
-
-	
-	.fuel-table tbody tr:last-child td {
-		border-bottom: none;
-	}
-
-	
-	.status-badge {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.375rem;
-		padding: 0.375rem 0.875rem;
-		border-radius: 20px;
-		font-size: 0.8rem;
-		font-weight: 600;
-		white-space: nowrap;
-		text-transform: capitalize;
-	}
-
-	.status-pending {
-		background: #FEF3C7;
-		color: #92400E;
-		border: 1px solid #FCD34D;
-	}
-
-	.status-approved {
-		background: #D1FAE5;
-		color: #065F46;
-		border: 1px solid #6EE7B7;
-	}
-
-	.status-rejected {
-		background: #FEE2E2;
-		color: #991B1B;
-		border: 1px solid #FCA5A5;
-	}
-
-	.empty-table {
-		padding: 3rem;
-		text-align: center;
-		color: var(--text-secondary);
-	}
-
-	.empty-table-icon {
-		font-size: 2rem;
-		margin-bottom: 1rem;
-		opacity: 0.5;
-	}
-
-	/* Fuel Manager Responsive Design */
-	@media (max-width: 1024px) {
-		.fuel-summary-grid {
-			width: 100%;
-		}
-
-		.fuel-table {
-			font-size: 0.85rem;
-		}
-
-		.fuel-table th,
-		.fuel-table td {
-			padding: 0.75rem;
-		}
-	}
-
-	@media (max-width: 768px) {
-		.fuel-summary-grid {
-			flex-direction: column;
-		}
-
-		.fuel-summary-card {
-			min-width: auto;
-		}
-
-		.fuel-table {
-			font-size: 0.8rem;
-		}
-
-		.fuel-table th,
-		.fuel-table td {
-			padding: 0.5rem 0.75rem;
-		}
-
-		.fuel-table th:first-child,
-		.fuel-table td:first-child {
-			padding-left: 0.75rem;
-		}
-
-		.status-badge {
-			font-size: 0.7rem;
-			padding: 0.25rem 0.625rem;
-		}
-
-		.summary-icon-wrapper {
-			width: 56px;
-			height: 56px;
-		}
-
-		.summary-icon {
-			font-size: 1.75rem;
-		}
-
-		.summary-amount {
-			font-size: 1.5rem;
-		}
-	}
-
-	/* Goods Manager Content Styles */
-	.goods-manager-content {
-		padding: 0;
-		max-width: none;
-		margin: 0;
-	}
-
-	.content-header {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: 2rem;
-		gap: 1rem;
-		flex-wrap: wrap;
-	}
-
-	.content-title {
-		font-size: 1.8rem;
-		font-weight: 700;
-		color: var(--text-color);
-		margin: 0;
-	}
-
-	.goods-manager-content .stats-badge {
-		background: var(--primary-color);
-		color: white;
-		padding: 0.5rem 1rem;
-		border-radius: 20px;
-		font-size: 0.9rem;
-		font-weight: 600;
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
-	}
-
-	.goods-manager-content .count {
-		background: rgba(255, 255, 255, 0.2);
-		padding: 0.25rem 0.5rem;
-		border-radius: 10px;
-		font-weight: 700;
-	}
-
-	.goods-manager-content .empty-state {
-		text-align: center;
-		padding: 3rem;
-		background: white;
-		border-radius: 12px;
-		border: 1px solid var(--card-border-color);
-	}
-
-	.goods-manager-content .empty-icon {
-		color: var(--text-secondary);
-		margin-bottom: 1rem;
-	}
-
-	.goods-manager-content .empty-state h3 {
-		font-size: 1.5rem;
-		font-weight: 600;
-		color: var(--text-color);
-		margin-bottom: 0.5rem;
-	}
-
-	.goods-manager-content .empty-state p {
-		color: var(--text-secondary);
-		margin: 0;
-	}
+  .welcome-container {
+    min-height: 100vh;
+    background: #f2f3f7;
+    padding: 2rem var(--page-horizontal-padding);
+  }
+
+  :global(.welcome-container .container) {
+    width: 100%;
+    max-width: 1800px;
+    margin: 0;
+    margin-right: auto;
+    padding: 0;
+  }
+
+  .welcome-card {
+    max-width: 1600px;
+    margin: 0 auto;
+  }
+
+  .user-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 2rem;
+  }
+
+  .user-avatar {
+    margin-right: 1.5rem;
+  }
+
+  .avatar-circle {
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: var(--primary-color);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.5rem;
+    font-weight: bold;
+  }
+
+  .avatar-circle i {
+    font-size: 2.5rem;
+  }
+
+  .user-info {
+    flex: 1;
+  }
+
+  .user-name {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 0.5rem;
+  }
+
+  .divider {
+    height: 1px;
+    background: var(--card-border-color);
+    margin: 2rem 0;
+  }
+
+  .welcome-content {
+    text-align: center;
+    padding: 2rem 0;
+  }
+
+  .welcome-icon {
+    color: var(--primary-color);
+    margin-bottom: 1.5rem;
+  }
+
+  .welcome-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+  }
+
+  .welcome-message {
+    font-size: 1.2rem;
+    color: var(--text-secondary);
+    margin-bottom: 1.5rem;
+    line-height: 1.6;
+  }
+
+  .current-time {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-secondary);
+    font-size: 1rem;
+    margin-top: 1rem;
+  }
+
+  .stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin: 3rem 0;
+  }
+
+  .stat-card {
+    display: flex;
+    align-items: center;
+    padding: 1.5rem;
+    border: 1px solid #c9c8cb;
+    border-radius: 12px;
+    transition:
+      transform 0.3s ease,
+      box-shadow 0.3s ease;
+  }
+
+  .stat-icon {
+    width: 60px;
+    height: 60px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 1rem;
+  }
+
+  .fuel-icon {
+    background: rgba(37, 99, 235, 0.1);
+    color: #2563eb;
+  }
+
+  .goods-icon {
+    background: rgba(5, 150, 105, 0.1);
+    color: #059669;
+  }
+
+  .system-icon {
+    background: rgba(220, 38, 38, 0.1);
+    color: #dc2626;
+  }
+
+  .stat-info {
+    flex: 1;
+  }
+
+  .stat-title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+  }
+
+  .stat-value {
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: var(--text-color);
+  }
+
+  .info-section {
+    margin-top: 2rem;
+  }
+
+  .info-title {
+    font-size: 1.3rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+  }
+
+  .info-list {
+    list-style: none;
+    padding: 0;
+  }
+
+  .info-list li {
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--card-border-color);
+    display: flex;
+    align-items: center;
+  }
+
+  .info-list li:last-child {
+    border-bottom: none;
+  }
+
+  .info-list li::before {
+    content: "✓";
+    color: var(--primary-color);
+    font-weight: bold;
+    margin-right: 0.75rem;
+  }
+
+  /* Responsive tasarım */
+  @media (max-width: 768px) {
+    .user-header {
+      flex-direction: column;
+      text-align: center;
+    }
+
+    .user-avatar {
+      margin-right: 0;
+      margin-bottom: 1rem;
+    }
+
+    .avatar-circle {
+      width: 60px;
+      height: 60px;
+      font-size: 1.5rem;
+    }
+
+    .welcome-title {
+      font-size: 2rem;
+    }
+
+    .stats-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .current-time {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+  }
+
+  /* Dashboard Layout */
+  .dashboard-layout {
+    display: flex;
+    gap: 2rem;
+    min-height: calc(100vh - 4rem);
+    padding: 0 var(--page-horizontal-padding);
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .sidebar {
+    width: 280px;
+    background: white;
+    border: 1px solid #c9c8cb;
+    border-radius: 12px;
+    padding: 1.5rem 1.5rem 1.5rem;
+    height: fit-content;
+    position: sticky;
+    top: 5rem;
+  }
+
+  .sidebar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding: 0 0 1rem 1.5rem;
+    border-bottom: 1px solid var(--card-border-color);
+  }
+
+  .sidebar-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin: 0;
+  }
+
+  .mobile-close-btn {
+    display: none;
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    padding: 0.25rem;
+  }
+
+  .nav-menu {
+    list-style: none;
+    padding: 0 0 0 0;
+    margin: 0;
+  }
+
+  .nav-item {
+    margin-bottom: 0.5rem;
+  }
+
+  .nav-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 1rem;
+    background: none;
+    border: none;
+    border-radius: 8px;
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    text-align: left;
+  }
+
+  .nav-btn.active {
+    background: var(--primary-color);
+    color: white;
+    font-weight: 500;
+  }
+
+  .main-content {
+    flex: 65;
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+  }
+
+  .mobile-menu-btn {
+    display: none;
+    background: none;
+    border: 1px solid var(--card-border-color);
+    border-radius: 8px;
+    padding: 0.5rem;
+    cursor: pointer;
+    color: var(--text-secondary);
+  }
+
+  /* Responsive Tasarım */
+  @media (max-width: 1024px) {
+    .dashboard-layout {
+      flex-direction: column;
+    }
+
+    .sidebar {
+      width: 100%;
+      position: static;
+      display: none;
+    }
+
+    .sidebar.mobile-open {
+      display: block;
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 1000;
+      background: rgba(0, 0, 0, 0.5);
+      padding: 0;
+    }
+
+    .sidebar.mobile-open > * {
+      background: white;
+      border-radius: 12px;
+      margin: 2rem var(--page-horizontal-padding);
+      max-height: 80vh;
+      overflow-y: auto;
+    }
+
+    .mobile-close-btn {
+      display: block;
+    }
+
+    .mobile-menu-btn {
+      display: block;
+    }
+
+    .header-actions {
+      flex-wrap: wrap;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .dashboard-layout {
+      padding: 0 var(--page-horizontal-padding);
+    }
+
+    .user-header {
+      flex-direction: column;
+      text-align: center;
+      gap: 1rem;
+    }
+
+    .user-avatar {
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+
+    .avatar-circle {
+      width: 60px;
+      height: 60px;
+      font-size: 1.5rem;
+    }
+
+    .avatar-circle i {
+      font-size: 1.75rem;
+    }
+
+    .welcome-title {
+      font-size: 2rem;
+    }
+
+    .stats-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .current-time {
+      flex-direction: column;
+      gap: 0.5rem;
+    }
+
+    .sidebar.mobile-open > * {
+      margin: 1rem;
+    }
+  }
+
+  /* Animasyonlar */
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .welcome-card {
+    animation: fadeIn 0.6s ease-out;
+  }
+
+  .stat-card {
+    animation: fadeIn 0.8s ease-out;
+  }
+
+  .stat-card:nth-child(2) {
+    animation-delay: 0.1s;
+  }
+
+  .stat-card:nth-child(3) {
+    animation-delay: 0.2s;
+  }
+
+  .nav-item {
+    animation: fadeIn 0.5s ease-out;
+  }
+
+  .nav-item:nth-child(1) {
+    animation-delay: 0.1s;
+  }
+  .nav-item:nth-child(2) {
+    animation-delay: 0.2s;
+  }
+  .nav-item:nth-child(3) {
+    animation-delay: 0.3s;
+  }
+  .nav-item:nth-child(4) {
+    animation-delay: 0.4s;
+  }
+
+  /* Fuel Form Styles */
+  .fuel-form-section {
+    animation: slideDown 0.3s ease-out;
+  }
+
+  @keyframes slideDown {
+    from {
+      opacity: 0;
+      transform: translateY(-20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .fuel-form-header {
+    display: flex;
+    align-items: center;
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 2px solid #e5e7eb;
+  }
+
+  .fuel-form-title {
+    font-size: 1.75rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin: 0;
+    display: flex;
+    align-items: center;
+  }
+
+  .fuel-form {
+    animation: fadeIn 0.4s ease-out 0.1s both;
+  }
+
+  .form-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-bottom: 2rem;
+  }
+
+  .form-group.full-width {
+    grid-column: 1 / -1;
+  }
+
+  .form-group label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
+    color: var(--text-color);
+    font-size: 0.9rem;
+  }
+
+  .form-select,
+  .form-textarea {
+    width: 100%;
+    padding: 0.875rem 1rem;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    font-size: 0.95rem;
+    transition: all 0.2s ease;
+    background: white;
+    font-family: inherit;
+  }
+
+  .form-select:focus,
+  .form-textarea:focus,
+  .form-input:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(108, 165, 227, 0.1);
+  }
+
+  .form-textarea {
+    resize: vertical;
+    min-height: 80px;
+  }
+
+  .form-actions {
+    display: flex;
+    gap: 1rem;
+    justify-content: flex-end;
+    padding-top: 2rem;
+    border-top: 2px solid #f3f4f6;
+  }
+
+  .btn-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-top-color: white;
+    border-radius: 50%;
+    display: inline-block;
+    animation: spin 0.8s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .form-alert {
+    padding: 1rem 1.25rem;
+    border-radius: 8px;
+    margin-bottom: 1.5rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    animation: slideDown 0.3s ease-out;
+  }
+
+  .success-alert {
+    background: #d1fae5;
+    color: #065f46;
+    border: 1px solid #6ee7b7;
+  }
+
+  .error-alert {
+    background: #fee2e2;
+    color: #991b1b;
+    border: 1px solid #fca5a5;
+  }
+
+  .success-alert::before {
+    content: "✓";
+    font-size: 1.25rem;
+    font-weight: bold;
+  }
+
+  .error-alert::before {
+    content: "⚠";
+    font-size: 1.25rem;
+  }
+
+  /* Redirect Section Styles */
+  .redirect-section {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+    padding: 2rem 0;
+  }
+
+  .redirect-card {
+    text-align: center;
+    max-width: 500px;
+    padding: 3rem;
+  }
+
+  .redirect-icon {
+    color: var(--primary-color);
+    margin-bottom: 2rem;
+  }
+
+  .redirect-title {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 1rem;
+  }
+
+  .redirect-message {
+    font-size: 1.1rem;
+    color: var(--text-secondary);
+    margin-bottom: 2rem;
+    line-height: 1.6;
+  }
+
+  .btn-large {
+    padding: 1rem 2rem;
+    font-size: 1.1rem;
+    font-weight: 600;
+    gap: 0.75rem;
+  }
+
+  .btn-large svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  /* Fuel Manager Summary Styles */
+  .fuel-summary-section {
+    margin-bottom: 2rem;
+  }
+
+  .fuel-summary-grid {
+    display: flex;
+    gap: 1.5rem;
+    flex-wrap: wrap;
+  }
+
+  .fuel-summary-card {
+    padding: 1.5rem 2rem;
+    border-radius: 16px;
+    border: 1px solid transparent;
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    flex: 1;
+    min-width: 240px;
+    transition: all 0.3s ease;
+  }
+
+  .fuel-summary-card.benzin {
+    background: #ffedd5;
+    border-color: #fed7aa;
+  }
+
+  .fuel-summary-card.motorin {
+    background: #dbeafe;
+    border-color: #bfdbfe;
+  }
+
+  .summary-icon-wrapper {
+    width: 64px;
+    height: 64px;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .fuel-summary-card.benzin .summary-icon-wrapper {
+    background: #fde047;
+  }
+
+  .fuel-summary-card.motorin .summary-icon-wrapper {
+    background: #93c5fd;
+  }
+
+  .summary-icon {
+    font-size: 2rem;
+  }
+
+  .summary-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .summary-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .summary-amount {
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin-bottom: 0.25rem;
+    line-height: 1;
+  }
+
+  .summary-unit {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    margin-left: 0.25rem;
+    font-weight: 500;
+  }
+
+  .summary-label {
+    font-size: 0.75rem;
+    color: var(--text-secondary);
+    display: block;
+  }
+
+  /* Tables Section Styles */
+  .tables-section {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+
+  .table-container {
+    background: white;
+    border-radius: 12px;
+    border: 1px solid #c9c8cb;
+    overflow: hidden;
+  }
+
+  .fuel-table-header {
+    padding: 1.5rem;
+    border-bottom: 1px solid var(--card-border-color);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .fuel-table-title {
+    font-size: 1.2rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin: 0;
+  }
+
+  .count-badge {
+    background: var(--primary-color);
+    color: white;
+    padding: 0.25rem 0.75rem;
+    border-radius: 12px;
+    font-size: 0.8rem;
+    font-weight: 600;
+  }
+
+  .table-wrapper {
+    overflow-x: auto;
+    border-radius: 12px;
+    border: 1px solid #e5e7eb;
+  }
+
+  .fuel-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: white;
+  }
+
+  .fuel-table th {
+    background: #f9fafb;
+    padding: 1rem 1.25rem;
+    text-align: left;
+    font-weight: 600;
+    color: var(--text-color);
+    border-bottom: 2px solid #e5e7eb;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .fuel-table th:first-child {
+    padding-left: 1.5rem;
+    border-top-left-radius: 12px;
+  }
+
+  .fuel-table th:last-child {
+    border-top-right-radius: 12px;
+  }
+
+  .fuel-table td {
+    padding: 1rem 1.25rem;
+    border-bottom: 1px solid #f3f4f6;
+    color: var(--text-color);
+    font-size: 0.9rem;
+  }
+
+  .fuel-table td:first-child {
+    padding-left: 1.5rem;
+    font-weight: 600;
+    color: var(--text-secondary);
+  }
+
+  .fuel-table tbody tr {
+    transition: all 0.2s ease;
+  }
+
+  .fuel-table tbody tr:last-child td {
+    border-bottom: none;
+  }
+
+  .status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.875rem;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    white-space: nowrap;
+    text-transform: capitalize;
+  }
+
+  .status-pending {
+    background: #fef3c7;
+    color: #92400e;
+    border: 1px solid #fcd34d;
+  }
+
+  .status-approved {
+    background: #d1fae5;
+    color: #065f46;
+    border: 1px solid #6ee7b7;
+  }
+
+  .status-rejected {
+    background: #fee2e2;
+    color: #991b1b;
+    border: 1px solid #fca5a5;
+  }
+
+  .empty-table {
+    padding: 3rem;
+    text-align: center;
+    color: var(--text-secondary);
+  }
+
+  .empty-table-icon {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    opacity: 0.5;
+  }
+
+  /* Fuel Manager Responsive Design */
+  @media (max-width: 1024px) {
+    .fuel-summary-grid {
+      width: 100%;
+    }
+
+    .fuel-table {
+      font-size: 0.85rem;
+    }
+
+    .fuel-table th,
+    .fuel-table td {
+      padding: 0.75rem;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .fuel-summary-grid {
+      flex-direction: column;
+    }
+
+    .fuel-summary-card {
+      min-width: auto;
+    }
+
+    .fuel-table {
+      font-size: 0.8rem;
+    }
+
+    .fuel-table th,
+    .fuel-table td {
+      padding: 0.5rem 0.75rem;
+    }
+
+    .fuel-table th:first-child,
+    .fuel-table td:first-child {
+      padding-left: 0.75rem;
+    }
+
+    .status-badge {
+      font-size: 0.7rem;
+      padding: 0.25rem 0.625rem;
+    }
+
+    .summary-icon-wrapper {
+      width: 56px;
+      height: 56px;
+    }
+
+    .summary-icon {
+      font-size: 1.75rem;
+    }
+
+    .summary-amount {
+      font-size: 1.5rem;
+    }
+  }
+
+  /* Goods Manager Content Styles */
+  .goods-manager-content {
+    padding: 0;
+    max-width: none;
+    margin: 0;
+  }
+
+  .content-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2rem;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .content-title {
+    font-size: 1.8rem;
+    font-weight: 700;
+    color: var(--text-color);
+    margin: 0;
+  }
+
+  .goods-manager-content .stats-badge {
+    background: var(--primary-color);
+    color: white;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .goods-manager-content .count {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 0.25rem 0.5rem;
+    border-radius: 10px;
+    font-weight: 700;
+  }
+
+  .goods-manager-content .empty-state {
+    text-align: center;
+    padding: 3rem;
+    background: white;
+    border-radius: 12px;
+    border: 1px solid var(--card-border-color);
+  }
+
+  .goods-manager-content .empty-icon {
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+  }
+
+  .goods-manager-content .empty-state h3 {
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: var(--text-color);
+    margin-bottom: 0.5rem;
+  }
+
+  .goods-manager-content .empty-state p {
+    color: var(--text-secondary);
+    margin: 0;
+  }
 </style>