made outline no border

src/components/forms/DynamicForm.tsx

@@ -577,6 +577,13 @@ export function DynamicForm({ client, activityId: initialActivityId, instanceId:
 
       for (const f of fields) {
         const val = finalValues[f.id];
+        const isRemark = (f.name || '').toLowerCase().includes('remark') || (f.name || '').toLowerCase().includes('note');
+        
+        if (isRemark && (val == null || val === '')) {
+          payload[f.id] = '';
+          continue;
+        }
+
         if (val == null) continue;
 
         if (f.data_type === 'phone' && typeof val === 'string') {

src/components/forms/LogVisitForm.tsx

@@ -343,7 +343,11 @@ export function LogVisitForm({ client, onSuccess, onCancel, onActivityChange }:
       const payload: Record<string, any> = {};
       validFieldIds.forEach(fieldId => {
         const val = valuesRef.current[fieldId];
-        if (val !== undefined && val !== null && val !== '') {
+        const isRemark = fieldId.toLowerCase().includes('remark') || fieldId.toLowerCase().includes('note');
+        
+        if (isRemark && (val === undefined || val === null || val === '')) {
+          payload[fieldId] = '';
+        } else if (val !== undefined && val !== null && val !== '') {
           payload[fieldId] = val;
         }
       });

src/components/reusable/AnalyticsChart.tsx

@@ -203,9 +203,9 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                   </table>
                 </div>
               ) : (
-                <ResponsiveContainer width="100%" height="100%">
+                <ResponsiveContainer width="100%" height="100%" className="focus:outline-none [&_.recharts-wrapper]:outline-none [&_.recharts-surface]:outline-none" style={{ outline: 'none' }}>
                   {chartType === 3 || chartType === 4 ? (
-                    <PieChart margin={{ top: 10, right: 10, left: 10, bottom: 10 }}>
+                    <PieChart margin={{ top: 10, right: 10, left: 10, bottom: 10 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
                       <Tooltip 
                         contentStyle={{ borderRadius: '8px', border: '1px solid #E2E8F0', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)', fontSize: '14px', fontFamily: 'inherit' }}
                         itemStyle={{ color: '#0F172A', fontWeight: '500' }}
@@ -219,22 +219,25 @@ export function AnalyticsChart({ data, gridCols }: AnalyticsChartProps) {
                         cy="50%"
                         outerRadius={100}
                         innerRadius={chartType === 4 ? 65 : 0}
+                        style={{ outline: 'none' }}
+                        activeShape={false}
+                        className="focus:outline-none outline-none"
                       >
                         {finalData.map((_, index) => (
-                          <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
+                          <Cell key={`cell-${index}`} fill={colors[index % colors.length]} style={{ outline: 'none' }} className="focus:outline-none outline-none" />
                         ))}
                       </Pie>
                     </PieChart>
                   ) : chartType === 1 ? (
-                    <LineChart data={finalData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+                    <LineChart data={finalData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
                       {renderChartContent()}
                     </LineChart>
                   ) : chartType === 2 ? (
-                    <AreaChart data={finalData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+                    <AreaChart data={finalData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
                       {renderChartContent()}
                     </AreaChart>
                   ) : (
-                    <BarChart data={finalData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+                    <BarChart data={finalData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }} className="focus:outline-none outline-none" style={{ outline: 'none' }}>
                       {renderChartContent()}
                     </BarChart>
                   )}

src/index.css

@@ -109,3 +109,9 @@ code {
   padding: 4px 8px;
   background: var(--code-bg);
 }
+
+/* Remove black border on recharts when clicking */
+.recharts-wrapper, 
+.recharts-wrapper * {
+  outline: none !important;
+}