Update permission feature with edit and create role functionality

distribution_fe/app/(dashboard)/_components/analytics-sections.tsx

@@ -59,8 +59,15 @@ function Kpi({ title, value, footer }: { title: string; value: string; footer?:
 
 function LoadingGrid() {
   return (
-    <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
-      {Array.from({ length: 8 }).map((_, i) => <Skeleton key={i} className="h-[76px] rounded-xl" />)}
+    <div className="flex flex-col gap-3" aria-busy="true">
+      <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-6">
+        {Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="h-[76px] rounded-xl" />)}
+      </div>
+      <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <Skeleton key={i} className={`h-[262px] rounded-xl ${i % 3 === 0 ? 'md:col-span-2' : ''}`} />
+        ))}
+      </div>
     </div>
   )
 }
@@ -161,11 +168,11 @@ const sharePct = (v: number, total: number) => (total > 0 ? `${((v / total) * 10
 export function SalesSection({ range }: { range: DateRange }) {
   const { data: sales, loading } = useLoad<DashboardSalesSummary>(
     () => dashboardReports.sales(range), [range.from, range.to], 'Failed to load sales analytics')
-  const { data: products } = useLoad<ProductSalesRow[]>(
+  const { data: products, loading: productsLoading } = useLoad<ProductSalesRow[]>(
     () => productReports.sales({ ...range, pageSize: 10 }).then(r => getPaginatedItems(r)),
     [range.from, range.to], 'Failed to load product sales')
 
-  if (loading || !sales) return <LoadingGrid />
+  if (loading || productsLoading || !sales) return <LoadingGrid />
 
   const { current: c, previous: p } = sales.kpis
   const kpi = (title: string, key: keyof SalesKpis, money = true) => (
@@ -252,11 +259,11 @@ export function InventorySection({ range }: { range: DateRange }) {
   const { data: lowStock } = useLoad(
     () => productReports.stock({ lowStockOnly: true, pageSize: 50 }).then(r => getPaginatedItems(r)),
     [], 'Failed to load low-stock products')
-  const { data: movers } = useLoad<ProductSalesRow[]>(
+  const { data: movers, loading: moversLoading } = useLoad<ProductSalesRow[]>(
     () => productReports.sales({ ...range, pageSize: 50 }).then(r => getPaginatedItems(r)),
     [range.from, range.to], 'Failed to load product sales')
 
-  if (loading || !inv || !overview) return <LoadingGrid />
+  if (loading || moversLoading || !inv || !overview) return <LoadingGrid />
 
   const healthy = Math.max(0, overview.totalSkus - overview.lowStockCount - overview.outOfStockCount)
   const sold = (movers ?? []).map(r => ({ name: r.name, value: r.qtyFulfilled }))