diff --git a/package-lock.json b/package-lock.json index 96f2916..287e27e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "@aeroresolve/frontend", "version": "0.0.0", "dependencies": { + "@phosphor-icons/react": "^2.1.10", "@tailwindcss/vite": "^4.3.0", "axios": "^1.18.1", "framer-motion": "^12.40.0", @@ -576,6 +577,19 @@ "url": "https://github.com/sponsors/Boshen" } }, + "node_modules/@phosphor-icons/react": { + "version": "2.1.10", + "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz", + "integrity": "sha512-vt8Tvq8GLjheAZZYa+YG/pW7HDbov8El/MANW8pOAz4eGxrwhnbfrQZq0Cp4q8zBEu8NIhHdnr+r8thnfRSNYA==", + "license": "MIT", + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">= 16.8", + "react-dom": ">= 16.8" + } + }, "node_modules/@rolldown/binding-android-arm64": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm64/-/binding-android-arm64-1.1.0.tgz", diff --git a/package.json b/package.json index 1c7d32d..bcba6c0 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "preview:uat": "vite preview --mode uat" }, "dependencies": { + "@phosphor-icons/react": "^2.1.10", "@tailwindcss/vite": "^4.3.0", "axios": "^1.18.1", "framer-motion": "^12.40.0", diff --git a/src/app/cohartManage/components/AddCohart.tsx b/src/app/cohartManage/components/AddCohart.tsx index ba9bdb2..6cc12bd 100644 --- a/src/app/cohartManage/components/AddCohart.tsx +++ b/src/app/cohartManage/components/AddCohart.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useMemo, useRef } from 'react'; -import { FileText, ChevronRight, ChevronLeft, User, CircleCheck, Globe } from 'lucide-react'; +import { FileTextIcon, CaretRightIcon, CaretLeftIcon, UserListIcon, GlobeIcon, UserCircleCheckIcon } from '@phosphor-icons/react'; import { CustomModal, CustomInput, @@ -344,13 +344,13 @@ export default function AddCohart({ isOpen, onClose, onSuccess, editData }: AddC Cancel ) : ( - } onClick={() => setStep(1)}> + } onClick={() => setStep(1)}> Previous Step )} } + rightIcon={step === 2 && isOnFinalSection ? undefined : } onClick={ step === 1 ? () => setStep(2) @@ -377,7 +377,7 @@ export default function AddCohart({ isOpen, onClose, onSuccess, editData }: AddC className="!max-w-[750px]" title={isEditMode ? 'Edit Cohort' : 'New Dynamic Cohorts'} description="Configure targeting criteria for high-precision recovery." - icon={} + icon={} headerExtra={stepper} footer={footer} allowBackdropClose={false} @@ -442,7 +442,7 @@ export default function AddCohart({ isOpen, onClose, onSuccess, editData }: AddC {/* Passenger Attributes */} } + icon={} title="Passenger Attributes" isOpen={openSection === 'passenger'} hasData={passengerHasData} @@ -478,7 +478,7 @@ export default function AddCohart({ isOpen, onClose, onSuccess, editData }: AddC {/* Customer Value */} } + icon={} title="Customer Value" isOpen={openSection === 'customer'} hasData={customerHasData} @@ -523,7 +523,7 @@ export default function AddCohart({ isOpen, onClose, onSuccess, editData }: AddC {/* Journey Context */} } + icon={} title="Journey Context" isOpen={openSection === 'journey'} hasData={journeyHasData} diff --git a/src/app/cohartManage/components/cohartList.tsx b/src/app/cohartManage/components/cohartList.tsx index 020482f..4ac232a 100644 --- a/src/app/cohartManage/components/cohartList.tsx +++ b/src/app/cohartManage/components/cohartList.tsx @@ -1,6 +1,6 @@ import { useState, useEffect, useCallback } from 'react'; import AddCohart from './AddCohart'; -import { Plus, Trash2, Search, Check, X, Pencil } from 'lucide-react'; +import { PlusIcon, TrashIcon, MagnifyingGlassIcon, CheckIcon, XIcon, PencilSimpleIcon } from '@phosphor-icons/react'; import { CustomTable, CustomInput, @@ -174,7 +174,7 @@ export default function CohortList() { {row.status !== 'Active' && ( } + icon={} variant="success" onClick={() => setDeactivateTarget(row)} > @@ -183,20 +183,20 @@ export default function CohortList() { )} {row.status === 'Active' && ( } + icon={} onClick={() => setDeactivateTarget(row)} > Deactivate )} } + icon={} onClick={() => setEditTarget(row)} > Edit } + icon={} variant="danger" onClick={() => setDeleteTarget(row)} > @@ -249,7 +249,7 @@ export default function CohortList() { placeholder="Search cohorts..." value={search} onChange={e => handleSearchChange(e.target.value)} - leftIcon={} + leftIcon={} className="!bg-[#F3F6F5] !rounded-[10px] !h-[38px] !border !border-[#E5E7EB]" containerClassName="!gap-0" /> @@ -269,7 +269,7 @@ export default function CohortList() { } + leftIcon={} className="!rounded-[10px] !gap-[10px] !h-[40px]" onClick={() => setIsAddOpen(true)} > diff --git a/src/app/dashboard/index.tsx b/src/app/dashboard/index.tsx index 726a96e..aa6514f 100644 --- a/src/app/dashboard/index.tsx +++ b/src/app/dashboard/index.tsx @@ -12,7 +12,7 @@ import CustomRadio from "../../components/custom/CustomRadio"; import CustomSwitch from "../../components/custom/CustomSwitch"; import CustomTable, { type Column } from "../../components/custom/CustomTable"; import CustomActionMenu, { CustomActionItem } from "../../components/custom/CustomActionMenu"; -import { FileText, ChevronRight, Plus, Check, X, Copy, Edit2, Trash2 } from "lucide-react"; +import { FileTextIcon, CaretRightIcon, CheckIcon, XIcon, CopyIcon, PencilSimpleIcon, TrashIcon, PlusIcon } from "@phosphor-icons/react"; function HomePage() { const [searchValue, setSearchValue] = useState(""); @@ -76,11 +76,11 @@ function HomePage() { accessor: () => (
- }>Activate - }>Deactivate - }>Duplicate - }>Edit - }>Delete + }>Activate + }>Deactivate + }>Duplicate + }>Edit + }>Delete
), @@ -127,7 +127,7 @@ function HomePage() { size="md" /> - }> + }> Create Cohort @@ -334,11 +334,11 @@ function HomePage() { onClose={() => setIsModalOpen(false)} title="New Dynamic Cohorts" description="Configure targeting criteria for high-precision recovery." - icon={} + icon={} primaryAction={{ label: "Next Step", onClick: () => setIsModalOpen(false), - icon: + icon: }} secondaryAction={{ label: "Cancel", diff --git a/src/app/policyEngine/components/AddPolicyEngine.tsx b/src/app/policyEngine/components/AddPolicyEngine.tsx index a2d884c..d93c2e7 100644 --- a/src/app/policyEngine/components/AddPolicyEngine.tsx +++ b/src/app/policyEngine/components/AddPolicyEngine.tsx @@ -1,7 +1,7 @@ import { useState, useRef, useEffect } from 'react'; import { - ArrowLeft, Plus, Trash2, Minus, Book, Users, GitBranch, ChevronDown -} from 'lucide-react'; + ArrowLeftIcon, PlusIcon, TrashIcon, MinusIcon, BookIcon, UsersIcon, GitBranchIcon, CaretDownIcon +} from '@phosphor-icons/react'; import { useNavigate } from 'react-router-dom'; import { CustomInput, @@ -128,7 +128,7 @@ function LogicDropdown({ value, onChange, readOnly = false }: { value: string; o className={boxClass} > {value} - + {open && (
@@ -311,7 +311,7 @@ export default function AddPolicyEngine() { onClick={() => navigate('/policy-engine')} className="mt-1 p-1 hover:bg-gray-100 rounded-full transition-colors text-gray-500" > - +

Deploy New Policy

@@ -322,7 +322,7 @@ export default function AddPolicyEngine() { } + leftIcon={} > Deploy Policy @@ -335,7 +335,7 @@ export default function AddPolicyEngine() { {/* Policy Information Card */}
- +
@@ -396,7 +396,7 @@ export default function AddPolicyEngine() { {/* Target Audience Card */}
- +
@@ -439,7 +439,7 @@ export default function AddPolicyEngine() { {/* Rule Engine Card */}
- + )}
@@ -498,7 +498,7 @@ export default function AddPolicyEngine() { disabled={prevPriority === null} className="flex-1 flex items-center justify-center h-full hover:bg-gray-50 text-gray-500 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent" > - + {rule.priority} @@ -508,7 +508,7 @@ export default function AddPolicyEngine() { disabled={nextPriority === null} className="flex-1 flex items-center justify-center h-full hover:bg-gray-50 text-gray-500 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-transparent" > - +
); @@ -564,7 +564,7 @@ export default function AddPolicyEngine() { } + leftIcon={} onClick={() => handleAddCondition(rule.id)} > @@ -579,7 +579,7 @@ export default function AddPolicyEngine() { onClick={() => handleDeleteCondition(rule.id, condition.id)} className="w-11 h-11 flex items-center justify-center bg-red-50 text-[#D40000] rounded-[10px] hover:bg-red-100 transition-colors" > - + )}
@@ -630,7 +630,7 @@ export default function AddPolicyEngine() { } + leftIcon={} onClick={() => handleAddAction(rule.id)} > @@ -645,7 +645,7 @@ export default function AddPolicyEngine() { onClick={() => handleDeleteAction(rule.id, action.id)} className="w-11 h-11 flex items-center justify-center bg-red-50 text-[#D40000] rounded-[10px] hover:bg-red-100 transition-colors" > - + )}
diff --git a/src/app/policyEngine/components/PolicyEngineList.tsx b/src/app/policyEngine/components/PolicyEngineList.tsx index 3ec751c..df1ba72 100644 --- a/src/app/policyEngine/components/PolicyEngineList.tsx +++ b/src/app/policyEngine/components/PolicyEngineList.tsx @@ -1,5 +1,5 @@ import { useState, useEffect, useCallback } from 'react'; -import { Plus, Trash2, Search, Check, X, Pencil, Copy } from 'lucide-react'; +import { PlusIcon, TrashIcon, MagnifyingGlassIcon, XIcon, PencilSimpleIcon, CopyIcon, ChecksIcon } from '@phosphor-icons/react'; import { useNavigate } from 'react-router-dom'; import { CustomTable, @@ -183,7 +183,7 @@ export default function PolicyEngineList() { {row.status !== 'Active' && ( } + icon={} variant="success" onClick={() => setDeactivateTarget(row)} > @@ -192,26 +192,26 @@ export default function PolicyEngineList() { )} {row.status === 'Active' && ( } + icon={} onClick={() => setDeactivateTarget(row)} > Deactivate )} } + icon={} onClick={() => console.log('Duplicate:', row.id)} > Duplicate } + icon={} onClick={() => console.log('Edit:', row.id)} > Edit } + icon={} variant="danger" onClick={() => setDeleteTarget(row)} > @@ -255,7 +255,7 @@ export default function PolicyEngineList() { placeholder="Search framework registry..." value={search} onChange={e => handleSearchChange(e.target.value)} - leftIcon={} + leftIcon={} className="!bg-[#F3F6F5] !rounded-[10px] !h-[38px] !border !border-[#E5E7EB]" containerClassName="!gap-0" /> @@ -266,7 +266,7 @@ export default function PolicyEngineList() { } + leftIcon={} className="!rounded-[10px] !gap-[10px] !h-[40px] !bg-[#1E7D5C] hover:!bg-[#17664B]" onClick={() => navigate('/policy-engine/add')} > diff --git a/src/components/custom/CustomAccordionSection.tsx b/src/components/custom/CustomAccordionSection.tsx index 40d4095..7b2c876 100644 --- a/src/components/custom/CustomAccordionSection.tsx +++ b/src/components/custom/CustomAccordionSection.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { CircleCheck } from "lucide-react"; +import { CheckCircleIcon } from "@phosphor-icons/react"; interface CustomAccordionSectionProps { icon: React.ReactNode; @@ -27,7 +27,7 @@ const CustomAccordionSection: React.FC = ({ > {icon} {title} - {!isOpen && hasData && } + {!isOpen && hasData && } {isOpen &&
{children}
}
diff --git a/src/components/custom/CustomActionMenu.tsx b/src/components/custom/CustomActionMenu.tsx index b913c38..2e79886 100644 --- a/src/components/custom/CustomActionMenu.tsx +++ b/src/components/custom/CustomActionMenu.tsx @@ -1,6 +1,6 @@ import React, { useCallback, useEffect, useRef, useState, useLayoutEffect } from "react"; import { createPortal } from "react-dom"; -import { MoreVertical } from "lucide-react"; +import { DotsThreeVerticalIcon } from "@phosphor-icons/react"; interface CustomActionMenuProps { children: React.ReactNode; @@ -86,7 +86,7 @@ export const CustomActionMenu: React.FC = ({ className={`flex h-8 w-8 items-center justify-center rounded-full transition-colors focus:outline-none ${isOpen ? 'bg-gray-100 text-black' : 'text-black hover:bg-gray-100'}`} aria-label="Actions" > - + {isOpen && diff --git a/src/components/custom/CustomAlertBanner.tsx b/src/components/custom/CustomAlertBanner.tsx index faddcad..7bb2be9 100644 --- a/src/components/custom/CustomAlertBanner.tsx +++ b/src/components/custom/CustomAlertBanner.tsx @@ -1,5 +1,5 @@ import { type FC, useEffect } from "react"; -import { AlertTriangle, CircleCheck, Info, XCircle, X } from 'lucide-react'; +import { WarningIcon, CheckCircleIcon, InfoIcon, XCircleIcon, XIcon } from '@phosphor-icons/react'; type AlertType = 'error' | 'success' | 'warning' | 'info'; @@ -13,19 +13,19 @@ interface AlertBannerProps { const alertConfig = { error: { - icon: , + icon: , containerClasses: 'bg-red-50 border-red-500 text-red-800', }, success: { - icon: , + icon: , containerClasses: 'bg-green-50 border-green-500 text-green-800', }, warning: { - icon: , + icon: , containerClasses: 'bg-yellow-50 border-yellow-500 text-yellow-800', }, info: { - icon: , + icon: , containerClasses: 'bg-blue-50 border-blue-500 text-blue-800', }, }; @@ -75,7 +75,7 @@ const AlertBanner: FC = ({ className="ml-4 p-1 rounded-full hover:bg-black/5 transition-colors focus:outline-none" aria-label="Close alert" > - + )}
diff --git a/src/components/custom/CustomAppLoader.tsx b/src/components/custom/CustomAppLoader.tsx index 34ec1ba..943b60a 100644 --- a/src/components/custom/CustomAppLoader.tsx +++ b/src/components/custom/CustomAppLoader.tsx @@ -1,14 +1,14 @@ import { useState, useEffect } from "react"; -import { Users, Briefcase, Building2 } from "lucide-react"; +import { UsersIcon, BriefcaseIcon, BuildingsIcon } from "@phosphor-icons/react"; const CustomAppLoader = () => { const [currentIndex, setCurrentIndex] = useState(0); // HRM related icons const icons = [ - { component: Users, key: "users" }, - { component: Briefcase, key: "briefcase" }, - { component: Building2, key: "building" }, + { component: UsersIcon, key: "users" }, + { component: BriefcaseIcon, key: "briefcase" }, + { component: BuildingsIcon, key: "building" }, ]; useEffect(() => { diff --git a/src/components/custom/CustomBackButton.tsx b/src/components/custom/CustomBackButton.tsx index b6c3640..1b6a001 100644 --- a/src/components/custom/CustomBackButton.tsx +++ b/src/components/custom/CustomBackButton.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Link, useNavigate } from "react-router-dom"; -import { MoveLeft } from "lucide-react"; +import { ArrowLeftIcon } from "@phosphor-icons/react"; interface CustomBackButtonProps { to?: string; @@ -29,7 +29,7 @@ const CustomBackButton: React.FC = ({ className={`group relative inline-flex items-center gap-2 text-gray-500 hover:text-gray-900 transition-colors cursor-pointer ${className}`} >
- +
{label && {label}} diff --git a/src/components/custom/CustomCheckBox.tsx b/src/components/custom/CustomCheckBox.tsx index b5d1cf1..963e20c 100644 --- a/src/components/custom/CustomCheckBox.tsx +++ b/src/components/custom/CustomCheckBox.tsx @@ -1,5 +1,5 @@ import React, { forwardRef } from "react"; -import { Check } from "lucide-react"; +import { CheckIcon } from "@phosphor-icons/react"; interface CustomCheckBoxProps extends Omit, "type"> { @@ -37,7 +37,7 @@ const CustomCheckBox = forwardRef( peer-disabled:bg-gray-100 peer-disabled:border-gray-200 `} > - = ({ variant === 'success' ? 'bg-emerald-50 text-emerald-600' : 'bg-blue-50 text-blue-600' }`}> - {variant === 'success' ? : } + {variant === 'success' ? : }

diff --git a/src/components/custom/CustomDatePicker.tsx b/src/components/custom/CustomDatePicker.tsx index 9713511..42a218e 100644 --- a/src/components/custom/CustomDatePicker.tsx +++ b/src/components/custom/CustomDatePicker.tsx @@ -1,5 +1,5 @@ import React, { forwardRef } from "react"; -import { Calendar } from "lucide-react"; +import { CalendarBlankIcon } from "@phosphor-icons/react"; interface CustomDatePickerProps extends Omit, "type"> { @@ -42,7 +42,7 @@ const CustomDatePicker = forwardRef( {...props} /> - +

{error &&

{error}

} diff --git a/src/components/custom/CustomDateTimePicker.tsx b/src/components/custom/CustomDateTimePicker.tsx index 385ff74..86bfeed 100644 --- a/src/components/custom/CustomDateTimePicker.tsx +++ b/src/components/custom/CustomDateTimePicker.tsx @@ -1,5 +1,5 @@ import React, { forwardRef } from "react"; -import { CalendarClock } from "lucide-react"; +import { CalendarDotsIcon } from "@phosphor-icons/react"; interface CustomDateTimePickerProps extends Omit, "type"> { @@ -44,7 +44,7 @@ const CustomDateTimePicker = forwardRef< {...props} /> - +
{error &&

{error}

} diff --git a/src/components/custom/CustomDropdown.tsx b/src/components/custom/CustomDropdown.tsx index 3a82d2a..c8a518c 100644 --- a/src/components/custom/CustomDropdown.tsx +++ b/src/components/custom/CustomDropdown.tsx @@ -1,5 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; -import { ChevronDown, Check } from "lucide-react"; +import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react"; import DropdownPortal from "./DropdownPortal"; interface Option { @@ -118,7 +118,7 @@ const CustomDropdown = React.forwardRef(
- @@ -157,7 +157,7 @@ const CustomDropdown = React.forwardRef( } `} > - {isSelected && } + {isSelected && } = ({ />
- + {isDragging ? "Drop files here" : "Click or drag to upload"} @@ -185,7 +185,7 @@ const CustomFileUploader: React.FC = ({ }} className="p-1 text-gray-400 hover:text-red-500 transition-colors rounded-full hover:bg-gray-100" > - + )}
@@ -206,7 +206,7 @@ const CustomFileUploader: React.FC = ({ className="w-full h-full object-cover" /> ) : ( - + )}
@@ -223,7 +223,7 @@ const CustomFileUploader: React.FC = ({ onClick={(e) => removeFile(e, index)} className="p-1 text-gray-400 hover:text-[#0B3B6A] transition-colors rounded-full hover:bg-gray-100" > - + )}
diff --git a/src/components/custom/CustomFullModal.tsx b/src/components/custom/CustomFullModal.tsx index e338bf4..bef6fcc 100644 --- a/src/components/custom/CustomFullModal.tsx +++ b/src/components/custom/CustomFullModal.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import { X } from "lucide-react"; +import { XIcon } from "@phosphor-icons/react"; interface FullModalProps { isOpen: boolean; @@ -61,7 +61,7 @@ const FullModal: React.FC = ({ onClick={onClose} className="absolute top-4 right-4 z-50 p-2 bg-black/10 hover:bg-black/20 rounded-full transition-colors md:top-6 md:right-6" > - + )} diff --git a/src/components/custom/CustomInput.tsx b/src/components/custom/CustomInput.tsx index c8a91bd..5973c0b 100644 --- a/src/components/custom/CustomInput.tsx +++ b/src/components/custom/CustomInput.tsx @@ -1,5 +1,5 @@ import React, { useState, forwardRef } from "react"; -import { Phone, Eye, EyeOff } from "lucide-react"; +import { PhoneIcon, EyeIcon, EyeSlashIcon } from "@phosphor-icons/react"; type InputType = "text" | "password" | "number" | "email" | "tel" | "date" | "month" | "datetime-local"; @@ -73,7 +73,7 @@ const CustomInput = forwardRef( > {isPhone && (
- + {phonePrefix}
)} @@ -120,7 +120,7 @@ const CustomInput = forwardRef( onClick={() => setShowPassword(!showPassword)} className="absolute right-3 top-1/2 -translate-y-1/2 cursor-pointer text-slate-400 select-none hover:text-primary" > - {showPassword ? : } + {showPassword ? : } ) : ( !isPhone && diff --git a/src/components/custom/CustomModal.tsx b/src/components/custom/CustomModal.tsx index 3fc99b7..3a42c33 100644 --- a/src/components/custom/CustomModal.tsx +++ b/src/components/custom/CustomModal.tsx @@ -1,6 +1,6 @@ import React, { useEffect } from "react"; import { createPortal } from "react-dom"; -import { XCircle } from "lucide-react"; +import { XCircleIcon } from "@phosphor-icons/react"; import CustomButton from "./CustomButton"; type ModalSize = "sm" | "md" | "lg" | "xl" | "full"; @@ -140,7 +140,7 @@ const CustomModal: React.FC = ({ className="absolute right-4 top-4 flex h-8 w-8 items-center justify-center rounded-full text-slate-400 transition hover:text-slate-600 hover:bg-slate-100" > - + )} diff --git a/src/components/custom/CustomMultiSelect.tsx b/src/components/custom/CustomMultiSelect.tsx index 13ab6ab..991228e 100644 --- a/src/components/custom/CustomMultiSelect.tsx +++ b/src/components/custom/CustomMultiSelect.tsx @@ -1,5 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; -import { ChevronDown, Check } from "lucide-react"; +import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react"; import DropdownPortal from "./DropdownPortal"; interface Option { @@ -127,7 +127,7 @@ const CustomMultiSelect = React.forwardRef - @@ -166,7 +166,7 @@ const CustomMultiSelect = React.forwardRef - {isSelected && } + {isSelected && } {option.label} ); diff --git a/src/components/custom/CustomSearchableDropdown.tsx b/src/components/custom/CustomSearchableDropdown.tsx index 84d9ea3..ef2694f 100644 --- a/src/components/custom/CustomSearchableDropdown.tsx +++ b/src/components/custom/CustomSearchableDropdown.tsx @@ -1,5 +1,5 @@ import React, { useState, useRef, useEffect } from "react"; -import { ChevronDown, X, Check } from "lucide-react"; +import { CaretDownIcon, XIcon, CheckIcon } from "@phosphor-icons/react"; import DropdownPortal from "./DropdownPortal"; interface Option { @@ -205,7 +205,7 @@ const CustomSearchableDropdown = React.forwardRef< disabled={disabled} tabIndex={-1} > - @@ -214,7 +214,7 @@ const CustomSearchableDropdown = React.forwardRef< {searchTerm && !disabled && ( )} @@ -248,7 +248,7 @@ const CustomSearchableDropdown = React.forwardRef< } `} > - {isSelected && } + {isSelected && } = ({ onClick={onClose} className="absolute top-4 right-4 text-gray-500 hover:text-gray-700 focus:outline-none" > - + {/* Animated Icon Background */} diff --git a/src/components/custom/CustomTable.tsx b/src/components/custom/CustomTable.tsx index 26576bb..b5a5bf9 100644 --- a/src/components/custom/CustomTable.tsx +++ b/src/components/custom/CustomTable.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Search, ChevronLeft, ChevronRight, Filter, ArrowDownUp } from "lucide-react"; +import { MagnifyingGlassIcon, CaretLeftIcon, CaretRightIcon, FunnelSimpleIcon, ArrowsDownUpIcon } from "@phosphor-icons/react"; import CustomInput from "./CustomInput"; export interface Column { @@ -80,7 +80,7 @@ export function CustomTable({ placeholder={searchPlaceholder} value={searchValue} onChange={(e) => onSearchChange(e.target.value)} - leftIcon={} + leftIcon={} size="sm" containerClassName="!gap-0" /> @@ -106,8 +106,8 @@ export function CustomTable({ >
{col.header} - {col.sortable && } - {col.filterable && } + {col.sortable && } + {col.filterable && }
))} @@ -153,7 +153,7 @@ export function CustomTable({ disabled={currentPage === 1} className="w-8 h-8 flex items-center justify-center rounded-lg border border-[#9FACA1] bg-white text-[#9FACA1] hover:bg-gray-50 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" > - +
@@ -178,7 +178,7 @@ export function CustomTable({ disabled={currentPage === totalPages} className="w-8 h-8 flex items-center justify-center rounded-lg border border-[#9FACA1] bg-white text-[#9FACA1] hover:bg-gray-50 hover:text-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" > - +
diff --git a/src/components/custom/CustomTimePicker.tsx b/src/components/custom/CustomTimePicker.tsx index 0f1aa4f..a3a0abd 100644 --- a/src/components/custom/CustomTimePicker.tsx +++ b/src/components/custom/CustomTimePicker.tsx @@ -1,5 +1,5 @@ import React, { forwardRef } from "react"; -import { Clock } from "lucide-react"; +import { ClockIcon } from "@phosphor-icons/react"; interface CustomTimePickerProps extends Omit, "type"> { @@ -42,7 +42,7 @@ const CustomTimePicker = forwardRef( {...props} /> - + {error &&

{error}

} diff --git a/src/layout/AppHeader.tsx b/src/layout/AppHeader.tsx index 1fa8ded..3ddcdcd 100644 --- a/src/layout/AppHeader.tsx +++ b/src/layout/AppHeader.tsx @@ -1,4 +1,4 @@ -import { Bell, Menu } from 'lucide-react'; +import { BellIcon, ListIcon } from '@phosphor-icons/react'; import { useLocation } from 'react-router-dom'; const PAGE_META: Record = { @@ -22,7 +22,7 @@ export default function AppHeader({ onMenuClick }: AppHeaderProps) { onClick={onMenuClick} className="lg:hidden p-2 text-slate-500 hover:bg-slate-100 rounded-lg transition-colors" > - +

{meta.title}

@@ -31,7 +31,7 @@ export default function AppHeader({ onMenuClick }: AppHeaderProps) {
diff --git a/src/layout/AppSidebar.tsx b/src/layout/AppSidebar.tsx index d85c368..c45549a 100644 --- a/src/layout/AppSidebar.tsx +++ b/src/layout/AppSidebar.tsx @@ -1,27 +1,27 @@ import { useState } from 'react'; import { Link, useLocation } from 'react-router-dom'; import { - Settings2, - RefreshCcw, - Users, - ShieldCheck, - Settings, - History, - LogOut, - HelpCircle, - ChevronsLeft, - ChevronsRight, - LayoutGrid -} from 'lucide-react'; + ShieldCheckIcon, + GearIcon, + ClockCounterClockwiseIcon, + CaretDoubleRightIcon, + SquaresFourIcon, + FadersIcon, + ArrowsClockwiseIcon, + UsersFourIcon, + CaretDoubleLeftIcon, + SignOutIcon, + QuestionIcon +} from '@phosphor-icons/react'; const NAV_ITEMS = [ - { label: 'Dashboard', path: '/', icon: LayoutGrid }, - { label: 'Simulation Engine', path: '/simulation', icon: Settings2 }, - { label: 'Recovery Incidents', path: '/recovery', icon: RefreshCcw }, - { label: 'Cohort Management', path: '/cohorts', icon: Users }, - { label: 'Policy Engine', path: '/policy-engine', icon: ShieldCheck }, - { label: 'Configuration', path: '/config', icon: Settings }, - { label: 'Audit Logs', path: '/audit', icon: History }, + { label: 'Dashboard', path: '/', icon: SquaresFourIcon }, + { label: 'Simulation Engine', path: '/simulation', icon: FadersIcon }, + { label: 'Recovery Incidents', path: '/recovery', icon: ArrowsClockwiseIcon }, + { label: 'Cohort Management', path: '/cohorts', icon: UsersFourIcon }, + { label: 'Policy Engine', path: '/policy-engine', icon: ShieldCheckIcon }, + { label: 'Configuration', path: '/config', icon: GearIcon }, + { label: 'Audit Logs', path: '/audit', icon: ClockCounterClockwiseIcon }, ]; interface AppSidebarProps { @@ -60,13 +60,13 @@ export default function AppSidebar({ isOpen, onClose }: AppSidebarProps) { )} @@ -113,11 +113,11 @@ export default function AppSidebar({ isOpen, onClose }: AppSidebarProps) {