lastest dashboard changes

src/pages/ModernDashboard.tsx

@@ -681,7 +681,7 @@ const CompletionRateCard: React.FC<{
     : '0.00';
   
   return (
-    <div className="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-all p-5 border border-gray-200 dark:border-gray-700">
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-md transition-all px-5 border border-gray-200 dark:border-gray-700">
       <div className="mb-3">
       <div className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">{completionRate}%</div>
       <div className="text-sm font-medium text-indigo-600 dark:text-indigo-400 mb-1">Completion Rate</div>
@@ -692,7 +692,7 @@ const CompletionRateCard: React.FC<{
       </div>
       
       {/* Mini Stats */}
-      <div className="grid grid-cols-3 gap-3 mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
+      <div className="grid grid-cols-3 gap-3 mt-2 pt-2 mb-2 pb-2 border-t border-gray-200 dark:border-gray-700">
         <div className="text-center">
         <div className="text-lg font-semibold text-indigo-600 dark:text-indigo-400">{totalWorkOrders}</div>
         <div className="text-[9px] font-medium text-gray-500 dark:text-gray-400 uppercase">Total</div>
@@ -995,14 +995,17 @@ const BarChart: React.FC<{ data: any }> = ({ data }) => {
   const allValues = datasets.flatMap((ds: any) => ds.values || []);
   const max = Math.max(...allValues, 1);
   const chartHeight = 250;
-  const width = 800;
+  // Increase width based on number of labels to prevent overlap
+  const minBarSpacing = 60; // Minimum spacing between bars
+  const calculatedWidth = Math.max(800, labels.length * minBarSpacing + 100);
+  const width = calculatedWidth;
 
   // Generate smooth line data (Average line overlay)
   const lineData = datasets[0]?.values || [];
 
   return (
-    <div className="relative w-full">
-      <svg width="100%" height="280" viewBox={`0 0 ${width} ${chartHeight + 30}`} className="w-full">
+    <div className="relative w-full overflow-x-auto">
+      <svg width="100%" height="320" viewBox={`0 0 ${width} ${chartHeight + 70}`} className="w-full" preserveAspectRatio="xMidYMid meet">
         <defs>
           <linearGradient id="barGradient" x1="0%" y1="0%" x2="0%" y2="100%">
             <stop offset="0%" style={{ stopColor: '#8B5CF6', stopOpacity: 0.8 }} />
@@ -1095,16 +1098,20 @@ const BarChart: React.FC<{ data: any }> = ({ data }) => {
 
         {/* X-axis labels */}
         {labels.map((label: string, i: number) => {
-          const x = 80 + (i * ((width - 100) / labels.length)) + 20;
+          const barSpacing = (width - 100) / labels.length;
+          const x = 80 + (i * barSpacing) + (barSpacing / 2);
+          const truncatedLabel = label && label.length > 15 ? label.substring(0, 13) + '...' : label || 'null';
+          
           return (
             <text
               key={i}
               x={x}
-              y={chartHeight + 20}
+              y={chartHeight + 50}
+              transform={`rotate(-45, ${x}, ${chartHeight + 50})`}
               textAnchor="middle"
               className="text-xs fill-gray-600 dark:fill-gray-400"
             >
-              {label}
+              {truncatedLabel}
             </text>
           );
         })}

vite.config.ts

@@ -6,6 +6,9 @@ export default defineConfig({
   plugins: [react()],
   server: {
     port: 3000,
+    allowedHosts: [
+      'monotriglyphic-uniformless-rema.ngrok-free.dev'
+    ],
     proxy: {
       // Proxy API requests to Frappe backend
       '/api': {