my screens for logs calls done

src/App.tsx

@@ -5,8 +5,10 @@ import { ConsoleLayout } from './screens/ConsoleLayout'
 import { OrdersPage } from './screens/OrdersPage'
 import { MyOrdersPage } from './screens/MyOrdersPage'
 import { CallsPage } from './screens/CallsPage'
+import { MyCallsPage } from './screens/MyCallsPage'
 import { StoresPage } from './screens/StoresPage'
 import { DailyLogsPage } from './screens/DailyLogsPage'
+import { MyDailyLogsPage } from './screens/MyDailyLogsPage'
 import { DailySalesReportPage } from './screens/DailySalesReportPage'
 import { ReportPage } from './screens/ReportPage'
 
@@ -26,12 +28,18 @@ function App() {
             <Route path="calls" element={<CallsPage />} />
             <Route path="calls/:instanceId" element={<CallsPage />} />
 
+            <Route path="my-calls" element={<MyCallsPage />} />
+            <Route path="my-calls/:instanceId" element={<MyCallsPage />} />
+
             <Route path="stores" element={<StoresPage />} />
             <Route path="stores/:instanceId" element={<StoresPage />} />
 
             <Route path="daily" element={<DailyLogsPage />} />
             <Route path="daily/:instanceId" element={<DailyLogsPage />} />
 
+            <Route path="my-daily" element={<MyDailyLogsPage />} />
+            <Route path="my-daily/:instanceId" element={<MyDailyLogsPage />} />
+
             <Route path="reports/:reportType" element={<ReportPage />} />
             <Route path="sales-report" element={<DailySalesReportPage />} />
             <Route path="*" element={<Navigate to="/orders" replace />} />

src/components/rv/CallsView.tsx

@@ -4,7 +4,7 @@ import { RecordView } from './RecordView';
 import type { WiredRecordViewProps } from './OrdersView';
 
 /** Calls record view (Calls/Visits workflow). */
-export function CallsView({ onRowClick, pageSize, headerActions, rowActions, refreshKey }: WiredRecordViewProps) {
+export function CallsView({ onRowClick, pageSize, headerActions, rowActions, refreshKey, initialFilters, presetAlias }: WiredRecordViewProps) {
   return (
     <RecordView
       client={orderBookingClient}
@@ -18,6 +18,8 @@ export function CallsView({ onRowClick, pageSize, headerActions, rowActions, ref
       sortBy="instance_id"
       sortDir="desc"
       omitColumns={['instance_id']}
+      initialFilters={initialFilters}
+      presetAlias={presetAlias}
     />
   );
 }

src/components/rv/DailyLogsView.tsx

@@ -4,7 +4,7 @@ import { RecordView } from './RecordView';
 import type { WiredRecordViewProps } from './OrdersView';
 
 /** Daily Logs record view (Daily Reports workflow). */
-export function DailyLogsView({ onRowClick, pageSize, headerActions, rowActions, refreshKey, presetAlias, mapComponent }: WiredRecordViewProps) {
+export function DailyLogsView({ onRowClick, pageSize, headerActions, rowActions, refreshKey, presetAlias, initialFilters, mapComponent }: WiredRecordViewProps) {
   return (
     <RecordView
       client={dailyReportsClient}
@@ -16,6 +16,7 @@ export function DailyLogsView({ onRowClick, pageSize, headerActions, rowActions,
       rowActions={rowActions}
       refreshKey={refreshKey}
       presetAlias={presetAlias}
+      initialFilters={initialFilters}
       mapComponent={mapComponent}
     />
   );

src/screens/MyCallsPage.tsx

@@ -0,0 +1,207 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { Modal } from '../components/reusable';
+import { CallsView } from '../components/rv';
+import { CallDetail } from '../components/dv';
+import { useEffect, useState } from 'react';
+import { Button } from '../components/buttons/Button';
+import { Plus } from 'lucide-react';
+import { DynamicForm } from '../components/forms/DynamicForm';
+import { ORDER_BOOKING } from '../api/config';
+import { orderBookingClient } from '../api/clients';
+import { useAuth } from '../auth/context';
+
+export function MyCallsPage() {
+  const params = useParams();
+  const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
+  const navigate = useNavigate();
+  const [isCreating, setIsCreating] = useState(false);
+  const [createTitle, setCreateTitle] = useState('Log Visit');
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [activeActivity, setActiveActivity] = useState<{ id: string; name: string } | null>(null);
+
+  const [selectedRow, setSelectedRow] = useState<Record<string, any> | null>(null);
+  const [miningLoading, setMiningLoading] = useState(false);
+  const [miningPrefill, setMiningPrefill] = useState<Record<string, unknown> | undefined>();
+
+  const { userEmail } = useAuth();
+
+  useEffect(() => {
+    if (instanceId != null) {
+      orderBookingClient.recordView(ORDER_BOOKING.recordViews.CALLS, {
+        page: 1,
+        limit: 1,
+        filters: [{ field_key: 'instance_id', value: String(instanceId), data_type: 'number' }]
+      }).then(res => {
+        if (res.data && res.data.length > 0) {
+          setSelectedRow(res.data[0]);
+        }
+      }).catch(err => console.error("Failed to fetch selected row:", err));
+    }
+  }, [instanceId, refreshKey]);
+
+  const handlePotentialMiningClick = async () => {
+    setMiningLoading(true);
+    setMiningPrefill(undefined);
+    try {
+      const storeCode = selectedRow?.store_code || selectedRow?.code || selectedRow?.store?.store_code;
+
+      if (!storeCode) {
+        console.warn("Store code not found on selected row, proceeding anyway.");
+      }
+
+      const payload = {
+        store_code: storeCode,
+        instance_id: String(instanceId)
+      };
+
+      const response = await orderBookingClient.request<{ potential: { potential: any[] } }>(
+        'POST',
+        '/api/papi2/potential-mining',
+        payload,
+        { 'TemplateID': '146' }
+      );
+
+      const rawPotential = response.potential?.potential || [];
+      const mappedPotential = rawPotential.map((row: any) => {
+        const cat = row.product_category || row.product_category_ || row.category;
+        return {
+          ...row,
+          product_category_: cat,
+          product_category: cat,
+          productcategory: cat,
+          category: cat,
+          product_category_1: cat
+        };
+      });
+
+      setMiningPrefill({ potential: mappedPotential });
+      setActiveActivity({ id: ORDER_BOOKING.activities.POTENTIAL_MINING.uid, name: 'Potential Mining' });
+    } catch (e: any) {
+      alert("Failed to fetch potential mining data: " + (e.message || "Unknown error"));
+    } finally {
+      setMiningLoading(false);
+    }
+  };
+
+  if (instanceId != null) {
+    return (
+      <div className="w-full">
+        <div>
+          {selectedRow ? (
+            <CallDetail 
+              instanceId={instanceId} 
+              onBack={() => navigate('/my-calls')}
+              selectedRow={selectedRow}
+              refreshKey={refreshKey}
+              potentialMiningAction={
+                <Button size="sm" variant="secondary" className="w-48 max-w-full" onClick={handlePotentialMiningClick} disabled={miningLoading}>
+                  {miningLoading ? 'Loading...' : 'Potential Mining'}
+                </Button>
+              }
+              placeOrderAction={
+                (() => {
+                  const stateName = String(selectedRow.current_state_name || selectedRow.current_state_name_ || selectedRow.current_state || selectedRow.status || '').toLowerCase();
+                  if (stateName === 'no order' || stateName === 'no_order') {
+                    return null;
+                  } else if (stateName.includes('ordered') || stateName === 'ordered' || stateName.includes('order')) {
+                    return (
+                      <Button onClick={() => setActiveActivity({ id: ORDER_BOOKING.activities.EDIT_ORDER.uid, name: 'Edit Order' })}>
+                        Edit Order
+                      </Button>
+                    );
+                  } else if (stateName.includes('visited')) {
+                    return (
+                      <Button onClick={() => setActiveActivity({ id: ORDER_BOOKING.activities.PRODUCTIVITY_OF_VISIT.uid, name: 'Productivity of Visit' })}>
+                        Productivity of Visit
+                      </Button>
+                    );
+                  } else if (stateName.includes('productive')) {
+                    return (
+                      <Button onClick={() => setActiveActivity({ id: ORDER_BOOKING.activities.PLACE_ORDER.uid, name: 'Place Order' })}>
+                        Place Order
+                      </Button>
+                    );
+                  }
+                  return (
+                    <Button onClick={() => setActiveActivity({ id: ORDER_BOOKING.activities.PLACE_ORDER.uid, name: 'Place Order' })}>
+                      Place Order
+                    </Button>
+                  );
+                })()
+              }
+            />
+          ) : (
+            <div className="p-8 text-center text-slate-500">Loading call details...</div>
+          )}
+        </div>
+        
+        {/* Active Activity Modal (for actions) */}
+        <Modal
+          open={activeActivity != null}
+          onClose={() => setActiveActivity(null)}
+          title={activeActivity?.name}
+          width={activeActivity?.id === ORDER_BOOKING.activities.POTENTIAL_MINING.uid ? 'lg' : 'md'}
+        >
+          {activeActivity && instanceId != null && (
+            <DynamicForm
+              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={() => {
+                setActiveActivity(null);
+                setRefreshKey(k => k + 1);
+              }}
+              onCancel={() => setActiveActivity(null)}
+              onActivityChange={(name) => setActiveActivity(prev => prev ? { ...prev, name } : null)}
+            />
+          )}
+        </Modal>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <CallsView 
+        refreshKey={refreshKey}
+        presetAlias="my_calls"
+        initialFilters={userEmail ? { performed_by_email: userEmail } : undefined}
+        onRowClick={(row) => {
+          setSelectedRow(row);
+          const id = row.instance_id as number | string | undefined;
+          if (id != null) navigate(`/my-calls/${id}`);
+        }} 
+        headerActions={
+          <Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
+            setCreateTitle('Log Visit');
+            setIsCreating(true);
+          }}>
+            Log Visit
+          </Button>
+        }
+      />
+
+      <Modal
+        open={isCreating}
+        onClose={() => setIsCreating(false)}
+        title={createTitle}
+        width="md"
+      >
+        <DynamicForm 
+          client={orderBookingClient} 
+          activityId={ORDER_BOOKING.activities.LOG_VISIT.uid}
+          initialActivityName="Log Visit"
+          onSuccess={() => {
+            setIsCreating(false);
+            setRefreshKey(k => k + 1);
+          }}
+          onCancel={() => setIsCreating(false)}
+          onActivityChange={setCreateTitle}
+        />
+      </Modal>
+    </>
+  );
+}

src/screens/MyDailyLogsPage.tsx

@@ -0,0 +1,135 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { Modal } from '../components/reusable';
+import { DailyLogsView } from '../components/rv';
+import { DailyLogDetail } from '../components/dv';
+import { useState } from 'react';
+import { Button } from '../components/buttons/Button';
+import { Plus, MapPin } from 'lucide-react';
+import { DynamicForm } from '../components/forms/DynamicForm';
+import { DAILY_REPORTS } from '../api/config';
+import { dailyReportsClient } from '../api/clients';
+import { useAuth } from '../auth/context';
+
+export function MyDailyLogsPage() {
+  const params = useParams();
+  const instanceId = params.instanceId ? Number(params.instanceId) : undefined;
+  const navigate = useNavigate();
+  const [isCreating, setIsCreating] = useState(false);
+  const [createTitle, setCreateTitle] = useState('Punch In');
+  const [punchOutInstanceId, setPunchOutInstanceId] = useState<number | string | null>(null);
+  const [punchOutTitle, setPunchOutTitle] = useState('Punch Out');
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const { userEmail } = useAuth();
+
+  const mapComponent = (
+    <div className="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden flex flex-col h-full min-h-[320px]">
+      <div className="p-4 border-b border-slate-100 flex items-center gap-2">
+         <MapPin size={18} className="text-slate-400" />
+         <h3 className="text-slate-800 font-bold">Activity Locations</h3>
+      </div>
+      <div className="flex-1 relative bg-slate-50">
+         <iframe
+            title="Logs Map"
+            width="100%"
+            height="100%"
+            style={{ border: 0, position: 'absolute', inset: 0 }}
+            loading="lazy"
+            allowFullScreen
+            src="https://maps.google.com/maps?q=activity&hl=en&z=10&output=embed"
+         ></iframe>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {instanceId == null && (
+        <DailyLogsView 
+          mapComponent={mapComponent}
+          refreshKey={refreshKey}
+          presetAlias="my_logs"
+          initialFilters={userEmail ? { performed_by_email: userEmail } : undefined}
+          onRowClick={(row) => {
+            const id = row.instance_id as number | string | undefined;
+            if (id != null) navigate(`/my-daily/${id}`);
+          }} 
+          headerActions={
+            <Button size="sm" iconLeft={<Plus size={14} />} onClick={() => {
+              setCreateTitle('Punch In');
+              setIsCreating(true);
+            }}>
+              Punch In
+            </Button>
+          }
+          rowActions={(row) => {
+            const state = String(row.current_state_name || row.current_state_name_ || row.current_state || row.status || '').toLowerCase();
+            // Show only for Punched In, hide for Punched Out or others
+            if (state.includes('out') || !state.includes('in')) return null;
+            
+            return (
+              <Button size="sm" variant="secondary" onClick={() => {
+                setPunchOutTitle('Punch Out');
+                setPunchOutInstanceId(row.instance_id as string | number);
+              }}>
+                Punch Out
+              </Button>
+            );
+          }}
+        />
+      )}
+
+      <Modal
+        open={isCreating}
+        onClose={() => setIsCreating(false)}
+        title={createTitle}
+        width="md"
+      >
+        <DynamicForm 
+          client={dailyReportsClient} 
+          activityId={DAILY_REPORTS.activities.INIT.uid}
+          initialActivityName="Punch In"
+          onSuccess={() => {
+            setIsCreating(false);
+            setRefreshKey(k => k + 1);
+          }}
+          onCancel={() => setIsCreating(false)}
+          onActivityChange={setCreateTitle}
+        />
+      </Modal>
+
+      <Modal
+        open={punchOutInstanceId != null}
+        onClose={() => setPunchOutInstanceId(null)}
+        title={punchOutTitle}
+        width="md"
+      >
+        {punchOutInstanceId != null && (
+          <DynamicForm 
+            client={dailyReportsClient} 
+            activityId={DAILY_REPORTS.activities.PUNCH_OUT.uid}
+            instanceId={punchOutInstanceId}
+            initialActivityName="Punch Out"
+            onSuccess={() => {
+              setPunchOutInstanceId(null);
+              setRefreshKey(k => k + 1);
+            }}
+            onCancel={() => setPunchOutInstanceId(null)}
+            onActivityChange={setPunchOutTitle}
+          />
+        )}
+      </Modal>
+
+      {instanceId != null && (
+        <div className="w-full">
+          <DailyLogDetail 
+             instanceId={instanceId}
+             refreshKey={refreshKey}
+             onPunchOut={() => setPunchOutInstanceId(instanceId)} 
+             onBack={() => navigate('/my-daily')} 
+          />
+        </div>
+      )}
+    </>
+  );
+}

src/screens/tabs.ts

@@ -14,7 +14,7 @@ import {
   type WiredDetailViewProps,
 } from '../components/dv';
 
-export type ScreenKey = 'orders' | 'my-orders' | 'calls' | 'stores' | 'daily' | 'sales-report';
+export type ScreenKey = 'orders' | 'my-orders' | 'calls' | 'my-calls' | 'stores' | 'daily' | 'my-daily' | 'sales-report';
 
 export interface ScreenDef {
   key: ScreenKey;
@@ -30,9 +30,11 @@ export const SCREENS: ScreenDef[] = [
   { key: 'orders', label: 'Orders', icon: ShoppingCart, View: OrdersView, Detail: OrderDetail, noun: 'Order' },
   { key: 'my-orders', label: 'My Orders', icon: ShoppingCart, View: OrdersView, Detail: OrderDetail, noun: 'My Order' },
   { key: 'calls', label: 'Calls', icon: Phone, View: CallsView, Detail: CallDetail, noun: 'Call' },
+  { key: 'my-calls', label: 'My Calls', icon: Phone, View: CallsView, Detail: CallDetail, noun: 'My Call' },
   { key: 'stores', label: 'Stores', icon: Store, View: StoresView, Detail: StoreDetail, noun: 'Store' },
   { key: 'daily', label: 'Daily Logs', icon: ClipboardList, View: DailyLogsView, Detail: DailyLogDetail, noun: 'Daily Log' },
-  { key: 'sales-report', label: 'Sales Report', icon: FileText, View: null as any, Detail: null as any, noun: 'Sales Report' },
+  { key: 'my-daily', label: 'My Daily Logs', icon: ClipboardList, View: DailyLogsView, Detail: DailyLogDetail, noun: 'My Daily Log' },
+  { key: 'sales-report', label: 'DSR', icon: FileText, View: null as any, Detail: null as any, noun: 'Sales Report' },
 ];
 
 export function screenByKey(key: string | undefined): ScreenDef | undefined {