Files
clinicpro/assets/admin/components/icons/FilesServiceIcons.tsx
T
hamedandClaude Opus 4.8 be4d63744d feat(patients): port tauri /files-services detail pixel-for-pixel
Rebuild the patient case-file (/admin/patients/:uuid) to match tauri
files-services:
- breadcrumb (پرونده > name) + 140px patient banner (name + completion chip,
  file number, tag dots, phone/date rows, next appointment, یادداشت button)
  ported from BreadcrumbHeader + FileServicesHeader.
- services tab: replaced the plain list with the ServiceCard «مراجعه» grid —
  each card = a session (visit + performed services): success icon, services
  subtitle, doctor/date/notes rows, cost + remaining debt, تکمیل پرداخت
  (settles the session) / مشاهده فاکتور.
- مشاهده فاکتور opens InvoiceSummaryModal (خلاصه فاکتور tables) fed by the real
  invoice (GET /billing/invoices/{uuid}).
- tab bar now uses the tauri custom SVG icons.
- 20+ SVGs ported verbatim into components/icons/FilesServiceIcons.tsx; new
  components SessionServiceCard, PatientCaseBanner, InvoiceSummaryModal.

Frontend only — the sessions endpoint already returns invoice_uuid /
patient_debt_rials / is_paid. Tests updated (9 green).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-07-15 10:36:47 +03:30

195 lines
20 KiB
TypeScript

/**
* Patient case-file (tauri /files-services) icons, ported verbatim from
* clinic-pro-tauri/src/assets/icon so the detail page matches pixel-for-pixel.
*/
import type { CSSProperties } from 'react';
type IconProps = { color?: string; style?: CSSProperties };
/* ── Service card ─────────────────────────────────────────────────────────── */
export function FilesServiceSuccess({ style }: { style?: CSSProperties }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none" style={style}>
<rect width="36" height="36" rx="8" fill="#0D9F43" fillOpacity="0.15" />
<path d="M17.9993 26.3332C22.5827 26.3332 26.3327 22.5832 26.3327 17.9998C26.3327 13.4165 22.5827 9.6665 17.9993 9.6665C13.416 9.6665 9.66602 13.4165 9.66602 17.9998C9.66602 22.5832 13.416 26.3332 17.9993 26.3332Z" stroke="#3C9A4F" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.459 17.9999L16.8173 20.3583L21.5423 15.6416" stroke="#3C9A4F" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function FilesServiceMore({ style }: { style?: CSSProperties }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" style={style}>
<path d="M4.16667 8.3335C3.25 8.3335 2.5 9.0835 2.5 10.0002C2.5 10.9168 3.25 11.6668 4.16667 11.6668C5.08333 11.6668 5.83333 10.9168 5.83333 10.0002C5.83333 9.0835 5.08333 8.3335 4.16667 8.3335Z" fill="#3B3B3B" stroke="#3B3B3B" />
<path d="M15.8327 8.3335C14.916 8.3335 14.166 9.0835 14.166 10.0002C14.166 10.9168 14.916 11.6668 15.8327 11.6668C16.7493 11.6668 17.4993 10.9168 17.4993 10.0002C17.4993 9.0835 16.7493 8.3335 15.8327 8.3335Z" fill="#3B3B3B" stroke="#3B3B3B" />
<path d="M10.0007 8.3335C9.08398 8.3335 8.33398 9.0835 8.33398 10.0002C8.33398 10.9168 9.08398 11.6668 10.0007 11.6668C10.9173 11.6668 11.6673 10.9168 11.6673 10.0002C11.6673 9.0835 10.9173 8.3335 10.0007 8.3335Z" fill="#3B3B3B" stroke="#3B3B3B" />
</svg>
);
}
/* ── Banner ───────────────────────────────────────────────────────────────── */
export function FilesServicePhone() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
<rect width="36" height="36" rx="18" fill="#FFD8C5" fillOpacity="0.6" />
<path d="M26.3077 23.2748C26.3077 23.5748 26.241 23.8832 26.0993 24.1832C25.9577 24.4832 25.7744 24.7665 25.5327 25.0332C25.1244 25.4832 24.6743 25.8082 24.166 26.0165C23.666 26.2248 23.1244 26.3332 22.541 26.3332C21.691 26.3332 20.7827 26.1332 19.8243 25.7248C18.866 25.3165 17.9077 24.7665 16.9577 24.0748C15.9993 23.3748 15.091 22.5998 14.2243 21.7415C13.366 20.8748 12.591 19.9665 11.8993 19.0165C11.216 18.0665 10.666 17.1165 10.266 16.1748C9.86602 15.2248 9.66602 14.3165 9.66602 13.4498C9.66602 12.8832 9.76602 12.3415 9.96602 11.8415C10.166 11.3332 10.4827 10.8665 10.9243 10.4498C11.4577 9.92484 12.041 9.6665 12.6577 9.6665C12.891 9.6665 13.1243 9.7165 13.3327 9.8165C13.5493 9.9165 13.741 10.0665 13.891 10.2832L15.8243 13.0082C15.9743 13.2165 16.0827 13.4082 16.1577 13.5915C16.2327 13.7665 16.2743 13.9415 16.2743 14.0998C16.2743 14.2998 16.216 14.4998 16.0993 14.6915C15.991 14.8832 15.8327 15.0832 15.6327 15.2832L14.9993 15.9415C14.9077 16.0332 14.866 16.1415 14.866 16.2748C14.866 16.3415 14.8743 16.3998 14.891 16.4665C14.916 16.5332 14.941 16.5832 14.9577 16.6332C15.1077 16.9082 15.366 17.2665 15.7327 17.6998C16.1077 18.1332 16.5077 18.5748 16.941 19.0165C17.391 19.4582 17.8243 19.8665 18.266 20.2415C18.6993 20.6082 19.0577 20.8582 19.341 21.0082C19.3827 21.0248 19.4327 21.0498 19.491 21.0748C19.5577 21.0998 19.6243 21.1082 19.6993 21.1082C19.841 21.1082 19.9493 21.0582 20.041 20.9665L20.6743 20.3415C20.8827 20.1332 21.0827 19.9748 21.2743 19.8748C21.466 19.7582 21.6577 19.6998 21.866 19.6998C22.0243 19.6998 22.191 19.7332 22.3743 19.8082C22.5577 19.8832 22.7494 19.9915 22.9577 20.1332L25.716 22.0915C25.9327 22.2415 26.0827 22.4165 26.1743 22.6248C26.2577 22.8332 26.3077 23.0415 26.3077 23.2748Z" stroke="#F17732" strokeWidth="1.5" strokeMiterlimit="10" />
<path d="M23.4167 15.5002C23.4167 15.0002 23.025 14.2335 22.4417 13.6085C21.9083 13.0335 21.2 12.5835 20.5 12.5835" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M26.3333 15.4998C26.3333 12.2748 23.725 9.6665 20.5 9.6665" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function FilesServiceCalendar() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none">
<rect width="36" height="36" rx="18" fill="#FFD8C5" fillOpacity="0.6" />
<path d="M14.666 9.6665V12.1665" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M21.334 9.6665V12.1665" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M23.1667 25.8333C24.6394 25.8333 25.8333 24.6394 25.8333 23.1667C25.8333 21.6939 24.6394 20.5 23.1667 20.5C21.6939 20.5 20.5 21.6939 20.5 23.1667C20.5 24.6394 21.6939 25.8333 23.1667 25.8333Z" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M26.3333 26.3333L25.5 25.5" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M10.916 15.5752H25.0827" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M19.1417 26.3332H14.6667C11.75 26.3332 10.5 24.6665 10.5 22.1665V15.0832C10.5 12.5832 11.75 10.9165 14.6667 10.9165H21.3333C24.25 10.9165 25.5 12.5832 25.5 15.0832V18.8332" stroke="#F17732" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M17.9961 19.4167H18.0036" stroke="#F17732" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.9121 19.4167H14.9196" stroke="#F17732" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.9121 21.9167H14.9196" stroke="#F17732" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function FilesServiceNotification() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12.0199 20.5299C9.68987 20.5299 7.35987 20.1599 5.14987 19.4199C4.30987 19.1299 3.66987 18.5399 3.38987 17.7699C3.09987 16.9999 3.19987 16.1499 3.65987 15.3899L4.80987 13.4799C5.04987 13.0799 5.26987 12.2799 5.26987 11.8099V8.91992C5.26987 5.19992 8.29987 2.16992 12.0199 2.16992C15.7399 2.16992 18.7699 5.19992 18.7699 8.91992V11.8099C18.7699 12.2699 18.9899 13.0799 19.2299 13.4899L20.3699 15.3899C20.7999 16.1099 20.8799 16.9799 20.5899 17.7699C20.2999 18.5599 19.6699 19.1599 18.8799 19.4199C16.6799 20.1599 14.3499 20.5299 12.0199 20.5299Z" stroke="#F17732" strokeWidth="1.5" />
<path d="M13.8806 3.94018C13.8106 3.94018 13.7406 3.93018 13.6706 3.91018C13.3806 3.83018 13.1006 3.77018 12.8306 3.73018C11.9806 3.62018 11.1606 3.68018 10.3906 3.91018C10.1106 4.00018 9.8106 3.91018 9.6206 3.70018C9.4306 3.49018 9.3706 3.19018 9.4806 2.92018C9.8906 1.87018 10.8906 1.18018 12.0306 1.18018C13.1706 1.18018 14.1706 1.86018 14.5806 2.92018C14.6806 3.19018 14.6306 3.49018 14.4406 3.70018C14.2906 3.86018 14.0806 3.94018 13.8806 3.94018Z" stroke="#F17732" strokeWidth="1.5" />
<path d="M12.0195 22.8101C11.0295 22.8101 10.0695 22.4101 9.36953 21.7101C8.66953 21.0101 8.26953 20.0501 8.26953 19.0601H9.76953C9.76953 19.6501 10.0095 20.2301 10.4295 20.6501C10.8495 21.0701 11.4295 21.3101 12.0195 21.3101C13.2595 21.3101 14.2695 20.3001 14.2695 19.0601H15.7695C15.7695 21.1301 14.0895 22.8101 12.0195 22.8101Z" stroke="#F17732" strokeWidth="1.5" />
</svg>
);
}
export function FilesServiceMessage() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M7.08268 15.8332H6.66602C3.33268 15.8332 1.66602 14.9998 1.66602 10.8332V6.6665C1.66602 3.33317 3.33268 1.6665 6.66602 1.6665H13.3327C16.666 1.6665 18.3327 3.33317 18.3327 6.6665V10.8332C18.3327 14.1665 16.666 15.8332 13.3327 15.8332H12.916C12.6577 15.8332 12.4077 15.9582 12.2493 16.1665L10.9993 17.8332C10.4493 18.5665 9.54935 18.5665 8.99935 17.8332L7.74935 16.1665C7.61602 15.9832 7.30768 15.8332 7.08268 15.8332Z" stroke="#FFFFFF" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.83398 6.6665H14.1673" stroke="#FFFFFF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.83398 10.8335H10.834" stroke="#FFFFFF" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function ArrowLeftPH({ style }: { style?: CSSProperties }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" style={{ width: 18, height: 18, transform: 'rotate(180deg)', ...style }}>
<path d="M14.9973 19.9201L8.47728 13.4001C7.70728 12.6301 7.70728 11.3701 8.47728 10.6001L14.9973 4.08008" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function ArrowLeftD() {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none">
<path d="M9.57 5.93018L3.5 12.0002L9.57 18.0702" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M20.4999 12H3.66992" stroke="#616161" strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
/* ── Tab icons (color = active #5559ce / inactive #616161) ─────────────────── */
export function TabServices({ color = '#616161', style }: IconProps) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" style={style}>
<path d="M7.9668 15.0002V10.8335" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M10.0007 12.9165H5.83398" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M6.66602 1.6665V4.1665" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M13.334 1.6665V4.1665" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M13.1758 2.8501C15.9592 2.9501 17.3675 3.9751 17.4508 7.89176L17.5592 13.0334C17.6258 16.4668 16.8342 18.1918 12.6675 18.2834L7.66751 18.3834C3.50084 18.4668 2.63417 16.7668 2.56751 13.3418L2.45084 8.19176C2.36751 4.2751 3.74251 3.19176 6.50917 2.98343L13.1758 2.8501Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function TabInfo({ color = '#616161', style }: IconProps) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" style={style}>
<path d="M6.66602 1.6665V4.1665" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M13.334 1.6665V4.1665" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.83398 10.8335H12.5007" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M5.83398 14.1665H10.0007" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M13.3333 2.9165C16.1083 3.0665 17.5 4.12484 17.5 8.0415V13.1915C17.5 16.6248 16.6667 18.3415 12.5 18.3415H7.5C3.33333 18.3415 2.5 16.6248 2.5 13.1915V8.0415C2.5 4.12484 3.89167 3.07484 6.66667 2.9165H13.3333Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function TabCalendar({ color = '#616161', style }: IconProps) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" style={style}>
<path d="M8 2V5" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M16 2V5" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M3.5 9.08984H20.5" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M15.6947 13.7002H15.7037" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M11.9955 13.7002H12.0045" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
<path d="M8.29431 13.7002H8.30329" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function TabCard({ color = '#616161', style }: IconProps) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" style={style}>
<path d="M3.27539 13.2327L13.2337 3.27441" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M9.25195 15.2324L10.252 14.2324" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M11.4941 12.9907L13.4858 10.999" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M3.00041 8.53258L8.53374 2.99925C10.3004 1.23258 11.1837 1.22425 12.9337 2.97425L17.0254 7.06591C18.7754 8.81591 18.7671 9.69925 17.0004 11.4659L11.4671 16.9992C9.70041 18.7659 8.81707 18.7742 7.06707 17.0242L2.97541 12.9326C1.22541 11.1826 1.22541 10.3076 3.00041 8.53258Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M1.66602 18.332H18.3327" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function TabWallet({ color = '#616161', style }: IconProps) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" style={style}>
<path d="M10.834 9.2915H5.83398" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M1.66602 9.2917V5.4417C1.66602 3.7417 3.04102 2.3667 4.74102 2.3667H9.42435C11.1243 2.3667 12.4993 3.42503 12.4993 5.12503" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.566 10.1667C14.1493 10.5667 13.9494 11.1833 14.116 11.8166C14.3244 12.5916 15.091 13.0833 15.891 13.0833H16.666V14.2917C16.666 16.1333 15.1743 17.625 13.3327 17.625H4.99935C3.15768 17.625 1.66602 16.1333 1.66602 14.2917V8.45833C1.66602 6.61667 3.15768 5.125 4.99935 5.125H13.3327C15.166 5.125 16.666 6.625 16.666 8.45833V9.66663H15.766C15.2993 9.66663 14.8743 9.84999 14.566 10.1665Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M18.3329 10.5165V12.2332C18.3329 12.6999 17.9495 13.0832 17.4745 13.0832H15.8662C14.9662 13.0832 14.1412 12.4249 14.0662 11.5249C14.0162 10.9999 14.2162 10.5082 14.5662 10.1665C14.8745 9.84987 15.2995 9.6665 15.7662 9.6665H17.4745C17.9495 9.6665 18.3329 10.0499 18.3329 10.5165Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function TabSMS({ color = '#616161', style }: IconProps) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" style={style}>
<path d="M14.166 17.0832H5.83268C3.33268 17.0832 1.66602 15.8332 1.66602 12.9165V7.08317C1.66602 4.1665 3.33268 2.9165 5.83268 2.9165H14.166C16.666 2.9165 18.3327 4.1665 18.3327 7.08317V12.9165C18.3327 15.8332 16.666 17.0832 14.166 17.0832Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
<path d="M14.1673 7.5L11.559 9.58333C10.7006 10.2667 9.29231 10.2667 8.43398 9.58333L5.83398 7.5" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function TabCall({ color = '#616161', style }: IconProps) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" style={style}>
<path d="M18.3077 15.2748C18.3077 15.5748 18.241 15.8832 18.0993 16.1832C17.9577 16.4832 17.7744 16.7665 17.5327 17.0332C17.1244 17.4832 16.6743 17.8082 16.166 18.0165C15.666 18.2248 15.1244 18.3332 14.541 18.3332C13.691 18.3332 12.7827 18.1332 11.8243 17.7248C10.866 17.3165 9.90768 16.7665 8.95768 16.0748C7.99935 15.3748 7.09102 14.5998 6.22435 13.7415C5.36602 12.8748 4.59102 11.9665 3.89935 11.0165C3.21602 10.0665 2.66602 9.1165 2.26602 8.17484C1.86602 7.22484 1.66602 6.3165 1.66602 5.44984C1.66602 4.88317 1.76602 4.3415 1.96602 3.8415C2.16602 3.33317 2.48268 2.8665 2.92435 2.44984C3.45768 1.92484 4.04102 1.6665 4.65768 1.6665C4.89102 1.6665 5.12435 1.7165 5.33268 1.8165C5.54935 1.9165 5.74102 2.0665 5.89102 2.28317L7.82435 5.00817C7.97435 5.2165 8.08268 5.40817 8.15768 5.5915C8.23268 5.7665 8.27435 5.9415 8.27435 6.09984C8.27435 6.29984 8.21602 6.49984 8.09935 6.6915C7.99102 6.88317 7.83268 7.08317 7.63268 7.28317L6.99935 7.9415C6.90768 8.03317 6.86602 8.1415 6.86602 8.27484C6.86602 8.3415 6.87435 8.39984 6.89102 8.4665C6.91602 8.53317 6.94102 8.58317 6.95768 8.63317C7.10768 8.90817 7.36602 9.2665 7.73268 9.69984C8.10768 10.1332 8.50768 10.5748 8.94102 11.0165C9.39102 11.4582 9.82435 11.8665 10.266 12.2415C10.6993 12.6082 11.0577 12.8582 11.341 13.0082C11.3827 13.0248 11.4327 13.0498 11.491 13.0748C11.5577 13.0998 11.6243 13.1082 11.6993 13.1082C11.841 13.1082 11.9493 13.0582 12.041 12.9665L12.6743 12.3415C12.8827 12.1332 13.0827 11.9748 13.2743 11.8748C13.466 11.7582 13.6577 11.6998 13.866 11.6998C14.0243 11.6998 14.191 11.7332 14.3743 11.8082C14.5577 11.8832 14.7494 11.9915 14.9577 12.1332L17.716 14.0915C17.9327 14.2415 18.0827 14.4165 18.1743 14.6248C18.2577 14.8332 18.3077 15.0415 18.3077 15.2748Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" />
</svg>
);
}
export function TabAttach({ color = '#616161', style }: IconProps) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" style={style}>
<path d="M10.1664 9.83352L8.99138 11.0085C8.34138 11.6585 8.34138 12.7169 8.99138 13.3669C9.64138 14.0169 10.6997 14.0169 11.3497 13.3669L13.1998 11.5169C14.4998 10.2169 14.4998 8.10853 13.1998 6.8002C11.8998 5.5002 9.79139 5.5002 8.48306 6.8002L6.46641 8.81685C5.34974 9.93351 5.34974 11.7419 6.46641 12.8585" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M7.49935 18.3332H12.4993C16.666 18.3332 18.3327 16.6665 18.3327 12.4998V7.49984C18.3327 3.33317 16.666 1.6665 12.4993 1.6665H7.49935C3.33268 1.6665 1.66602 3.33317 1.66602 7.49984V12.4998C1.66602 16.6665 3.33268 18.3332 7.49935 18.3332Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}
export function TabBody({ color = '#616161', style }: IconProps) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 20 20" fill="none" style={style}>
<path d="M5 6.6665C3.75 6.66651 3.75 8.33317 5 8.33317L6.6671 8.33317C7.12734 8.33317 7.5 8.70357 7.5 9.16381V17.0832C7.5 18.3332 9.16667 18.3332 9.16667 17.0832C9.16667 15.8332 9.16667 13.3332 10 13.3332C10.8333 13.3332 10.8333 15.8332 10.8333 17.0832C10.8333 18.3332 12.5 18.3332 12.5 17.0832V9.1665C12.5 8.70627 12.8731 8.33317 13.3333 8.33317H15C16.25 8.33317 16.25 6.6665 15 6.6665H5Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
<path d="M11.6673 3.75016C11.6673 4.67064 10.9211 5.41683 10.0007 5.41683C9.08018 5.41683 8.33398 4.67064 8.33398 3.75016C8.33398 2.82969 9.08018 2.0835 10.0007 2.0835C10.9211 2.0835 11.6673 2.82969 11.6673 3.75016Z" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
</svg>
);
}