worked on theme

src/components/dv/GridTable.tsx

@@ -12,7 +12,7 @@ export function GridTable({ data, columns, onEdit, onDelete }: GridTableProps) {
   return (
     <div className="w-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-x-auto">
       <table className="w-full text-sm text-left whitespace-nowrap">
-        <thead className="bg-white border-b border-slate-100 text-[11px] font-bold text-slate-500 uppercase tracking-wider">
+        <thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider">
           <tr>
             {columns.map((col, idx) => (
               <th key={col.id || idx} className={`px-6 py-4 ${col.data_type === 'number' ? 'text-center' : ''}`}>{col.name}</th>
@@ -35,7 +35,7 @@ export function GridTable({ data, columns, onEdit, onDelete }: GridTableProps) {
                 
                 const isNumeric = col.data_type === 'number';
                 return (
-                  <td key={col.id || colIdx} className={`px-6 py-4 font-bold text-slate-800 ${isNumeric ? 'text-center text-[15px]' : 'text-[14.5px]'}`}>
+                  <td key={col.id || colIdx} className={`px-6 py-4 font-normal text-slate-600 ${isNumeric ? 'text-center text-[15px]' : 'text-[14.5px]'}`}>
                     {displayVal}
                   </td>
                 );

src/components/dv/PotentialMiningTable.tsx

@@ -24,7 +24,7 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails
   return (
     <div className="w-full bg-white rounded-lg shadow-sm border border-slate-200 overflow-x-auto">
       <table className="w-full text-sm text-left whitespace-nowrap">
-        <thead className="bg-white border-b border-slate-100 text-[11px] font-bold text-slate-500 uppercase tracking-wider">
+        <thead className="bg-slate-100 border-b border-slate-200 text-[11px] font-bold text-slate-700 uppercase tracking-wider">
           <tr>
             <th className="px-6 py-4">Product</th>
             <th className="px-6 py-4 text-center">Potential (Kgs)</th>
@@ -49,7 +49,7 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails
               <tr key={item.id} className="hover:bg-slate-50 transition-colors bg-white group">
                 <td className="px-6 py-4">
                   <div className="flex items-center gap-3">
-                    <span className="font-bold text-slate-800 text-sm">{item.productName}</span>
+                    <span className="font-normal text-slate-600 text-sm">{item.productName}</span>
                     {item.badge && (
                       <span className={cn(
                         "px-2 py-0.5 rounded text-[11px] font-semibold whitespace-nowrap",
@@ -64,12 +64,12 @@ export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails
                     )}
                   </div>
                 </td>
-                <td className="px-6 py-4 text-center text-slate-700 font-medium text-base">
+                <td className="px-6 py-4 text-center text-slate-600 font-normal text-base">
                   {item.potentialKgs}
                 </td>
                 {!hideOrderDetails && (
                   <>
-                    <td className="px-6 py-4 text-center text-slate-700 font-medium text-base">
+                    <td className="px-6 py-4 text-center text-slate-600 font-normal text-base">
                       {item.orderedKgs}
                     </td>
                     <td className="px-6 py-4">

src/components/forms/DynamicForm.tsx

@@ -27,10 +27,11 @@ export interface DynamicFormProps {
   onCancel?: () => void;
   ignorePrefill?: boolean;
   customPrefillData?: Record<string, unknown>;
+  initialActivityName?: string;
   onActivityChange?: (name: string) => void;
 }
 
-export function DynamicForm({ client, activityId: initialActivityId, instanceId: initialInstanceId, onSuccess, onCancel, ignorePrefill, customPrefillData, onActivityChange }: DynamicFormProps) {
+export function DynamicForm({ client, activityId: initialActivityId, instanceId: initialInstanceId, onSuccess, onCancel, ignorePrefill, customPrefillData, initialActivityName, onActivityChange }: DynamicFormProps) {
   const [currentActivityId, setCurrentActivityId] = useState(initialActivityId);
   const [currentInstanceId, setCurrentInstanceId] = useState<number | string | undefined>(initialInstanceId);
   const [chainQueue, setChainQueue] = useState<Array<{ activity_uid: string; activity_name: string }>>([]);
@@ -164,10 +165,7 @@ export function DynamicForm({ client, activityId: initialActivityId, instanceId:
   };
 
   if (loading) {
-    const formattedActivity = currentActivityId
+    return <div className="p-8 flex justify-center"><Spinner label={initialActivityName || 'Loading...'} /></div>;
-      ? currentActivityId.split('_').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
-      : 'form';
-    return <div className="p-8 flex justify-center"><Spinner label={`Loading ${formattedActivity}...`} /></div>;
   }
   if (error || !schema) {
     return <div className="p-4 text-ruby-600">Failed to load form: {error}</div>;

src/components/rv/RecordView.tsx

@@ -256,7 +256,7 @@ export function RecordView({
               <tbody>
                 {rows.map((row, i) => (
                   <tr
-                    key={rowKey ? rowKey(row, i) : String(row.instance_id ?? i)}
+                    key={rowKey ? rowKey(row, i) : `${row.instance_id ?? 'row'}-${i}`}
                     onClick={onRowClick ? () => onRowClick(row, i) : undefined}
                     className={cn(
                       'bg-[var(--z-rv-table-bg)] border-b border-[var(--z-rv-table-border)] transition-colors duration-150',

src/screens/CallsPage.tsx

@@ -15,7 +15,7 @@ export function CallsPage() {
   const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
   const navigate = useNavigate();
   const [isCreating, setIsCreating] = useState(false);
-  const [createTitle, setCreateTitle] = useState(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
+  const [createTitle, setCreateTitle] = useState('Log Visit');
   const [refreshKey, setRefreshKey] = useState(0);
   const [activeActivity, setActiveActivity] = useState<{ id: string; name: string } | null>(null);
 
@@ -92,7 +92,7 @@ export function CallsPage() {
         }} 
         headerActions={
           <Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
-            setCreateTitle(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
+            setCreateTitle('Log Visit');
             setIsCreating(true);
           }}>
             Log Visit
@@ -109,6 +109,7 @@ export function CallsPage() {
         <DynamicForm 
           client={orderBookingClient} 
           activityId={ORDER_BOOKING.activities.LOG_VISIT.uid}
+          initialActivityName="Log Visit"
           onSuccess={() => {
             setIsCreating(false);
             setRefreshKey(k => k + 1);
@@ -180,6 +181,7 @@ export function CallsPage() {
             client={orderBookingClient}
             activityId={activeActivity.id}
             instanceId={instanceId}
+            initialActivityName={activeActivity.name}
             ignorePrefill={activeActivity.id === ORDER_BOOKING.activities.PLACE_ORDER.uid}
             customPrefillData={activeActivity.id === ORDER_BOOKING.activities.POTENTIAL_MINING.uid ? miningPrefill : undefined}
             onSuccess={() => {

src/screens/DailyLogsPage.tsx

@@ -15,9 +15,9 @@ export function DailyLogsPage() {
   const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
   const navigate = useNavigate();
   const [isCreating, setIsCreating] = useState(false);
-  const [createTitle, setCreateTitle] = useState(formatActivityName(DAILY_REPORTS.activities.INIT.uid));
+  const [createTitle, setCreateTitle] = useState('Punch In');
   const [punchOutInstanceId, setPunchOutInstanceId] = useState<number | string | null>(null);
-  const [punchOutTitle, setPunchOutTitle] = useState(formatActivityName(DAILY_REPORTS.activities.PUNCH_OUT.uid));
+  const [punchOutTitle, setPunchOutTitle] = useState('Punch Out');
   const [refreshKey, setRefreshKey] = useState(0);
 
   return (
@@ -31,7 +31,7 @@ export function DailyLogsPage() {
         }} 
         headerActions={
           <Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
-            setCreateTitle(formatActivityName(DAILY_REPORTS.activities.INIT.uid));
+            setCreateTitle('Punch In');
             setIsCreating(true);
           }}>
             Punch In
@@ -44,7 +44,7 @@ export function DailyLogsPage() {
           
           return (
             <Button size="sm" variant="secondary" onClick={() => {
-              setPunchOutTitle(formatActivityName(DAILY_REPORTS.activities.PUNCH_OUT.uid));
+              setPunchOutTitle('Punch Out');
               setPunchOutInstanceId(row.instance_id as string | number);
             }}>
               Punch Out
@@ -62,6 +62,7 @@ export function DailyLogsPage() {
         <DynamicForm 
           client={dailyReportsClient} 
           activityId={DAILY_REPORTS.activities.INIT.uid}
+          initialActivityName="Punch In"
           onSuccess={() => {
             setIsCreating(false);
             setRefreshKey(k => k + 1);
@@ -82,6 +83,7 @@ export function DailyLogsPage() {
             client={dailyReportsClient} 
             activityId={DAILY_REPORTS.activities.PUNCH_OUT.uid}
             instanceId={punchOutInstanceId}
+            initialActivityName="Punch Out"
             onSuccess={() => {
               setPunchOutInstanceId(null);
               setRefreshKey(k => k + 1);

src/screens/MyOrdersPage.tsx

@@ -16,7 +16,7 @@ export function MyOrdersPage() {
   const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
   const navigate = useNavigate();
   const [isCreating, setIsCreating] = useState(false);
-  const [createTitle, setCreateTitle] = useState(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
+  const [createTitle, setCreateTitle] = useState('Place Order');
   const [refreshKey, setRefreshKey] = useState(0);
 
   const { userEmail } = useAuth();
@@ -33,7 +33,7 @@ export function MyOrdersPage() {
         }} 
         headerActions={
           <Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
-            setCreateTitle(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
+            setCreateTitle('Place Order');
             setIsCreating(true);
           }}>
             Place Order
@@ -50,6 +50,7 @@ export function MyOrdersPage() {
         <DynamicForm 
           client={orderBookingClient} 
           activityId={ORDER_BOOKING.activities.LOG_VISIT.uid}
+          initialActivityName="Place Order"
           onSuccess={() => {
             setIsCreating(false);
             setRefreshKey(k => k + 1);

src/screens/OrdersPage.tsx

@@ -15,7 +15,7 @@ export function OrdersPage() {
   const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
   const navigate = useNavigate();
   const [isCreating, setIsCreating] = useState(false);
-  const [createTitle, setCreateTitle] = useState(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
+  const [createTitle, setCreateTitle] = useState('Place Order');
   const [refreshKey, setRefreshKey] = useState(0);
   return (
     <>
@@ -27,7 +27,7 @@ export function OrdersPage() {
         }} 
         headerActions={
           <Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
-            setCreateTitle(formatActivityName(ORDER_BOOKING.activities.LOG_VISIT.uid));
+            setCreateTitle('Place Order');
             setIsCreating(true);
           }}>
             Place Order
@@ -44,6 +44,7 @@ export function OrdersPage() {
         <DynamicForm 
           client={orderBookingClient} 
           activityId={ORDER_BOOKING.activities.LOG_VISIT.uid}
+          initialActivityName="Place Order"
           onSuccess={() => {
             setIsCreating(false);
             setRefreshKey(k => k + 1);

src/screens/StoresPage.tsx

@@ -15,9 +15,9 @@ export function StoresPage() {
   const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
   const navigate = useNavigate();
   const [isCreating, setIsCreating] = useState(false);
-  const [createTitle, setCreateTitle] = useState(formatActivityName(STORE.activities.INIT.uid));
+  const [createTitle, setCreateTitle] = useState('Create Store');
   const [editingInstanceId, setEditingInstanceId] = useState<number | string | null>(null);
-  const [editTitle, setEditTitle] = useState(formatActivityName(STORE.activities.EDIT_STORE.uid));
+  const [editTitle, setEditTitle] = useState('Edit Store');
   const [refreshKey, setRefreshKey] = useState(0);
 
   return (
@@ -30,7 +30,7 @@ export function StoresPage() {
         }} 
         headerActions={
           <Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
-            setCreateTitle(formatActivityName(STORE.activities.INIT.uid));
+            setCreateTitle('Create Store');
             setIsCreating(true);
           }}>
             Create Store
@@ -38,7 +38,7 @@ export function StoresPage() {
         }
         rowActions={(row) => (
           <Button size="sm" variant="secondary" onClick={() => {
-            setEditTitle(formatActivityName(STORE.activities.EDIT_STORE.uid));
+            setEditTitle('Edit Store');
             setEditingInstanceId(row.instance_id as string | number);
           }}>
             Edit
@@ -55,6 +55,7 @@ export function StoresPage() {
         <DynamicForm 
           client={storeClient} 
           activityId={STORE.activities.INIT.uid}
+          initialActivityName="Create Store"
           onSuccess={() => {
             setIsCreating(false);
             setRefreshKey(k => k + 1);
@@ -75,6 +76,7 @@ export function StoresPage() {
             client={storeClient} 
             activityId={STORE.activities.EDIT_STORE.uid}
             instanceId={editingInstanceId}
+            initialActivityName="Edit Store"
             onSuccess={() => {
               setEditingInstanceId(null);
               setRefreshKey(k => k + 1);

src/styles/styles.css

@@ -236,9 +236,9 @@
   --tiles-count-size: 20px;
 
   /* button */
-  --z-btn-primary-bg: linear-gradient(91deg, #1b37a5 0.17%, #2e56e1 99.89%);
+  --z-btn-primary-bg: #0058be;
   --z-btn-primary-color: #fff;
-  --primary-btn-active: linear-gradient(91deg, #3553c5 0.17%, #4a70f3 99.89%);
+  --primary-btn-active: #0059bed8;
   --primary-btn-activeClr: #fff;
   --z-btn-secondary-bg: #f4f4f4;
   --z-btn-secondary-color: #10182b;