4644a3194d
- 5-tab navigation (Home/Clients/Collect/Tickets/Profile) - Inline styles throughout (17px min font, SafeAreaView) - Dashboard fixed to match real API shape - Ticket detail: 2 tabs (Details + Comments), always-visible comment input - Installation confirmation: GPS coordinate capture + client location update - User management screens (Admin only): list, create, detail + role/active toggle - Tasks folder replaces tickets folder - Remittance detail: inline styles - Record payment: prefill from client, live button text - Icon component with SVG icons - Color system: primary #0891B2
45 lines
3.7 KiB
TypeScript
45 lines
3.7 KiB
TypeScript
import { Svg, Path, Circle, Rect } from 'react-native-svg';
|
|
|
|
type IconName = 'home' | 'users' | 'collect' | 'ticket' | 'user' | 'arrow-left' | 'phone' | 'refresh' | 'send' | 'plus' | 'check' | 'location' | 'camera';
|
|
|
|
interface IconProps {
|
|
name: IconName;
|
|
size?: number;
|
|
color?: string;
|
|
}
|
|
|
|
export function Icon({ name, size = 24, color = '#111827' }: IconProps) {
|
|
const props = { width: size, height: size, viewBox: '0 0 24 24', fill: 'none' };
|
|
|
|
switch (name) {
|
|
case 'home':
|
|
return <Svg {...props}><Path d="M3 12L12 3l9 9" stroke={color} strokeWidth="2" strokeLinecap="round"/><Path d="M9 21V12h6v9" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/><Path d="M5 10v11h14V10" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></Svg>;
|
|
case 'users':
|
|
return <Svg {...props}><Circle cx="9" cy="7" r="4" stroke={color} strokeWidth="2"/><Path d="M3 21v-2a4 4 0 014-4h4a4 4 0 014 4v2" stroke={color} strokeWidth="2" strokeLinecap="round"/><Path d="M16 3.13a4 4 0 010 7.75M21 21v-2a4 4 0 00-3-3.87" stroke={color} strokeWidth="2" strokeLinecap="round"/></Svg>;
|
|
case 'collect':
|
|
return <Svg {...props}><Rect x="2" y="5" width="20" height="14" rx="2" stroke={color} strokeWidth="2"/><Path d="M2 10h20" stroke={color} strokeWidth="2"/></Svg>;
|
|
case 'ticket':
|
|
return <Svg {...props}><Path d="M2 9a3 3 0 110 6V9zM22 9v6a3 3 0 110-6v0" stroke={color} strokeWidth="2"/><Rect x="2" y="6" width="20" height="12" rx="2" stroke={color} strokeWidth="2"/><Path d="M9 12h6" stroke={color} strokeWidth="2" strokeLinecap="round"/></Svg>;
|
|
case 'user':
|
|
return <Svg {...props}><Circle cx="12" cy="8" r="4" stroke={color} strokeWidth="2"/><Path d="M4 20v-1a8 8 0 0116 0v1" stroke={color} strokeWidth="2" strokeLinecap="round"/></Svg>;
|
|
case 'arrow-left':
|
|
return <Svg {...props}><Path d="M19 12H5M12 19l-7-7 7-7" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></Svg>;
|
|
case 'phone':
|
|
return <Svg {...props}><Path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.8 19.79 19.79 0 01.06 1.18 2 2 0 012.03 0h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 14.92v2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></Svg>;
|
|
case 'refresh':
|
|
return <Svg {...props}><Path d="M23 4v6h-6M1 20v-6h6" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/><Path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></Svg>;
|
|
case 'send':
|
|
return <Svg {...props}><Path d="M22 2L11 13M22 2L15 22l-4-9-9-4 20-7z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></Svg>;
|
|
case 'plus':
|
|
return <Svg {...props}><Path d="M12 5v14M5 12h14" stroke={color} strokeWidth="2" strokeLinecap="round"/></Svg>;
|
|
case 'check':
|
|
return <Svg {...props}><Path d="M20 6L9 17l-5-5" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></Svg>;
|
|
case 'location':
|
|
return <Svg {...props}><Path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" stroke={color} strokeWidth="2"/><Circle cx="12" cy="9" r="2.5" stroke={color} strokeWidth="2"/></Svg>;
|
|
case 'camera':
|
|
return <Svg {...props}><Path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/><Circle cx="12" cy="13" r="4" stroke={color} strokeWidth="2"/></Svg>;
|
|
default:
|
|
return null;
|
|
}
|
|
}
|