Index: app/Http/Controllers/DashboardController.php
===================================================================
--- app/Http/Controllers/DashboardController.php	(revision 847485c09a11468c23071337f9f158a06a231285)
+++ app/Http/Controllers/DashboardController.php	(revision 8550ecf6aaf55f186758bc3b18093bd7ab99045d)
@@ -4,4 +4,10 @@
 
 use App\Models\Payment;
+use App\Models\Order;
+use App\Models\Client;
+use App\Models\Product;
+use App\Models\Producer;
+use App\Models\Invoice;
+use App\Models\Batch;
 use Illuminate\Support\Facades\DB;
 use Inertia\Inertia;
@@ -11,4 +17,5 @@
     public function index()
     {
+        // Existing revenue metrics
         $currentRevenue = Payment::whereMonth('payment_date', now()->month)
             ->whereYear('payment_date', now()->year)
@@ -31,6 +38,136 @@
             ->map(fn($row) => [
                 'month' => $row->month,
-                'revenue' => (float) $row->revenue, // ✅ Ensure numeric type for TS
+                'revenue' => (float) $row->revenue,
             ]);
+
+        // New Reports from AdvancedReports
+
+        // 1. Top Buyers
+        $topBuyers = Client::select(
+            'clients.id',
+            'clients.name as company_name',
+            DB::raw('COUNT(orders.id) as total_orders'),
+            DB::raw('COALESCE(SUM(invoices.total_amount), 0) as total_spent')
+        )
+            ->leftJoin('orders', 'clients.id', '=', 'orders.buyer_id')
+            ->leftJoin('invoices', 'orders.id', '=', 'invoices.order_id')
+            ->groupBy('clients.id', 'clients.name')
+            ->orderBy('total_spent', 'DESC')
+            ->orderBy('total_orders', 'DESC')
+            ->limit(5)
+            ->get();
+
+        // 2. Pending Orders
+        $pendingOrders = Client::select(
+            'clients.id',
+            'clients.name as company_name',
+            DB::raw('COUNT(orders.id) as pending_orders'),
+            DB::raw('COALESCE(SUM(invoices.total_amount), 0) as total_pending_value')
+        )
+            ->leftJoin('orders', 'clients.id', '=', 'orders.buyer_id')
+            ->leftJoin('invoices', 'orders.id', '=', 'invoices.order_id')
+            ->where('orders.status', 'pending')
+            ->groupBy('clients.id', 'clients.name')
+            ->orderBy('total_pending_value', 'DESC')
+            ->limit(5)
+            ->get();
+
+        // 3. Orders by Country
+        $ordersByCountry = Client::select(
+            'clients.country',
+            DB::raw('COUNT(orders.id) as total_orders'),
+            DB::raw('COALESCE(SUM(invoices.total_amount), 0) as total_revenue')
+        )
+            ->leftJoin('orders', 'clients.id', '=', 'orders.buyer_id')
+            ->leftJoin('invoices', 'orders.id', '=', 'invoices.order_id')
+            ->groupBy('clients.country')
+            ->orderBy('total_revenue', 'DESC')
+            ->get();
+
+        // 4. Best Selling Products (UPDATED - using order_batches)
+        $bestSellingProducts = Product::select(
+            'products.id',
+            'products.name as product_name',
+            'producers.name as producer_name',
+            DB::raw('COUNT(DISTINCT order_batches.order_id) as times_ordered'),
+            DB::raw('COALESCE(SUM(order_batches.total_price), 0) as total_revenue')
+        )
+            ->join('producers', 'products.producer_id', '=', 'producers.id')
+            ->leftJoin('batches', 'products.id', '=', 'batches.product_id')
+            ->leftJoin('order_batches', 'batches.id', '=', 'order_batches.batch_id')
+            ->leftJoin('orders', 'order_batches.order_id', '=', 'orders.id')
+            ->groupBy('products.id', 'products.name', 'producers.name')
+            ->orderBy('total_revenue', 'DESC')
+            ->orderBy('times_ordered', 'DESC')
+            ->limit(5)
+            ->get();
+
+        // 5. Revenue by Producer (UPDATED - using order_batches)
+        $revenueByProducer = Producer::select(
+            'producers.id',
+            'producers.name as company_name',
+            DB::raw('COALESCE(SUM(DISTINCT invoices.total_amount), 0) as total_revenue')
+        )
+            ->join('products', 'producers.id', '=', 'products.producer_id')
+            ->join('batches', 'products.id', '=', 'batches.product_id')
+            ->join('order_batches', 'batches.id', '=', 'order_batches.batch_id')
+            ->join('orders', 'order_batches.order_id', '=', 'orders.id')
+            ->join('invoices', 'orders.id', '=', 'invoices.order_id')
+            ->groupBy('producers.id', 'producers.name')
+            ->orderBy('total_revenue', 'DESC')
+            ->limit(5)
+            ->get();
+
+        // 6. Unpaid Invoices
+        $unpaidInvoices = Invoice::select(
+            'invoices.id as invoice_key',
+            'invoices.invoice_date',
+            'invoices.status as invoice_status',
+            'payments.due_date as payment_due_date',
+            'payments.payment_status',
+            'clients.id as buyer_id',
+            'clients.name as buyer_name',
+            'clients.billing_address'
+        )
+            ->join('orders', 'invoices.order_id', '=', 'orders.id')
+            ->join('clients', 'orders.buyer_id', '=', 'clients.id')
+            ->leftJoin('payments', 'orders.id', '=', 'payments.order_id')
+            ->where('payments.payment_status', '!=', 'paid')
+            ->orWhereNull('payments.payment_status')
+            ->orderBy('payments.due_date', 'DESC')
+            ->limit(5)
+            ->get();
+
+        // 7. Payment Status Overview
+        $paymentStatusOverview = Payment::select(
+            'payment_status',
+            DB::raw('COUNT(*) as count_payments'),
+            DB::raw('SUM(amount) as total_amount'),
+            DB::raw('ROUND((COUNT(*) * 100.0 / (SELECT COUNT(*) FROM payments)), 2) as percentage_of_payments')
+        )
+            ->groupBy('payment_status')
+            ->orderBy('count_payments', 'DESC')
+            ->get();
+
+        // 8. Products with Poor Performance (FIXED - using orders.date instead of order_date)
+        $poorPerformingProducts = Product::select(
+            'products.id',
+            'products.name as product_name',
+            'producers.name as producer_name',
+            DB::raw('COUNT(DISTINCT order_batches.order_id) as order_count')
+        )
+            ->join('producers', 'products.producer_id', '=', 'producers.id')
+            ->leftJoin('batches', 'products.id', '=', 'batches.product_id')
+            ->leftJoin('order_batches', 'batches.id', '=', 'order_batches.batch_id')
+            ->leftJoin('orders', 'order_batches.order_id', '=', 'orders.id')
+            ->where(function($query) {
+                $query->where('orders.date', '>=', now()->subMonths(6))
+                    ->orWhereNull('orders.date');
+            })
+            ->groupBy('products.id', 'products.name', 'producers.name')
+            ->having(DB::raw('COUNT(DISTINCT order_batches.order_id)'), '<', 5)
+            ->orderBy('order_count', 'ASC')
+            ->limit(5)
+            ->get();
 
         return Inertia::render('Dashboard', [
@@ -38,4 +175,12 @@
             'previousRevenue' => (float) $previousRevenue,
             'monthlyRevenue' => $monthlyRevenue,
+            'topBuyers' => $topBuyers,
+            'pendingOrders' => $pendingOrders,
+            'ordersByCountry' => $ordersByCountry,
+            'bestSellingProducts' => $bestSellingProducts,
+            'revenueByProducer' => $revenueByProducer,
+            'unpaidInvoices' => $unpaidInvoices,
+            'paymentStatusOverview' => $paymentStatusOverview,
+            'poorPerformingProducts' => $poorPerformingProducts,
         ]);
     }
Index: app/Models/Product.php
===================================================================
--- app/Models/Product.php	(revision 847485c09a11468c23071337f9f158a06a231285)
+++ app/Models/Product.php	(revision 8550ecf6aaf55f186758bc3b18093bd7ab99045d)
@@ -7,5 +7,4 @@
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\BelongsTo;
-use Illuminate\Database\Eloquent\Relations\BelongsToMany;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 
@@ -47,10 +46,4 @@
     }
 
-    //ne mi treba ova zasho ne ide direktno kroz orders tuku kroz batches
-//    public function orders(): BelongsToMany
-//    {
-//        return $this->belongsToMany(Order::class, 'order_products', 'product_id', 'order_id');
-//    }
-
     public function batches(): HasMany
     {
Index: resources/js/Pages/Dashboard.vue
===================================================================
--- resources/js/Pages/Dashboard.vue	(revision 847485c09a11468c23071337f9f158a06a231285)
+++ resources/js/Pages/Dashboard.vue	(revision 8550ecf6aaf55f186758bc3b18093bd7ab99045d)
@@ -12,8 +12,75 @@
 }
 
+interface TopBuyer {
+    id: string;
+    company_name: string;
+    total_orders: number;
+    total_spent: number;
+}
+
+interface PendingOrder {
+    id: string;
+    company_name: string;
+    pending_orders: number;
+    total_pending_value: number;
+}
+
+interface OrderByCountry {
+    country: string;
+    total_orders: number;
+    total_revenue: number;
+}
+
+interface BestSellingProduct {
+    id: string;
+    product_name: string;
+    producer_name: string;
+    times_ordered: number;
+    total_revenue: number;
+}
+
+interface RevenueByProducer {
+    id: string;
+    company_name: string;
+    total_revenue: number;
+}
+
+interface UnpaidInvoice {
+    invoice_key: string;
+    invoice_date: string;
+    invoice_status: string;
+    payment_due_date: string;
+    payment_status: string;
+    buyer_id: string;
+    buyer_name: string;
+    billing_address: string;
+}
+
+interface PaymentStatusOverview {
+    payment_status: string;
+    count_payments: number;
+    total_amount: number;
+    percentage_of_payments: number;
+}
+
+interface PoorPerformingProduct {
+    id: string;
+    product_name: string;
+    producer_name: string;
+    order_count: number;
+}
+
 const props = defineProps<{
     currentRevenue: number;
     previousRevenue: number;
     monthlyRevenue: MonthlyRevenue[];
+    topBuyers: TopBuyer[];
+    pendingOrders: PendingOrder[];
+    ordersByCountry: OrderByCountry[];
+    bestSellingProducts: BestSellingProduct[];
+    revenueByProducer: RevenueByProducer[];
+    unpaidInvoices: UnpaidInvoice[];
+    paymentStatusOverview: PaymentStatusOverview[];
+    poorPerformingProducts: PoorPerformingProduct[];
 }>();
 
@@ -25,4 +92,20 @@
     return sign + pct.toFixed(1) + '%';
 });
+
+const totalPendingOrders = computed(() => {
+    return props.pendingOrders.reduce((sum, order) => sum + order.pending_orders, 0);
+});
+
+const totalPendingValue = computed(() => {
+    return props.pendingOrders.reduce((sum, order) => sum + order.total_pending_value, 0);
+});
+
+const totalUnpaidInvoices = computed(() => {
+    return props.unpaidInvoices.length;
+});
+
+const totalCountries = computed(() => {
+    return props.ordersByCountry.length;
+});
 </script>
 
@@ -30,6 +113,10 @@
     <Head title="Dashboard" />
     <App>
-        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
-            <Card>
+        <h1 class="text-3xl font-bold mb-6">Dashboard</h1>
+
+        <!-- Revenue & Key Metrics -->
+        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4 mb-6">
+            <!-- Total Revenue Card with Chart -->
+            <Card class="lg:col-span-2">
                 <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle class="text-sm font-medium">
@@ -49,47 +136,206 @@
                     </svg>
                 </CardHeader>
-
                 <CardContent>
                     <div class="text-2xl font-bold">
-                        ${{ props.currentRevenue.toLocaleString() }}
-                    </div>
-                    <p class="text-xs text-muted-foreground">
+                        ${{ currentRevenue.toLocaleString() }}
+                    </div>
+                    <p class="text-xs text-muted-foreground mb-4">
                         {{ revenueDelta }} from last month
                     </p>
 
-                    <!-- Line chart here -->
+                    <!-- Line chart inside the revenue card -->
                     <LineChart
-                        :labels="props.monthlyRevenue.map(r => r.month)"
-                        :data="props.monthlyRevenue.map(r => r.revenue)"
+                        :labels="monthlyRevenue.map(r => r.month)"
+                        :data="monthlyRevenue.map(r => r.revenue)"
                     />
                 </CardContent>
             </Card>
-            <Card>
-                <CardHeader
-                    class="flex flex-row items-center justify-between space-y-0 pb-2"
-                >
+
+            <Card>
+                <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
                     <CardTitle class="text-sm font-medium">
-                        Total Revenue
+                        Pending Orders
                     </CardTitle>
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        stroke="currentColor"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth="2"
-                        class="text-muted-foreground h-4 w-4"
-                    >
-                        <path
-                            d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"
-                        />
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                        <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
                     </svg>
                 </CardHeader>
                 <CardContent>
-                    <div class="text-2xl font-bold">$45,231.89</div>
-                    <p class="text-muted-foreground text-xs">
-                        +20.1% from last month
+                    <div class="text-2xl font-bold">{{ totalPendingOrders }}</div>
+                    <p class="text-xs text-muted-foreground">
+                        ${{ totalPendingValue.toLocaleString() }} total value
                     </p>
+                </CardContent>
+            </Card>
+
+            <Card>
+                <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle class="text-sm font-medium">
+                        Unpaid Invoices
+                    </CardTitle>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground">
+                        <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+                    </svg>
+                </CardHeader>
+                <CardContent>
+                    <div class="text-2xl font-bold">{{ totalUnpaidInvoices }}</div>
+                    <p class="text-xs text-muted-foreground">
+                        Requiring attention
+                    </p>
+                </CardContent>
+            </Card>
+        </div>
+
+        <!-- Payment Status Overview -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+            <!-- Payment Status Chart -->
+            <Card>
+                <CardHeader>
+                    <CardTitle>Payment Status Overview</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div class="space-y-2">
+                        <div v-for="status in paymentStatusOverview" :key="status.payment_status"
+                             class="flex justify-between items-center p-2 border rounded">
+                            <span class="capitalize">{{ status.payment_status }}</span>
+                            <div class="text-right">
+                                <div class="font-medium">{{ status.count_payments }} payments</div>
+                                <div class="text-sm text-muted-foreground">
+                                    {{ status.percentage_of_payments }}% • ${{ status.total_amount.toLocaleString() }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <!-- Active Countries -->
+            <Card>
+                <CardHeader>
+                    <CardTitle>Orders by Country</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div class="space-y-2">
+                        <div v-for="country in ordersByCountry.slice(0, 5)" :key="country.country"
+                             class="flex justify-between items-center p-2 border rounded">
+                            <span class="font-medium">{{ country.country || 'Unknown' }}</span>
+                            <div class="text-right">
+                                <div class="font-medium">{{ country.total_orders }} orders</div>
+                                <div class="text-sm text-muted-foreground">
+                                    ${{ country.total_revenue.toLocaleString() }}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+
+        <!-- Top Performers Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+            <!-- Top Buyers -->
+            <Card>
+                <CardHeader>
+                    <CardTitle>Top Buyers</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div class="space-y-3">
+                        <div v-for="buyer in topBuyers" :key="buyer.id"
+                             class="flex justify-between items-center p-3 border rounded">
+                            <div>
+                                <div class="font-medium">{{ buyer.company_name }}</div>
+                                <div class="text-sm text-muted-foreground">{{ buyer.total_orders }} orders</div>
+                            </div>
+                            <div class="text-right font-bold">
+                                ${{ buyer.total_spent.toLocaleString() }}
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <!-- Best Selling Products -->
+            <Card>
+                <CardHeader>
+                    <CardTitle>Best Selling Products</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div class="space-y-3">
+                        <div v-for="product in bestSellingProducts" :key="product.id"
+                             class="flex justify-between items-center p-3 border rounded">
+                            <div>
+                                <div class="font-medium">{{ product.product_name }}</div>
+                                <div class="text-sm text-muted-foreground">
+                                    {{ product.producer_name }} • {{ product.times_ordered }} orders
+                                </div>
+                            </div>
+                            <div class="text-right font-bold">
+                                ${{ product.total_revenue.toLocaleString() }}
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+
+        <!-- Additional Reports Section -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Revenue by Producer -->
+            <Card>
+                <CardHeader>
+                    <CardTitle>Top Producers</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div class="space-y-3">
+                        <div v-for="producer in revenueByProducer" :key="producer.id"
+                             class="flex justify-between items-center p-3 border rounded">
+                            <div class="font-medium">{{ producer.company_name }}</div>
+                            <div class="text-right font-bold">
+                                ${{ producer.total_revenue.toLocaleString() }}
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <!-- Pending Orders -->
+            <Card>
+                <CardHeader>
+                    <CardTitle>Pending Orders by Client</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div class="space-y-3">
+                        <div v-for="order in pendingOrders" :key="order.id"
+                             class="flex justify-between items-center p-3 border rounded">
+                            <div>
+                                <div class="font-medium">{{ order.company_name }}</div>
+                                <div class="text-sm text-muted-foreground">{{ order.pending_orders }} pending</div>
+                            </div>
+                            <div class="text-right font-bold text-orange-600">
+                                ${{ order.total_pending_value.toLocaleString() }}
+                            </div>
+                        </div>
+                    </div>
+                </CardContent>
+            </Card>
+
+            <!-- Poor Performing Products -->
+            <Card>
+                <CardHeader>
+                    <CardTitle>Products Needing Attention</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div class="space-y-3">
+                        <div v-for="product in poorPerformingProducts" :key="product.id"
+                             class="flex justify-between items-center p-3 border rounded">
+                            <div>
+                                <div class="font-medium">{{ product.product_name }}</div>
+                                <div class="text-sm text-muted-foreground">{{ product.producer_name }}</div>
+                            </div>
+                            <div class="text-right font-bold text-red-600">
+                                {{ product.order_count }} orders
+                            </div>
+                        </div>
+                    </div>
                 </CardContent>
             </Card>
Index: resources/js/components/ui/chart/LineChart.vue
===================================================================
--- resources/js/components/ui/chart/LineChart.vue	(revision 847485c09a11468c23071337f9f158a06a231285)
+++ resources/js/components/ui/chart/LineChart.vue	(revision 8550ecf6aaf55f186758bc3b18093bd7ab99045d)
@@ -1,15 +1,7 @@
 <script setup lang="ts">
+import { computed, watch, ref } from 'vue';
+import { Line } from 'vue-chartjs';
 import {
-    CategoryScale,
     Chart as ChartJS,
-    Filler,
-    LinearScale,
-    LineElement,
-    PointElement,
-    Tooltip,
-} from 'chart.js';
-import { Line } from 'vue-chartjs';
-
-ChartJS.register(
     LineElement,
     PointElement,
@@ -18,5 +10,8 @@
     Tooltip,
     Filler,
-);
+} from 'chart.js';
+import useTheme from '@/composables/useTheme';
+
+ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, Tooltip, Filler);
 
 const props = defineProps<{
@@ -25,5 +20,19 @@
 }>();
 
-const chartData = {
+const { theme } = useTheme();
+const isDark = computed(() => theme.value === 'dark');
+
+// Use a key that changes when theme changes
+const chartKey = ref(0);
+
+// Watch theme changes and force re-render
+watch(isDark, () => {
+    chartKey.value++;
+});
+
+const borderColor = computed(() => (isDark.value ? '#fff' : '#000'));
+const pointColor = computed(() => (isDark.value ? '#fff' : '#000'));
+
+const chartData = computed(() => ({
     labels: props.labels,
     datasets: [
@@ -31,16 +40,16 @@
             label: 'Revenue',
             data: props.data,
-            borderColor: '#000',
+            borderColor: borderColor.value,
             borderWidth: 2,
             tension: 0.3,
-            pointBackgroundColor: '#fff',
-            pointBorderColor: '#000',
+            pointBackgroundColor: pointColor.value,
+            pointBorderColor: borderColor.value,
             pointBorderWidth: 1.5,
             fill: false,
         },
     ],
-};
+}));
 
-const chartOptions = {
+const chartOptions = computed(() => ({
     responsive: true,
     maintainAspectRatio: false,
@@ -49,13 +58,11 @@
         tooltip: {
             enabled: true,
-            backgroundColor: '#111',
-            titleColor: '#fff',
-            bodyColor: '#fff',
+            backgroundColor: isDark.value ? '#111' : '#eee',
+            titleColor: isDark.value ? '#fff' : '#000',
+            bodyColor: isDark.value ? '#fff' : '#000',
         },
     },
     elements: {
-        line: {
-            borderDash: [3, 3], // dotted line
-        },
+        line: { borderDash: [2, 2] },
     },
     scales: {
@@ -63,10 +70,10 @@
         y: { display: false },
     },
-};
+}));
 </script>
 
 <template>
-    <div class="mt-4 h-20">
-        <Line :data="chartData" :options="chartOptions" />
+    <div style="height: 100px;">
+        <Line :key="chartKey" :data="chartData" :options="chartOptions" />
     </div>
 </template>
Index: resources/js/composables/useTheme.ts
===================================================================
--- resources/js/composables/useTheme.ts	(revision 847485c09a11468c23071337f9f158a06a231285)
+++ resources/js/composables/useTheme.ts	(revision 8550ecf6aaf55f186758bc3b18093bd7ab99045d)
@@ -1,10 +1,10 @@
 import { ref } from 'vue'
+
+// Create the ref OUTSIDE the function so it's shared across all calls
+const savedTheme = localStorage.getItem('theme') || 'light'
+const theme = ref(savedTheme)
 
 function useTheme() {
     console.log('useTheme function called')
-
-    // Load saved theme from localStorage, default to 'light'
-    const savedTheme = localStorage.getItem('theme') || 'light'
-    const theme = ref(savedTheme)
 
     const setTheme = (newTheme: string) => {
@@ -29,11 +29,11 @@
     }
 
-    // Initialize theme on load
-    const initTheme = () => {
+    // Initialize theme on load (but only once)
+    if (!theme.value) {
+        setTheme(savedTheme)
+    } else {
+        // Reapply the current theme
         setTheme(theme.value)
     }
-
-    // Initialize the theme when the composable is first used
-    initTheme()
 
     return {
Index: todo.txt
===================================================================
--- todo.txt	(revision 8550ecf6aaf55f186758bc3b18093bd7ab99045d)
+++ todo.txt	(revision 8550ecf6aaf55f186758bc3b18093bd7ab99045d)
@@ -0,0 +1,5 @@
+order
+da se naprai nov vue poseben za order
+da se naprai dugminja za generiranje na packing list i invoice od order
+payment da se reshi
+order batches, za sekoj order da se prikazhuvaat asociranite batches
