+
+
+ {label}:
+ {formatValue(value)}
+
+ );
-/** Call detail view (Order Booking workflow). */
-export function CallDetail({ instanceId, columns }: WiredDetailViewProps) {
return (
-
+
+ {/* 1. Status Card */}
+
+
+
+ {/* 2. Order Details Card */}
+
+
+
+ {/* 3. Store Details Card */}
+
+
+
+ {/* 4. Customer Details Card */}
+
+
+
+ {/* 5. Potential Mining Card */}
+ {miningData.length > 0 && (
+
+
+ )}
+
+ {/* 6. Log Visit Details Fallback */}
+ {Object.keys(remainingData).length > 0 && (
+
+
+ )}
+
+
);
}
diff --git a/src/components/dv/DailyLogDetail.tsx b/src/components/dv/DailyLogDetail.tsx
index 2de54bd..0702d0b 100644
--- a/src/components/dv/DailyLogDetail.tsx
+++ b/src/components/dv/DailyLogDetail.tsx
@@ -1,17 +1,242 @@
+import { useEffect, useState } from 'react';
import { dailyReportsClient } from '../../api/clients';
-import { DAILY_REPORTS } from '../../api/config';
-import { DetailView } from './DetailView';
-import type { WiredDetailViewProps } from './OrderDetail';
+import { DAILY_REPORTS, APP_ID } from '../../api/config';
+import { Card } from '../reusable/Card';
+import { Spinner } from '../reusable/Spinner';
+import { EmptyState } from '../reusable/EmptyState';
+import { formatValue } from '../../lib/format';
+import { Button } from '../buttons/Button';
+import { Map, User, ClipboardList, Camera, Clock } from 'lucide-react';
+
+export interface DailyLogDetailProps {
+ instanceId: number | string;
+ onPunchOut?: () => void;
+}
+
+export function DailyLogDetail({ instanceId, onPunchOut }: DailyLogDetailProps) {
+ const [data, setData] = useState
+
+
+
+ {placeOrderAction && (
+ Status
+
+ {stateName}
+
+ {placeOrderAction}
+ )}
+
+
+ Order Details
+
+
+
+ |
+ |
+ |
+ |
+
+
+ {Array.isArray(orderDetailsGrid) && orderDetailsGrid.length > 0 && (
+
+
+ )}
+
+ {potentialMiningAction && (
+ Line Items
+
+
+
+
+
+ | Product Name | +SKU | +SKU Code | +BR Code | +Bags | +
|---|---|---|---|---|
| {item.product_name_3 || item.product_category_3 || '-'} | +{item.sku_3 || '-'} | ++ + {skuCode} + + | +{item.br_code_3 || '-'} | +{item.bags_3 || '-'} | +
+ {potentialMiningAction}
+
+ )}
+
+
+ |
+ |
+
+
+
+ Store Details
+
+ |
+ |
+ |
+
+
+
+ Customer Details
+
+ |
+ |
+ |
+
+
+
+ Potential Mining
+
+
+
+
+ Log Visit Details
+
+ {Object.entries(remainingData).map(([key, value]) => {
+ const lowerKey = key.toLowerCase();
+ if (lowerKey.includes('uuid') || /^\d+$/.test(key)) return null;
+ // we just render them all as rows for simplicity in this custom view
+ let finalValue = value;
+ if (finalValue && typeof finalValue === 'object') {
+ try {
+ finalValue = JSON.stringify(finalValue);
+ } catch (e) {
+ finalValue = '-';
+ }
+ }
+ // format label to be readable
+ const label = key.replace(/_/g, ' ')
+ .replace(/\b\w/g, l => l.toUpperCase())
+ .replace(/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/i, '')
+ .replace(/^\s+|\s+$/g, '');
+
+ if (!label) return null;
+
+ return |
;
+ })}
+
+ {Array.isArray(uploadImage) && uploadImage.length > 0 && (
+
+
+ Uploaded Image:
+
+ )}
+
+ {uploadImage.map((file: any, idx: number) => {
+ const previewUrl = `${orderBookingClient.baseUrl}/app/${APP_ID}/view/files/${file.uuid}/preview`;
+ return (
+
+ );
+ })}
+
+
+ {label}:
+ {formatValue(finalValue)}
+
+ );
+ };
-/** Daily Log detail view (Daily Reports workflow). */
-export function DailyLogDetail({ instanceId, columns }: WiredDetailViewProps) {
return (
-
+
+ {/* 1. Status Card */}
+
+
+
+ {/* 2. Route & Plan Card */}
+
+
+
+ {/* 3. Officer Info */}
+
+
+
+ {/* 4. EOD Details (Only if not punched in) */}
+ {!isPunchedIn && (
+
+
+ )}
+
+ {/* 5. Image Card */}
+ {Array.isArray(storeImage) && storeImage.length > 0 && (
+
+
+ )}
+
+ {/* 6. Other Details */}
+ {(Object.keys(remainingData).filter(k => !k.includes('uuid') && !/^\d+$/.test(k) && k !== 'instance_id').length > 0) && (
+
+
+ )}
+
+
);
}
diff --git a/src/components/dv/DetailView.tsx b/src/components/dv/DetailView.tsx
index 69a0563..e503912 100644
--- a/src/components/dv/DetailView.tsx
+++ b/src/components/dv/DetailView.tsx
@@ -2,8 +2,7 @@ import { useEffect, useState } from 'react';
import { cn } from '../../lib/cn';
import { formatValue } from '../../lib/format';
import type { ZinoClient } from '../../api/client';
-import type { AuditEntry } from '../../api/types';
-import { WORKFLOWS } from '../../api/config';
+import { APP_ID } from '../../api/config';
import { Card } from '../reusable/Card';
import { Spinner } from '../reusable/Spinner';
import { EmptyState } from '../reusable/EmptyState';
@@ -11,7 +10,7 @@ import { EmptyState } from '../reusable/EmptyState';
export interface DetailViewProps {
/** Workflow-bound client (see api/clients.ts). */
client: ZinoClient;
- /** detailview template uid (deprecated, using audit endpoint now). */
+ /** detailview template uid. */
dvUid?: string;
/** Instance to render. */
instanceId: number | string;
@@ -23,29 +22,13 @@ export interface DetailViewProps {
columns?: 1 | 2 | 3;
}
-/**
- * Helper to resolve a human-readable activity name from its UID.
- */
-function getActivityName(uid: string): string | undefined {
- for (const wf of Object.values(WORKFLOWS)) {
- for (const [actName, actDef] of Object.entries(wf.activities)) {
- if (actDef.uid === uid) {
- return actName
- .split('_')
- .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
- .join(' ');
- }
- }
- }
- return undefined;
-}
/**
- * Generic Zino detail view. Fetches `GET /app/{id}/view/audit` and
- * renders the audit trail as a labeled definition grid.
+ * Generic Zino detail view. Fetches `GET /app/{id}/view/detailview/{dvUid}` and
+ * renders the data as a labeled definition grid.
*/
-export function DetailView({ client, instanceId, title, columns = 2 }: DetailViewProps) {
- const [entries, setEntries] = useState
+
+
+
+ {isPunchedIn && onPunchOut && (
+
+ )}
+ Current State
+
+ {stateName}
+
+
+
+
+ Day Plan & Route
+
+ |
+ |
+ |
+ |
+ |
+
+
+
+ Sales Officer
+
+ |
+ |
+
+
+
+ End of Day Details
+
+ |
+ |
+ |
+
+
+
+ Store Image
+
+
+
+ {storeImage.map((file: any, idx: number) => {
+ const previewUrl = `${dailyReportsClient.baseUrl}/app/${APP_ID}/view/files/${file.uuid}/preview`;
+ return (
+
+ );
+ })}
+
+
+
+ Other Details
+
+ |
+ {Object.entries(remainingData).map(([key, value]) => {
+ const lowerKey = key.toLowerCase();
+ if (lowerKey.includes('uuid') || /^\d+$/.test(key) || lowerKey === 'instance_id') return null;
+
+ const label = key.replace(/_/g, ' ')
+ .replace(/\b\w/g, l => l.toUpperCase())
+ .replace(/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/i, '')
+ .replace(/^\s+|\s+$/g, '');
+
+ if (!label) return null;
+
+ return |
;
+ })}
+
+
- {entries.map((entry, i) => {
- const actName = getActivityName(entry.activity_id);
- const headerTitle = actName || (i === 0 && title ? title : 'Update');
- const updatedAt = new Date(entry.created_at).toLocaleString();
-
- return (
- {updatedAt}}
- >
-
-
- {Object.entries(entry.data).map(([key, value]) => {
+
-
+
- {key.replace(/_/g, ' ')}
-
@@ -146,7 +130,7 @@ export function DetailView({ client, instanceId, title, columns = 2 }: DetailVie
{headers.map(h => ( @@ -158,21 +142,60 @@ export function DetailView({ client, instanceId, title, columns = 2 }: DetailVie ); } + const isFileArray = + Array.isArray(value) && + value.length > 0 && + typeof value[0] === 'object' && + value[0] !== null && + ('original_name' in value[0] || 'uuid' in value[0]); + + if (isFileArray) { + return ( +- {formatValue(row[h], h)} + {formatValue(row[h])} ))}++ ); + } + return ( -- + {key.replace(/_/g, ' ')} +
+- + {(value as any[]).map((file, idx) => { + const previewUrl = `${client.baseUrl}/app/${APP_ID}/view/files/${file.uuid}/preview`; + return ( + + ); + })} +
+-); } diff --git a/src/components/dv/GridTable.tsx b/src/components/dv/GridTable.tsx new file mode 100644 index 0000000..049cfee --- /dev/null +++ b/src/components/dv/GridTable.tsx @@ -0,0 +1,75 @@ +import { Pencil, Trash2 } from 'lucide-react'; +import type { FormScreenField } from '../../api/types'; + +export interface GridTableProps { + data: Record- +
+); })} - - ); - })} +- {key.replace(/_/g, ' ')}
- - {formatValue(value, key)} + {formatValue(value)}
++ ); +} diff --git a/src/components/dv/OrderDetail.tsx b/src/components/dv/OrderDetail.tsx index 9d8b1ce..f44510e 100644 --- a/src/components/dv/OrderDetail.tsx +++ b/src/components/dv/OrderDetail.tsx @@ -1,21 +1,248 @@ +import { useEffect, useState } from 'react'; import { orderBookingClient } from '../../api/clients'; import { ORDER_BOOKING } from '../../api/config'; -import { DetailView } from './DetailView'; +import { Card } from '../reusable/Card'; +import { Spinner } from '../reusable/Spinner'; +import { EmptyState } from '../reusable/EmptyState'; +import { formatValue } from '../../lib/format'; +import { ShoppingCart, Store, User, Package, Clock, ClipboardList } from 'lucide-react'; +import { GridTable } from './GridTable'; export interface WiredDetailViewProps { instanceId: number | string; columns?: 1 | 2 | 3; } -/** Order detail view (Order Booking workflow). */ -export function OrderDetail({ instanceId, columns }: WiredDetailViewProps) { +export function OrderDetail({ instanceId }: WiredDetailViewProps) { + const [data, setData] = useState+ +
++ {columns.map((col, idx) => ( + + + + {data.map((row, rowIdx) => ( +{col.name} + ))} + {(onEdit || onDelete) && ( +Actions + )} ++ {columns.map((col, colIdx) => { + const val = row[col.id]; + let displayVal = String(val ?? '-'); + if (col.data_type === 'select' || col.data_type === 'multiselect') { + const opt = col.properties?.options?.find((o: any) => String(o.value) === String(val)); + if (opt) displayVal = opt.label; + } + + const isNumeric = col.data_type === 'number'; + return ( + + ))} + ++ {displayVal} + + ); + })} + {(onEdit || onDelete) && ( ++ + )} ++ {onEdit && ( + + )} + {onDelete && ( + + )} ++(null); + + useEffect(() => { + let live = true; + async function run() { + setLoading(true); + setError(null); + try { + const r = await orderBookingClient.detailView(ORDER_BOOKING.detailViews.ORDERS, instanceId); + if (live) setData(r.data || {}); + } catch (e) { + if (live) setError((e as { message?: string })?.message ?? 'Failed to load'); + } finally { + if (live) setLoading(false); + } + } + run(); + return () => { live = false; }; + }, [instanceId]); + + if (error) { + return ( + + + ); + } + + if (loading) { + return ( ++ + + ); + } + + if (!data || Object.keys(data).length === 0) { + return ( +++ + ); + } + + const remainingData = { ...data }; + const extract = (key: string, obj: any = data) => { + if (obj && key in obj) { + const val = obj[key]; + delete obj[key]; + return val; + } + return '-'; + }; + + // State + const stateName = extract('current_state_name', remainingData); + delete remainingData.current_state_id; + const isSuccess = ['ordered', 'active', 'approve'].some(s => stateName.toString().toLowerCase().includes(s)); + const colorClass = isSuccess ? 'text-emerald-500' : 'text-blue-500'; + + // Order Details + const orderId = extract('order_id', remainingData); + const dateOfOrder = extract('date_of_order_3', remainingData); + + // SO Info + const soKey = Object.keys(remainingData).find(k => k.endsWith('__user_id')) || 'so_name'; + const soRaw = extract(soKey, remainingData); + let soName = '-'; + let soEmail = '-'; + if (soRaw && typeof soRaw === 'object') { + soName = (soRaw as any).name || '-'; + soEmail = (soRaw as any).email || '-'; + } + + // Store Info + const storeRaw = extract('select_store', remainingData); + let storeName = '-'; + let distributorName = '-'; + let routeName = '-'; + let routeCode = '-'; + if (storeRaw && typeof storeRaw === 'object') { + storeName = (storeRaw as any).business_name || '-'; + distributorName = (storeRaw as any).distributor_name || '-'; + routeName = (storeRaw as any).route_name || '-'; + routeCode = (storeRaw as any).route_code || '-'; + } + + // Line Items + const orderDetailsGrid = extract('order_details_3', remainingData); + + // Totals + const totalBags = extract('total_bags_3', remainingData); + const totalKgs = extract('total_kgs_3', remainingData); + + // Meta + const createdAtKey = Object.keys(remainingData).find(k => k.endsWith('__created_at')); + const createdAt = createdAtKey ? extract(createdAtKey, remainingData) : '-'; + + // Helper Row + const Row = ({ label, value, highlight = false }: { label: string, value: any, highlight?: boolean }) => { + let finalValue = value; + if (finalValue && typeof finalValue === 'object') { + try { finalValue = JSON.stringify(finalValue); } catch (e) { finalValue = '-'; } + } + return ( ++ + {label}: + + {formatValue(finalValue)} + ++ ); + }; + return ( -+ + + {/* 1. Status Card */} +); } diff --git a/src/components/dv/PotentialMiningTable.tsx b/src/components/dv/PotentialMiningTable.tsx new file mode 100644 index 0000000..e85305a --- /dev/null +++ b/src/components/dv/PotentialMiningTable.tsx @@ -0,0 +1,136 @@ +import { ArrowUpRight, ArrowDownRight, Pencil, Trash2 } from 'lucide-react'; +import { cn } from '../../lib/cn'; + +export interface MiningItem { + id: string; + productName: string; + badge?: { + label: string; + type: 'error' | 'success' | 'info' | 'warning' | 'default'; + }; + status?: string; + potentialKgs: number; + orderedKgs: number; +} + +export interface PotentialMiningTableProps { + data: MiningItem[]; + onEdit?: (item: MiningItem) => void; + onDelete?: (item: MiningItem) => void; + hideOrderDetails?: boolean; +} + +export function PotentialMiningTable({ data, onEdit, onDelete, hideOrderDetails }: PotentialMiningTableProps) { + return ( ++ + + {/* 2. Order Summary Card */} +++++Status++ {stateName} +++ + + {/* 3. Store details Card */} ++++ Order Summary
++++
+
+ + + {/* 4. Sales Officer Card */} ++++ Store Details
++++
+
+
+ + + {/* 5. Line Items Grid */} + {Array.isArray(orderDetailsGrid) && orderDetailsGrid.length > 0 && ( ++++ Sales Officer
++++
+
+ + )} + + {/* 6. Order Totals */} ++++ Line Items
++++ + + + {/* 7. Log Visit Details Fallback & Meta */} + {(Object.keys(remainingData).filter(k => !k.includes('uuid') && !/^\d+$/.test(k) && k !== 'instance_id').length > 0 || createdAt !== '-') && ( ++++ Order Totals
++++
+
+ + )} + ++++ Other Details
++++ {Object.entries(remainingData).map(([key, value]) => { + const lowerKey = key.toLowerCase(); + if (lowerKey.includes('uuid') || /^\d+$/.test(key) || lowerKey === 'instance_id') return null; + + const label = key.replace(/_/g, ' ') + .replace(/\b\w/g, l => l.toUpperCase()) + .replace(/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/i, '') + .replace(/^\s+|\s+$/g, ''); + + if (!label) return null; + + return
; + })} +
++ ); +} diff --git a/src/components/dv/StoreDetail.tsx b/src/components/dv/StoreDetail.tsx index 9d2b109..924c41c 100644 --- a/src/components/dv/StoreDetail.tsx +++ b/src/components/dv/StoreDetail.tsx @@ -1,17 +1,319 @@ +import { useEffect, useState } from 'react'; import { storeClient } from '../../api/clients'; -import { STORE } from '../../api/config'; -import { DetailView } from './DetailView'; +import { STORE, APP_ID } from '../../api/config'; +import { Card } from '../reusable/Card'; +import { Spinner } from '../reusable/Spinner'; +import { EmptyState } from '../reusable/EmptyState'; +import { formatValue } from '../../lib/format'; +import { Store, User, Truck, MapPin, TrendingUp, Camera, ClipboardList } from 'lucide-react'; +import { GridTable } from './GridTable'; import type { WiredDetailViewProps } from './OrderDetail'; -/** Store detail view (Store workflow). */ -export function StoreDetail({ instanceId, columns }: WiredDetailViewProps) { +export function StoreDetail({ instanceId }: WiredDetailViewProps) { + const [data, setData] = useState+ +
++ + + + {data.map((item) => { + const difference = item.orderedKgs - item.potentialKgs; + const isSurplus = difference >= 0; + const absDiff = Math.abs(difference); + + return ( +Product +Potential (Kgs) + {!hideOrderDetails && ( + <> +Ordered (Kgs) +Difference + + )} + {(onEdit || onDelete) && ( +Actions + )} ++ + ); + })} + ++ ++ {item.productName} + {item.badge && ( + + {item.badge.label} + + )} +++ {item.potentialKgs} + + {!hideOrderDetails && ( + <> ++ {item.orderedKgs} + ++ + + )} + {(onEdit || onDelete) && ( ++++++ {isSurplus ? ( ++ + {isSurplus ? 'Surplus' : 'Shortfall'} + ++ ) : ( + + )} + {absDiff} Kgs + + + )} ++ {onEdit && ( + + )} + {onDelete && ( + + )} ++(null); + + useEffect(() => { + let live = true; + async function run() { + setLoading(true); + setError(null); + try { + const r = await storeClient.detailView(STORE.detailViews.STORE, instanceId); + if (live) setData(r.data || {}); + } catch (e) { + if (live) setError((e as { message?: string })?.message ?? 'Failed to load'); + } finally { + if (live) setLoading(false); + } + } + run(); + return () => { live = false; }; + }, [instanceId]); + + if (error) { + return ( + + + ); + } + + if (loading) { + return ( ++ + + ); + } + + if (!data || Object.keys(data).length === 0) { + return ( +++ + ); + } + + const remainingData = { ...data }; + const extract = (key: string, obj: any = data) => { + if (obj && key in obj) { + const val = obj[key]; + delete obj[key]; + return val; + } + return '-'; + }; + + // State + const stateName = extract('current_state_name', remainingData); + delete remainingData.current_state_id; + const isSuccess = ['created', 'active', 'approve'].some(s => stateName.toString().toLowerCase().includes(s)); + const colorClass = isSuccess ? 'text-emerald-500' : 'text-blue-500'; + + // Store Overview + const storeCode = extract('store_code', remainingData); + const businessName = extract('business_name', remainingData); + const area = extract('area', remainingData); + const completeAddress = extract('complete_address', remainingData); + const pinCode = extract('pin_code', remainingData); + const notes = extract('notes', remainingData); + + // Owner Info + const ownerName = extract('owner_name', remainingData); + const email = extract('email', remainingData); + let phoneNumber = extract('phone_number', remainingData); + if (typeof phoneNumber === 'object' && phoneNumber !== null) { + phoneNumber = (phoneNumber as any).phone_with_dial_code || (phoneNumber as any).phone || '-'; + } + + // Distributor Info + const distributorName = extract('distributor_name', remainingData); + const distributorOwnerName = extract('distributor_owner_name', remainingData); + const distributorEmail = extract('distributor_email', remainingData); + let distributorPhone = extract('distributor_phone_number', remainingData); + if (typeof distributorPhone === 'object' && distributorPhone !== null) { + distributorPhone = (distributorPhone as any).phone_with_dial_code || (distributorPhone as any).phone || '-'; + } + + // Route Info + const routeCode = extract('route_code', remainingData); + const routeName = extract('route_name', remainingData); + const subRoute = extract('sub_route', remainingData); + + // Location + const storeLocation = extract('store_location', remainingData); + let lat = null; + let lng = null; + if (storeLocation) { + let locObj = storeLocation; + if (typeof locObj === 'string') { + try { locObj = JSON.parse(locObj); } catch (e) {} + } + if (locObj && typeof locObj === 'object') { + lat = (locObj as any).latitude; + lng = (locObj as any).longitude; + } + } + + // Potential + const potential = extract('potential', remainingData); + + // Image + const storeImage = extract('store_image', remainingData); + + // Meta + const createdAtKey = Object.keys(remainingData).find(k => k.endsWith('__created_at')); + const createdAt = createdAtKey ? extract(createdAtKey, remainingData) : '-'; + + const userIdKey = Object.keys(remainingData).find(k => k.endsWith('__user_id')); + const userObj = userIdKey ? extract(userIdKey, remainingData) : null; + const userName = userObj && typeof userObj === 'object' ? (userObj as any).name || (userObj as any).email : '-'; + + // Helper Row + const Row = ({ label, value }: { label: string, value: any }) => { + let finalValue = value; + if (finalValue && typeof finalValue === 'object') { + try { finalValue = JSON.stringify(finalValue); } catch (e) { finalValue = '-'; } + } + return ( ++ + {label}: + {formatValue(finalValue)} ++ ); + }; + return ( -+ + + {/* 1. Status Card */} +); } diff --git a/src/components/dv/index.ts b/src/components/dv/index.ts index f146b7d..519ce23 100644 --- a/src/components/dv/index.ts +++ b/src/components/dv/index.ts @@ -5,3 +5,7 @@ export type { WiredDetailViewProps } from './OrderDetail'; export { CallDetail } from './CallDetail'; export { StoreDetail } from './StoreDetail'; export { DailyLogDetail } from './DailyLogDetail'; +export { PotentialMiningTable } from './PotentialMiningTable'; +export { GridTable } from './GridTable'; +export type { GridTableProps } from './GridTable'; +export type { MiningItem, PotentialMiningTableProps } from './PotentialMiningTable'; diff --git a/src/components/forms/DynamicForm.tsx b/src/components/forms/DynamicForm.tsx index bca422c..eee7ac6 100644 --- a/src/components/forms/DynamicForm.tsx +++ b/src/components/forms/DynamicForm.tsx @@ -191,12 +191,12 @@ export function DynamicForm({ client, activityId: initialActivityId, instanceId: } else if ((f.data_type === 'image' || f.data_type === 'file') && Array.isArray(val) && val.length > 0 && val[0] instanceof File) { const uploadedFiles = []; for (const file of val) { - const fileMeta = await client.uploadFile(file, { activityId: currentActivityId, fieldId: f.id }); + const fileMeta = await client.uploadFile(file, { activityId: currentActivityId, fieldId: f.id, instanceId: currentInstanceId }); uploadedFiles.push(fileMeta); } payload[f.id] = uploadedFiles; } else if ((f.data_type === 'image' || f.data_type === 'file') && val instanceof File) { - const fileMeta = await client.uploadFile(val, { activityId: currentActivityId, fieldId: f.id }); + const fileMeta = await client.uploadFile(val, { activityId: currentActivityId, fieldId: f.id, instanceId: currentInstanceId }); payload[f.id] = [fileMeta]; } else { payload[f.id] = val; diff --git a/src/components/forms/fields/SmartGridField.tsx b/src/components/forms/fields/SmartGridField.tsx index d59749b..72e1311 100644 --- a/src/components/forms/fields/SmartGridField.tsx +++ b/src/components/forms/fields/SmartGridField.tsx @@ -2,8 +2,10 @@ import { useState, useRef } from 'react'; import { Button } from '../../buttons/Button'; import { Select } from '../../reusable/Select'; import { Input } from '../../reusable/Input'; -import { Trash2, Pencil } from 'lucide-react'; +import { Pencil } from 'lucide-react'; import type { FormScreenField } from '../../../api/types'; +import { PotentialMiningTable } from '../../dv/PotentialMiningTable'; +import { GridTable } from '../../dv/GridTable'; export function SmartGridField({ label, @@ -43,6 +45,9 @@ export function SmartGridField({ setEditingIdx(idx); setNewRow({ ...value[idx] }); setIsModalOpen(true); + setTimeout(() => { + formRef.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); + }, 150); }; const startAdd = () => { @@ -101,6 +106,18 @@ export function SmartGridField({ row['row_kgs'] = skuVal * bagsVal; } + // Auto-calculate difference for potential mining + const potentialCol = columns.find(c => c.id.toLowerCase().includes('potential') || c.name.toLowerCase().includes('potential')); + const totalOrderedCol = columns.find(c => c.id.toLowerCase().includes('total_ordered') || c.name.toLowerCase().includes('total ordered')); + if (potentialCol && totalOrderedCol) { + const p = Number(row[potentialCol.id]) || 0; + const t = Number(row[totalOrderedCol.id]) || 0; + const diffCol = columns.find(c => c.id.toLowerCase().includes('difference') || c.name.toLowerCase().includes('difference')); + if (diffCol) { + row[diffCol.id] = t - p; + } + } + setNewRow(row); }; @@ -152,82 +169,59 @@ export function SmartGridField({ setEditingIdx(null); }; + const isPotentialGrid = label.toLowerCase().includes('potential'); + const hasOrderedColumn = columns.some(c => c.id.toLowerCase().includes('ordered') || (c.name || '').toLowerCase().includes('ordered')); + return (+ + + {/* 2. Store Overview Card */} +++++Status++ {stateName} +++ + + {/* 3. Owner Information Card */} ++++ Store Overview
++++
+
+
+
+
+
+ + + {/* 4. Distributor Details Card */} ++++ Owner Information
++++
+
+
+ + + {/* 5. Route Details Card */} ++++ Distributor Details
++++
+
+
+
+ + + {/* 6. Potential Card */} + {Array.isArray(potential) && potential.length > 0 && ( ++++ Route Details
++++
+
+
+ + )} + + {/* 7. Store Image Card */} + {Array.isArray(storeImage) && storeImage.length > 0 && ( ++++ Potential
++++ + + )} + + {/* 7.5 Store Location Map */} + {lat && lng && ( ++++ Store Image
++++ {storeImage.map((file: any, idx: number) => { + const previewUrl = `${storeClient.baseUrl}/app/${APP_ID}/view/files/${file.uuid}/preview`; + return ( + + ); + })} +++ + )} + + {/* 8. Log Visit Details Fallback & Meta */} + {(Object.keys(remainingData).filter(k => !k.includes('uuid') && !/^\d+$/.test(k)).length > 0 || userName !== '-') && ( ++++ Store Location
++ +++ + )} + ++++ Other Details
++++
+ {Object.entries(remainingData).map(([key, value]) => { + const lowerKey = key.toLowerCase(); + if (lowerKey.includes('uuid') || /^\d+$/.test(key) || lowerKey === 'instance_id') return null; + + const label = key.replace(/_/g, ' ') + .replace(/\b\w/g, l => l.toUpperCase()) + .replace(/[a-f0-9]{8}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{4}-[a-f0-9]{12}/i, '') + .replace(/^\s+|\s+$/g, ''); + + if (!label) return null; + + return
; + })} +
{label} {value.length === 0 ? ( No rows added. - ) : ( -- {value.map((row, i) => { - let productName = 'Unknown Product'; - let bags = '0'; + ) : isPotentialGrid ? ( ++ onEdit={(item) => startEdit(Number(item.id))} + onDelete={(item) => removeRow(Number(item.id))} + /> + ) : ( +{ + const reason = String(row.reason || row.Reason || row.potential_remarks || ''); + let badgeType: 'error' | 'success' | 'info' | 'warning' | 'default' = 'default'; + const lowerReason = reason.toLowerCase(); + if (lowerReason.includes('stock')) badgeType = 'success'; + else if (lowerReason.includes('quality')) badgeType = 'error'; + else if (lowerReason.includes('price')) badgeType = 'warning'; + else if (lowerReason.includes('competitive') || lowerReason.includes('loyalty')) badgeType = 'info'; + let productName = 'Unknown Product'; visibleColumns.forEach(col => { const isName = col.id.toLowerCase().includes('name') || col.name.toLowerCase().includes('name') || (col.id.toLowerCase().includes('category') && productName === 'Unknown Product'); - const isBags = col.id.toLowerCase().includes('bags') || col.name.toLowerCase().includes('bags') || col.id.toLowerCase().includes('quantity'); - - if (isName || isBags) { + if (isName) { const val = row[col.id]; let displayVal = String(val ?? '-'); - if (col.data_type === 'select' || col.data_type === 'multiselect') { const opt = col.properties?.options?.find(o => String(o.value) === String(val)); if (opt) displayVal = opt.label; } - - if (isName && (productName === 'Unknown Product' || col.id.toLowerCase().includes('name'))) { - productName = displayVal; - } - if (isBags) bags = displayVal; + productName = displayVal; } }); - return ( - -- ); + return { + id: String(i), + productName, + badge: reason ? { label: reason, type: badgeType } : undefined, + potentialKgs: Number(row.actual_potential ?? row.Actual_Potential ?? row.store_potential ?? row.Store_Potential ?? row.quantity ?? row.Quantity ?? 0), + orderedKgs: Number(row.total_ordered ?? row.Total_Ordered ?? 0), + }; })} -- {productName} - {label.toLowerCase().includes('potential') ? ( -- --- ) : ( - {bags} Bags - )} -- Total Ordered: - {String(row.total_ordered ?? row.Total_Ordered ?? '-')} --- Potential: - {String(row.actual_potential ?? row.Actual_Potential ?? row.store_potential ?? row.Store_Potential ?? '-')} --- Difference: - {(() => { - const diff = Number(row.difference ?? row.Difference); - if (isNaN(diff)) return -; - return ( - - {diff < 0 ? `${Math.abs(diff)} Kgs Less Ordered` : `${diff} Kgs More Ordered`} - - ); - })()} --- - --)} diff --git a/src/components/reusable/AnalyticsChart.tsx b/src/components/reusable/AnalyticsChart.tsx index aebc741..b9df0cb 100644 --- a/src/components/reusable/AnalyticsChart.tsx +++ b/src/components/reusable/AnalyticsChart.tsx @@ -6,12 +6,14 @@ import { YAxis, CartesianGrid, Tooltip, - ResponsiveContainer + ResponsiveContainer, + Legend } from 'recharts'; export interface ChartRow { dimension: string; value: number; + series?: string; } export interface ChartConfig { @@ -37,19 +39,42 @@ export function AnalyticsChart({ data }: AnalyticsChartProps) { .replace(/_/g, ' ') .replace(/\b\w/g, c => c.toUpperCase()); - // Safely format dimension string (fallbacks for empty strings) - const formattedRows = (chart.rows || []).map(r => ({ - ...r, - dimension: String(r.dimension || '').trim() || 'Unknown' - })); + const hasSeries = chart.rows?.some(r => r.series); + let finalData: any[] = []; + let seriesKeys: string[] = []; - if (formattedRows.length === 0) return null; + if (hasSeries) { + const grouped = new Map(); + chart.rows?.forEach(r => { + const dim = String(r.dimension || '').trim() || 'Unknown'; + const s = String(r.series || '').trim() || 'Unknown'; + sKeys.add(s); + + if (!grouped.has(dim)) { + grouped.set(dim, { dimension: dim }); + } + const entry = grouped.get(dim); + entry[s] = Number(r.value || 0); + }); + finalData = Array.from(grouped.values()); + seriesKeys = Array.from(sKeys).sort(); // Sort series keys for consistency + } else { + finalData = (chart.rows || []).map(r => ({ + ...r, + dimension: String(r.dimension || '').trim() || 'Unknown', + value: Number(r.value || 0) + })); + seriesKeys = ['value']; + } + + if (finalData.length === 0) return null; return ( diff --git a/src/components/reusable/Card.tsx b/src/components/reusable/Card.tsx index 6f29d67..3ccdcac 100644 --- a/src/components/reusable/Card.tsx +++ b/src/components/reusable/Card.tsx @@ -40,15 +40,15 @@ export function Card({ return (- + - + {hasSeries && } + {seriesKeys.map((key, i) => ( + + ))} {title && ( - - {title}
++ )} diff --git a/src/components/reusable/Modal.tsx b/src/components/reusable/Modal.tsx index abdda9e..1d719e7 100644 --- a/src/components/reusable/Modal.tsx +++ b/src/components/reusable/Modal.tsx @@ -5,12 +5,6 @@ import { cn } from '../../lib/cn'; export type ModalWidth = 'sm' | 'md' | 'lg' | 'xl'; -const WIDTH: Record{title}
{action}{ if (e.target === e.currentTarget) onClose(); }} > +-+ {title &&{title}
} {subtitle &&{subtitle}} diff --git a/src/components/reusable/Pagination.tsx b/src/components/reusable/Pagination.tsx index c7be302..7891cd4 100644 --- a/src/components/reusable/Pagination.tsx +++ b/src/components/reusable/Pagination.tsx @@ -1,5 +1,6 @@ import { ChevronLeft, ChevronRight } from 'lucide-react'; import { Button } from '../buttons/Button'; +import { useState, useEffect } from 'react'; export interface PaginationProps { /** 1-based current page. */ @@ -8,33 +9,83 @@ export interface PaginationProps { /** Total rows across all pages. */ total: number; onPage: (page: number) => void; + onPageSizeChange?: (size: number) => void; } -/** Pager: "Showing a–b of N" + Prev/Next. Renders nothing when the set fits on - * one page. Shared by the record-view tables. */ -export function Pagination({ page, pageSize, total, onPage }: PaginationProps) { +/** Pager: "Showing a–b of N" + Rows per page + Jump to + Prev/Next. + * Shared by the record-view tables. */ +export function Pagination({ page, pageSize, total, onPage, onPageSizeChange }: PaginationProps) { + const [jumpPage, setJumpPage] = useState(String(page)); + + useEffect(() => { + setJumpPage(String(page)); + }, [page]); + if (total <= 0) return null; const totalPages = Math.max(1, Math.ceil(total / pageSize)); const safePage = Math.min(Math.max(page, 1), totalPages); const start = (safePage - 1) * pageSize; + const handleJump = () => { + const p = parseInt(jumpPage, 10); + if (!isNaN(p) && p >= 1 && p <= totalPages) { + onPage(p); + } else { + setJumpPage(String(safePage)); + } + }; + return ( -- - Showing {start + 1}–{Math.min(start + pageSize, total)} of {total} - -- - - {safePage} / {totalPages} +diff --git a/src/components/rv/DailyLogsView.tsx b/src/components/rv/DailyLogsView.tsx index 780b5dd..c8aa516 100644 --- a/src/components/rv/DailyLogsView.tsx +++ b/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 }: WiredRecordViewProps) { +export function DailyLogsView({ onRowClick, pageSize, headerActions, rowActions, refreshKey, presetAlias }: WiredRecordViewProps) { return (+); diff --git a/src/components/reusable/StatsTiles.tsx b/src/components/reusable/StatsTiles.tsx index ea6a3eb..94f8c3a 100644 --- a/src/components/reusable/StatsTiles.tsx +++ b/src/components/reusable/StatsTiles.tsx @@ -1,19 +1,10 @@ -import { Card } from "./Card"; +import { Phone, TrendingUp, Activity, BarChart2, ShoppingCart, ShoppingBag, Scale } from 'lucide-react'; import type { TileItem } from "../../api/types"; export interface StatsTilesProps { tiles?: TileItem[]; } -const colors = [ - "from-blue-500 to-cyan-500", - "from-emerald-500 to-green-500", - "from-orange-500 to-amber-500", - "from-violet-500 to-fuchsia-500", - "from-pink-500 to-rose-500", - "from-indigo-500 to-blue-500", -]; - export function StatsTiles({ tiles }: StatsTilesProps) { if (!tiles?.length) return null; @@ -24,35 +15,41 @@ export function StatsTiles({ tiles }: StatsTilesProps) { .replace(/_/g, " ") .replace(/\b\w/g, (c) => c.toUpperCase()); - const gradient = colors[idx % colors.length]; + const lowerKey = String(tile.key).toLowerCase(); + let Icon = BarChart2; + if (lowerKey.includes('call') || lowerKey.includes('total')) Icon = Phone; + if (lowerKey.includes('productive')) Icon = TrendingUp; + if (lowerKey.includes('order') || lowerKey.includes('cart')) Icon = ShoppingCart; + if (lowerKey.includes('bag')) Icon = ShoppingBag; + if (lowerKey.includes('kg') || lowerKey.includes('weight')) Icon = Scale; + if (lowerKey.includes('active')) Icon = Activity; + + const isDanger = lowerKey.includes('no_order'); return ( -+ + Showing {start + 1}–{Math.min(start + pageSize, total)} of {total} - + {onPageSizeChange && ( ++ ++ Rows per page: + ++ )} +++ Jump to: + setJumpPage(e.target.value)} + onKeyDown={e => e.key === 'Enter' && handleJump()} + onBlur={handleJump} + className="w-14 h-7 rounded border border-border-default bg-card px-2 py-1 text-xs text-strong text-center outline-none focus-ring" + style={{ MozAppearance: 'textfield' }} // best effort hide spinner on FF + /> ++ ++ + + {safePage} / {totalPages} + + +- {/* Top Gradient */} - - - {/* Background Decoration */} - - - -); })}+
+ {displayLabel} - - -- + +- {(tile.value as React.ReactNode) ?? "-"} -
- - + ++ {(tile.value as React.ReactNode) ?? "-"} +
+); } diff --git a/src/components/rv/OrdersView.tsx b/src/components/rv/OrdersView.tsx index 8fab1b2..a276d57 100644 --- a/src/components/rv/OrdersView.tsx +++ b/src/components/rv/OrdersView.tsx @@ -9,10 +9,11 @@ export interface WiredRecordViewProps { rowActions?: (row: Record ); } diff --git a/src/components/rv/RecordView.tsx b/src/components/rv/RecordView.tsx index 9c94469..e66d418 100644 --- a/src/components/rv/RecordView.tsx +++ b/src/components/rv/RecordView.tsx @@ -41,6 +41,8 @@ export interface RecordViewProps { sortDir?: 'asc' | 'desc'; /** Default filters to apply initially. */ initialFilters?: Record +{(() => { if (!resp?.config) return null; @@ -232,7 +237,7 @@ export function RecordView({); diff --git a/src/screens/CallsPage.tsx b/src/screens/CallsPage.tsx index 5488583..94172a1 100644 --- a/src/screens/CallsPage.tsx +++ b/src/screens/CallsPage.tsx @@ -117,44 +117,50 @@ export function CallsPage() { onClose={() => navigate(`/calls`)} title={instanceId != null ? `Call #${instanceId}` : undefined} width="lg" - actions={ - <> - - {(() => { - const stateName = String(selectedRow?.current_state_name || selectedRow?.current_state_name_ || selectedRow?.current_state || selectedRow?.status || '').toLowerCase(); - if (stateName.includes('ordered') || stateName === 'ordered' || stateName.includes('order')) { - return ( - - ); - } else if (stateName.includes('productive')) { - return ( - - ); - } - return ( - - ); - })()} - - } - > - {instanceId != null &&)} --
+ {fields.map((f) => ( onRowClick(row, i) : undefined} className={cn( - 'bg-surface border-b border-border-subtle transition-colors duration-150', - onRowClick && 'cursor-pointer hover:bg-slate-50', + 'bg-[var(--z-rv-table-bg)] border-b border-[var(--z-rv-table-border)] transition-colors duration-150', + onRowClick && 'cursor-pointer hover:bg-[var(--table-row-bg-select)]', )} > - {fields.map((f) => ( - - {formatValue(row[f.field_key], f.field_key)} - - ))} + {fields.map((f) => { + const lowerKey = f.field_key.toLowerCase(); + const isSku = lowerKey === 'sku_code'; + const isStatus = lowerKey.includes('status') || lowerKey.includes('state'); + const valStr = formatValue(row[f.field_key], f.field_key); + + let content = <>{valStr}; + + if (valStr !== '—' && valStr !== '') { + if (isSku || isStatus) { + const palettes = [ + "bg-blue-50 text-blue-700 border-blue-200", + "bg-purple-50 text-purple-700 border-purple-200", + "bg-pink-50 text-pink-700 border-pink-200", + "bg-indigo-50 text-indigo-700 border-indigo-200", + "bg-cyan-50 text-cyan-700 border-cyan-200", + "bg-rose-50 text-rose-700 border-rose-200", + "bg-fuchsia-50 text-fuchsia-700 border-fuchsia-200", + "bg-teal-50 text-teal-700 border-teal-200", + ]; + + let hash = 0; + for (let i = 0; i < valStr.length; i++) { + hash = valStr.charCodeAt(i) + ((hash << 5) - hash); + } + const colorIndex = Math.abs(hash) % palettes.length; + let colorClass = palettes[colorIndex]; + + if (isSku) { + content = ( + + {valStr} + + ); + } else if (isStatus) { + const valLower = valStr.toLowerCase(); + const isSuccess = valLower.includes('approve') || valLower.includes('complete') || valLower.includes('success') || valLower.includes('active'); + const isWarning = valLower.includes('pending') || valLower.includes('draft') || valLower.includes('hold'); + const isDanger = valLower.includes('reject') || valLower.includes('fail') || valLower.includes('cancel'); + + if (isSuccess) colorClass = "bg-emerald-50 text-emerald-700 border-emerald-200"; + else if (isWarning) colorClass = "bg-amber-50 text-amber-700 border-amber-200"; + else if (isDanger) colorClass = "bg-red-50 text-red-700 border-red-200"; + + content = ( + + {valStr} + + ); + } + } + } + + return ( ++ {content} + + ); + })} {rowActions && (e.stopPropagation()}> @@ -276,7 +335,16 @@ export function RecordView({+ { + setInternalPageSize(sz); + setPage(1); + }} + /> } + {instanceId != null && selectedRow && ( + ++ )}+ {miningLoading ? 'Loading...' : 'Potential Mining'} + + } + placeOrderAction={ + (() => { + const stateName = String(selectedRow.current_state_name || selectedRow.current_state_name_ || selectedRow.current_state || selectedRow.status || '').toLowerCase(); + if (stateName.includes('ordered') || stateName === 'ordered' || stateName.includes('order')) { + return ( + + ); + } else if (stateName.includes('productive')) { + return ( + + ); + } + return ( + + ); + })() + } + /> + setActiveActivity(null)} title={activeActivity?.name} - width="md" + width={activeActivity?.id === ORDER_BOOKING.activities.POTENTIAL_MINING.uid ? 'lg' : 'md'} > {activeActivity && instanceId != null && ( . */ export function ConsoleLayout() { const { authed, logout } = useAuth(); const navigate = useNavigate(); + const location = useLocation(); const user = orderBookingClient.currentUser(); + const isReportsActive = location.pathname.startsWith('/reports'); + // A 401 from any workflow client bounces back to login. useEffect(() => { onAuthErrorAll(() => { @@ -26,10 +30,9 @@ export function ConsoleLayout() { return ( -+ - Krishna Sales - Field Sales · Sandbox {APP_ID} + Krishna Sales- {user?.name && {user.name}} + {user?.name && {user.name}} } - rowActions={(row) => ( - - )} + 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 ( + + ); + }} />- {instanceId != null && ); diff --git a/src/screens/DailySalesReportPage.tsx b/src/screens/DailySalesReportPage.tsx index f1107a5..5074685 100644 --- a/src/screens/DailySalesReportPage.tsx +++ b/src/screens/DailySalesReportPage.tsx @@ -97,22 +97,6 @@ export function DailySalesReportPage() { const blob = doc.output('blob'); - // Attempt mobile native share (which includes OS-level Print) - if (navigator.share && navigator.canShare) { - const file = new File([blob], `Daily_Sales_Report_${date || 'Draft'}.pdf`, { type: 'application/pdf' }); - try { - if (navigator.canShare({ files: [file] })) { - await navigator.share({ - files: [file], - title: 'Daily Sales Report', - }); - return; - } - } catch (err) { - console.warn('Share failed or was cancelled', err); - } - } - // Fallback for PC / unsupported browsers const blobUrl = URL.createObjectURL(blob); const iframe = document.createElement('iframe'); diff --git a/src/screens/MyOrdersPage.tsx b/src/screens/MyOrdersPage.tsx index 25df7fc..fe66ccb 100644 --- a/src/screens/MyOrdersPage.tsx +++ b/src/screens/MyOrdersPage.tsx @@ -23,6 +23,7 @@ export function MyOrdersPage() { <>} + {instanceId != null && setPunchOutInstanceId(instanceId)} />} { const id = row.instance_id as number | string | undefined; diff --git a/src/screens/ReportPage.tsx b/src/screens/ReportPage.tsx new file mode 100644 index 0000000..d4dc6e7 --- /dev/null +++ b/src/screens/ReportPage.tsx @@ -0,0 +1,33 @@ +import { useParams } from 'react-router-dom'; +import { RecordView } from '../components/rv/RecordView'; +import { ORDER_BOOKING } from '../api/config'; +import { orderBookingClient } from '../api/clients'; + +export const REPORT_MAP: Record Report not found; + } + + return ( ++ ); +} diff --git a/src/styles/styles.css b/src/styles/styles.css index e3d6ef0..59a15b5 100644 --- a/src/styles/styles.css +++ b/src/styles/styles.css @@ -65,19 +65,19 @@ --color-slate-50: var(--slate-50); /* ---- Semantic aliases (short, readable utility names) ---- */ - --color-app: var(--surface-app); - --color-card: var(--surface-card); - --color-sunk: var(--surface-sunk); - --color-strong: var(--text-strong); - --color-body: var(--text-body); - --color-muted: var(--text-muted); - --color-faint: var(--text-faint); - --color-on-navy: var(--text-on-navy); - --color-on-navy-muted: var(--text-on-navy-muted); - --color-accent: var(--text-accent); - --color-link: var(--text-link); - --color-border-subtle: var(--border-subtle); - --color-border-default: var(--border-default); + --color-app: var(--z-body-bg); + --color-card: var(--z-block-bg); + --color-sunk: var(--z-bg-plain); + --color-strong: var(--z-text-default); + --color-body: var(--z-text-default); + --color-muted: var(--z-text-muted); + --color-faint: var(--z-text-secondary); + --color-on-navy: var(--z-text-inverse); + --color-on-navy-muted: var(--z-text-secondary); + --color-accent: var(--z-text-primary); + --color-link: var(--z-text-primary); + --color-border-subtle: var(--z-border-default); + --color-border-default: var(--z-border-secondary); /* ---- Radii ---- */ --radius-xs: var(--radius-xs); @@ -148,9 +148,9 @@ .nums { font-variant-numeric: tabular-nums; } - /* Sunrise focus ring on inputs/selects. */ + /* Primary focus ring on inputs/selects. */ .focus-ring:focus-within { - border-color: var(--sunrise-500); + border-color: var(--z-btn-primary-bg); box-shadow: var(--shadow-focus); } /* Slim, theme-tinted scrollbar for in-panel scroll areas. */ @@ -175,3 +175,321 @@ background-color: var(--text-faint); } } +/* root variable */ + +:root { + --primary-color: #1d4ed8; + --secondary-color: #f9fafb; + --font-color: #10182b; + --font-family: "IBM Plex Sans", serif; + --light-font-color: #667085; + --body-bg: #f0f4f8; + --bg-plain: #fff; + --bg-active: #00000014; + --border: #e5e7eb; + --shadow: 0px 4px 8px 0px rgba(228, 231, 236, 0.3); + --hover: #e4e4e4; + --hover-font: #fff; + --hover-bg: #f9fafb; + --hover-border: #667085; + --menu-item-bg: rgba(255, 255, 255, 0.1); + + + /* Navbar background color */ + --nav-bg-color: #fff; + --nav-item-color: #10182b; + --nav-item-active: #1b84ff; + --nav-item-active-bg: #c0d4ed45; + --nav-item-border-bottom: transparent; + --nav-dropdown-bg: #fff; + + /* Matching the navbar color */ + --nav-dropdown-color: #4B5675; + --nav-dropdown-active: #2e56e1; + --nav-dropdown-active-bg: #F9F9F9; + --nav-dropdown-border: none; + --nav-dropdown-radius: 4px; + --nav-dropdown-padding: 10px; + --menu-item-radius: 4px; + --p-8: 0px; + --nav-border: rgba(255, 255, 255, 0.1); + --nav-left-separator-line: #484848; + + /* tiles card */ + --tiles-card-bg: #fff; + --tiles-card-border: #e5e7eb; + --tiles-font-color: #10182b; + --tiles-font-size: 16px; + --tiles-count-size: 20px; + + /* button */ + --z-btn-primary-bg: #0058be; + --z-btn-primary-color: #fff; + --primary-btn-active: #196ed0; + --primary-btn-activeClr: #fff; + --z-btn-secondary-bg: #f4f4f4; + --z-btn-secondary-color: #10182b; + --secondary-btn-active-bg: #eaeaea; + --z-btn-outline-color: #0058be; + --z-btn-outline-border: #0058be; + + --button-height: 36px; + --z-btn-sm-height: 32px; + --z-btn-md-height: 40px; + --z-btn-lg-height: 48px; + + /* blocks */ + --block-bg: #fff; + --block-padding: 20px; + --block-radius: 20px; + --block-border: #e5e7eb; + /* --block-shadow: 0px 4px 8px 0px rgba(228, 231, 236, 0.3); */ + --block-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a); + + /* button or input */ + --button-radius: 8px; + --input-shadow: 0px 4px 8px 0px rgba(228, 231, 236, 0.3); + --input-border: #e5e7eb; + + /* font-size */ + --small-font: 14px; + --medium-font: 16px; + --large-font: 20px; + --z-btn-font-sm: 12px; + --z-btn-font-md: 14px; + --z-btn-font-lg: 16px; + + --small-icon: 24px; + + /* record view table color */ + --rv-table-bg: #fff; + --rv-table-header: #f9fafb; + --table-row-bg-select: #fafafa; + --table-tr-active: #f9fafb; + --rv-table-height: 40px; + --rv-table-btn-height: 36px; + --table-td-padding: 8px 20px; + + /* form input tags */ + --form-input-height: 40px; + --form-bg: #fff; + --form-input-bg: #fff; + --inputBox-border: ##e5e7eb; + --inputBox-border-active: #a2acbf; + --disable-bg: #fafafa; + --disable-color: #98a2b3; + + --toolTip-color: #2185d0; + --toolTip-active-clr: #208fe3; + + /* new template style variables */ + --z-body-bg: #f0f4f8; + --z-bg-plain: #fff; + + --z-bg-primary: #0058be; + --z-bg-secondary: #f4f4f4; + --z-bg-success: #1fc16b; + --z-bg-error: #fa3748; + --z-bg-light: #ffffff; + --z-bg-dark: #1e2227; + + --z-text-default: #10182b; + --z-text-primary: #0058be; + --z-text-secondary: #6c757d; + --z-text-success: #fff; + --z-text-error: #fff; + --z-text-muted: #6c757d; + --z-text-inverse: #ffffff; + --z-text-plain: #fff; + + + --z-bg-active: #3d94fb; + + --z-border-primary: #0058be; + --z-border-secondary: #ced4da; + --z-border-success: #1fc16b; + --z-border-error: #fa3748; + + --z-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --z-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); + --z-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.15); + + --z-font-size-xs: 10px; + --z-font-size-sm: 12px; + --z-font-size-md: 14px; + --z-font-size-lg: 16px; + --z-font-size-xl: 20px; + + --z-border-size-sm: 1px; + --z-border-size-md: 2px; + --z-border-size-lg: 4px; + + --z-border-radius-sm: 4px; + --z-border-radius-md: 8px; + --z-border-radius-lg: 16px; + --z-border-radius-full: 50%; + --z-border-radius-pill: 30px; + + /* app default text */ + --z-font-sm: 14px; + --z-font-md: 16px; + --z-font-lg: 20px; + + /* button style */ + --z-btn-radius: 8px; + --z-btn-height: 44px; + + /* block and section styles */ + --z-block-bg: #fff; + --z-block-radius: 8px; + --z-block-border: #e5e7eb; + --z-block-shadow: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + + /* record view table */ + --z-rv-table-header: #fff; + --z-rv-td-padding: 8px 20px; + --z-rv-table-border: #e5e7eb; + --z-rv-td-height: 40px; + + --z-tile-bg: #fff; + --z-tile-border: #e5e7eb; + + /*-----------------New BG Color Palatte----------------*/ + + /* Primary Colors */ + --z-bg-primary-100: #c0d4ed; + --z-bg-primary-200: #83b6f4; + --z-bg-primary-300: #5aa2f8; + --z-bg-primary-400: #0058be; + + /* Secondary Colors */ + --z-bg-secondary-100: #ffce8d; + --z-bg-secondary-200: #ffbb62; + --z-bg-secondary-300: #faa73b; + --z-bg-secondary-400: #f5f6f7; + + /* Gradient Colors */ + --z-bg-gradient-1: linear-gradient(90deg, #0058be 0%, #104F99 100%); + --z-bg-gradient-2: linear-gradient(90deg, #1C38A7 0%, #2E55DF 100%); + --z-bg-gradient-3: linear-gradient(94.13deg, #83B6F4 2.64%, #2B6BBA 97.36%); + --z-bg-gradient-4: linear-gradient(99.74deg, #A0C5F4 4.16%, #EFF3F8 97.03%); + + /* Neutral Colors */ + --z-bg-neutral-100: #ffffff; + --z-bg-neutral-200: #f9fafb; + --z-bg-neutral-300: #e5e7eb; + --z-bg-neutral-400: #d0d5dd; + --z-bg-neutral-500: #98a2b3; + --z-bg-neutral-600: #667085; + --z-bg-neutral-700: #475467; + --z-bg-neutral-800: #1d2939; + --z-bg-neutral-900: #10182b; + --z-bg-neutral-1000: #0c1323; + + /* Danger Colors */ + --z-bg-danger-100: #fecdca; + --z-bg-danger-200: #fda29b; + --z-bg-danger-300: #f97066; + --z-bg-danger-400: #f04438; + + /* Warning Colors */ + --z-bg-warning-100: #ffdf89; + --z-bg-warning-200: #fec84b; + --z-bg-warning-300: #ffdb43; + --z-bg-warning-400: #dfb400; + + /* Success Colors */ + --z-bg-success-100: oklch(97.9% .021 166.113); + --z-bg-success-200: #6ce9a6; + --z-bg-success-300: #32d584; + --z-bg-success-400: #12b76a; + + /*-----------------New Text Color Palatte----------------*/ + + /* Primary Colors */ + --z-text-primary-100: #c0d4ed; + --z-text-primary-200: #83b6f4; + --z-text-primary-300: #5aa2f8; + --z-text-primary-400: #0058be; + + /* Secondary Colors */ + --z-text-secondary-100: #ffce8d; + --z-text-secondary-200: #ffbb62; + --z-text-secondary-300: #faa73b; + --z-text-secondary-400: #f79009; + + /* Neutral Colors */ + --z-text-neutral-100: #ffffff; + --z-text-neutral-200: #f9fafb; + --z-text-neutral-300: #e5e7eb; + --z-text-neutral-400: #d0d5dd; + --z-text-neutral-500: #98a2b3; + --z-text-neutral-600: #667085; + --z-text-neutral-700: #475467; + --z-text-neutral-800: #1d2939; + --z-text-neutral-900: #10182b; + --z-text-neutral-1000: #0c1323; + + /* Danger Colors */ + --z-text-danger-100: #fecdca; + --z-text-danger-200: #fda29b; + --z-text-danger-300: #f97066; + --z-text-danger-400: #f04438; + + /* Warning Colors */ + --z-text-warning-100: #ffdf89; + --z-text-warning-200: #fec84b; + --z-text-warning-300: #ffdb43; + --z-text-warning-400: #dfb400; + + /* Success Colors */ + --z-text-success-100: #a6f4c5; + --z-text-success-200: #6ce9a6; + --z-text-success-300: #32d584; + --z-text-success-400: #12b76a; + + /*-----------------New Border Color Palatte----------------*/ + + /* Primary Colors */ + --z-border-default: #e5e7eb; + --z-border-primary-100: #c0d4ed; + --z-border-primary-200: #83b6f4; + --z-border-primary-300: #5aa2f8; + --z-border-primary-400: #0058be; + + /* Secondary Colors */ + --z-border-secondary-100: #ffce8d; + --z-border-secondary-200: #f3cfc4; + --z-border-secondary-300: #ebaf9d; + --z-border-secondary-400: #f79009; + + /* Neutral Colors */ + --z-border-neutral-100: #ffffff; + --z-border-neutral-200: #f9fafb; + --z-border-neutral-300: #e5e7eb; + --z-border-neutral-400: #d0d5dd; + --z-border-neutral-500: #98a2b3; + --z-border-neutral-600: #667085; + --z-border-neutral-700: #475467; + --z-border-neutral-800: #1d2939; + --z-border-neutral-900: #10182b; + --z-border-neutral-1000: #0c1323; + + /* Danger Colors */ + --z-border-danger-100: #fecdca; + --z-border-danger-200: #fda29b; + --z-border-danger-300: #f97066; + --z-border-danger-400: #f04438; + + /* Warning Colors */ + --z-border-warning-100: #ffdf89; + --z-border-warning-200: #fec84b; + --z-border-warning-300: #ffdb43; + --z-border-warning-400: #dfb400; + + /* Success Colors */ + --z-border-success-100: #a6f4c5; + --z-border-success-200: #6ce9a6; + --z-border-success-300: #32d584; + --z-border-success-400: #12b76a; +} diff --git a/src/styles/tokens/colors.css b/src/styles/tokens/colors.css index 8dc06b6..a05e6e4 100644 --- a/src/styles/tokens/colors.css +++ b/src/styles/tokens/colors.css @@ -97,7 +97,7 @@ --action-primary-hover: var(--sunrise-600); --action-navy: var(--navy-900); --action-navy-hover: var(--navy-800); - --focus-ring: rgba(242,107,58,0.45); + --focus-ring: rgba(0, 88, 190, 0.45); /* Status */ --status-success: var(--emerald-600);
-
+ {Object.entries(data).map(([key, value]) => {
+ if (fields && !fields.includes(key)) return null;
+ const lowerKey = key.toLowerCase();
+ if (lowerKey.includes('uuid') || /^\d+$/.test(key)) return null;
+
const isGridArray =
Array.isArray(value) &&
value.length > 0 &&
@@ -127,7 +111,7 @@ export function DetailView({ client, instanceId, title, columns = 2 }: DetailVie
return (
-